Windows 10应用设计加速器--设计语言的变迁

Nokiss Published the article • 0 comments • 86 views • 2016-06-04 18:23 • 来自相关话题

从Windows 8到Windows 10,微软经历了重大的商业变革,与此同时也带来了设计上翻天覆地的变化。接下来的4期内容,将深入浅出的为大家讲解微软设计语言的变迁历程;对于那些正在规划,或者已经着手进行Windows 10应用设计的朋友,也将通过这几期内容对于通用应用有更深入、更直观的了解。

从Windows Phone7开始,微软就提出了非常先进的移动端设计理念,但一方面由于理念过于激进难以落地,一方面受限于硬件设备的更新与普及程度,另一方面也受限于微软在移动领域里有限的市场规模,导致这套设计理念很难被绝大多数用户接受。

长久以来,微软一直处于 PC 领域的霸主地位,众多系统版本中,市场份额占据最多的是 Windows 7。在全新的 Windows 10 平台中,微软融合了 Windows 7 以及 Windows 8 的优势,进行设计优化、重新包装,交还到用户手中。不管是习惯用传统桌面端操作的XP、Windows 7 老用户,还是已经习惯 Windows 8 的新用户,都可以通过开始菜单,使用自己熟悉的操作方式,快速上手。
 
设计原则的发展 

微软是首家提出移动端应用扁平化设计理念的公司。这套设计风格最初被称为Metro Design Language(现已更名,视觉风格上也有所改变),最早来源于瑞士平面设计,不光是平面设计,建筑、时装、书籍排版设计等等各处都能看到这种基于排版设计语言的影子。

在现代化的地铁、机场中的视觉引导系统通常会采用硕大的字体和醒目整齐的色块来吸引人们的注意。这些公共场合的指示牌为微软设计团队提供了灵感,进而把这种全球通用的视觉语言迁移到移动端的应用设计中,为用户提供快速、简洁、直接、明确的设计。也就是我们后来看到的 Windows 8 Metro UI。

2006年著名的 Zune 播放器开始使用类似 MetroUI 的设计风格。微软的设计师计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用。其清爽排版和设计给用户耳目一新的冲击。Metro UI在之后的时间里运用在 Windows、Windows Phone、Office 和 Xbox 甚至微软的硬件产品中。





 
现如今,MetroDesign的设计原则已经延伸遍布到整个Windows 10平台,并且在原来的理论基础上以更开放的心态进行了优化。于是我们看到了正式更名后的Microsoft Design Language:

Keep it simple 保持简单
 
确保一致的简单性,直观的设计不言自明。确保为用户提供的内容简洁高效,易于阅读和理解。

Make it personal 彰显个性

创建与用户的情感连接。针对用户的生活、思考和行动方式进行设计,让用户感觉这是为他量身定做的体验。

Think universal 考虑通用

秉承以人为本的态度,充分考虑用户不同情境下的需求,产出具有包容性的产品与技术。

Create delight 创造愉悦

创造让用户尖叫的体验,关注场景化的感知。
 
图  标 
 
当我们打开 Windows10 资源管理器,会发现界面上的图标、按钮,都进行了重新设计,在扁平化的基础上采用极简风格。

下图是 Windows 8 时代的指令按钮,这简直是 Windows 8 时代平台视觉样式的典型代表。这种样式的优势在于能够凸显微软平台设计的独特,但与此同也因为设计风格与其他平台格格不入而带来设计门槛过高,难以进行设计迁移的问题。






而在 Windows 10平台,这样的指令按钮样式已经成为历史,我们会发现系统层级的控件已经全部采用极简的视觉风格,大大减少了 Windows 平台与 iOS, Android 以及 Web 之间的差异,从这一点也可以看到转型中的微软逐渐开放的态度。






Windows 10 系统图标设计规范供大家参考:





在应用交互层面,Windows8时代的应用导航样式比较单一。熟悉Windows移动端产品的朋友一定都记得,不论是手机还是平板,Windows 8都是以独特的“动态导航”和相对单一的“横向滑动”浏览模式著称。这种高度统一的交互模式,在一定程度上限制了设计师的创造力,对于不同产品的品牌塑造也带来一些束缚。

在Windows 10平台,我们看到了更丰富的布局和控件样式,在原Windows 8的基础上进行了很大程度的优化。新的应用布局及结构会在后面几期内容中陆续跟大家见面。





 
Scaling, Responsive, Adaptive 

图中所展示了 Windows 设备家族。从无屏幕或屏幕在3寸左右大小的可穿戴设备、手机、手机平板、平板、PC、电视、XBOX、Surface Hub,甚至是全息眼镜 HoloLens,同一个 Windows 10应用即将运行在任意 Windows 家族设备上,也就是我们所说的 Universal Windows Platform,通用应用平台。

微软本身拥有很强大的 OEM 厂商群体,在丰富了设备类型的同时,也带来分辨率、屏幕比例花样百出的现状。从跨度超大的应用画布尺寸到多维的自然人机交互方式,对于设计师来说,Windows 10 将是一个机遇与挑战并存的平台。我们要考虑设备的多样性,如何尽可能复用设计图去兼顾不同的设备,并且做好适配工作;如何响应传统桌面端与平板模式的切换;当应用视窗尺寸发生变化的时候,如何调整界面布局,等等。





 
在解答这些问题之前,首先来解读“等比缩放(Scaling)”、“响应式设计(Responsive Design)”、“自适应设计(Adaptive Design)”这三个概念在Windows 10应用设计中的意义,以便通过它们来指导我们进行跨设备多场景的应用设计。
 
等比缩放:WindowsPhone 上传统的适配手段。在应用跨越的设备物理尺寸范围比较小的时候,比如只是基于4寸到5寸的手机,可以通过直接等比放大或者缩小界面元素来完成适配。但当一款应用要跨越手机直到PC这类大显示器的时候,简单的内容缩放显然会降低信息的可读性,并不能适应用户在大设备上的阅读习惯。因此,在 Windows 10 平台,我们会更多的听到响应式、适应式设计的概念。

响应式:简单的说,它来源于能够自动识别屏幕宽度、并做出相应调整的网页设计。会随着显示尺寸的变化,时时调整内容区域的展现效果,强调的重点在于视觉体验。在 Windwos10 平台上,通用应用以大家熟悉的视窗形式进行展现,伴随用户手指拖拽所触发的视窗尺寸变化,界面布局发生视觉层面的变化,以确保在任何情况下,内容都可以正常展示。

这种基于视窗的展现形式是大家在传统 Win32 应用或者网页浏览中早就习以为常的。同网页设计一样,我们建议设计师采用百分比进行页面内容的划分而非绝对像素值,从而最大程度确保不同视窗下的内容展现都完美。前端设计师或者开发者可以很方便的使用 Windows 10 控件 Relative Panel 配合 Visual State Manager(视觉状态管理器)实现响应式设计布局。可以把 RelativePanel 比喻成一个大容器,用来承载各种UI元素,通过 VisualState Manager 控制这个容器内的元素布局发生变化。





 
注意以下几个概念:
 
VisualState 指的是界面的某种状态,里面包含两个属性,即 Triggers 和 Setters。Triggers 是 Visual State 的触发条件,可以设置当某个触发条件成立的时候,将 Setters 相应的属性值应用到控件的相应属性上。系统自带的 Triggers 包括界面显示宽度、设备类型。同时也支持开发者对 Triggers 进行自定义,当满足了相应的触发机制,系统会自动调起相应的 UI。Setters 包含了控件的属性以及相应设置值,当 Triggers 条件成立,相应的 Setters 属性值生效,应用到相应控件的相应的属性上。

基于这个方式,我们可以轻松实现不同视窗宽度下,UI 元素之间的布局变化。例如下图中的大麦 APP,仅通过一套前端 XAML 控件实现了从小屏幕的手机到大屏幕 PC 的适配。





 
3个 Tips 给大家参考:
 
缩放:内容配合所在容器或者显示宽度的大小变化,而被积压或拉伸进行自动调整。





 
流动:所在容器或者显示宽度大小发生变化,但内容本身不发生大小变化,而是往容器的下方延展显示。 





 
位移:相对位置的改变。 
 




 
自适应:在设备越来越丰富的今天,另外一个重要概念就是“自适应”。它是基于设备适配、跨平台设计而产生的理念。因此,自适应设计强调的不只是单纯的视觉布局变化,更多的是需要应用具备适应不同硬件设备的能力。基于不同设备,用户会有差异化的功能需求,不同硬件本身的能力也存在差异。

例如我们现在看到的稀奇艺术,这是 Windows 10 平台一款基于 AR 技术的、跨手机和平板设备的艺术类 APP。首页的雕像展示,平板设备上采用了带有纵深的3D效果;考虑到手机硬件性能有限,于是在雕像展示上则采用了横向滑动的卡片效果。
 





平板展示效果




手机展示效果
 
3个Tips给大家参考:
变革:基于不同设备,不同的用户使用场景,在功能上有所颠覆。





重构:由于手机端显示空间有限,平板端一屏内展现的内容,在手机端被拆分成上下级关系,带来应用信息框架的改变。





替代:用户在不同设备上差异化的使用习惯,有可能带来差异化的应用结构和控件使用。
 





在下期内容中,会为大家讲解从 Windows8 到 Windows 10,微软移动端应用的结构变化,以及全新 Windows10 控件使用技巧。会有更多设计资源带给大家哦~

如果您也对 Windows10 平台产品设计感兴趣,或者正纠结于设计或开发的难题,欢迎发邮件到 waa@Microsoft.com联系WAA团队,我们期待您的反馈。
 
 
转载自 软中国MSDN公众号,无删减。 查看全部
从Windows 8到Windows 10,微软经历了重大的商业变革,与此同时也带来了设计上翻天覆地的变化。接下来的4期内容,将深入浅出的为大家讲解微软设计语言的变迁历程;对于那些正在规划,或者已经着手进行Windows 10应用设计的朋友,也将通过这几期内容对于通用应用有更深入、更直观的了解。

从Windows Phone7开始,微软就提出了非常先进的移动端设计理念,但一方面由于理念过于激进难以落地,一方面受限于硬件设备的更新与普及程度,另一方面也受限于微软在移动领域里有限的市场规模,导致这套设计理念很难被绝大多数用户接受。

长久以来,微软一直处于 PC 领域的霸主地位,众多系统版本中,市场份额占据最多的是 Windows 7。在全新的 Windows 10 平台中,微软融合了 Windows 7 以及 Windows 8 的优势,进行设计优化、重新包装,交还到用户手中。不管是习惯用传统桌面端操作的XP、Windows 7 老用户,还是已经习惯 Windows 8 的新用户,都可以通过开始菜单,使用自己熟悉的操作方式,快速上手。
 
  • 设计原则的发展 


微软是首家提出移动端应用扁平化设计理念的公司。这套设计风格最初被称为Metro Design Language(现已更名,视觉风格上也有所改变),最早来源于瑞士平面设计,不光是平面设计,建筑、时装、书籍排版设计等等各处都能看到这种基于排版设计语言的影子。

在现代化的地铁、机场中的视觉引导系统通常会采用硕大的字体和醒目整齐的色块来吸引人们的注意。这些公共场合的指示牌为微软设计团队提供了灵感,进而把这种全球通用的视觉语言迁移到移动端的应用设计中,为用户提供快速、简洁、直接、明确的设计。也就是我们后来看到的 Windows 8 Metro UI。

2006年著名的 Zune 播放器开始使用类似 MetroUI 的设计风格。微软的设计师计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用。其清爽排版和设计给用户耳目一新的冲击。Metro UI在之后的时间里运用在 Windows、Windows Phone、Office 和 Xbox 甚至微软的硬件产品中。

640.jpg

 
现如今,MetroDesign的设计原则已经延伸遍布到整个Windows 10平台,并且在原来的理论基础上以更开放的心态进行了优化。于是我们看到了正式更名后的Microsoft Design Language:

Keep it simple 保持简单
 
确保一致的简单性,直观的设计不言自明。确保为用户提供的内容简洁高效,易于阅读和理解。

Make it personal 彰显个性

创建与用户的情感连接。针对用户的生活、思考和行动方式进行设计,让用户感觉这是为他量身定做的体验。

Think universal 考虑通用

秉承以人为本的态度,充分考虑用户不同情境下的需求,产出具有包容性的产品与技术。

Create delight 创造愉悦

创造让用户尖叫的体验,关注场景化的感知。
 
  • 图  标 

 
当我们打开 Windows10 资源管理器,会发现界面上的图标、按钮,都进行了重新设计,在扁平化的基础上采用极简风格。

下图是 Windows 8 时代的指令按钮,这简直是 Windows 8 时代平台视觉样式的典型代表。这种样式的优势在于能够凸显微软平台设计的独特,但与此同也因为设计风格与其他平台格格不入而带来设计门槛过高,难以进行设计迁移的问题。

640.png


而在 Windows 10平台,这样的指令按钮样式已经成为历史,我们会发现系统层级的控件已经全部采用极简的视觉风格,大大减少了 Windows 平台与 iOS, Android 以及 Web 之间的差异,从这一点也可以看到转型中的微软逐渐开放的态度。

64110.png


Windows 10 系统图标设计规范供大家参考:

6402.png

在应用交互层面,Windows8时代的应用导航样式比较单一。熟悉Windows移动端产品的朋友一定都记得,不论是手机还是平板,Windows 8都是以独特的“动态导航”和相对单一的“横向滑动”浏览模式著称。这种高度统一的交互模式,在一定程度上限制了设计师的创造力,对于不同产品的品牌塑造也带来一些束缚。

在Windows 10平台,我们看到了更丰富的布局和控件样式,在原Windows 8的基础上进行了很大程度的优化。新的应用布局及结构会在后面几期内容中陆续跟大家见面。

641110.jpg

 
  • Scaling, Responsive, Adaptive 


图中所展示了 Windows 设备家族。从无屏幕或屏幕在3寸左右大小的可穿戴设备、手机、手机平板、平板、PC、电视、XBOX、Surface Hub,甚至是全息眼镜 HoloLens,同一个 Windows 10应用即将运行在任意 Windows 家族设备上,也就是我们所说的 Universal Windows Platform,通用应用平台。

微软本身拥有很强大的 OEM 厂商群体,在丰富了设备类型的同时,也带来分辨率、屏幕比例花样百出的现状。从跨度超大的应用画布尺寸到多维的自然人机交互方式,对于设计师来说,Windows 10 将是一个机遇与挑战并存的平台。我们要考虑设备的多样性,如何尽可能复用设计图去兼顾不同的设备,并且做好适配工作;如何响应传统桌面端与平板模式的切换;当应用视窗尺寸发生变化的时候,如何调整界面布局,等等。

611140.jpg

 
在解答这些问题之前,首先来解读“等比缩放(Scaling)”、“响应式设计(Responsive Design)”、“自适应设计(Adaptive Design)”这三个概念在Windows 10应用设计中的意义,以便通过它们来指导我们进行跨设备多场景的应用设计。
 
等比缩放:WindowsPhone 上传统的适配手段。在应用跨越的设备物理尺寸范围比较小的时候,比如只是基于4寸到5寸的手机,可以通过直接等比放大或者缩小界面元素来完成适配。但当一款应用要跨越手机直到PC这类大显示器的时候,简单的内容缩放显然会降低信息的可读性,并不能适应用户在大设备上的阅读习惯。因此,在 Windows 10 平台,我们会更多的听到响应式、适应式设计的概念。

响应式:简单的说,它来源于能够自动识别屏幕宽度、并做出相应调整的网页设计。会随着显示尺寸的变化,时时调整内容区域的展现效果,强调的重点在于视觉体验。在 Windwos10 平台上,通用应用以大家熟悉的视窗形式进行展现,伴随用户手指拖拽所触发的视窗尺寸变化,界面布局发生视觉层面的变化,以确保在任何情况下,内容都可以正常展示。

这种基于视窗的展现形式是大家在传统 Win32 应用或者网页浏览中早就习以为常的。同网页设计一样,我们建议设计师采用百分比进行页面内容的划分而非绝对像素值,从而最大程度确保不同视窗下的内容展现都完美。前端设计师或者开发者可以很方便的使用 Windows 10 控件 Relative Panel 配合 Visual State Manager(视觉状态管理器)实现响应式设计布局。可以把 RelativePanel 比喻成一个大容器,用来承载各种UI元素,通过 VisualState Manager 控制这个容器内的元素布局发生变化。

642310.jpg

 
注意以下几个概念:
 
  • VisualState 指的是界面的某种状态,里面包含两个属性,即 Triggers 和 Setters。
  • Triggers 是 Visual State 的触发条件,可以设置当某个触发条件成立的时候,将 Setters 相应的属性值应用到控件的相应属性上。系统自带的 Triggers 包括界面显示宽度、设备类型。同时也支持开发者对 Triggers 进行自定义,当满足了相应的触发机制,系统会自动调起相应的 UI。
  • Setters 包含了控件的属性以及相应设置值,当 Triggers 条件成立,相应的 Setters 属性值生效,应用到相应控件的相应的属性上。


基于这个方式,我们可以轻松实现不同视窗宽度下,UI 元素之间的布局变化。例如下图中的大麦 APP,仅通过一套前端 XAML 控件实现了从小屏幕的手机到大屏幕 PC 的适配。

612140.jpg

 
3个 Tips 给大家参考:
 
  • 缩放:内容配合所在容器或者显示宽度的大小变化,而被积压或拉伸进行自动调整。


640.png

 
  • 流动:所在容器或者显示宽度大小发生变化,但内容本身不发生大小变化,而是往容器的下方延展显示。 


641111110.png

 
  • 位移:相对位置的改变。 

 
611240.png

 
自适应:在设备越来越丰富的今天,另外一个重要概念就是“自适应”。它是基于设备适配、跨平台设计而产生的理念。因此,自适应设计强调的不只是单纯的视觉布局变化,更多的是需要应用具备适应不同硬件设备的能力。基于不同设备,用户会有差异化的功能需求,不同硬件本身的能力也存在差异。

例如我们现在看到的稀奇艺术,这是 Windows 10 平台一款基于 AR 技术的、跨手机和平板设备的艺术类 APP。首页的雕像展示,平板设备上采用了带有纵深的3D效果;考虑到手机硬件性能有限,于是在雕像展示上则采用了横向滑动的卡片效果。
 

平板.jpg

平板展示效果
手机.jpg

手机展示效果
 
3个Tips给大家参考:
  • 变革:基于不同设备,不同的用户使用场景,在功能上有所颠覆。


64qaa0.jpg

  • 重构:由于手机端显示空间有限,平板端一屏内展现的内容,在手机端被拆分成上下级关系,带来应用信息框架的改变。


640.jpg

  • 替代:用户在不同设备上差异化的使用习惯,有可能带来差异化的应用结构和控件使用。

 
633w40.jpg


在下期内容中,会为大家讲解从 Windows8 到 Windows 10,微软移动端应用的结构变化,以及全新 Windows10 控件使用技巧。会有更多设计资源带给大家哦~

如果您也对 Windows10 平台产品设计感兴趣,或者正纠结于设计或开发的难题,欢迎发邮件到 waa@Microsoft.com联系WAA团队,我们期待您的反馈。
 
 
转载自 软中国MSDN公众号,无删减。