注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

分享,态度 ·~~

—— 十年太长,五年;如果可以回到五年前,你最想对那时候的自己说什么?

 
 
 

日志

 
 

Windows8:用内建控件快速构建Metro风格Ap  

2011-11-08 22:42:07|  分类: Windows 8 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

主要内容:

1、  介绍在Windows8中有哪些控件上的更新;

2、  通览内建控件(build-in control)和他们的关键特征;

3、  开始使用控件:

HTML5 + JS

XAML + C#/C++

最后用一个例子说明如何用内建的控件构建Metro style app

 

Windows8Control有哪些更新

1、  全新的/改进的内建控件设定;

2、  为触摸、鼠标、键盘做设计;

如下,当用鼠标悬浮在某一栏上,选中的项目会显示高亮;当鼠标离开则回复正常:   

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

 

而当触摸在某一栏上,该项目会做缩小的反馈,手指离开时也回复正常:

 Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

相似的也可以用键盘来框选项目。

鼠标、触摸、键盘产生的具体表现不一样,但是给User统一的反馈体验。

3、  贴合你Ap的外观,但保留系统普遍的风格;

4、  原生态支持HTMLXAML

For XAML

    For all controls --> XAML control model

For HTML and JS

For many control concepts --> HTML5 standard controls and CSS

For new control concepts --> Windows Library for JavaScript

 

关于WinJSWindows Library for JavaScript

WinJS是用JavaScript来构建Metro style app的一个库。

它的优点:

1、  让你的Ap/用起来很棒:

匹配Windows Metro设计风格;

符合用户通常操作经验的控件;

Scales across form factors。(不明白)

2、  用它可以快速而高效地构建你的Ap

现代模式,设计快速反应和可靠的App

相辅相成的设计工具。

 

开关选择器(Toggle Switch)的一个例子

基于XAML的代码:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

 

基于HTML的代码:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

  

额外的好处(Additional benefits

易获取的;(Accessibility

全球通用;(World readiness

清晰的视觉表现;(Crisp visuals)

优秀的性能;(Performance

Metro风格。(Metro style

 

所以,实现最通用的UI样式,专注于创造最优秀的Ap。(别浪费太多心思在UI上,用MS提供的控件就好啦。)

 

内建控件和它们的特性(The built-in controls and their key features

Build-in Control主要分为:

1、  常用控件;(Everyday widgets

2、  文本编辑类;(Text editing

3、  可滚动类;(Scrolling content

4、  数据展示类;(Presenting data

5、  命令介面类。(Commanding surfaces

 

常用控件

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

  

当然也可以以此为基础制作自定义控件:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

  

这些控件的例子在这里:

http://code.msdn.microsoft.com/windowsapps/Form-controls-sample-2cbdbaa7

(每一个控件的属性和典型用法、自定义,XAML/HTML5,待补充)

 

总结:

1、  使用常用控件来实现优秀的用户体验;

2、  充分利用多点触摸的优势;

3、  高度灵活的风格和自定义样式:

充分了解自己的需求和你ApUI风格;

保留普遍的用户体验和功能。

 

文本编辑控件 

常用的几种类型:

单行输入框;

密码输入框;

多行输入框;

富文本框

……

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

 

编辑框中的行为:

鼠标/键盘选中;

触摸选择文本;

剪切、复制、粘帖;

拼写检查/自动纠错;

自动补全建议;

……

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

  

文本框的软键盘输入,根据文本框的类型切换不同的输入模式(文字/数字,等等):

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

  

这些控件的例子在这里:

http://code.msdn.microsoft.com/windowsapps/Form-controls-sample-2cbdbaa7

(每一个控件的属性和典型用法、自定义,XAML/HTML5,待补充)

 

总结:

1、  强大的文字编辑体验;

2、  为触摸、鼠标、键盘输入做了优化;

3、  自动检查拼写错误;

4、  集成触摸软键盘。

 

可滚动控件

三种不同情况下的状态:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

  

尽量使用内建的ScrollView控件,它提供了:

移动位置指示;(Panning

可放大缩小;(Zooming

便捷的滑动;(Rails

滚动惯性;(Inertia

触边界反馈;(Boundary feedback

等段定位;(Snap points

嵌套;(Nesting

连锁。(Chaining

 

ScrollView的属性和典型用法,以上特性的DemoXAML/HTML5,待补充)

 

总结:

1、  使用内建ScrollView控件获取合适的用户体验;

Use the built-in scroll views to get the right user experience

2、  要求在触摸、鼠标、键盘操作均有效;

Works for touch, mouse, and keyboard

3、  实现手指粘连效果。

Achieve sticks-to-the-finger performance

4、  XAML下,使用ScrollView控件;

For XAML, use ScrollView control

5、  HTML下,用CSS来获取“ScrollView”的效果。

For HTML, use CSS overflow to get ScrollView”)

 

数据展示控件

展示来自某数据源的内容,通常有三种表现形式:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

 

Group中的多选:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

 

内容的拖拽:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

 

智能缩放:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

  

基于XAMLListView数据模板:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

 

基于HTML的数据模板:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

  

ScrollView的属性和典型用法,以上特性的DemoXAML/HTML5,待补充)

 

总结:

1、  Presenting data control是让你的Ap展现Metro设计风格的有效方法;

Visible way to make your app shine with the Metro design style

2、  统一的交互模型和内建的行为;

Consistent interaction model and behaviors built in

3、  使用列表/栅格视图来表现数据集合;

Use list/grid views for collections of data

4、  HTMLXAML来构建自定义的富模板;

Define your own rich templates natively in both HTML and XAML

5、  链接到你的数据源:本地端或者云端;

Connect to your own data: local or cloud

6、  使用语义缩放来实现更好的用户体验。

Use semantic zoom to scale experience to more data

 

命令介面类控件

典型的命令界面类控件有:

Windows8:用内建控件快速构建Metro风格Ap - 乂乂 - 一个人,一支烟  ·~~

  

(每一个控件的属性和典型用法、自定义,XAML/HTML5,待补充)

SDK Sample中有Tooltip的用法和例子,可以参考)

 

总结:

1、  使用AppBarFlyout来显示常用的命令操作;

Use app bar and Flyout to show more commands on demand’)

2、  使用Tooltip来显示信息;

Use Tooltip to show more information

3、  统一的、轻量的请求和撤销模式;

Consistent, lightweight invocation and dismiss model

4、  为触摸、鼠标、键盘做优化;

Optimized for touch, mouse, and keyboard

5、  根据系统环境来正确放置这些控件所在的位置;

Positioned correctly based on system context

6、  利用HTML或者XAML来灵活地定义这些控件和内容。

Flexibility to define the content in a way that is native to HTML or XAML

 

Code Sample

除了上面文中提到的SDK Sample外,还有几个链接供参考:

HTML

Adding controls and content

Adding app bars and commands

Adding flyouts

XAML

Adding controls and content

Adding app bars and commands

 

 

以上大部分内容来自于Paul Gusmorino在微软开发者大会上的主题演讲:

Create Metro style apps quickly with built-in controls

视频路径:http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-211T

 

更多相关主题演讲:

APP-185T Make great Metro style apps that are touch-optimized using HTML5

APP-209T Build polished collection and list apps in HTML5

APP-210T Build data-driven collection and list apps using ListView in HTML5

APP-212T Stand out with styling in your HTML app

APP-503T Make great touch apps using XAML

APP-517T Build polished collection and list apps using XAML

APP-912T Build data-driven collection and list apps using XAML

APP-737T Metro style apps using XAML: what you need to know

  评论这张
 
阅读(3016)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017