在本文中，我们将分享ISUX设计趋势报告的最后一部分“用户体验趋势”。用户体验是产品、人与环境共同作用下，用户使用产品的感受。随着科技不断进步，新的产品和服务层出不穷，消费者的行为和心理也在不断变化。我们从技术、硬件、环境和人四个维度，来分析和总结用户体验趋势，在这个多变的行业中，大家进行新的设计和改进设计时，加以对趋势的了解，为即将到来的未来做准备。

为了更好的了解趋势出现的原因，我们从影响趋势的客观条件中归纳了一些信号：

2019年是5G元年

思科最新研究表明，2022年，全球近12%的移动数据流量来自5G连接。5G超高速率让内容推荐更加个性化和精准化，万物互联会带来更多的智能终端和更多细分场景，AR将会有更多应用场景。

2019年00后进入20岁

00后的特点更加多样化，千人千面时代到来。他们喜欢多社交和多互动，内容是激发他们互动的工具，会对自己感兴趣的领域投入更多时间和金钱。

人工智能技术加速落地和扩大应用

近年来，人工智能技术在移动互联网广泛应用，人工智能手机研究报告指出，消费者最常用的AI功能有语音助手、人脸解锁、智能识图、智能拍摄和美颜，围绕语音和视觉的核心应用场景技术将会持续升级。

智能手机的差异化

全面屏的出现，让Face ID逐渐取代了Touch ID；各大手机厂商也试图在产品形态上创新，推出了折叠屏手机。

01. 个性化体验

互联网的产品从大众化转向个性化，越来越多的产品通过定位细分找到了新的机会。设计从同质化的体验转向追求个性化和创新。设计师必须了解与自己完全不同的目标人群，进行用户细分研究，通过良好的用户体验留住用户，提升产品价值。

01-1. 个性化内容推荐

在大数据背景下，个体兴趣多样，随着机器学习和人工智能的技术的发展，产品越来越注重个性化推荐。

“更懂你”的信息流推送让用户不需要从一堆歌单中去寻找你喜欢听的歌曲，豆瓣的音乐地图和Google的For you让你的偏好一目了然。

01-2. 个性化应景设计

用户经常在不同地方使用手机，场景化生活特征被互联网设备所感知。设计师需要感知用户当前场景，理解当前场景的需求来进行精准的应景设计，提升用户的惊喜感和愉悦感。

Snapchat能识别聚会拍照的地点，在app里在线预定打车到那个位置。

麦当劳个性化推荐技术，让餐厅根据天气、时间和顾客的点餐记录来调整菜单。

在电影院选座位能感受到座位的真实观影角度，快到电影院时会推送电影票二维码。

02. 语音交互

AI语音技术的快速普及，帮助人们改变使用习惯和观念，用户越来越多的使用语音交互。据ComScore的报告称，预计在2020年，用户使用搜索功能时，50%会用语音搜索；72%拥有智能语音助手的用户表示这已成为他们生活的一部分。各大科技公司出了自己的智能音箱，AI智能设备改变了与界面的交互方式，从GUI到VUI，不依赖触摸屏的输入，出现无导航、无按钮、无菜单界面。就目前而言，国内的AI音箱还是比较初级的人工智能，经常被用户病垢为人工智障般的语音系统。

02-1. 语音更趋近自然

随着人工智能和机器学习的不断发展，Google的智能语音助手快速进化，从去年I/O发布的Continued Conversation（连续对话），用户不用每下一个指令都要说一声‘hi google’，到今年已经不需要说唤醒词，拿起手机就可以让它帮助你。

去年发布的Google Duplex，可以打电话给饭店或理发店等商家，帮你预约，到今年可以帮你租车、回复消息、找照片分享给好友、写邮件等一系列跨app的任务。

技术进步必然带来效率的提升，AI越来越能全面理解用户提出的高度个性化需求，语音交互可以像人与人互动一样自然且同时快速处理跨app的多任务，降低用户操作成本，缩短操作链路，成为用户的日常“助手”。

02-2. 语音交互的泛娱乐

对用户来说，语音的使用不仅仅是它的便利性，娱乐性也是重要因素之一。短视频在声音交互和语音识别上进行了补位。Snapchat推出声音滤镜，不仅能根据声音音量做出反应，还能识别语音指令，触发对应的动画。

Google的Live Caption的语音识别技术，可将视频语音内容转化成文本字幕显示在聊天界面，还可识别关键词，形成文本链接，用户可直接点击跳转。

声控游戏和声音社交不断兴起，语音让体验更加多元化。腾讯NEXT新作《疑案追声》，以声音表现故事，听声音进行推理破案，用声音来打造沉浸式体验。

03. 秒验身份认证

登录app身份认证从以前五花八门的“用户名 密码”的模式优化到获取手机动态验证码，这种身份校验的方式在使用体验上谈不上好用。验证码的收取、输入都需要用户花费一定的时间和精力。全面屏手机的出现使Face ID取代了Touch ID，当全屏设备越来越普及时，越来越多的app将加入面部识别认证，实现更实时更精准的一键登录。

04. 手机新形态带来新体验

各大手机厂商为了调动消费者的换机热情，从全面屏、升降摄像头、双面屏到最近的折叠屏，手机新形态的出现会带来不一样的操作体验。

折叠屏折叠时能让手机背面成为一个附加的交互空间，方便用户同时使用两块屏幕进行不同app操作，例如打游戏的同时，不用切换退出游戏，直接翻过屏幕处理社交消息。

折叠屏展开能使空间更大，在小屏中运行的app，会自动调整大小匹配大的布局，并展示更多的功能。还可以进行多窗口操作，避免多个应用之间来回切换。

全屏手机的出现，让手势操作取代物理按键。折叠屏的出现，双屏幕的操作会增加更多手势操作，需要在设备中模拟人的自然的、习惯的手势。

05. AR 融入到生活每个角落

AR技术会随着5G发挥更大价值，创造更多的新场景。人们借助AR，能让原本虚构的数字世界融入到现实的物理世界。2018年Gartner调查显示，2020年，约有46%的零售商计划将AR/VR技术融入到顾客的购物体验中。

Snapchat可以使用相机扫描物理对象，会展示Amazon的购买链接，还可以扫描歌曲或者数学题。

通过Nike App的“扫一扫”，对双脚进行全面扫描和评估，会有左右脚长宽显示，根据选择的运动鞋款，会推荐该鞋款最适合的鞋码。

AR让数字世界的物体更具象。当你搜索到想买的一副画，可通过AR把画放入现实场景中，用一种全新的方式看看该物体的大小、颜色和自己家搭不搭。

Google地图推出了AR实景导航。屏幕上面部分会展示实景内容，底部显示数字地图，屏幕中会有大大的3D引导箭头引导。AR的交互行为模拟真实世界中的用户行为，让用户能很快明白怎么使用。因此需要通过最简单的模拟真实环境的呈现方式，来传递核心信息，3D元素的设计能聚焦视觉引导用户操作，加上符合物理性的动效，对现实生活中的重力、惯性模拟，使3D元素看上去更真实自然。

Google首款支持多人AR交互的Just a Line，通过相机拍摄，点击屏幕进行绘画，画出你想表达的画面。

06. 产品表现向 3D 发展

除游戏外，有许多以3D为展示形态的产品进入了我们的视线，如使用3D Avatar为用户定制形象的“ZEPETO”、“IMVU”；使用3D的角色作为界面设计元素的“BOO!”，“ZENLY”在界面卡片使用陀螺仪效果让卡片拥有立体的效果变化。3D的手法已经在产品设计中的使用的更加频繁。

除了更新鲜的视觉感受外，3D的手法也可以更好地服务于“商品”的展示，让用户对产品有更直观的了解。我们可以看到更多真实环境或产品的展示使用三维的方法表现。

设计师也可利用三维空间的表现力，将产品页面打造成一个更加立体与真实的空间。在用户操作屏幕的过程中，带来更流畅与真实的体验感受。

07. 为内容设计

“知夜晚而不睡”的人群越来越多，他们拥有更多碎片化和大段闲暇时间来消费内容，app的设计需要更有沉浸感。

07-1. 舒适便捷的使用体验

屏幕尺寸越来越大影响着用户日常操作的方便性。界面的设计如何能提升大屏手机的操作效率和使用体验？三星的One UI让手机屏幕分成两个区域，上面的区域用于查看内容，下面的区域用于交互操作。

为了方便页面层级切换，增加了下滑退出的手势。

屏幕上的操作和内容根据用户操作发生变化，让用户更容易注意到已完成的操作，并提示下一步的操作。信息在用户需要的时候呈现，减少用户的认知负荷。

更灵活与有连续性的页面转换效果也可以帮助用户在页面跳转间更好的记住产品路线，同时带来更舒适的使用感受。页面之间的转换不再只有简单的四个方向的进入或拉起，而更是与内容形态相关的灵活的转换过程。用户通过手势对页面进行有方向的操作时，将得到连贯的操作体验。

07-2. 沉浸式的全屏表现

为了更好地服务于内容，我们看到许多的产品去掉了顶部的“色块”的设计。需要带给用户更沉浸的体验，所有“生硬”的分割形式也将不再流行。而在这其中，白色与黑色的全屏幕底色可以更加凸显产品内容本身的差异化，而不是页面表现的差异。

在4月底Facebook推出了新的更简单、更沉浸式的“FB5”设计风格，除开去掉厚重的顶部蓝色块的设计外，新加入的“黑暗模式”将先出现在视频观看的模块中，这将更好地服务于视频内容的观看。

“黑暗模式”将出现在更多APP在设计中。在满足用户在浏览内容时的“沉浸感”的同时，APP可以在夜间帮助用户开启“黑暗模式”，服务于用户在夜间暗环境下的使用，减轻屏幕过亮的视觉疲惫。

07-3. 用户深度参与内容

00后喜欢多互动强体验，内容 互动赋予了内容新的可能性。互动视频让用户增加代入感、获得个性化的游戏体验，也让内容更具有娱乐性和新鲜感。

电影、游戏、网剧都推出了互动作品，用户从第三视角转向第一视角进行主动参与选择，成为高度个人化的内容。互动视频不仅要保证故事内容的优质，还要保证互动体验，对内容的交互必须是有意义的、影响剧情发展的，这样的互动才有效、才能更加触动用户的情感。

07-4. 内容从吸睛到吸金

00后不看电视，主要用智能手机获取感兴趣的商品和服务。移动支付改变了用户的付费习惯，用户愿意为自己感兴趣的内容付费。

以内容为载体的电商给用户带来更加信息丰富化和娱乐化的体验方式，用户消费内容的同时可以随手进行购物。

08. 感性审美的提升

年轻的互联网用户们，在高速发展的科技与文化环境下成长。也自然地造就了这些用户对产品审美上更高的追求。近几年，拥有自我个性的“小而美”的设计也更容易打动用户。

08-1. 符号化的图标设计

从Office365的新图标设计中，我们可以看到更抽象与符号化的图标表现。降低图标上的具象（文字区域）占比，使用更多的抽象形状表达图标所具备的含义。图标向更简洁与几何的方向发展，同时使用丰富的色彩和质感变化满足图标的辨识度。

此外，图标的设计也更讲究适配效率。Office使用了svg格式的资源以适应于不同平台的应用扩展。

08-2. 贴近自然感的操作响应

随着表现手法的进步，如3D元素的使用；以及动画实现技术的进步，在响应动画表现上也将更加细腻。而模仿自然的运动规律也将更为流行，“弧线运动”“光感”“粒子表现”“三维空间”等等也将提升产品的设计表现。

对界面中的控件而言，控件的设计将越发贴近真实的物理规则。设计师们可以通过对控件在动画上的表现赋予它们更真实的触感。

有趣的响应动画也可以带给用户更愉快和亲切的感受，而在动画中体现更多的“人情味”便是带来愉悦体验的关键。我们可以感受到图标所传达出来的情绪与性格。

08-3. 风格化的插画表现

审美的提升带来最为直观的感受即是对图形本身追求的进步。所以在界面插画中，视觉艺术性的追求也更加重要。用户们早已厌倦了千篇一律的几何小人或是简单的线性图标，更具有个性的角色表现及绘画手法将更受年轻人的欢迎。

08-4. 彩蛋

越来越多的电影流行彩蛋，一个小小的彩蛋能带给用户惊喜感和仪式感。我们在满足用户需求和打造用户体验的同时，可以给用户设计一些触动人心的设计。

Google搜索在《复联4》热映时，加入了灭霸的彩蛋。点击无限手套，搜索结果就会随机“消失”一半。

Google地图在愚人节发起了贪吃蛇游戏，可以在不同的地图上，让蛇（地铁或巴士）吃掉目标不断变长。

Google 为 Chrome 的生日埋了个小彩蛋，在 Dino Game 中加入了派对元素：当小恐龙吃蛋糕后即可戴上生日帽。

总结

2019年我们可以看到科技对设计、体验产生的巨大影响。《创新者的窘境》一书中描述：“每个技术由慢到快到发展至瓶颈时，另一个颠覆式的技术会悄悄萌芽，并替代上一个技术”。因此有些设计趋势会由于技术驱动突然爆发，也有可能会因为技术的颠覆而消失。作为设计师，要学会识别设计趋势中的变与不变，来进行创新和设计改良。

科技和产品最终都是回归到以人为本，设计师要洞察人性底层的需求，除了关注屏幕内的设计，还需关注屏幕外的设计，改善人们使用产品或服务的设计就是未来的趋势。

相关文章：
1、《2019-2020 设计趋势：图形篇》
2、《2019 – 2020 设计趋势：IP形象篇》
3、《2019-2020 设计趋势：Avatar角色篇》
4、《2019-2020 设计趋势 · 用户体验篇》

文章来自公众号：腾讯ISUX
(https://isux.tencent.com/articles/isux-designreport-2019-part4）

那接下来我们就结合一些实际案例，来看提升产品体验感的5个动效指南吧。

1

反馈当前状态

虽然颜色和动画都能比较好地引起用户的注意，但为什么还要加入动效呢？

一方面，由于数十万年的自然习得，让我们对于检测周围的运动特别敏感，从而快速应对从任何一方接近的危险。

另一方面，动效其实对于视障人士来说更加友好。下面这幅图是正常人和视障人士看到的同一个画面，纯色彩突出的情况下视障人士是很难感知到错误提示的。

（左为正常视角，右为绿色盲视角）

在色彩突出失灵的情况下加入动效呢？当用户注意到这样的抖动动画时，他们立即就能理解动作。

（加入动效反馈后）

2

保持动作的关联性

在真实的物理世界中，一切动作都有它的“来源”和“去向”，这可以帮助我们很好的理解行为动作。动效也是一样的，正确的动画可以帮助用户理解方向，而不会感觉内容突然发生变化。

这里用京东和淘宝为例。同样都是加购物车的设计，两者之间有什么差异呢？

（左为京东，右为淘宝）

京东使用「投递动作」强调了加车的过程，搭配上+1的图标会让用户的感知更加明显。而且无需任何文字就告诉了用户——我已经成功把商品加入购物车了。

淘宝虽然使用了文字告诉用户，已经成功加入了购物车，但文字还有一个理解的过程。

3

注意展现方式

受限于移动设备的尺寸限制，动效是展现更多信息的一个好方法，利用图片/文字在有限范围内的滚动，从而在有限的空间范围内展示更多的信息。

不过在展现方式这里也容易出差错，从天猫的动效设计里，我们可以同时看到可取和不可取之处。

（左为天猫超市，右为天猫）

在天猫的首页功能板块区有一个「免费领水果」(天猫超市左侧)，它由3块内容共同组成了一条完整的信息，因此用户只需要阅读而不需要选择权。

而且这样比起纯文字的“免费领水果”，丰富的水果品类和更加突出的免费字样带来的刺激会更强烈。

而天猫超市的动效，首先是卡片运动不规律，每次进入后运动变化都不一样；其次每个卡片都是独立的分区信息，但用户却没有选择权，只能让卡片自动划走或点进去查看。如果错过了某个分区信息，就只能退出再重新进入。

4

增加情绪的传递

除了功能型的用处外，还能将情感化设计以动效形式表现出来，增强某种情绪的感觉，向用户传递我们所想要表达的情绪。

同样都是一键清除未读消息，为什么QQ的愉悦感会更强烈一些呢？我们来看一下京东金融、QQ两款清除未读消息的对比。

（左为QQ，右为京东金融）

有看出什么差异吗？是的，京东金融的消息清除更像是一个功能按钮，除了消失的红点没有任何反馈。

再看QQ，除了消失的“烟雾”效果之外，那种拖拽的感觉以及逐个消失的爽感，就像一个一个捏爆泡泡纸的感觉。同样都是一键清除未读消息，有融入情感动效的QQ反而会让人感到更加愉悦。

5

避免强烈的反差

最后还有一个小点，动效有时还会作为衔接两个画面的过渡态，如果两个页面之间反差过大，眼睛受到的刺激就会较大。就像在暗处待久了，突然强光来袭的不适应感。

（左为片刻，右为QQ）

所以动效还应该去避免强烈的反差造成的不适应感。日签君就比较喜欢片刻的夜间模式切换，它不是很突兀的模式切换，而是通过动效营造了一个日出日落的场景，去缓和这种刺激。反而QQ的夜间模式切换就显得反差太大了。

五个动效指南，你都记住了吗？就像前面提到的，动效不是为了炫技，每个动效都应该有它对应的目的，帮助用户更好地理解正在发生的事情或如何更有效地使用你的产品，这也正是动效能够提升产品体验感的原因。

作者：艾体验AIUX

公众号：艾体验AIUX

印刷中也会用到栅格，但就本文而言，我主要想讨论的是用于PC和移动设备上的栅格系统设计。

紫色块放内容

内容块包括文本，图片或者是两者的组合形式，背景颜色实际上不能算是内容元素，除非是作为文本或者图片的容器。

上图中的粉色块作为栅格中的列，它们构成了内容宽度。一般来说，列宽是不会变的，只是列数会随着设备的不同而变化，比如从PC端的12列变为平板电脑上的8列，然后在移动端变为4列。严格来说，你其实可以定义任何想要的列宽，但大多数情况下的网格列宽都设置在60-80px之间。选择合适的列宽是最重要的，因为它是内容宽度的主要决定因素。

水槽是在列与列之间的空间。20px是一个常见的尺寸设置，当设计块状或者卡片元素的网格时，这种间距非常重要，比如做照片类设计的时候。有些系统会随着设备宽度的增加而增加水槽的宽度，但也可以保持固定。

外边距也称为外水槽，是内容宽度之外的空白区域。为了更方便的设计，外边距会随着设备宽度的增加而增加。移动设备的边距通常为20-30px，而在平板电脑和PC端，这个间距通常会差异很大。

下面会介绍一些基本的准则，但要明白在实际设计中其实没有任何硬性的规定。

1. 内容元素必须位于若干列上

其核心思想是内容元素必须位于若干列上，你可以任意分割，比如6×2,3×4,4×3。下面的例子中，我展示了不同分割方式设计的信息卡片。

不同栅格设计展示

很棒，这看起来很简单对吧。有的时候，你想把内容严格的套用在栅格布局上，会发现可能不够美观，比如下面的例子。

如果我们把内容都放在网格上，文本内容会显得很长，最佳的位置是不严格在任何网格上，这也是可以的，只要理解了整个元素实际上是一个不可见的，更大的容器就行。

这也是4×3的布局，只是给了它内部不可见的填充。当把这样的设计稿给到开发时，他们就能很直观的知道这一点，所以这更利于去理解如何实际地分配好内容。

2. 不要将内容元素留在水槽中

内容元素应该要在列宽以内，而不能流出在水槽之外，这样会违背栅格化的目的。

3. 只要父级元素对齐栅格，子级可以不完全对齐列

有些时候，你想要将设计和卡片分成两部分，一半是图片，一半是文字。你可能遇到这样尴尬的情况，图片没有完全落在一列上，文字被迫以一种奇怪的方式自适应。其实不用担心，只要“父”容器对齐栅格，这就没有关系。

父子级内容栅格排版示意

4. 除非有意，否则不要把列作为外部填充

所有重要内容都应该与栅格列宽相适应。一开始会觉得奇怪，因为如果不习惯使用网格，可能会把网格宽度当成全部内容区域，所以还需要给它设定一定的内边距。此时外边距就起到了留白的作用，它们充当了内边距。不要在网格内部利用列宽当成内边距，而是要与网格最外面保持对齐，利用网格外的间距来当做留白区域。根据代码实现方式，要么网格内的内容按比例缩放，边距固定，要么外边距与内容同时缩放。

正确的内容填充方式和不正确的把栅格当做边距

所以如果有人说“我需要一个1200px宽的设计”，这并不意味着你的设计就是1200px宽，这其实是说设计内容宽度在1200px的画布内，实际内容占位是960px，这样就会有空间留出外边距。

5. 完全出血的元素或纹理图形应该设计在画板边缘，并理解为出血的列网格

这个页面布局的顶部图片被设计成完全出血

这是一个例外的规则，当背景颜色或者图片在完全出血的情况下，开发同学会把它理解为一个全屏的内容元素。

如果设计的是装饰元素之类的内容，可以接受它被裁切掉，此时也可以脱离栅格化的设计。

一些图片和文字的出血设计

页眉和页脚有时也有例外，它们不被认为是内容的一部分。有些设计将它们固定在浏览器边缘，有些则喜欢保持内容的宽度，这取决于自身功能和内容的情况。将它们保持在内容宽度内的好处是，当用户在宽屏显示器上看页面时，不需要来回扫视；将它们固定在浏览器上的好处是可以为导航元素提供更多的空间。

栅格化布局如何做到响应式

图片来源Intuit

在传统的栅格化系统设计中，列的宽度和水槽的宽度是保持不变的，只是列的“数量”发生变化。为什么要这么处理呢？这是为了让设计更简单。如果一组三张卡片分别放在桌面的四列上，那么在平板电脑上，会显示两张卡片，并把第三张卡片进行折行显示在第二行上。不需要做任何的调整，因为已经知道它位于第四列上了。

在手机上，答案也很简单，只需要一张卡片，其他的就会自动堆到下面的行中。如果你愿意，也可以变得有创意，选择只在手机上显示一张卡片，或者做一个水平滚动。这些列的自适应对于代码来说就是很简单的参考。

实际上，web必须呈现任何浏览器的宽度。例如，有一个大显示器，它可以看到1600像素宽的东西，实际上pc端的网页设计是1200px宽，平板电脑上是768px宽，手机是360px宽。所以你会看到一个小于1200px的设计，有大量的留白。但是当你的浏览器再小一个像素，1199px，会发生什么呢？

固定网格

固定栅格示意

如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在900px的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。但当达到768px临界点时，设计马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。

流动网格

流动网格的示例

现在来看看流动网格的特点，当窗口缩小时，内容将动态的发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。

所以我想说的是，设计的临界值只是一个更改布局的参考点。这就是为什么列宽和水槽在网格中不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。

混合网格

在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。

一些做的很酷的栅格系统

不需要太死板地去坚持传统栅格套路，12、8、4这样的分布，甚至不需要20px的水槽。下面是一些在设计中使用栅格系统做的很棒的设计灵感。

Invision’s Genome Project

可以看到，他们的设计故意不去使用任何的水槽，所以看起来是无缝的。

这个网站不仅设计的很好，他们还利用了在设计中展示他们自己的栅格系统来让整体的设计变得更加酷炫。

Dropbox Design

他们没有设计水槽和外边距，相反，整个页面被分成两半，然后将内容填充到这两部分。

WordPress

WordPress创建账号页面

使用网格的方式取决于你自己。你可以在主要内容部分使用网格，次要内容则不使用。在Wordpress的例子中，页面中间的部分使用栅格化设计，左侧的侧边栏则没有使用。

The Mockup Club

内容和网格也并不总是从中间开始，对于模型网站，内容在左边也未尝不可。

Instagram

我非常确定的说，Instagram的PC端是用上了6列栅格布局。

要点总结

写这篇文章的目的是想提供一些关于如何在响应式设计中使用栅格系统。我知道对于我自己来说，我花了很多年的时间写了大量的代码来理解网格是如何工作的。我在YouYube上看了很多视频，也阅读了大量的文章，但每个人都在关注它为什么重要，却不去注重到底怎么在自己的项目中使用这些原则。

你要做的最好的事情就是从现在开始注意那些优秀设计是如何对齐元素的，你将会开始看到这些模式。为了帮助理解，这里有一些设计系统概述了它们的网格使用：

Google’s Material Design System (https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins)

Intuit’s Design System (https://designsystem.quickbooks.com/foundations/responsive-column-grid/)

IBM’s Carbon Design System (https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals)

…And here’s huge list of other systems you can look through (https://designsystemsrepo.com/design-systems/)

在完全理解了网格的工作原理之后，我已经成为了一名更好的设计师，因为我知道我的设计将如何在临界值之间进行转换。我也可以落地我的设计，使它们能够有一个完美的像素对齐。这样的规范带来了更一致，更简洁的设计，当用户从一个界面到另一个界面流转时，这真的提升了产品的档次。我建议在你的设计中去应用这些网格，并和开发一起，以相同的方式将它们落地，这将会是一个非常不错的进步。

作者：Christie Tang

译者：彩云Sky

原文：https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01

WingST（寇敬），男，33岁，腾讯高级交互设计师、腾讯学院认证讲师，9年工作经验的资深互联网人，曾任 MIG 桌面安全产品部 轩辕设计组组长，目前在腾讯游戏 NEXT Studios 工作室负责《乐高无限》创造型沙盒游戏的用户体验设计。负责过的产品有腾讯电脑管家 V11.0、加速小火箭 V2.0、腾讯手游助手、腾讯网游助手等。曾在OPPO手机、金蝶软件等企业工作，有着PC、Web、移动端等多平台的丰富设计经验。

相信很多人都跟我一样，非常喜欢苹果的设计理念以及软硬件环境，我自己就在用着MacBook、iMac、Apple Watch和iPhone X，以及macOS上的非常多软件。

今天就来讲讲苹果的设计理念，先来看看这部真正打动我的手机。

苹果的首席设计师 乔纳森·艾弗（Jonathan Ive） 在介绍iPhone X的时候说：

十多年以来，我们都希望能打造一个拥有整面屏幕的iPhone。它能让你在使用的时候完全沉浸其中，忘记了它的存在。

这里的“忘记了它的存在”英文原文是“Disappear”，也就是“消失”，我觉得这两个字很好地阐释了苹果的设计理念。

iPhone X最有特色的两个亮点是什么？

1.全面屏

去掉了底部经典的Home键，正面的屏幕占比超过90%以上，和所有的边框都等间距，甚至连四角的圆弧部分也覆盖到了，只有最顶部有个“刘海”；

2.Face ID（面部解锁）

在顶部的“刘海”里布满了红外镜头、泛光感应元件、环境光传感器和点阵投影器等等一系列装置，通过它们，iPhone X会在你的脸上投射超过3万个肉眼不可见的光点，然后绘制出一个专属于你的3D面部图，在需要解锁的时候，它会通过红外线扫描，将你的面部和之前存储的数据进行对比，从而做到正确而快速地解锁。

这两点，恰恰就是用来让iPhone X“消失”的。

想想看，任何时候当你拿起手机时，它就会自动点亮，识别你的面部，然后自动解锁，显示出上面原本隐藏的信息，这时你顺手轻轻一划就能开始使用它。

这个过程是不是很流畅？

我相信，等到这个功能进一步改进，总有一天手机能做到你拿起就用，完全没有任何所谓的“解锁”，是你的就是你的，别人用不了，而对你来说，它就和你身体的一部分一样使用自如。

这个设计的简便之处在于，所有人都不需要教，只要拿起就用谁不会？

他们希望“解锁”这个概念从人们脑海中“消失”。

相比之下，曾经的Touch ID（指纹解锁）是不是弱爆了？你拿起iPhone 6的时候还要“有意识”地把右手大拇指放在Home键上让它识别，等到识别成功之后再按下去才能进入主界面，这种感觉并不是我们真正想要的，也不是苹果想要的。

就算为此需要给顶部留下一个难看的“刘海”也在所不惜。

并不是苹果的设计师不知道这样做不好看，他们为了做到全面屏甚至牺牲了所有正面的空间，甚至用了新的柔性OLED也要覆盖到所有的角落，如果有办法去掉这个“刘海”，他们怎么会不做呢？

说到全面屏手机，不妨来对比下。

发现没有？这么多家里只有iPhone X做到了屏幕和所有边框等间距这一点，其他家都有一个很明显的“下巴”，甚至顶部还有一些更明显的东西。

想象一下，当你站在大街上，打开iPhone X的手机摄像头，几乎无边框的屏幕上映出了眼前的街道，这时路面上出现了一个用AR（增强现实）技术生成的、栩栩如生的大象，你会不会感觉到虚拟和现实已经融为一体了？

这时，手机从你的眼前消失了，只剩下一个观察世界的新窗口。

说起这种关于“消失”的设计哲学，我想无印良品的设计师深泽直人一定有话说。

这个壁挂式CD机就是他“无意识”设计这一理念的最好体现。

什么叫做“无意识”设计？

只要是年纪稍微大一点的人，一看到这个挂在墙上、垂下一根带着拉手的线的CD机，马上就会想到以前的台灯、电风扇等等，都是靠拉线进行开关的，所以他就会很自然地去拉这根线。

于是音乐响起，就和台灯照亮了房间一样，这份旋律也充满了整个房间。

整个过程中，是习惯在产生作用，似乎没有让人感觉到有设计的存在。

这就是“无意识”设计，用户不用想太多就能自然地使用产品，和苹果正在使用的设计理念很像。

这个CD机的拉手如是，iPhone X的面部解锁也如是。

这样的产品还有吗？

当然还有，而且曾经我们很多人都还嘲笑过。

对，就是这对“甩头就丢”的苹果无线耳机——AirPods。

它让什么消失了？

从耳机盒中拿起，戴到耳朵上，耳机就自动连上了，不需要开关，不需要点击连接；

当你拿下一边的耳机时，音乐会自动暂停，不需要点击；

当你再戴回去的时候，音乐又继续播放了，自然而然；

你不想听了，把两个耳机拿下来，手机上的音乐自然停止，耳机断开并待机。

发现没有，整个过程中，你所做的一切动作都是自然而然的，你并没有按耳机上任何一个按键（它也没有实体按键），所有的操作都是它自动帮你完成的。

它让那些“有意识”的控制操作消失了，剩下的只是你应该做的动作。

这不是“少即是多”，也不是“如无必要，勿增实体”那么简单。

我觉得苹果自己说的“Disappear（消失）”已经很贴切了，所以就叫它“消失”式的设计哲学吧。

所以尽管当初我们吐槽iPhone X贵上天，吐槽AirPods容易丢，我们还是都买了，而且越来越多。

因为它们击中了我们的天性——懒惰，哦不，方便。

还有什么产品让你感觉到了“消失”？

原文链接：https://uxren.cn/?p=62511 

前言

“信息无障碍”译自“Accessibility”，指的是任何人在任何情况下都能平等、方便、无障碍地获取信息并利用信息。以互联网环境为例，互联网产品可以被老年人、视障者、听障者、读写障碍人士等用户顺利使用。

近年来，随着互联网的快速发展，很多人已经开始广泛使用电子政务，政府也越来越多地以在线方式向大家提供信息和服务。据国家统计局和残疾人联合会数据显示，我国 65 岁及以上的老年人有1.4 亿，残疾人士有 8502 万，分别人数为：视力残疾 1263 万人；听力残疾 2054 万人；言语残疾130 万人；肢体残疾 2472 万人；智力残疾 568 万人；精神残疾 629 万人；多重残疾 1386 万人。目前我国 31 个省、276 个地市、1197 个县级的残联都开通了网站，积极推动残疾人证智能化工作，发展“互联网+残疾人服务”。为了让残障人士能无障碍地使用电子政务，给他们提供更便捷、高效的服务，政务网站的无障碍建设尤其重要。网站构建的所有内容都应该尽可能具有包容性，易读性和可读性，为每一个人设计，为每一个人服务。

残障人士分析

信息无障碍涉及广泛的残疾类别，包括视觉、听觉、身体、语言、认知、语言、学习以及神经残疾。我们可能无法满足所有类型、程度和多重残疾人群的需要，但可以占比基数较多的特殊人群开始分析研究。

• 视障人士：1.低视力，由于各种原因导致双眼视力障碍或视野缩小，难能做到一般人所能从事的工作、学习或活动；2.色盲，分为全色盲和部分色盲（红色盲、绿色盲、蓝黄色盲等），不能分辨各种颜色或某种颜色；3.色弱，包括全色弱和部分色弱（红色弱、绿色弱、蓝黄色弱等），能看到颜色，但辨认颜色的能力迟缓或很差；4.失明人士，眼睛患有疾病或受到意外伤害而导致双目失明。
• 听障人士：双耳听力丧失或听觉障碍，听不到或听不清周围环境的声音，包括全聋、重听、听力弱化等人士。
• 运动障碍人士：这里主要指手部不灵活或需要使用辅助设施的人士，也包括在某些环境下，不能正常通过手部操作的人士。
• 读写障碍人士：一种最常见的特殊学习困难，阅读方面会跳字漏行、增字、替换字、倒反念，或无法理解阅读内容混淆相似字。
• 老年人：会出现身体机能下降、记忆力减退、视力下降等特征。

一个网站如果全站做到信息无障碍需要花费很多时间，进行很多研究和用户测试才可以完成，但我们可以分阶段逐步去推进改造，例如先从整个网站的颜色对比度开始入手，解决低视力人士的问题。

1. 为低视力人士设计

使用良好的颜色对比度

确保颜色对比度符合 WCAG 2.0（内容无障碍指南）标准，是信息无障碍中非常重要的一步。如果我们在设计当中做到这一点，也可以保障低视力人士能更好地获取信息。

根据 WCAG 2.0 的标准：

• 对比度（AA 级）: 文本的视觉呈现以及文本图像至少要有 4.5:1 的对比度；
• 大文本: 大号文本（字重为 Bold 时大于 18px，字重为 Regular 时大于 24px ）以及大文本图像至少有 3:1 的对比度；
• 对比度（AAA 级）: 文本视觉呈现以及文本图像至少有 7:1 的对比度；
• 大文本: 大号文本（字重为 Bold 时大于 18px，字重为 Regular 时大于 24px ）以及大文本图像至少有 4.5:1 的对比度。

在附属内容中，未激活的界面组件、纯粹的装饰、文本作为标志或品牌名称的一部分，这些情况都没有最低对比度限制。

WebAIM 可以帮助我们测试对比度，并且可以在线调整符合标准的颜色

Contrast Grid 可以测试多个颜色组合是否符合 WCAG 2.0 的对比度标准

使用 Contrast Grid 测试了两个国内省级政务服务 网站的颜色，发现基本上只有主要文字和次要文字的颜色能达到标准，用于网站上大面积的品牌蓝色（链接色）在大于 18px 字号下才符合对比度要求。

英国政府网是目前全球数字政府中做的最好的政务网站，在英国，政务服务是所有服务里面使用时间最久、提供量最大的服务。他们网站设计也很注重信息无障碍，在这方面付出了很大的努力。

检测后发现英国政府网使用的颜色都有足够高的对比度，满足了 WCAG 2.0 的标准，而且整体颜色都使用了偏低饱和度和明度的颜色。加强颜色的对比度，不只是为了让低视力人士能更好地使用我们的产品，同时也可以让使用较差显示设备的用户、老年人有更好的产品体验。

2. 为色盲色弱人士设计

避免仅使用颜色传递信息

颜色在设计中起着重要作用，能唤起情感，感受和想法，并且可以帮助增强品牌的信息和感知。然而，当用户无法看到它们或以不同方式感知它们时，颜色的作用就会消失。对于无法辨别颜色的色盲色弱人士，如果只用颜色作为传达信息，提示信息重要性或区分视觉元素的唯一途径，他们是很难感知的。

Stark（Sketch插件）可以模拟不同类型的色盲色弱人士所看到的效果，来帮助我们设计

某个政务网站上的注册表单，在没有填写任何信息的情况下点击注册按钮，必填项出现的错误提示是在下方用了红色的文字，这种方式对于普通用户来说是可以感知的。右侧图则是模拟红绿色盲人士看到的效果，这种情况下，错误提示的引导性就会降低很多。

英国政府网的错误提示对于色盲色弱人士就友好很多，除了红色的提示文字外，输入框的边框还会加粗处理，并且加上竖线提示对应没填写的表单项，提醒用户注意。除此之外，其实还有很多视觉处理的方法来达到传递信息的目的，例如在输入框内或者提示文字前加上感叹号的图标，这种方式对于普通用户来说，也会有更明确的提示。

3. 为失明人士设计

支持键盘导航

网站支持键盘导航是无障碍很最关键的一个方面，无障碍指南中提到要使所有功能都能通过键盘来操作，对于依赖于屏幕阅读器的失明人士和没有精确肌肉控制的人士，都需要使用键盘来导航内容。

当你浏览网站时，整个页面导航顺序应该是有逻辑，可预测和直观的。选项的顺序应该遵循规则：从左到右，从上到下，由顶部导航到内容内容区，最后是页脚。

我们可以尝试只用键盘操作来测试网站，使用 Tab 键移动焦点，用 Enter 键选择元素。测试所有的交互元素是否可预测且有序。如果可以在没有鼠标的情况下浏览整个网站的所有内容，证明这个网站已经满足了支持键盘导航的基本要求。

下图是国内某个政务网站首页的导航区，标注的数字是获取焦点的顺序，在用键盘导航的过程中，整个页面导航顺序都比较混乱，某些元素也无法通过键盘来获取。

相反，英国政府网和澳大利亚政府网首页的导航逻辑就会比较清晰，整个网站遵循从左到右，从上到下的原则，每个交互元素都可以通过键盘来获取，让用户感知到整个网站的布局，确定每个内容的位置。

用户通过 Tab 键导航网站交互元素时，焦点就是提供了当前所选组件的可视化指示，焦点可帮助用户了解界面上哪些元素有键盘焦点，并帮助他们了解导航网站时的位置。很多网站都是用了浏览器默认的焦点样式，但我们也可以根据内容设计出符合网站风格，与品牌相呼应的焦点样式。

英国政府网就是重新设计了焦点样式，使用黄色来突出焦点，让用户更明确当前焦点所在位置。根据不同的元素，样式也会有所变化。

苹果官网的焦点样式也进行了重新设计，在圆角输入框上焦点也做了相应的调整，使焦点和页面元素更为融合。

为非文本内容添加替代文本

视障人士经常会利用屏幕阅读器来“聆听”我们的网站，网站上的文字、图片、组件等信息都是通过屏幕阅读器说出来。这时候如何为这些非文本内容添加描述准确的辅助替代文本就非常重要。

以下图为例，左图搜索框按钮的替代文本为“按钮”，这种描述就会很抽象，增加了视障人士的理解门槛，容易让他们产生一个疑问：这是一个什么作用的按钮？相对来说，右图的处理则清晰很多，按钮的替代文本很明确地告诉用户这是一个搜索按钮。

图片很多时候在设计中用于传达特定的感觉和渲染氛围，如果需要通过用替代本文来传达图片信息的时候，我们可以尝试用简练的语言去描述图片内容，让视障人士能快速获取信息，在脑海里形成画面，而不只是告诉他们这是一张图片。

如果我们没有对图片添加替代文本，屏幕阅读器就会直接把一串字符的文件名字读出来。尝试打开屏幕阅读器，闭上眼睛去“听”这种图片，是一种非常难受的体验。

除此之外，英国政府网还有很多细节的处理值得学习。他们添加的标签描述都很清晰，焦点切换到列表的第一项时会告诉用户这个列表总共有多少个项目，下拉菜单目前是一个怎样的状态，让视障人士对于整个网站有一个布局感受，同时也大大提高了他们安全感。

提供多种验证码方式

账号注册是用户开始业务办理的第一步，可是往往这一步就给了视障人士一个很大阻力。目前很多政务服务网注册流程的验证方式都只提供图形验证码，但屏幕阅读器是无法识别验证码中的文本信息。如果注册流程都有障碍的话，其他业务办理即使有做无障碍改造，对视障人士来说都是没有意义的。我们除了图形验证码之外，还应该提供多种验证方式让用户选择，如手机验证码、语音验证码等。

苹果网站的注册流程中，验证方式除了提供图形验证码之外，还会提供语音验证码。

快速访问内容

对于只使用键盘导航的用户来说，在熟悉网站后，他们是希望直接访问页面内容的。但是很多网站的顶部导航存在多个菜单，在用户获取页面内容之前，他们需要逐个切换链接才可以去到页面内容部分，打开一个新的页面，又是重复这样的步骤。

面对这样的问题，我们可以提供更友好的解决方案。当用户开始使用键盘导航页面时，提供一个“跳至内容”的链接，直接跳过每个页面重复的内容，提高视障人士或者键盘使用者的操作效率。

在使用键盘导航时，Facebook 还提供了页面内模块和其他页面的导航菜单，让用户可以更快速地跳到指定的内容上，使用起来更高效。

4. 为听力障碍人士设计

为视频添加字幕

网站上的视频都应尽可能配上字幕，让听障人士可以结合视频画面理解内容。在政务网站上，为办事指南的视频教程里添加字幕，也有助于听障人士更好地获取信息，更容易完成办事流程。除此之外，我们也可以提供详细的图文指南让用户选择。

5. 为运动障碍人士设计

支持键盘导航

部分运动障碍人士如果无法控制鼠标，其实也是需要使用键盘来导航网站的，网站支持键盘导航不只是为了盲人用户而设定，对于其他的残障人士也是非常重要。

交互元素易于点击

在设计控件时，也应该更加关注运动障碍人士和老年用户的使用体验，适当增加可点击的目标区域，让按钮、菜单选项和链接足够大，以便他们更容易操作。

6. 为读写障碍人士设计

图形、图片和文字结合的排版

由于读写障碍人士对文字阅读有一定的难度，阅读方面会出现跳字漏行、增字等情况。网站上应尽量减少同一位置上出现大篇幅的文字，WCAG2.0 中也提到的单行宽度不超过 40 个中文字符或符号，保持简练的文字表达和清晰的内容，通过使用标题、图片和列表来分解内容，缓解他们的阅读压力，以便为用户提供心理休息和提高内容的可读性。

保持一致性的对齐方式

整个网站都尽可能保持统一的对齐方式，英国政务网的每个模块的内容都采用左对齐的方式，遵循用户从左到右浏览习惯，让其更自然和高效。本来读写障碍人士对于阅读就有障碍，如果出现多种对齐方式，则会让他们更加眼花缭乱。

7. 为老年人设计

使用较大的字号

为了确保老年人用户能清晰浏览网站，而且考虑到并不是每个用户都使用高分辨率的显示设备，大字号的界面对于他们来说是很重要的。同时，我们还需要避免出现拥挤的大段文字，尽量把信息进行合理的分解，增加留白空间，通过排版组合让用户更清晰明确地获取信息。

英国政务网的文字体系里，整理都选用了较大的字号，最小的正文也使用到 19px字号。

考虑到用户对于字号大小显示的不同需求，香港政府网的顶部导航还提供了字形大小的入口，指引用户在不同浏览器下如何设置字号大小，让他们可以设置最适合自己阅读的显示效果。

减少手动输入

很多老年人达到了一定年龄，身体机能和记忆力会开始逐渐衰退，这使得他们操作网站界面变得更加困难，拼写输入就是其中一个很大障碍，我们应该尽量减少让用户手动拼写输入。在业务办理流程中，对于填写个人信息部分，可以优先从账号信息中拉取相关内容，其他信息补充部分，能提供选择项的内容都尽可能使用选择控件。

浏览路径简单明确

为了老年人能更好地浏览网站内容，应该保持页面清晰的布局和模块划分，为他们提供一个简单明确的视觉动线，让整个网站的内容都是是直观和易于理解。

小结

根据不同类型的用户群体，我们应该思考如何为他们设计和提供更高效的服务，让所有人都能平等、方便、无障碍地获取信息。

为视障人士设计

• 使用良好的颜色对比度
• 使用适合阅读的字号
• 使用颜色、图形和文字结合的方式传达信息
• 支持键盘导航
• 为非文本内容添加替代文本

为听障人士设计

• 为视频添加字幕
• 用标题、图片、列表等方式分解内容
• 保持内容清晰简洁
• 有逻辑的版面布局

为运动障碍人士设计

• 支持键盘导航
• 交互元素易于点击

为读写障碍人士设计

• 使用图形、图片和文字结合的排版
• 保持一致性的对齐方式
• 保持内容清晰简洁

为老年人设计

• 使用较大的字号
• 浏览路径简单明确
• 减少手动输入
• 交互元素易于点击

无障碍设计并不意味着会让网站变得不好看，相反，它会在我们思考的过程中融入一些条件限制。在这些条件限制中去探索如何让我们的设计能适用于所有用户，为每一个人设计，为每一个人提供更好的政务服务。

参考文献

《Designing accessible products》 Adhithya

《Accessible Interface Design》 Nick Babich

《Designing for accessibility is not that hard》 Smashing Magazine

《Designing For Accessibility And Inclusion》 Pablo Stanley

《How to make accessibility easier for service teams》 Angela Collins Rees

《7 Things Every Designer Needs to Know about Accessibility》 Jesse Hausler

《Web 内容无障碍指南 (WCAG) 2.0》

感谢你的阅读，本文出自 Tencent CDC，转载时请注明出处，谢谢合作。
格式为：Tencent CDC（http://cdc.tencent.com/2018/08/13/【to-g设计赋能】政务网站信息无障碍设计-研究篇/）

在用户体验设计中，app动画呈现了无限的创造可能性，同时也是目前引起热议的设计趋势。在今天的文章中，我们将讨论在app设计中如何使用动画来获得积极的用户体验和流畅的交互操作。

因为所有东西都被整合到一个页面，app动画必须是功能型元素而不是装饰性元素。动效元素应该在策划用户旅程初期就考虑。设计动画时，你需要分析它们在可用性和可期望性上的影响——如果你看不到积极的影响，就要重新考虑下。在交互过程中，动效的优点和效用必须是显而易见的，并且要超过可能出现的缺陷。好的UI动画可以达到锦上添花的作用。让我们回顾一下能增强用户界面体验的最流行的几种动画类型。

反馈型动画

反馈型动画告诉用户特定的操作是成功了还是失败了。即使在最基本的操作中，这种动画也能保持用户和app之间的交流。某种程度上，它能在物理世界引发和真实物体之间的互动。比如，当你按一个真的按钮时，你能感受到这个动作的力度和按钮的阻力。在移动设备上，这种情况是不可能的：你只是点击屏幕，但是却没有相应的反馈。这就是为什么在与传感器屏幕交互时，我们通过震动和视觉符号来获得反馈。这是UI动画拯救游戏的时代。如果动作完成，动画按钮、切换、开关、滴答或交叉符号会迅速通知用户。

比如，这是cinema app买票的交互流程。从放映页面到选择座位的过渡，是通过电影海报动画完成的，屏幕变成了电影大厅的样子。按下所需的座位，用户可以看到按钮颜色的变化，理解系统并获取数据。打钩的动画标志着任务的结束。

另一个例子可以在浇水跟踪app的交互中看到：浇水后，用户按下按钮，图像从水滴形状变成打钩符号，表示所需操作已经完成。

即使是基本的导航，移动动画添加的可能不仅仅是反馈，还可增加乐趣。反思这个可扩展按钮的概念：通过少量运动，它模仿了像果冻这种物质的物理特性。

进行中的动画

如果交互的过程稍长，用户必须等待，他们更愿意了解发生了什么，以及进展如何。这种动态交互的最大优点是为用户提供了保证，使他们在使用产品的过程中能够感知并且保持信心。一个自信的用户意味着积极的用户体验，并为留住高水平用户提供了良好的基础。进度条、时间线和其他动态元素的动画可以起到一箭双雕的作用：

– 告诉用户目前的进度。

– 提供娱乐性元素，减少等待中的负面情绪。

– 优雅原创的设计可能成为现象级功能，用户将愿意与他人分享，并吸引更多用户参与其中。

下面，你会看到一个时间轴app：等待的时间是由从白天到黑夜的过渡插画来支持的，数字显示的是等待的时长。

加载动画

这是移动端使用最多的动画。它可以被认为是进度动画的子动画，因为它告诉用户加载过程是活动的。加载动画有不同的变体，如加载，预加载、下拉刷新。

这是Slumber app对下拉刷新的运用：拉下新一集，用户等待时会看到加载小菊花的微动画，表示正在刷新过程中。而动效插画使用户在等待过程中也不至于太无聊。

吸引注意动画

这种动画在用户与你的app交互时起着用户体验可供性作用，它支持一般的视觉层次，通过动作捕捉用户的注意力，并将其导向必要的细节处。这样可以节省扫描整个屏幕的宝贵时间，使导航更加清晰直观。

这一组美味汉堡app的互动动画功能是，改变价格。它给这个过程增加了生气，使它变得自然。而且通过移动，它会立刻吸引用户的眼球，以这种方式提供一个提示信息。

过渡动画

过渡的动画在交互过程中，从一个屏幕到另一个屏幕，给APP增添了个性，使其变得优雅。

这是完美菜谱app的过渡动画：用户可以自定义他们的菜单，根据他们的目标和饮食限制。滑动的目标卡之间的转换，给用户积极的体验。

是的，这不仅仅是美观的问题。在我们最近的文章《关于移动应用程序的概念性UI动画》中，我们展示了一些例子，说明了过渡动画如何在元素之间添加更多空间的错觉，从而使布局变得透气、明亮，如下所示：

当用户从饼状图到列表视图，保存和标记颜色时，这里还有一个关于转换过程创造性动画的例子:动画使屏幕与数据可视化之间的连接紧密相连，让用户看到这一联系。

营销型动画

品牌与UI设计的巧妙结合对提高品牌认知度有重要作用。在大多数情况下，它是动态的logo、吉祥物类似的，通常被有效地应用于启动页。APP的营销动画通常集中于吸引人们注意品牌标志。这是我们为Whizzly设计的动画logo，这是一个用来推销年轻人才的APP。动画很迷人，令人印象深刻，具有生动的感染力。

动效通知

通知能吸引用户去更新app。在不那么引人注目的动画支持下，通知变得更加吸引人，让用户不错过重要信息。下面你可以看到Home Budget app中的一个例子:通知不仅以明亮的颜色突出显示，还模仿了脉动进行突出显示。

滑动动画

滚动是我们在web和移动端中使用的典型交互之一。这种动画增添了美感和优雅气质，使产品变得时尚、创意、和谐。记住，滚动可以应用于不同的方向，不仅是垂直的，也可以是水平的，如下图所示。

讲故事和游戏化

在APP中使用动画的另一个原因是它成为故事或游戏的一部分。动画贴纸、徽章、奖励、吉祥物——这些是让应用界面变得有趣和生动的几种方法。比如，这里你可以看到Mood Messenger使用的动画贴纸，它反映出了不同的情绪，使用它们可以增加强烈的情感吸引力。

UI动画的利弊

在APP中使用动效，设计师应该分析它们可能对APP产生的正面和负面影响。我们简单的整理下，将有助于你的决策。

在APP中使用动效的好处：

1、节省屏幕空间

2、增加可用性

3、创意

4、方便和简单的交互

5、能够同时完成多项功能

6、加快互动过程

7、向用户提供清晰的反馈

8、创建必要的期望

另一方面，设计师不得不考虑的缺点：

1、加载时间

2、干扰因素

3、耗时费力的技术实现。

欢迎关注我的公众号：爱设计的狐狸

原文地址：tubikstudio

译文地址：站酷

译者：爱设计的狐狸

MBE风格是怎么来的呢？其实MBE不是什么单词的缩写，MBE是一名法国的设计师，他于2015年年底在dribbble网站上最先发布了这种风格的作品，红遍了全世界，所以这类风格以MBE命名。然后世界各地的设计师根据风格的特点做出了很多优秀的作品，以下是我总结的几处观点与大家分享～

一、MBE风格特点

任何设计都有其自身的特点，也有同其它物质所持有的共性，特点就是与众不同掌握这些与众不同的特性，就可以娴熟的使用出这项技能。

1、线条

MBE风格最大的特点就是，比原本插画更粗更大的线条光环一般把作品诠释的更加闪耀。在使用的这些线条的时不但要结合色彩学还要对作品寄予情感理解的更加通透，当然也不能缺少对审美的认知。

▸有断点

黑色线条好处是可以突出内容，坏处就是会产生压抑感削弱内容主题使物体失去生动特性，MBE很好的用断线的处理方法解决了这个难题,这些断线的处理并不是根据图形的去限定个数，它们的数量多少是跟位置有直接关系的。

1：图中的鲸鱼和恐龙都是体积比较庞大的动物，大面积过度的线条让动物本身显得有点严肃，作者在鲸鱼的嘴部、喷泉的尾后部分都适当使用了断线结合动物本身的特点处理出来断点的既能起到效果又不失美观。

2：宝塔和锁的处理都是在密集的线条交汇处做断点，破除了画面的压抑感让整体看起来更加透气。

3：杯子和狐狸的看起来虽然都是独立的个体，但是仔细观察他们都有一个围绕的共同特性，杯子里面装着水大狐狸抱着小狐狸这样的设计内容是要更突出他们之间的紧密关联所以设计师们只选择一处做断点，此时如果在他们之间多加几处断点就会破坏这种气氛使画面的关系产生被分离的感觉。

▸无断点

扁平化图形＋黑色粗线＋断线处理是MBE风格的固定搭配，但是断线的处理并不适合在所有的图形上，既要保持这种新风格又要完成想表达的设计，在线条的颜色和粗线处理上就要有些不同的处理手法。

1:汽车的整体构造属于比较精致细腻的图形，如果使用黑色粗线势必会遮盖住车体细腻的结构无法表达出一辆精致跑车的视觉传递，设计师将描边线条调细并把黑色改为深灰色在地面部分适当增加断线处理，既突出整体的精致奢华又保留的设计独有风格。

2：元宝图形的使用环境是在烟花点缀的簇拥之中如果使用过多的断线处理画面整体就会感觉被散开，设计师使用了红色中偏黄并降低饱和度的颜色很好的消除原本使用黑色线条的压抑感，并且这种偏暖的红色会更加增加元宝金光闪耀的色泽。

溢出

MBE风格除断线以外最大的特别就是色块的溢出，其含义应该是想表达物体通过光照折射出来的阴影因为通常溢出的方向都是高光的对侧。MBE早期使用色块溢出作品较多后期基本已经很难见到，原因是因为早期作品图形都偏于简单色块溢出的处理可以给画面营造质感增加对风格的印象，而后期作品复杂度提升溢出部分无论在颜色还是整理型上很难融合，让图形本身突兀破坏本来想传递设计思想。

2、色彩

▸单色系

分析物体包含内容是否属于一种（材质、数量、介质）上述特性属性唯一时，即可使用单色系搭配方法找出物体的深浅关系营造质感，画面表达会更为完整明确。

▸邻近色＋补色

在色系上作者MBE有时候也会用不同色系制造图形的氛围，颜色的基本范围会控制在三种颜色以下，分别采用邻近色加补色形成，以下图形中包含的红、黄、绿、在色环上角度分别为22.5°的两色间，色相差为1的配色，均属于邻近色相配色。而蓝色角度为180°左右，色相差为8的配色，称为补色色相配色。

当想要表达的物体在一个数量以上或者物体本身某一处的材质与其它地方不同，使用颜色区分能更好的传递画面所要的表现的内容，不用刻意保持色相的单一性。

▸邻近色＋类似色

邻近色是指在色环上相近的两个颜色，在色彩学中还有类似色相配色、对照色相配色，在模仿和研究MBE风格时不用墨守陈规的去遵循作者的设计元素，在找到规则之后可以灵活使用才是设计的王道。

中国设计师SA 9527这组的设计中使用了另外一组邻近色加上类似色的使用（红、粉、橘、黄）更好的表达了一种新年的气氛。

▸写实派

在色相的使用上，设计师会遵循色彩基础原理来进行配色，但是在不同环境下为了能更明确的表达物体本身之间的关系，在艺术形态上会更加具象。

立陶宛的设计师Justas Galaburda在表现形式上更加贴近现实，蓝天、白云、国旗、汉堡和薯条中的配色均采用现实中的物体颜色做为填充。

3、图形

MBE风格的背景图最初只有圆形、小花瓣、加号三种也是最常用的三种图形，它们是随着MBE而来也这种风格标志直到今天也一直被沿用。

当然天生具有灵活思维的设计师们不会仅仅停留在这三种元素的组成，通过不同位设计师的演变它们被改变颜色、位置、大小另外也衍生了一些与扁平风格的结合，这种改变都是通过图形本身特有的气质而改变。

1:鲸鱼的背景图形重新组成之后是不是有喷出水花的感觉。

2:小蜜蜂飞舞的足迹结合扁平的渐变色加上漫天飞舞的小星星真的很有feel。

3:茶壶中间的叶子很好的区分的茶具之间靠色的问题，并给画面增加了茶水很新鲜的意味。

4:山体中间的云也是自然恰到好处。

5:太阳会因日出而东日落而西，太阳的动态气氛给画面增加了几分活力。

6:仙女棒五彩缤纷的气氛，光照出来的时候会闪闪发光。

MBE风格看似简单但是其中好的作品总结出来的经验也是通过设计师们的实践经验得来的,有了这些设计理论在设计的时候对我们最终达成的效果的会有着很大的帮助。

以上总结观点希望能对大家的设计有一些些的帮助，欢迎大家留言讨论更多设计风格的研究。

二、MBE风格制作教程

1：画一个圆，选中两端的锚点各缩进4px，复制粘贴这个圆去掉填充色选择描边颜色设置描边10x，用钢笔工具在描边上增加几个锚点，选择中间锚点删除就可以形式一个圆的断点。

2：将填充色改为粉色，复制两次使用路经查找器切割出一个圆的一小部做为圆的阴影，再用同样的方法做出一个高光。

3：复制两次圆，将其中一个圆缩小摆放到合适的位置使用路径查找器切割出（这是小优的眼镜）眼镜的位置，然后填充为蓝色，复制眼镜关闭填充色设置描边10px，再复制眼镜和脸部高光使用路径查找器切割出眼镜高光的部分设置色值

4：使用上面相同的方法做出一朵花和眼镜上白色高光，一个小优的头部就做好了。

文章来自：优酷土豆用户体验设计中心

我们终将以自然的方式与机器交流

在2012年圣丹斯独立电影节上，影片《机器人与弗兰克》赢得特别奖，该片讲述机器人Robot照顾患有老年痴呆症弗兰克的故事，选取影片中两张图，一张是人与人的交流，另一张是人与机器的交流，在2017年AI大热之年，人们能否像电影里的弗兰克那样，以人对人的方式与机器交流，这在人机交互学科里定义为“人机自然交互”。

何为自然交互？简而言之就是以日常交流方式与计算机进行交互，何为日常交流方式？就是人们通过语音、肢体、手势、眼神、表情等形式进行交流互动。

人机交互正迈上新台阶

人机交互（HCI – Human Computer Interaction）的发展是从人类适应计算机到计算机不断适应人类的过程，划分四个阶段：代码指令交互、图形用户界面交互、人机自然交互和人机情感交互。【引自《人机情感交互》】

每个阶段的发展都是以技术作为基石，以此带来的人机交互更为直观，也更趋近于人与人的自然交互，同时会拓宽更多的使用场景，会覆盖全年龄段的所有人。如下图所示，指令 – 专业技术人员操作早期计算机；鼠标键盘 – 受过教育的普通人使用PC机进行学习工作；触屏 – 更广泛的人群使用智能手机进行社交、资讯、娱乐等；自然交互 – 所有人将以自然的行为方式与智能产品互动。

随着AI技术的发展，智能产品在感知层面的能力正在变强，它能感知人们的语音、肢体语言、手势动作、表情眼神等，实现了人机自然交互的可能性，这是正在发生的事情。

未来智能产品的趋势是将拥有情感计算能力（Affective Computing），通过认知人类的语音信息、人脸表情、肢体动作等，从而调整自身的反馈来适应人们那一刻提出的需求，交互会变得越来越容易，它会更懂你。

智能产品能感知人的自然动作和读懂人的情感，都属于信息输入层面。在信息输出层面，智能产品如何设计才能达到“人与人自然交流”的感觉，为此我们将从六个维度给出设计建议，分别是人物设定、外观造型、语音、动作、界面和光效。正如同人与人交流时对方的脾气性格、外貌印象、声音特点、肢体语言、表情和眼神。

以语音交互为核心功能的智能产品设计建议

1. 人物设定的设计建议

①人设是要为用户服务；

人设是高级的虚拟形象设计，不由设计师的个人喜好来拟定，要充分考虑产品所服务的目标用户，譬如病人希望看见的是专家级医生，旅客希望能获得空姐甜美的服务，食客希望迎宾的店小二是热情好客的，这些形象在我们的脑海里栩栩如生。比如Amazon Echo是成熟职业女性的形象（类似有Google Home、天猫精灵、京东叮咚等），Olly给人潮流的设计感，它们为各自的目标受众群体去设定形象。

②人设可以通过抽象的方法进行传达，并非一定要具象化；

比如小米智能音箱定义的“小爱同学”是二次元形象，在今年11月底做出限量版手办，把形象落地到成具象的实体物品。对此，仁者见仁智者见智，有人说她不是心目中的“小爱”，所以在人设形象的传达上，我们建议可以通过艺术的手法达到目的，比方说用音乐、绘画、文学、电影等艺术进行包装抽象成一套视觉来传达，达到“空山不见人，但闻人语响”的境界。

③人设与产品要融为一体的进行考虑；

以语音交互为核心功能的智能产品，其“人声”会让用户自动的联想与之对应的形象，同时需考虑与外观造型相匹配，才能符合用户预期。有些智能产品有动作输出，例如人设定义为蠢萌的jibo，它的动作就要显得有趣可爱。如果考虑不周全，就会导致认知失调产生落差，比如小鱼在家，当用户问它几岁时，它却用其成熟女性的声音回答“我今年两岁了”，而Amazon Echo的回答是“按照人类的出生年龄计算我今年两岁”，后者更能让人接受与理解，即使是微不足道的一句文本都可能会让用户“出戏”，所以人设要与整个产品的信息输出层面融为一体的去考虑。

2. 外观造型的设计建议

①充分考虑目标用户的审美与喜好；

根据目标客群打造其喜欢的外观造型，比如小朋友会喜欢jibo胜过Echo，追求新潮的人更喜欢raven R，因为能与之载歌载舞。与以屏幕为主的智能手机不同，用户可不能更换主题皮肤找到自己的喜好，而Google Home也只能是通过“换裤子”来迎合用户偏好与家居风格。

②基于使用场景考虑造型设计；

要考虑用户会在哪种现实环境的场景下使用，目前市面上的智能语音产品多数放置在桌面上，体积大小就要认真思考，比如大了点、重了些，就不方便自由移动随处摆放，如果定义为多个使用场景，那便携上得做到位。比如raven H顶部的“点阵触控屏”盖子，用户能轻松取下进行语音和指触交互，于是不受固定位置的限制。

③避免掉进恐怖谷；

避免与人全特征的过度相似，建议采用抽象的方法提取拟人元素进行设计表达，这有助于产品向用户传达情感信息，从而有效的提升用户好感度。例如蔚来ES8搭载的人工智能nomi，还有百度的度秘，都是通过此类设计方法打造智能情感的交互，让一个工业产品，升级成一个有生命，有情感的新伙伴。

但如果与人的特征过度相似，现阶段的技术能力，造型上做不到写实逼真像人，同时语音、表情、动作也无法达到自然完美的匹配，所以这不伦不类的设计会给用户带来糟心的体验，例如Blue Frog Robotics公司推出的Buddy，很容易让用户掉进“恐怖谷”。

“恐怖谷理论”是由日本机器人专家森昌弘提出， 他认为，人形玩具或机器人的仿真度越高人们越有好感，但当达到一个临界点时，这种好感度会突然降低，越像人越反感恐惧，直至谷底，称之为恐怖谷。如图所示，谷底处能动的僵尸比静止的尸体更恐怖，虽然尸体已经够恐怖的了。

3. 语音的设计建议

①自然感；

避免单调乏味，做到像人说话一样的自然，语气上听起来积极主动，有意愿的感觉，每一个音素合成的词句清晰可辨，自然流畅。人类语音的信息含有语音声学特征和文本语义，语音声学特征主要是韵律特征（指音素组合成语句的方式），包括声调、重音、停顿、语速等，汉语是一种有调语言，声调携带非常重要的情感信息。语音属于自然交互的一种，它需要达到“自然”的感觉，才能让用户感知可用。

如何让Siri听起来更像人那般自然？

iOS11版本关于Siri的升级目标是“让Siri听起来更像人那般自然”，实现方法是通过深度学习，每一种表达都有略微不同的声波，每一句话都包含几十或者几百个音素，Siri为每一次发声找出完美的声音组合，其中音素是由苹果挑选出的候选人进行发音采集，情感语料的获取是苹果以匿名的方式进行收听，然后用于深度学习进行Siri的训练。

②一旦确定“人声”不宜随意更改；

一旦人设的声音已根植在用户的耳朵里，不宜随意更改，如果说手机界面换背景图就像人换一身新衣裳，而以语音交互为核心功能的智能产品更换“人声”，就像重新认识一位陌生人，古语说“如闻其声，如见其人”，人们会很自然的把声音与某个人进行关联，新的声音是谁，就会重新进行“人物建模”。

③像人和人那样进行对话；

首先是对话流畅，做到及时反馈，如有停顿，不宜过长。话术简短而有效，不要主动终止对话，尽可能的推动持续交流，当然不能以命令的形式让用户去完成某个任务，这不是一个合适的对话，它或许有点像上下级的关系，会导致用户带来反感和抵制。

④在感知用户后尝试主动发起对话；

再过些时日，可能Amazon Echo它能够根据说话者的语音情感进行识别计算，通过韵律学特征（语调、响度、节奏、语音质量等）更懂用户说这句话的此刻心境，就像电影《Her》里的那句台词“你今天听起来有点不开心”，它能感知你，试着主动发起一次对话。

4. 动作的设计建议

①使用国际通用的认知动作传达，同时考虑个地方的风俗习惯；

例如

Material Design提供了设计APP时所需的整套工具和指南，帮助你在用户体验设计过程中遇到困难时做出明智的决策。但当你的app不那么符合特定的使用案例该怎么办？在谷歌，当设计师要做的产品不那么适合这份指南的时候会如何？

Material Design指南应当因事制宜。透过此文，我们将细看Keep和Inbox这两个谷歌app，来理解它们设计过程中是如何改变一些规则，领会Material Design指南的整体精神后进行实际应用。

Inbox：探索印刷网格

在谷歌设计一款全新的电子邮件Web应用可谓一个相当有野心的任务，尤其是在Gmail已经存在的情况下。借助新的Materail Design规则，Inbox团队企图创建更密集的UI、更特别的用户体验和品牌标识。就在Inbox设计团队在整合最初的设计时，Material Design尚仍在开发中。这提供了他们一个绝佳的机会：建立Material Design 网页标准，以解决密集UI的设计问题。

密集的UI设计

Inbox最初的设计不够灵活，因为在13英寸屏幕上只有7封邮件的空间。这相比较于Gmail能展示16-20封邮件而言实在太少。Inbox的视觉设计首席Tim Smith解释道：

“如果你分别打开Gmail和Inbox，在视觉密度上有很大区别。在内容和留白之间找到理想的平衡就成了我们最大的挑战之一。”

通过调整网格、行高、文字表达，Inbox成功建立了密集型网页UI的设计标准，做到能展示12-17封邮件，每个邮件存在于一张Material Design卡片中。字体大小和外观也被设计成因个人设备不同而有所调整改变。例如，电子邮件的主题行会根据屏幕尺寸的增长而变化字体尺寸。
 

INBOX为了在小尺寸屏幕上适应尽可能多的信息而设计，设定了密集网页外观的MATERIAL DESIGN标准。

利用颜色、图像和Icon承前启后

与Gmail比较，Inbox的视觉差异体现于头图的使用，头图会与捆绑的邮件内容相关。如果一个人使用Inbox来计划去纽约的一次旅行，举个例子，他们将会看到曼哈顿天际线的图片。Inbox还在左侧导航栏中使用了大量的icon，这些icon会根据它们在app中的功能被赋予不同的色彩。例如，当用户点击或轻触绿色的“完成”按钮，标题栏的背景色也会变成绿色，让用户持续的知晓变化和前后联系。

这种承前启后的图像使用也是Inbox不同的品牌体验的另一个鲜明特征。

INBOX会给绑定的邮件增加图像从而赋予它们意义。例如，去纽约旅行的飞机票和酒店预订邮件会配上城市的天际线照片。

为网页设计标题栏

对Inbox团队的另一个挑战是app标题栏的设计。最初的提议是设计成一个可调的标题栏，不会拉伸填满整个浏览器窗口，但取而代之的是会匹配内容的宽度。

“我们研究了这个方案的十几个变体，知道最终确定为你今天看到的全宽度标题栏。我们还通过几个原型的探索来决定最佳的搜索区域样式。”——视觉设计首席Tim Smith

既然Inbox的卡片能够缩放，这意味着每一次用户和邮件交互的时候都必须进行头部的调整。App的标题栏还包括了搜索区域和展示其他谷歌应用的菜单。这一处理方式让Inbox无需复杂化它的外观就能保持良好的响应。

Keep：改变导航模式

Keep是一款跨平台的笔记应用，扩展折叠屏幕上的Material卡片让用户在添加笔记时集中注意力。改进过的底部导航栏也让人们能够通过一个轻触快速地新建笔记。

通过空状态和动效来鼓励用户行为

空状态主要出现在没有任何内容展示给用户的时候。Keep通过这种设计模式给用户一个空画布来起草他们的想法。贫乏的UI鼓励用户更多去探索app的搜索栏元素，扩展到显示图标筛选器；分类菜单让用户在列表显示和网格显示之间切换；左侧导航抽屉用于调整app的主要设置。卡片通过放大和缩小来提示用户其前后关系。

KEEP利用空状态来鼓励用户创建新的笔记。

“动效方面我们耗费了诸多努力，从笔记流动展示的动态，到你打开和关闭它们的方式。”

——谷歌KEEP软件工程师GENEVIEVE CUEVAS

为你的app使用正确的Material模式：底部导航栏 VS. 悬浮按钮（Floating Action Button）

当你重新设计一款app时，Keep团队的设计师和研发人员仔细研究了Material Design模式，并且最终应用了一些组件，比如让笔记与笔记区分开的卡片、让app设置更容易操作的左侧抽屉式导航和根据笔记内容不同而变化的菜单，比如在列表内容上加上勾选框以便于检查每条内容。总而言之，这些不同的设计模式最终创造了一个全新的功能体验，它建立在用户的使用场景和需求之上，是Keep这个应用的简单易用的关键。

再设计的过程中，Keep团队对Material核心导航做了一些实验，测试让一个可扩展的悬浮按钮替代现有的底部导航栏。需要指出的是，底部导航提供了简单的一键式动作来创建新的笔记。新型悬浮按钮则需求两步操作，第一步扩展选项，第二步才创建笔记。

“当我们发布了悬浮按钮后，一些用户抱怨没有了能够一键创建笔记的功能。”

——谷歌KEEP软件工程师GENEVIEVE CUEVAS

这个改变看似对app的老用户和已经习惯了单触式导航的用户而言是个退步。Keep在测试后最终放弃了诸如悬浮按钮这样的核心Material组件，这是一个很好的例子来告诉人们，在使用Material指南时应该坚决拒绝强行套用不适合产品的指南的行为。

指南不是法则

Inbox和Keep团队都利用了Material Design指南来帮助设计和开发应用。但当他们遇到一个对产品无用的案例时，他们会相应地调整设计。Material Design给了非常多的指引，这是建立于谷歌多年的UX经验之上的，但它不可能包罗万象。希望以上这些例子能告诉你，在符合其整体精神的基础上，设计时要按照实际需求来改变你的运用方式。

原文：HOW GOOGLE DESIGNERS ADAPT MATERIAL，MUSTAFA KURTULDU

来源：HTTPS://MEDIUM.COM/GOOGLE-DESIGN/HOW-GOOGLE-DESIGNERS-ADAPT-MATERIAL-E2818AD09D7D

译文：https://ddc.dianrong.com/?p=3701