[设计思维] [用户体验]
封面用研整编文章(附视频)
目前全球的主流界面设计语言为苹果、谷歌、微软三家 ，它们在大的发展方向都是一致的，而在细节上却分道扬镳。本文我们梳理了这三个设计语言近几年发展中重要的变革点，随后一篇我们将针对占领移动端的两大语言进行实测分析。
注：本文的设计语言非编程(Programming Language)，指的是Design Language可以理解为一种风格指导规范。
Material Design 将物理世界的体验带进屏幕
从Android 4.0开始，谷歌确定了明晰的设计规范－Holo设计范式，效果有点像电影创战纪，光感极强。在2014年的开发者大会上，谷歌表示不欣赏设计，对设计毫无感觉的Google已是昨日，随着Android 5.0的发布Material Design被高调推出，重新统一了Google的设计语言，确立了未来Google的设计方向。
Material Design是一门跨平台和终端的设计语言，它是思考事物本质的设计，将电子屏幕里的UI元素看成是一种不存在于现实世界的新的材质，并赋予它物理特性。这一点映射到设计语言效果层面，就是Google将一系列人与真实世界的交互反馈效果应用到人机交互规范上来，也就是说，Material Design虽然没有拟物，但它在尽可能的还原人与现实世界交互时的反馈。
Material Design提出z轴的概念，深度不仅仅是装饰。利用z轴的深度，更好的打造空间的感觉，并且使界面元素层级鲜明，便于理解、使用整个软件。
1. 纸的形态模拟
Material design中，最重要的信息载体就是纸片。纸片层叠、合并、分离，拥有现实中的厚度、惯性和反馈，同时拥有液体的一些特性，能够自由伸展变形。电子屏幕是完全平面化的，不像现实当中的物体是3D的 。一本书里每一页纸之间的空间关系是很清楚的，但电子屏幕的所有物体都在一个平面上，虽然电子屏幕没有空间感，但信息内容是有空间层级的关系。
Material Design的解决方式就是把现实世界中纸张的特性挪到电子屏幕里，把信息内容呈现在这个虚拟的纸上，纸跟纸之间有上下层级关系，用投影模拟纸张的空间感。Material Design的投影并不是过去我们常用的使用图片或者样式代码实现的投影，而是系统根据纸张层级所在位置实时渲染的，投影会随着纸张的空间关系而改变大小。
2. 真实的动作
Material design重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。物理世界中的运动和变化都是有加速和减速过程的，忽然开始、忽然停止的匀速动画显得机械而不真实。比较典型的案例有：按钮的按下效果会有“触控涟漪”、点击汉堡菜单图标会优雅的变成返回图标、优雅的转场效果等。
2.1 有意义的转场动画
过去我们的页面只有X与Y轴，打开一个新的页面则是生硬地直接跳转到新的页面，并没有点出页面的空间层级关系。而Material强调Z轴，即页面之间的空间层级关系。通过转场动画告诉我们，这个页面从哪里来，到哪里去，在整个APP或者系统里的空间位置是什么。另外，不仅仅是页面层级的动画过渡，对象操作也伴随着动画过渡，从动画里能感受到操作的过程变化。例如删除时，垃圾桶图标会有一个倾倒的动画，或者通过指示条的旋转告诉你删除的过程。另一方面，过渡动画赋予了界面控件一种物理特性，在空间被拉伸、回弹时模仿了橡皮筋的物理特性。
谨慎编排的动画可以在有多步操作的过程中有效地引导用户的注意力；在版面变化或元素重组时避免造成困惑；提高用户体验的整体美感。动画设计不仅应当优美，更应当服务于功能。
2.2 打动用户的细节动画
Icon主要分为入口功能和操作功能，操作功能的icon在完成点击操作之后，通常会转为对应的另外一种形态。如“返回”与“菜单，”“选择”与“未选择”，“收藏”与“已收藏”“点赞”与“取消点赞”的状态之间切换。现在的设计里，icon在两种状态之间的切换通常显得生硬，icon动画将使得点击之后的反馈更佳强烈，并且让界面活起来，这种服务间的无缝切换不仅仅能让用户感知，更是让完美的细节和精湛的设计充满你的应用。用户真的会感受到这些小细节。
目前HTML5已经可以实现icon动画的绘制，原理是设计师提供svg格式的图标，有前端通过html+css+js绘制转场效果。svg格式的图标，可以通过代码控制图标的每一个节点，从而进行形状变形。
3. 板式鲜明、形象、深思熟虑
除了丰富的交互动画外，在基本元素的处理上，Material design借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫，不但可以愉悦用户，而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，让用户沉浸其中。
强调大胆的阴影和高光。引出意想不到且充满活力的颜色。过去的Android让人觉得冰冷科技感，让人有一种距离感。而新的设计采用了与过去相反的做法，在系统里大面积使用色块，用色块来突出主要内容和标题，让界面的主次感更佳突出，也让原本灰黑色为主的界面拥有了时尚和活力。
4. 组件轻盈，富有联想力
在Google的宣传片里，最引人注目的新玩意就是FAB浮动按钮了。这个按钮的功能并不局限于“新建”“播放”“收藏”“更多”等功能。它于整体界面的配色形成比较大的反差，因此会让这个按钮在界面里显得非常耀眼，从这样的设计来看，这个按钮所背负的任务将会是整个界面的主要操作。虽然有点类似与Path里的“+”按钮，但由于iOS系统本身并没有这样的设计，这会成为最区别于iOS的一种交互设计，形式上的醒目足以保证它于 Material 语言的标识性，类似于毛玻璃之于iOS。
Material Design的action bar直接用icon来表达按钮功能。尤其是Material的键盘设计风格，这次走得更极端，把键盘的按钮边框全部去掉，只保留了英文字母的按钮，好处是在屏幕不大的手机上，去掉边框的拥挤感会给字母更大的空间。另外，无边框按钮的设计也体现在提示框的按钮上。如何让无边框的按钮区别于内容文字，这需要设计师除了考虑配色外，还需要考虑按钮出现的场景，对设计师的在应用场景的解读上也是一个挑战。
卡片也是Material Design非常大的一个亮点。它解决了很多内容不一，杂乱显示的问题。通过一张张卡片将内容有序的整理在卡片内，达到简洁干净的视觉效果。
iOS7从质感走向扁平化，iOS10 大而简，简而精
iOS7是iOS面世以来在用户界面上做出改变最大的一个操作系统，总计有上百项改动，抛弃了以往的拟物化设计，让整个界面中充满了扁平化和色彩元素。
iOS7借鉴了微软以及谷歌的设计语言，令界面元素更有层级，使用了更简单的图标，更清爽的字体，以及整体的扁平化生态系统。iOS7中，苹果抛出了磨砂玻璃的概念，纤细的字体（Helvetica Neue Light）、现代感的外观，整体界面的感觉更加轻盈、更加顺畅。
1. 以内容为核心
充分利用整个屏幕。无需使用边框、底图等等多余的UI元素，让内容扩展到屏幕边缘。尽量减少视觉修饰和拟物化设计的使用。UI面板、渐变和阴影有时会让UI元素显得很厚重，致使抢了内容的风头。应该以内容为核心，让UI成为内容的支撑。尝试使用半透明底板。半透明的底板可以让用户看到后面的内容，在某些场景下起到了上下文提示的作用，另一个角度上来说，也让用户（比以前）看到了更多内容。
2. 保证清晰度
大量留白。空白让重要内容和功能显得更加醒目。此外，空白可以传达一种平静和安宁的视觉感受，它可以使一个app看起来更加聚焦和高效。让颜色简化UI。一个主题色——比如在记事本中使用的黄色——让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个app一个统一的视觉主题。通过使用系统字体确保易读性。iOS7的系统字体自动调整行间距和行的高度，使阅读时文本清晰易读，无论用户选择何种大小的字号都表现良好。使用无边框的按钮。按钮名称、箭头以及系统颜色向用户展示了交互元素，这些内容替代了原先的带有形状的按钮。联系人界面使用了系统色蓝色箭头文字展示了按钮的导航性。
3. 用深度来体现层次
iOS7经常在不同的层级上展现内容，用以表达分组和位置，并帮助用户了解在屏幕上的对象之间的关系。通过使用一个在主屏幕上方的半透明背景浮层来区分文件夹和其余部分的内容。用户在使用备忘录里的某个条目时，其他的条目呈现在屏幕底部的其他分层上，这样用户可以通过滑动展开所有分类条目。
iOS 10是「The biggest iOS release ever」全新的设计去掉了任何可能会给用户带来视觉干扰的东西，变的极度的纯粹。
1.「清晰」这一设计准则应当会是以后的设计趋势和重点
在iOS人机交互指南最重要的设计原则部分仍然是Deference（顺从）/Clarity（清晰）/Depth（深度），其中有了一个非常细微的变化，就是万年老二的Clarity（清晰）原则，这次成了老大。在Clarity（清晰）原则中，增加了一段解释：留白、色彩、字体、图形和界面元素要强调重要内容并且对交互进行指引。
2. 加大字号，加粗字体，加多留白，减少页面的视觉层级，加大控件
如上图(Apple Music改版)在锁屏播放界面中，播放和音量的控件都被明显放大了，并且控件之间的间距也被加大了，大大降低了被误触的概率，以及给重要控件赋予色彩。新的控制中心的按钮都有了不同的颜色，从而让他们具有更明显的区分度以及视觉注意度，同样的，按钮也被加大了不少，Night Shift、AirPlay和AirDrop更是被独立了出来。
在这股趋势下，未来的设计将更注重产品的内容和操作体验，降低其他因素对用户使用上的干扰，这对设计师来说，是不小的挑战，因为越简单的东西越难设计，特别是如何在界面设计中去把握「大」和「简」的程度以及如何通过更有限的手段和空间来传达更多的信息和指引用户来达到「精」的目标，这是我们在未来需要不断考虑、探索和解决的问题。
今年的 iOS 11 设计语言上没有做全新的突破，但用户体验方面还是下了不少功夫，视觉及交互体验都或大或小有了各种变化。
再见Metro / Modern UI ，Win10再颠覆
Metro UI是微软在Windows Phone 7中正式引入的一种界面设计语言。Modern UI，是微软开发的Win8操作系统中所带的一种全新风格的界面设计，它的前身即是Metro UI。
微软用Win8的Metro化设计语言一开扁平化设计先河。这种设计语言实则受到包豪斯运动的影响，也深受地铁交通标识中字体和图标的影响。这种瑞士风格般的界面减少了繁杂元素，将内容放在了第一位。网格线对齐、字体、留白、动态磁贴构成了整个界面。
Win8开始屏幕不仅仅是开始菜单的替代品，它占据了整个屏幕，取代了以前的桌面和开始菜单，成为一个强大的应用程序启动和切换工具，一个提供通知、可自定义、功能强大并且充满呼吸感的动态界面。
开始屏幕的一个个图块不再是简单的静态图标，而是实时动态更新的磁贴，开始屏幕使用单个进程从 Windows 通知服务获取通知，并保持图块的最新状态。因此很多时候不用点击打开应用，就可以直接从实时图块上获取如天气情况、股票报价、头条新闻、好友微博、更新等信息。对于用户来说，便用的原则是将最常用的应用程序放置到最便于访问的位置，因此目标越近、越大就容易寻找、点击。从上图可以看到在开始屏幕中，图块形式最容易使用鼠标到达，比“开始”菜单上的任何项目都更容易到达。
微软在Win8上做了非常大胆的变革，除了开创性的Metro设计语言，传统桌面和平板两种模式的融合也是一大特色，可这两种操作模式在使用体验上的不一致也成为Win8饱受用户诟病的原因之一，但微软自始至终都朝着平台大融合的目标坚定前行着。
经过一路探索，微软终于通过在Win10系统的公布，展示了一个更加清晰明了的战略方向：构建一个面向全部Windows设备的核心操作系统。
1. 响应式设计成为通用应用核心结构
除了要应对通用应用在桌面模式下缩小放大的窗口变化，未来搭载Win10的设备尺寸也会多种多样，所以，灵活且高效的自适应布局理所当然是最符合通用应用跨平台、窗口化的特点的。
2. 横向滑动不再是典型的系统浏览形式
Metro UI的设计语言之一就是横向滑动浏览，但随着Surface系列设备的屏幕比例从前几代基于横向操作而设计的16:9变成了Surface Pro 3的3:2，如今我们可以看到Win10官方通用应用基本已经摒弃了整个信息流的横滑浏览，只是在个别分类下采用。对此变化，可以想到的原因之一是通用应用在桌面模式下为窗口模式，当窗口尺寸变得窄小时，自然不适合用横滑来浏览信息。
3. 探索新的导航解决方案
既然Win10已决定弱化横向浏览，那必然需要一种更好的导航形式来替代之前的大字号横滑导航，大部分的通用应用都开始尝试采用“汉堡菜单”来作为统一的导航形式。
4. 更多元化的设计风格
Metro UI这种去掉所有装饰只呈现信息的设计理念其实一定程度上等于剥离了带给用户情感化体验的元素，从而使用户越发审美疲劳，每一个应用看起来几乎都是大号字体+方块磁片的组合。还好在新的通用应用设计中，我们可以看到除了开始菜单以外，曾经那些单一的Metro元素已经越来越少，而线型图标、居中布局、圆形、分割线等等元素的加入使界面变得更加丰富起来，可以说Metro UI的设计语言已被逐渐弱化，微软开始鼓励并给予开发者更大的设计自由，未来Wind10将逐渐和IOS及Android平台的扁平化风格趋于统一。
这一次，微软再次彻底的颠覆了自己，也许我们开始从Win10身上看到其他平台的影子，也许曾经独树一帜的Metro UI即将与我们告别，但是从目前的体验来看，我们认为Win10毫无疑问是变得更优秀了，只不过跨平台统一这条路是否好走，未来还有待验证。
通过《微软未来愿景》这个视频，我们可以看到扁平化设计仅仅是自然用户界面的开端，结合触摸、语音、传感器的控制，多媒体+多种控制方式+云概念，打造更友好的体验。
