本文就UI界面中常见的指示性设计元素做了一些整理，希望可以帮助到各位设计师。

什么是指示性设计元素？

众所周知，道路上的指示标志是用来指示车辆和行人该如何通行。同理，在UI界面中，指示性设计元素就是用来告知、引导、指示用户的设计元素，因此，只要是在视觉上可以提示特定的交互或内容，从而让用户更快、更轻松地注意到，比如CTA按钮，文本提示等，都属于指示性设计元素。

指示性设计元素是如何影响用户体验的？

大多数情况下，往往只需要几秒钟时间，用户就已经决定了要不要使用你的产品。因此，页面的逻辑是否清晰，结构是否明确，重点是否突出，指示性元素的引导是否合理就显得非常重要。

指示性设计元素是我们今天讨论的重点，它对用户体验的影响是多方面的，使用正确的指示性设计元素可以：

• 方便用户快速浏览页面
• 加强页面视觉层次感
• 提供更便利的导航
• 提高页面转化率

关于指示性元素和用户体验之间的问题，CXL Lnsitute曾经做过一个很有名的实验。这个研究小组做了很多个不同版本的落地页面来进行测试，根据用户行为收集了大量的用户交互数据，并进行了准确分析，发现不同的设计对用户行为、用户在页面的停留时间以及页面转化率都大有影响。

CXL Lnsitute用于测试的落地页面如下：

1）界面中人物视线偏移表单：

2）界面中人物视线聚焦在表单:

3）界面中有箭头指向表单：

4）界面中没有任何指示性设计元素：

5）界面中通过深色背景突出表单：

6）界面中有一个三角指向表单：

测试结果显示，落地页的热点图差距非常巨大。

首先，带有手绘箭头的页面热点图如下：

该页面用户的停留时间最长，并且表单的点击次数最多。

其次，人物视线偏离表单的页面热点图如下：

该页面，用户的注意力也完全脱离了表单。

可见，指示性设计元素对用户行为和页面的转化率有着非常重大的影响。

常见的指示性设计元素

一、箭头（Arrows）

箭头是最受欢迎的指示设计元素之一，它通用、明显、易懂。不同年龄、不同文化、不同教育程度以及不同技术涵养的人都可以理解。前面提到的CXL Lnsitute的测试也验证了这一点。

• 家居装饰电子商务网站

使用箭头作为交互元素的视觉提示：

• 外卖网站

左右各有一个箭头，提示用户可以选择更多：

• Dance Academy着陆页

使用箭头提示用户页面在水平方向上存在交互:

• Tubik Studio团队设计的网站

底部箭头提示用户可以滚动鼠标浏览页面：

二、手型（Pointers）

如果你不想用箭头这类具有强指示性的元素，可以考虑使用手型提示。回想一下，如果有人想让你看某样东西的时候，他是不是会用手直接指向该物体？在web或app界面中也一样，想要引起用户注意，也可以用“手”直接指出来。这样，不仅可以把指示性元素和整体的视觉效果融为一体，还非常巧妙地提供了优雅的视觉提示。

• 某招聘艺术家平台的着陆页

使用了插画元素，不仅提升了界面的美观度，插画人物的视线和手势也正好指向了关键信息和CTA。

• 某邮件服务登录页面

该页面的指示性设计元素实在很巧妙，不易发觉，却又能把全部的注意力都集中到一点上——FREE SIGN UP。如果你仔细观察，每个元素，无论是纸飞机的朝向，还是花朵延伸的方向，全部都指向了CTA。

• 行李托运网站登陆页面

使用了插图，人物和飞机都指向了顶部最右侧的CTA，也就是BOOK YOUR TRANSFER这个按钮。

• 邮件管理系统登录页面

该页面的人物手势和其他构图元素，都把重点指向了首页大标语。

三、视线（Eye line）

视线是建立在人类自然反应之上的一种强大的指向方式。当看到别人的目光集中在某个点或某个物体上时，我们会自然而然地产生好奇心，他们在看什么？人类的这个心理反应经常被用在视觉内容设计中，包括摄影、插图等，最后在UI界面也被广泛使用。

• 美发美容公司网站主页

使用了首页大图，该模特的视线向下方看，视线的焦点停留在CTA上。

• 约会应用程序的登录页面

使用了带有文本的插图，人物的视线正在看向文本内容。

• 销售发饰的电子商务网站

使用了精美的插图，界面中人物的视线集中在首页标语上。

四、视觉提示

箭头可以提示用户进行某种交互，很多其他元素也可以用于提示用户，比如，表示交互类型的图标或插图。此外，鼠标还可以提示用户滚动页面，手势动画可以提示用户滑动，总之，他们都可以帮助用户顺利地了解和探索你的页面。

• 某建筑设计工作室的网站

底部有一个鼠标形状的图标，告知用可以尝试向下滚动：

五、呈现部分内容

交互过程中可能出现这样的问题，当页面布局看起来很完整并且滚动鼠标时无法加载更多内容时，用户会以为他们已经看到了全部内容。

对于这种情况，有一个很棒的解决办法，可以在屏幕上可见区域的最下方显示的一部分内容，这样，用户就不会遗漏任何重要信息了。

• 时装模特网站

网页的底部区域展示了部分照片，提示用户可以滚动查看更多：

• 外卖网站

在页面底部显示菜品的一部分，提示用户可以滚动查看更多；此外，使用箭头作为方向提示，告知用户水平方向上也会看到更多信息：

总结

以上就是本次分享的一些指示性设计元素，其实这类的设计元素还在不断的创新中，如果你有更多的想法，欢迎和我们交流。总之，尽管指示性设计元素的表现方式多种多样，但它们最终的目的都是引导用户，为用户提供更好的用户体验。设计师在设计过程中，自始至终都要铭记这一点。

原文地址：tubik blog
译文地址：摹客
作者：Marina Yalanska
译者：摹客

按钮交互的设计由来

为了设计合适的交互方式，我们需要回顾实体按钮的发展历史，作为UI组件之一的按钮来源于实体按钮，现在广泛用于互联网产品中。按钮非常神奇，只需手指触摸，就可以打开一个APP、启动汽车或者一个系统，即使用户不懂背后的原理。在《Power Button》这本书里，Rachel Plotnick研究了今天按钮操作的文化起源，描述了按钮成为互联网产品的命令方式，可以实现毫不费力控制。

“你只需按快门，其余的我们来做。”—柯达相机用抓人眼球的口号来吸引潜在的顾客。

这正是迄今为止，按钮吸引用户的地方，只需简单的触摸，就能获得处理事件的满足感。即使很多新家电和其他设备都进化为了触屏操作，实体按钮却并没有完全消失，其塑造的行为习惯仍然影响按钮设计的直观性和易用性。

按钮与链接的区别

按钮传达了用户可以执行的操作，它们通常在UI界面中，比如：对话框、表单、工具栏等。区分按钮和链接特别重要：

链接：用于导航到另一个位置，比如：“查看全部”页面、跳转另一个位置等。

按钮：用于实现一个操作，比如：提交、合并、新建和上传等。

按钮的多种状态

设计正确的交互和样式，对按钮设计十分重要。按钮每个状态必须可识别，要显著区别于其他状态和周围的布局，但是也不能完全改变组件或者制造视觉混乱。

普通状态：可交互和可用的状态。

焦点状态：用户使用键盘或其他输入方法来突出显示一个元素。

悬停状态：用户把光标置于可交互元素上的状态。

触发状态：用户已点击按钮后的状态。

加载状态：当操作没有立即实现时，表示正在进行的状态。

禁用状态：按钮目前不可交互，但以后可以使用。

按钮的多种样式

最常见的是圆角按钮，可以轻易识别，并且在输入字段旁边看起来不错。为按钮选择正确的样式，取决于目的、平台和规范。以下是一些最流行的样式：

不同样式的优先级

样式最初是用来区分操作的优秀级。明确操作的优先级，可以在众多的选择前，引导用户。通常，要有一个突出的按钮（主按钮），几个二级按钮，还有三级按钮。

有时不需要默认按钮

通常，把最常用的按钮设置为“默认”（使用主样式）和选中的状态。这样可以帮助大多数用户，更快完成他们的任务，引导正确的方向。

此外，当选择同等重要时，或者操作存在危险，在这些情况中，需要用户明确按钮的选择而不是意外选择。

别让用户思考

Don’t make me think（别让用户思考）是可用性工程师Steve Krug所著的书的名字（中文《点石成金：访客至上的网页设计秘笈》）。其中指出，触屏是为了让界面更明显，而不是让用户产生困惑。基于多年使用不同的设备和其他产品，用户养成了对按钮外观和功能的特定期待。如果和“标准”按钮的样式差别太大，就会让用户迟疑和困惑。

不要对可交互和不可交互的元素，使用相同的色彩。如果可交互和不可交互的元素，使用相同的色彩，会让用户不知道点击哪里。

一致性提高效率和准确性

“一致性是最有力的可用性原则之一：当元素一直都是统一的样式，用户就不必担心突发事件。” — Jakob Nielsen

一致性提高速度和准确性，避免错误。创建可预测性可以帮助用户获得掌控感，在产品中实现他们的目标。在创建主要、二级和三级样式时，尝试找到一些共同的元素，比如：色彩、形状等。尝试不仅对设计的系统保持一致性，对平台也要保持一致性。

按钮的交互热区尺寸

按键应该是一个简单的任务，如果用户点击按钮失败，或者误点到了旁边的元素，会导致不好的体验和浪费时间。

对于大多数平台，触屏的区域至少为48x48dp。交互热区的尺寸应该是至少9mm，不论屏幕的大小。推荐的触屏元素的尺寸，至少为7-10mm。

对于icon按钮，确认交互热区大于元素的视觉边缘。这点不仅适用于手机或平板，同样的推荐尺寸也适用于对于网页的点击设备，比如鼠标。

按钮的可用性

所有组件都应该注意设计的可用性。交互热区是影响可用性的一个因素，其他因素还有字体大小、色彩和对比。许多工具可以帮助你轻松检查组件设计的实现效果。

设计师应该和开发团队紧密合作，以确保按钮的正常使用。按钮作为一个可点击的元素，在用户触发时，给予反馈。用户通过按钮这个元素，可以实现交互控制。

按钮的交互手势

通过手势操作，用户可以和APP进行交互。触摸作为实现操作的另一种方式，可以节省时间，获得触觉的掌控感。虽然一些手势，比如滑动引出相关的操作、双击点赞或长按，现在越来越广泛地使用，但对于普通用户，这些手势不太明显。建议使用手势作为替代的方案，供高级用户使用。

按钮的文案

按钮文案和样式一样重要。使用错误的文案，会让用户困惑，浪费时间，也会误操作。

一个好的按钮文案，可以引导用户操作。最好使用动词，告诉用户在做什么。就像这个按钮在询问用户，“你想收藏吗？”或者“你想确认命令吗？”

避免使用“是”或“不”，或者太通用的，比如提交。

按钮的位置

确认和取消的按钮，哪个放在右边，设计师们因此而争论不休。

• 确认按钮放在左边，符合正常的阅读顺序。如果我们知道用户最可能的选择，可以帮助用户节省时间。Windows系统将确认的按钮放在左边。
• 确认按钮放在右边，优化流程。将确认按钮放在右边，可以帮助用户在操作前，评估所有的选择，避免错误和冲动决策。苹果系统将确认按钮放在右边。

两个选择都有理由，并且也不会造成使用困难。我个人倾向于放在右边，在活动列表或者对话框，可能因为我常用Mac系统。

按钮的禁用设计

每个人都遇到过禁用按钮，被困在当前页面几秒钟或几分钟，尝试弄清楚为什么禁用按钮妨碍了当前进程，然后要怎样重新开始。禁用状态提示组件当前不可交互，但是以后可以。为什么使用禁用按钮呢？因为如果从原来的位置上移除按钮，或者在上层用内容覆盖掉按钮，会给用户带来困惑。

我建议，避免使用禁用按钮。最好让按钮永远可以使用，如果用户没有提供必要的信息，只需高亮强调空白的输入区域，或者提醒用户。

ps：material design中悬浮按钮、拖拽状态，可以了解一下

原文链接 | https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

来源 | 彩云译设计 （id:caiyunyisheji）
本文原作者 | Taras Bakusevych
本文译者 | Bravert

身为用户体验设计师，无时无刻不被世界上的新事物冲刷着认知——互联网红利下降带来变化莫测的商业动向、循着摩尔定律野蛮生长日新月异的新技术、各类亚文化群体催生出多元复杂的圈层文化、脑洞口味越来越独特的年轻人，甚至眼下席卷全球的黑天鹅事件……

任何一个新事物的悄悄冒头，都有可能在未知的将来影响着用户体验设计师。我们能做的是，在起初感受到微微震幅时，便沿着震感逐步寻找源头，并思考未来的发展走向。赶在变化降临前先拥抱变化。

本文通过研究近一两年科技、社会文化以及自身用户体验领域的变化，从用户体验领域关键的用户、媒介(设备与应用）、交互行为、信息与场景的五个角度出发，探索用户体验设计未来的趋势，希望能带来启发。

更智能的服务提供方式

随着人工时代到来，过去机械的单向交互方式逐渐被打破，机器渐渐演化成了会主动「观察」真实场景，「感受」用户情感，预判用户意图并自动完成任务的贴心小棉袄。机器如何为人们提供更智能便捷的服务，未来还有非常大的想象空间。

1. 基于真实场景推理用户意图

随着AI技术的发展，智能设备可以越来越无缝地将数字世界和物理世界嫁接起来，主动感知用户所处情境并智能提供相应服务。

在2019的 Google I/O 大会上，Google Lens 展示的AR点菜功能可以智能识别用户扫描的菜单并将美食网站上的相关推荐直接呈现在屏幕上。

当用 Google Lens 识别到小票信息时，可快速提取小票上的金额，且可自动弹起计算器快速帮助用户计算人均消费，节省人工计算的时间成本。

随着信息入口从数字空间延伸到周围的物理空间中，未来万物皆可为用户体验的媒介，设计师未来在设计的时候需要注意：

寻找适合的打通真实世界的切入点：在陌生语言、信息复杂或者难以处理等苛刻的环境下，充分发挥智能设备对信息智能读取、批量识别与翻译等强大能力，帮助用户高效完成任务；

将用户旅程的上下游串联：根据生活常识和经验预判用户行为目的，前置推荐服务；

更加系统细心地考量干扰因素：真实场景是动态变化的，需要更全方位考虑光线的强弱、多源的噪音、实体的可视性、人员和事件的打断等因素。

2. 任务自动化，简化用户旅程

为了完成一项任务，用户往往需要借助多个应用来回切换配合，使用起来琐碎麻烦。如今应用越做越强大也越复杂，过去仅仅解决单一场景的解决方案不再适应于用户对于高效完成任务的诉求。

Google Assistant 的新能力 Duplex on the web 可以通过自动跨应用任务处理来简化用户旅程。只需要用户发出语音指令「预定一辆去某地的车」，助手便可自动跨邮件、日历、付款等应用调取信息、自动根据使用习惯做选择，并自动填写信息，而用户全程需要的只是在关键节点轻敲「确认」即可。

2019年随着 iOS 13 的更新，「快捷指令」推出了「自动化」能力，用户通过「if…then…」语法便可为自己的App设计一套程序，实现如：「当我回到公司时提醒我打卡」、「每天早上10点给我的女朋友发送一条表白短信」等能力，将不相关的场景动作串联字一起自动化执行，大大节省人工操作成本。

提升使用效率是用户体验设计孜孜不倦努力的方向之一。在利用新技术进一步简化用户旅程时，设计师可以充分利用以下因素：

借助语音输入：比起界面触控操作，语音交互的直达性可以「穿透」复杂界面，让设备第一时间明确用户目标；

基于用户行为形成习惯记忆：对用户长期重复的行为做分析处理，构建用户习惯模型并主动提供服务；

适当考虑专家级用户：随着部分用户的智能设备使用水平越来越高，可以考虑为专家用户提供自定义操作脚本，满足其自身的独特需求。

3. 基于情感感知，主动理解用户需求

随着人脸识别、表情识别、肢体跟踪等技术的提升，机器逐渐学会感性语言，主动感知用户内在情感和心理需求。

2019年1月的CES展上起亚亮相的互动式「情感驾驶空间」技术，可通过传感器读取用户的面部表情、心率等反应，调整驾驶空间内的灯光、影片类型、音乐风格等，舒缓舱内乘客心情，由此提供更人性化的出行体验。

用户总是会期待更贴心的服务，设计师未来对同理心的情感嗅觉更加敏锐：

利用感性线索定位用户情绪：需要通过面部表情、特殊时间节点或者识别到的关键词，对用户情绪进行理解和定位，判断用户情感理解用户内心诉求是自由探索、趣味娱乐、或者静谧修行并提供符合用户当下心境的服务。

综合使用感性元素进行设计：通过使用线条、色彩、声音和动作等传达并唤起相对应的情感，提供更加人性化的体验。

4. 小结

更智能的服务提供方式会让人们生活拥有更多可能性，但一旦火候把握不得当，可能就会造成对人们生活的野蛮入侵。关于如何让科技更好造福于人们，早在上个世纪，施乐帕克研究中心提出了宁静技术（Calm Technology）的愿景，认为影响最深远的技术应该是隐匿不见的，它们如纤维般融入日常生活，丝丝入扣，直至不可分辨。

随着科技的发展，设计师对新技术不应是不加克制地应用，而应该润物细无声般地提供服务，帮助人们从繁杂喧嚣的数字世界中解脱出来，将宝贵的注意力资源投放在让生活更美好的事物上。

更自然丰富的交互方式

回顾人类和机器的交流语言，从命令行界面、图形用户界面到自然用户界面，人机交互方式越来越贴合人与人之间更自然的交流方式，其背后是心智模型与实现模型的高度拟合的趋势。

在自然用户界面中，为满足新形态智能硬件对新接口的需求，以及人们对更丰富强大的交互方式的自然诉求，越来越多的自然用户界面被开发出来。语音交互和隔空手势交互便是近几年迅速发展并落地的两种交互方式。

1. 隔空手势交互：更自由、更灵动

为了让机器更好地读懂用户的身体语言，能够感知深度信息的摄像头走进了日常手机。2019年国内外手机厂商的发布大会上，LG 手机 G8 ThinQ 以及华为发布 Mate 30 系列推出的隔空手势，可实现一些简单的诸如滑动、切歌、截屏等效果。

除此以外，隔空手势支持更加细微的手势，如旋转、揉搓等，可以更直观、更灵活的方式操控界面，让用户获得一种像魔术师用意念控制事物运作的快感。

对于隔空手势操作网上的言论褒贬不一，其中争议性最大的就是隔空手势宛如「杀鸡用牛刀」，明明可以用更加精准的手势触控，为什么还要用看似很酷炫其实精准度更低的隔空手势操作？

隔空手势并不是要替代触控手势成为主流的人机交互方式，更多是对情境式障碍场景的补充。在某些场景下，用户使用设备的条件可能是充满干扰的。想想看当你边看手机食谱边炒菜的时候、边煲剧边剥小龙虾的时候、疫情期间出门佩戴橡胶手套无法正常触控手机屏幕时…..隔空手势是不是特别好用？

每个人在特殊的场景下都有可能面临感官障碍，未来的设计也应该更多地考虑情境式障碍的场景，让用户无论身处何时何地依旧能一如既往无障碍地使用设备。

2. 语音交互：更精准、更好玩

语音交互作为更趋近于人与人之间最自然的交流方式，近些年有许多发展的突破点。

在发展主线上，语音交互趋向更自然、更人性化、更个性化。过去反人类的一些沟通方式慢慢被「调教」。此外，多人会话场景下的技术方案日渐增多。

2019的 Google I/O 大会展示了一个视频片段，视频中的两位嘉宾相继吐槽，经常出现针锋相对难以听清的时候，这时用户可以调节音源音量选择性增强自己关注的人物声音，让另一个人「静音」。

△ 滑动选择音源

此外，语音交互除了在智能音箱领域广泛应用以外，也逐渐应用在广告等更多的传播媒介中，刷新人们日常使用体验。2020年2月索尼提交了一项广告播放新专利。当用户在观看电视节目时，如果出现广告，只要站起来大喊广告中对应品牌的名字，便可直接跳过这个广告。

设计师在语音交互场景下，需要留意以下几个比较容易被忽视的因素：

用户语音交互习惯培养：如今还处于培养用户语音交互使用习惯阶段，设计师需要更多地考虑应用的语音交互规则如何才能更趋近于人们日常的沟通习惯，并进一步为人们的社会习俗所接纳。

真实场景下的多人音源：在现实情境中， 在多人对话场景下将面临音源不清、穿插停顿、噪音过多等影响体验的情况，由于计算机听觉分析能力开始从单人音源拓宽到了多人音源，多人对话解决方案上还有很大想象空间。

改变传统的视听体验：在使用场景上，语音交互接口也将逐渐运用到更多的媒介上，更全面地刷新用户体验。

3. 小结

人类拥有双手、眼睛、耳朵和发声的嘴巴，但是并不总是在每个使用场景下都能自如地使用：在安静的自习室下声音收到限制，在驾驶场景下注意力受到限制，在双手拎着东西场景下双手受到限制……但目前许多产品设计都建立在用户能完整使用感官功能这一理想化的基础上。

未来的发展趋势倾向于将视、听、触、嗅等多通道信息完美整合起来，综合使用多种输入通道和输出通道，根据用户使用场景用最恰当的方式传递服务，满足用户多方位的需求。

硬件形态带来新的挑战

尽管乔布斯曾断言3.5英寸是手机的黄金尺寸，但作为人们日常内容消费与娱乐的窗口，手机屏幕毫无疑问地变得越来越大，甚至超出传统物理限制。人们对大屏享受的追求与设备携带便捷性之间的矛盾由来已久，硬件形态的变化对旧有的用户体验设计思路带来的新的挑战。

1. 大屏幕：单手持握新挑战

屏幕横纵比越来越大，而人类的手部具有先天限制，曾经惯用的界面布局方式在高横纵比的屏幕上可能无法被大拇指无障碍全覆盖，使得越来越多的设计更加重视利用移动屏幕下半部分。

操作与信息进一步下移：

高德地图、苹果地图的搜索框下移，方便单手操作用户快速激活输入框；

影视资讯平台IMDB强化底部标签栏功能，双击「搜索」tab即可激活输入框，无须艰难地触摸顶部。

即时战斗类手游皇室战争的说明卡片主要展示在下半部分，方便用户进行卡片上的相关操作。

底部导航被赋予更多能力：

Pocket的底部标签栏现在兼任汉堡菜单功能，在激活状态下再次点击主页icon可选择主页上须展示的内容。

利用下滑手势代替点击：

Snapchat的许多表示前后进退关系的页面都不是」返回「按钮，而是向下箭头，用户可下滑退出当前页面。

2. 折叠屏：新形态的交互方式

为了解决设备形态和人类手部先天限制之间的矛盾，折叠屏诞生浏览并颠覆旧有的界面设计方式。

更灵活的信息布局

过去在单屏设计下，考虑到用户注意力由上到下纵向衰减，因此信息布局更多是按照优先级从上往下排序。而折叠屏中，屏幕展开后便可以开辟出更大的可利用空间，将次级页面或者较为重要的内容曝光在第二屏，对信息的布局将带来全新的变化。设计师为保证大小屏下顺畅的阅读体验，需要对信息模块在不同空间布局下的流动性有更强的把控能力。

更便捷的多任务操作

在过去的单屏体验中，用户只能将注意力完全集中在当前的界面中，一次只做一件事。但在实际生活中，用户面临的情景往往是主线任务和支线任务的频繁交错，并且根据会任务不同的性质自由调动自己的注意力重心，如边看视频边聊天、边看直播边逛街等等。在折叠屏中，设计师可以探索更多主线和支线交错进行的场景，利用折叠屏带来的更大的屏幕空间，可以让用户在不离开主线场景的基础上进行支线任务的处理，大大节约了在不同App上来回切换的操作成本。

更直观的拖拽交互

此外，随着多任务处理越来越广泛使用，拖拽交互将成为重要的交互模式之一。文本、表情包、图片、视频等交互对象，不再需要经过复杂的分享转发流程才能在不同App中流转，通过拖拽的方式可以更直观地进行交互。

双面屏互动玩法

外折叠屏在折叠状态下可转为双面屏，等于是给用户增加多一个观看视角。例如华为 Mate X 的镜像拍摄可以让被拍摄者即时获知自己的镜头影像是否满意，这一拍女友神器有望成为直男拍摄终结者。在未来更多的多人观看和互动玩法将被开拓出来。

△ 华为Mate X 的镜像拍摄

未来随着5G通讯技术的成长，越来越多的设备可以同时加入物联网，人们的生活将被各种智能设备围绕，设计师需要参与更多屏幕外的设计，让不同设备串联在一起协同合作，让用户能更加自在地享受科技的便利。

疫情催生新的线上体验

席卷全球的新冠疫情让数十亿用户乖乖待在家里。过去需要花费大量精力去教育的用户使用习惯因为疫情纷纷转变。云购物、云蹦迪、云赏樱、云监工……人们足不出户便可还原许多线下场景。随着用户线上和线下生活的界限进一步模糊，用户对于应用的效率和情感诉求也发生了变化。

1. 更关注效率导向

疫情让远程办公学习需求剧增，多人协作场景越来越频繁，许多企业随之升级了电话、视频会议、文档制作等多人协作效率软件。过去仅仅考虑少人场景协作的方式不适用，设计师需要比以往更多地考虑多人协作场景下，如何对海量密集的信息进行分析处理和展示。

在学习方式上，由于线下学习转移至线上，学生群体对于娱乐向软件也有了效率诉求。为了顺应用户诉求变化，2020年5月QQ推出学习模式，屏蔽娱乐性的内容推送，让学生更专注在学习上。

2. 更注重缓解社交疏离感

除了效率诉求急剧提升以外，随着长时间的线上学习与办公所产生社交疏离感和缺失感，人们对于线上学习工作的情感化诉求也进一步增强。

2020年推出的plagi远程办公软件支持设置每个人的avartar形象，让大家在远程办公时依旧能时刻感受到彼此的存在。在完成任务时还可以放鞭炮庆祝，让员工能感受到亲密无间的线上办公体验。

设计师需要更加关注如何让线上生活进一步与现实生活圈和时间线接轨，通过拓展真实社交下的更多伴生行为让线上也能还原线下的真实场景细节和互动体验，以弥补用户对真实社交的缺失感。

3. 加速人和信息的强连接

疫情的发生加速了人与信息之间的连接。人们越来越习惯将自身的身体资料、心情状态等信息沉淀在智能设备上。

为了做好广大市民群众的健康监测服务，辅助疫情防控工作，微信和支付宝在2020年年初都上线了健康码服务，不同颜色的健康码代表人们不同的健康情况，市民出入特定场所都需初始健康码。

随着人的数据化越来越深入，个人身份信息的线上化在各平台上将成为更加通用的能力。设计师需要考虑如何更自然更低成本地将线下动态变化的资料信息线上化，更有效地对用户信息进行加工处理，以及记忆用户的使用习惯和行为，以便帮助用户更高效地完成任务。

疫情的出现加速了线下生活线上化，短短时间内我们看到日常习以为常的应用为响应疫情下的特殊需求纷纷出现改造，钉钉、QQ群被改造成上网课、批改作业的地方，医疗卫生公众号开辟了实时疫情播报与辟谣通道，无接触设计和服务需求异常突出……这也启发了设计师需要保持对突发事件的敏感力以及应急能力，在日常生活中留心思考，为日后突发事件提供充足的场景支撑。

关注以人为本

在汹涌的资本语境下，互联网设计师裹挟在商业驱动的结果导向中狂奔，对设计的伦理和责任鲜有发声，但伴随着互联网红利退潮，发展放缓，狂奔之下的人本问题也逐渐浮出水面。在大趋势下，UX设计师需要培养自身设计对伦理和责任的敏感度，在满足商业目的外，重拾节操，为多群体，为大社会设计，更加注重「以人为本」。

1. 更包容性的设计

包容性设计师指在做设计产品的时候，考虑到各类用户的诉求，输出具有包容性的设计方案。包容性设计依旧是2020年设计主题之一，伴随着互联网产品全球化，在通用性和包容性上也提出了新的要求。

为身障人士设计

三星在2019年针对东南亚市场推出了一款让聋盲人士和健全人实时交流的app：Good Vibes，盲聋人轻击屏幕输入摩斯电码，预先连线好的另一台手机就会显示从盲聋人发来的短信。健全人用普通的文字输入回复，在盲聋人这一端就会翻译成摩斯电码、以手机振动的方式读出短信内容。

GOOD VIBES宣传视频：https://v.qq.com/x/page/g3108sr8qc9.html

饿了么：在饿了么送货骑手中，约8%受色盲色弱的困扰（全国男性群体中红绿色盲色弱占比达8%-9%，饿了么骑手男性占比90%），为此饿了么设计团队在2019年对app的进行了重新设计，包括使用WCAG无障碍色彩对比度，以及无障碍色盘，以及调整字阶，使用辅助图形等设计手段来解决部分骑手在送货途中使用APP的痛点问题。

△ 饿了么UED：《为骑士创造平等 — 配送 App 的包容性设计》

跨年龄段设计

谷歌助手礼貌功能 ( Google Pretty Please ) ：开启谷歌助手礼貌功能后，如果使用者在下达指令的语句中包括「Please」，谷歌助手会对礼貌的请求表示感谢，以此培养孩子的礼貌言行。

Google Pretty Please功能宣传：https://v.qq.com/x/page/e3108ue3e2t.html

Swift Playground：当10后小学生VITA君的编程课被「可敬的发量」刷满弹幕时，Swift playgrounds功不可没，这款为儿童新手学习编程的软件，用趣味的游戏方式为4岁以上低龄用户提供了一个学习编程的低门槛平台。

为性别平等而设计

苹果emoji：回看历年苹果emoji的更新，从肤色平等，到性别、性向平等，再到为残疾人设计，2020年再为跨性别者增加新表情，性别平等依旧是包容性设计中重要一环。

Airbnb插画：爱彼迎在插画系统中，也为不同肤色，不同职业，不同性别，以及身障人士进行了人物的绘制。

2. 关注用户隐私

2019是互联网科技隐私问题沉浮的一年，国外有Facebook因泄露隐私收到史上最大罚单，国内则打响了「人脸识别第一案」。笼罩在隐私信任危机下，个人信息和数据立法突飞猛进，美国推动《加州消费者隐私法案》，国内也将在2020年出台《个人信息保护法》和《数据安全法》。

MIUI12推出隐匿面具功能

Android开放生态导致的权限隐私问题一直被用户所诟病，某些APP存在用户不授权就无法使用情况，针对这一情况，MIUI12推出了隐匿面具功能。当用户在开启某些APP要求授权权限时，可以选择空白通行证进行授权，从而保护用户真实信息。

在MIUI12的更新中，还推出了照明弹、拦截网两项隐私保护功能

iOS 14剪贴板提醒

在iOS 14的更新中，保护用户隐私方面进一步升级。

其中剪贴板提醒设计很贴心，当用户打开应用，如果该应用读取了你剪贴板的内容，会在系统顶部弹出提示，用户能在第一时间意识到剪贴板内容被读取，帮助用户更好的保护自己的隐私内容。

3. 健康的数码生活方式

科技的发展是一把双刃剑，互联网产品的发展给用户带来便捷和沉浸体验的同时，也使得用户沉溺于科技所带来的惰性和投食之下，逐渐丧失了对真实生活的把控权，被科技绑架。

数字福祉（digital wellbeing）近年被频频提起，指科技产品需要权衡好数码产品和真实生活之间的平衡，防止数码产品过渡分散用户的注意力而影响生活质量。

Android Q 专注模式 Google Android Q Focus Mode

Android Q的更新加入了专注模式，用户在专注模式下，可以在系统层面快捷地关闭使你分心的应用，让你聚焦于更重要的事情。

防沉迷系统升级

推荐技术的进步，产品体验的升级，给用户带来了更合胃口的菜式和沉浸体验，但同时也被冠上了「电子海洛因」的称号。游戏或者内容产品的防沉迷系统依旧会是数字福祉下不可避免的趋势。

王者荣耀在2020年升级防沉迷系统，对青少年的娱乐时间和点券充值的限制进行了进一步升级。承接话。B站在2019年推出青少年模式，在该模式下，使用时长和内容推荐等做了定制化处理。

2020年的UI设计趋势，一方面是对往年风格的衍变和细化，另一方面，在扁平克制的界面风格盛行后，设计师们向往更自由、更突破的视觉表达。

UI的继承和创新

1. 深色模式

2019年iOS 13深色模式姗姗来迟，紧接着大厂APP相继推出此功能。在2020年，深色模式会继续普及外，也会在可视性和实现成本方面有更多细节打磨和研究。

2. 新拟态

设计趋势的发展是螺旋式上升的，在扁平化设计流行之后，对物体的拟真再一次回归设计圈，新拟态以一种对旧拟物风格的再创新，重新流行起来。

新拟物风格（Neumorphism）缘起于设计师Alexander Plyuto发布在dribbble的一组作品，以投影重新对扁平界面进行了塑造，模仿出类似浮雕的视觉效果，感受耳目一新，引起大量设计师相尽模仿。

新拟态的实用性和可落地性有待商榷，但是作为一种新的风格受到设计师拥趸，也不失为下一波风潮到来前的灵感缪斯。

WWDC2020对mac OS的更新也重新定义了新拟态设计语言，在mac OS新系统Big Sur中，图标的设计增添了轻微的渐变、投影、高光，以此来营造图标内元素之间的纵深关系。

3. 多彩配色

在扁平简洁UI风格盛行之后，丰富的色彩依旧是设计趋势之一，大面积色块，碰撞配色，带来更具冲击感的视觉体验。

4. 字体装饰化

UI界面逐渐扁平，色块图标弱化，为突出页面重心和内容，iOS 11在界面标题上使用更大的字号，更粗的字重。近年在大标题的风格衍变下，文字在传达信息外，也开始有了装饰性作用，采用超大字体，成为页面排版美化的一部分。

5. 更大圆角

大圆角的风格会继续延续，相较以往，卡片的处理圆角会更大，随之带来的是多的留白处理，结合大字号，带来更透气通透的视觉感受。

Mac OS Big Sur的界面相对旧版本采用了更大的圆角；系统图标的设计统一成圆角矩形。

6. 更丰富的插图

UI插图的丰富体现在样式和内容上，样式上开始3D化，内容上更注重插图叙事的表达。

7. 3D插图

3D图形往年更多运用在动态影像或运营类设计中，随着3D的普及运用，UI插图也会迎来3D化，给用户带来更立体，更新鲜的视觉感受。

8. 讲求叙事表意

相较于往年追求形式的UI插图，新趋势下的插图更讲求功能性，每一副插图都承载一定的作用——传达功能信息或透传品牌情感；同时插图更讲求画面表意和情节，给用户叙事性的视觉体验，增进用户和产品之间的情感联系。

9. 插图组件化

插画的流行，随之而来的是成本的水涨船高——一套系列插图为保持风格统一，往往由唯一设计师绘制，同时为兼容各类场景，设计师往往要绘制多张。

为解决插图的成本和效率，插图开始以组件化的方式进行绘制——插图设计师将插画进行拆分绘制——不同人物，不同场景，不同物件等，再通过组件化的拼接合成，使用组件的设计师可以根据需求场景自由组合，也避免了风格不统一问题。

设计师Pablo Stanley将日常绘制的插画制成一套矢量插图组件库，将人物分为：半身、全身和坐姿3大类。通过不同表情、发型和服装可自由搭配出近60万种组合。

Pablo Stanley人物插画系统：https://v.qq.com/x/page/s3108yeyhmt.html

10. 多维度动画表现

新趋势下，动画一方面回溯复古线描手绘风格，另一方面追求更三维的体验，同时帧率进一步提升，追求更流畅的视觉感受。

11. 手绘动画

手绘插图是往年的热门，其随性自然的笔触，能给用户带来亲切的感受，在新的趋势下，动画的加入赋予手绘插图一份灵性和趣味。

12. 3D运动

Google Material Design通过卡片投影层级和二维动画规律，赋予扁平界面Z轴的纵深感。随着3D的普及流行，新趋势下的界面，界面的运动从二维走向三维，表现出3D场景下透视感。

13. 高帧率动画

高帧率影视从线下电影院移步到线上流媒体，手机高帧率屏幕从90Hz到120Hz逐步升级，用户对画面流畅的定义一再刷新，UI动画的帧率升级也会是新的一轮趋势。

Telegram的表情采用了高帧率动画，给用户更流畅的视觉感受。

更高效的涉及协作方式

体验的持续升级，产品的高速迭代，对UX设计师的设计师效率提出了更高的要求。高效的设计方式是一个永恒的趋势。

1. 从本地文件到云端协作

传统的文件交接方式效率低下，导致设计师之间信息不对称，最终影响产品的一致性体验。近些年在线设计协同工具发展迅速，从UI设计、 设计交付以及组件协同等环节上给设计师提供更加高效实时的协作体验，获得大量UX设计师的簇拥。在2019 uxtool的设计工具调研中，在线设计协同工具佼佼者figma以其协作和性能优势，大有追赶sketch之势。

随着团队对设计效率要求的提高，设计文档从本地走向云端协作是不可逆趋势。不过设计工具的迭代是需要成本的，尤其在大型设计团队，设计工具需要渡过阵痛期来完成迭代，进而提升设计效率和体验一致性。

2. 科学有效的设计系统

UX的发展，从早期的静态规范到当下的动态设计系统，是为解决产品迭代增速后带来的设计效率和产品体验问题。商业驱动下的产品迭代速度有增无减，设计系统依旧会是未来几年的设计趋势之一。

这里说的设计系统不是广义上的设计系统，而是在互联网设计的发展中，对组件化设计逐步迭代升华的一套设计协作方法：

「设计系统（Design systems）是一组为了共同目标而服务的内在相互联系的设计模式和多人协同执行的方法。」（引自《Design systems》，Alla Kholmatova，C7210翻译）。

3. 设计系统历程衍变

组件化的发展历经规范文档到UI组件，再到设计系统，形态从最初对设计一致性的指导规范，到对产品研发流程的规范，以及产品设计价值观的输出，当下的设计系统以集大成者形式影响整个产品的设计形态。

设计系统的结构见下图：

4. 设计系统的求同存异

设计系统并非一成不变的，他是一个动态进化的系统，会根据团队性质、产品特性在内容上有所区分——比如大团队更应该大而全，小团队更倾向小而精；成熟产品的设计系统更倾向于打造完整闭环的合作流程机制，新产品的设计系统应该以小为始，快速迭代……

随着产品的垂直化，细分化，设计系统的趋势会是在趋势大同之下找到适合产品和团队自身的形态和节奏。

Material Design是一个包含了指导规范、组件，以及设计开发工具的自适应性设计系统。

它作为平台型性设计系统，更为大而全的规范了整个生态系统的设计风格，以及提供工具让研发者能快速产出符合规范的产品。

△ Google生态庞大繁杂，Material Design更为全面

Ant Design作为一个为to B产品提供解决方案的平台，更多从设计可用性和完整性考虑设计系统的搭建。

△ Ant Design通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验

QQ作为一款面向95后的2C社交产品，其设计系统Q语言从风格调性上对设计进行规范，同时给予设计师一定的自由度；也考虑到QQ内兼顾多个产品，以及界面主题样式，对基础组件的使用场景和代码进行了规范，方便设计和开发敏捷开发。

Q语言，给予产品的自由调性之外，也针对主题和基础组件进行了规范。

每个产品和团队都有自身的特征，设计系统的建设也应该有的放矢，没有可照搬的标准答案，在大方向下找到适合自身的解决方案才是的可行之道，将效率最大化。

5. 科学有效的优化迭代

组件是设计系统中的重要组成部分，但是以往静态的、孤立的协作方式使得组件的更新迭代滞后和阻塞。随着设计系统的发展，设计师组件化思维的普及，组件的更新需要更科学高效的方式进行管理。

Figma在2019年推出的Design System Analytics功能，组件设计师可以借此查看组件的使用情况，包括引用次数，解组次数等，并可以生成组件使用情况的曲线趋势图，以数据的形式，科学高效地推动组件的优化迭代。

选择分析的时间段；组件使用的次数曲线图；团队使用情况；所有组件使用情况

后记

未来的用户体验会出现什么新趋势？人工智能等算法的发展、5G技术普及、新的智能设备形态、新的信息处理技术、新一代用户的喜好和口味……这些往后或将影响用户体验发展的走向。未来用户对体验的要求只会越来越高。

用户体验设计师需要了解更多的技术动向，但安身立命之本还是让用户真正受益：立足于用户真实使用场景，在理性价值层面上，打造可用、易用、高效的设计；在感性需求层上赋予情感上的愉悦性，在反思层面赋予意义价值。

来源：腾讯ISUX

同时，微信也是互联网界的一个异类，张小龙曾在微信公开课上回应到：“我们只是守住了做一个好产品的底线，居然就与众不同了“。

好产品自然是体验和价值至上。下面，我就为大家解读微信的用户体验设计。

01. 二次确认的微创新

先从最简单的二次确认讲起。

微信针对首页消息和收藏列表的删除操作，做了二次确认的微创新。像同类 IM 聊天工具，如 iOS 短信、Facebook Messenger、飞聊等等，二次确认都是采用底部系统弹窗。这样做，从程序架构的角度来看兼容和通用性更强。 

而从体验设计的角度来看，则刚好相反，因为从第一次删除操作，到第二次确认系统弹窗。之间的目标距离太长，耗时也就变长了。根据菲茨定律（Fitts' Law），获取目标的时间取决于目标的距离和大小。这意味着提升交互的效率，不仅需要减少距离，同时要增加目标大小。

收藏列表

回过头看来微信，就是这样设计的。二次确认是在第一次的基础上延展，距离几乎为0，同时，目标按钮的宽度也增加了几倍，大大的提升了交互效率。 
 

02. 互动体验广告

其实，商业和用户体验往往是有冲突的。而微信广告很好的平衡了这一点。
通过丰富有趣的互动体验式创意，或画圆、或画方、或画爱心，吸引大家主动参与互动。

– 开放首条评论

另外，首条评论功能让品牌像朋友一样与大家的对话，利用明星效应，从而带动更多人参与评论，有效提升评论区活跃度和广告点击率。
 

朋友圈刘雯广告
 

以刘雯发布的朋友圈广告为例，大表姐把最新款的vivo X30系列手机交到你手中，并在首条评论中邀请你帮她拍照。数十万用户积极回复刘雯，评论率高于历史均值40倍+，“你这么漂亮怎么拍都好看”、“天天给你拍”，大表姐的魅力折服了众多用户，有效提升了品牌的亲和力与好感度。

– 打开仪式 · 最强震动级别

在交互方面，如果你是 iPhone 用户，可以体验到 Taptic Engine 线性震动马达，通常力度由轻到重分别是  Light、Medium、Heavy。在打开广告的那一刻，它给你的是最强震动级别，满满的仪式感！整个微信应该找不到第二个这样级别的震动了。

03. 提供反馈信息

再举一个震动的例子，当你的好友拍摄了时刻视频后，可以看到 TA 的头像右上角多了一个蓝色的小圈圈，双击它就能看到好友的时刻视频了。 

当然，你双击没有拍摄时刻视频的好友，TA 的头像会左右晃动，并且会有 Failure 的震动反馈，动画和震动节奏完美匹配，这个体验就像你解锁 iPhone 输错密码时的震动是一样的。 

没有时刻视频时的反馈

我们做产品设计时也一样，对于用户的操作，应当给予清晰明了的反馈，帮助用户更好的理解信息。

04. 跨平台能力

微信的起步阶段是基于手机来做 App，不基于 PC 来做，PC 端只是辅助，而现在，它的跨平台能力也逐渐增强。
一周前，微信 PC 版「微信测试版 for Windows」发布了 2.9.0 的内测，同步了移动端的新功能，主要有两点：
1. 支持打开小程序，也可以玩「贪吃蛇」「跳一跳」等小游戏了。 

Windows 微信客户端

2. 另外，此前的微信 PC 端只支持引用文字消息，也没有达到手机上引用消息的视觉效果。此次更新中，还新增了很多支持的引用类型，包括但不限于图片/视频、表情包、公众号链接、小程序、文件等。 

如此看来，Mac 端的更新也不远了，可以期待一下。
 

05. 语音实时翻译

最近的微信更新了，除了引入深色模式之外。值得一提的是，语音消息的交互体验得到了优化，上滑转文字更方便了。

此前的方式是按住说话，滑到转文字按钮，说完松开手指后，才把语音解析成文字。

现在交互则少了一步操作，达到了实时边说边转文字的功能。别小看这一步界面上的优化，它背后代表的是微信语音识别能力上的技术突破。

语音实时转文字

06. 锚点定位

微信有很多隐性和显性的锚点，隐性锚点就比如你打开的这篇文章，关闭后，再重新点进来，还是显示上次阅读的位置。

订阅号列表

显性的锚点就比如上面这个：当你刷公众号列表时候，如果有新文章更新，标题栏会出现一个锚点按钮，点击它让你快速回到顶部，方便查看最新文章。

朋友圈「跳到还没看的位置」

基于此，在新版微信朋友圈中，增加了一个「跳到还没看的位置」。很多信息流产品是往下刷内容，直到给你一个分界线提示：下面内容已经看过了。而微信这是一个逆向操作，我认为这个功能还是很有必要的，因为经常会有刷朋友圈刷到一半聊天退出去，当回来查看朋友圈时，需要重新拉到底部，费时费力。

07. 自然的语音听筒播放

《在你身边，为你设计》一书中有提到语音听筒播放的优化。大家都知道，手机带有距离感应器，在感应到耳边贴近时，屏幕会关闭以节省电力，并且避免由于耳朵与屏幕的触碰导致的误操作。

微信在聊天界面中，也启用了距离感应，以实现手机贴近耳边时，自动将语音从扬声器切换到听筒进行播放，这样你可以用最自然的姿势来听语音，这是一个很好的体验。

但要完美地实现这个体验，就需要解决距离感应器的时延问题。播放语音时，如果你非常迅速地将手机移至耳边，这时候距离感应器并不会同样迅速地对这个动作产生反馈。大约在延迟了300毫秒后，感应器发出信号，微信将iPhone的屏幕关闭。而在这个时间内，你的耳廓极有可能已经触碰到了iPhone的屏幕上。触碰的位置大部分时候是左上角的返回按钮区域。于是很容易出现手机移至耳边，语音戛然而止。

延时响应判断流程图

为了解决这个问题，微信设计了一个解决办法：在响应返回操作时，先等待500毫秒，这时候如果侦听到距离感应器有发出信号，则认为是贴耳的动作，此情况下不执行返回操作，如上图所示。而500毫秒的延时大部分时候你是不会感知到的。这一解决办法极大降低了贴耳时候的误操作。

总结

在微信的产品设计中，我们看到了交互的细微迭代和背后的技术突破，我们看到了商业创意与用户体验的平衡。给用户带来希望，让创造者体现价值，这就是微信的设计之道。

原文地址：洋爷（公众号）

作者：洋爷

什么是插图？

基本上，插图是对特定概念，文本或过程的视觉解释。这是一个旨在支持、澄清甚至扩展人们从其他信息来源获得的想法的图像，通常以文本的形式给出。这个词本身就意味着“为某些事物投光”，因此它的主要目的是帮助用户理解或想象更好的东西。

多年来，插图已被整合到各种印刷品中，如书籍，杂志，报纸，海报，传单，教育材料。后来，动画和视频制作为插画带来了新的气息。最近，新的技术和工具推动了数字插画时代的发展。

随着网站和移动应用程序的不断增长，插画的需求和应用也不断飙升。由于其美观性和创造性，插画也是作为提高可用性、情感和视觉吸引力的界面之一。但是在UI设计中有哪些功能是可以通过插图来说明的呢？

界面设计中使用插图的方法

和其他界面元素一样，插画的功能性多于装饰性，可以使信息或交互变得更清晰明了，也更加时尚。所以，何乐而不为？以下是我总结的可以使用插图的地方：

•主页横幅

•主题图片

•吉祥物和人物

•博客文章图片

•引导流程和工具提示

•奖励和其他游戏化图形

•通知和系统消息

•贴纸（特别适用于Messenger应用程序）

•讲故事

•信息图表

•营销材料和广告横幅

•内容类别的可视标记

•支持网站或应用的社交网络页面。

以下是插图在界面设计中深受欢迎的十大理由 – 也许你可以考虑在下一个设计项目中使用它们。

界面设计中使用插图的十大理由

1. 自定义插图为原创性和艺术和谐奠定了坚实的基础

图形为界面、印刷品或品牌相关的东西增添了一丝风格和创意。在竞争激烈的世界中，脱颖而出至关重要。否则，人们甚至可能不会尝试你的产品，更不用说了解它的好处了。

顺便说一下，这就是为什么许多公司将插图用作博客文章、评论和登陆页面的主页横幅的原因。在这种情况下，设计师可以根据目标受众偏好对作品进行微调，并将其与特定项目或主题背后的业务目标或想法进行平衡。这样可以找到充满趣味的隐喻、配色方案、角色和环境，从而有效地吸引特定的读者群或观众。

看看这副关于UI动画的文章的隐喻标题插图。智能手机扮演幕墙或屏幕的角色，就像在木偶剧院中使用的那种，设计师充当演员，每个演员都展示了特定的动作表现模型。

2. 插图充当可视触发器，可快速传输必要的消息

绝大多数人对图像的感知能力超过文字。这是一个无关好坏的事实，只是设计师可以利用这一点来增加网页或移动布局的视觉效果。一般来说，人们具有非常广泛的能力来感知视觉标记，识别和处理数据，甚至转换为高级抽象的图像。

事实例证：

•心理学家声称人们需要大约1/10秒来获得视觉场景或元素的一般感知（文本项目的速度确实不可能）

•视觉效果能更快地传递到大脑。重要的信息通常被大脑固定为视觉图像，即使它们是通过文本感知获得的

•与背景和周围元素相结合，图像不易受到影响，而文本则高度依赖于可读性

•图像有助于保留长期记忆。这意味着处理界面的用户不需要处理和记住比实际需要更多的数据，因此交互变得更快

•当来自不同国家/地区的人使用应用或网站时，界面中的视觉效果可以使其更加通用

•图片突出了具有文本识别自然问题的用户的感知极限，例如阅读障碍或非阅读学龄前儿童。

所有上述内容构成了与插图建立强大而快速视觉联想的坚实理由：字符、颜色、构图、可识别的细节将快速通知用户并支持文本形式中给出的消息。

这是一个数字代理商的登陆页面，通过一个由篮球运动员代表的主页横幅形象迅速传递其准备迎接最高的商业挑战和目标的信息。

还有一个例子是为LunnScape创建的主题插图。LunnScape是一家专门从事景观设计和植物护理的公司。这些艺术品旨在用于营销活动，社交网络和网站。经过一系列的实验，设计师想出了柔和色彩和笔触轻盈的图形。其中一个插图的特点是人们忙于园艺，而第二个插图反映了公共空间的风景与景观设计。你看，通过这样的设计，插图立即与景观主题建立了宝贵的联系。

3.图形为Web或移动界面中应用的副本提供有效支持

正如之前提到的，在许多情况下，图片可以作为一种比复制更通用的通信工具。但是，也有一些陷阱需要仔细考虑。感知的速度并不是我们唯一需要的东西：人们可以超快地感知插图，但如果他们传输的信息不清晰或者可以被双重阅读，速度将无法带来积极的用户体验。

快速捕获导致错误理解的图形不能被定义为识别，它只是被快速注意到。识别不仅意味着速度，还意味着应该给你用户指示正确的动作或传达正确的视觉元素信息。因此，请立即清除视觉隐喻以免造成误解或错误关联。

这里是一个金融服务网站的例证，帮助养老金领取者有效地管理他们的钱并增加他们的储蓄。艺术作品会立即传送信息，使其与标语保持一致。 这样，当布局中的所有元素协同工作时，网页看起来就很吸引人。

4. 插图是一个很好的创造性故事的检验工具

简而言之，讲故事是将不同信息块合并为一个故事的方法，使它们更让人印象审核，并在各部分之间建立牢固的联系。 这种方法在营销和用户体验设计方面表现得非常有效。

这是为我们最近的佛罗伦萨项目设计的插图集。它是一个可以让自由护士在线寻找工作的平台。设计师创造了原始角色，展示故事，设置氛围，发送信息或以与平台的情绪、语气和声音相对应的方式呈现优势。

5. 插图在设定情感诉求方面具有重要的力量

毫无疑问，我们都是情感动物。谈到情感设计，AarronWalter说：“许多网站和应用程序正在创造更好的体验。他们重新划分需求的层次结构，包括一个带有快乐和愉悦色彩的新顶层。如果界面可以帮助你完成一项关键任务并让你感到非常愉悦，那是不是很棒？是的，的确是这样！这将是你向朋友推荐的一种体验; 这将是一个值得传播的想法。”

这就是你可以利用插图实现的一些有效的事情。你投入其中的一切 – 线条、形状、颜色、面部表情、曲线动态 – 都会对点燃情绪产生重大影响。通过研究用户行为和影响情感吸引力的因素，设计师可以将插图作为一种强大的工具，将经验与用户情感从最初的互动相互连接。

Kiddy的这个登录页面的设计概念让保姆雇佣变得非常简单。可爱正面的元素在充满趣味性的插图中扮演关键角色，为用户传递信息和情绪。在用户开始阅读服务之前创造所需的氛围，并为所有页面提供独特的外观。

6. 定制图形设计为美学满意度奠定了基础，从而增加了项目的可取性

通过数百次关于“功能优先”主题的讨论和论证，人们对美丽和喜悦的自然渴望依然存在。当然，实用性和可用性是任何界面的基础。可取性是通过美观可爱的外观让人们注意到你的产品，感受使用它的乐趣，并希望再次使用它。插图则是一种经过精心检查的方式来实现这一目标，因为它们可以添加美感，风格，优雅或任何您想要添加到界面中的内容。

这是一个网页设计概念，为旅客提供简单明亮的预订服务。它在页面左侧使用大幅的3D插图，而右侧部分则突出搜索住宿的形式。

7. 插图令人难忘且引人入胜。因此它们在提高品牌知名度和可识别性方面有不错的表现

与文本相比，图像在长期记忆中具有更好的粘性。当图像提供信息时，影响将会增长，与目标受众的期望一致的设计、布局使得有插图的UI设计可以非常有效的增加网站或移动应用程序的品牌性。这就是插图被广泛用于引导流程的原因之一。

这些是Perfect Recipes应用程序的流程引导图。在交互开始时，用户设定他们想要实现的目标，例如减轻或增加体重，保持健康的饮食等。此外，用户可能会标记他们不喜欢的成分，以便应用程序不会显示包含它们的食谱。插图以明亮和原始的方式可视化目标。

这是另一个使用流程引导的例子。有趣的人物和插图成为app游戏化的关键元素。集成到UI中的原始吉祥物成为通信和交互的核心元素，在不同的状态下，它向用户传递不同的消息，使交互更加用户友好和拟人化。

8. 数字插图可有效创建动画短片和互动元素，使交互生动优雅

越来越多的网站和应用程序在用户界面中应用动画。通过这种方式，不仅可以增强可用性，还可以增强情感吸引力和UI外观的优雅。这也是为什么我们经常看到动画徽标，图标甚至复杂的动画插图。动画能为创意、消息和情绪带来更多表现力。更重要的是，应用动画视频也是热门且有效的趋势之，插图可以获得更高水平的开发和与用户的沟通。

这是Whizzly动画徽标的示例。Whizzly是年轻人展示人才和分享创意项目的社交网络。应用于徽标及其动画版本的艺术手段使其看起来令人愉悦，令人难忘和情绪化。

9. 基于有趣视觉隐喻的插图使设计独特且引人入胜

与艺术一样，在设计中，隐喻是吸引用户并使他们考虑所提供的想法的有效方式。插图使设计师能够处理与特定目标和用户相对应的独特隐喻。

这是一个约会应用程序的登陆页面的概念，让人们找到他们完美的一对。插图展示了主题制作明亮的视觉触发器，并有效地结合了人们联合设备的形象。

平面设计师面临的一个关键挑战是寻找原始风格 – 而这正是激发这件艺术品隐喻的原因。在平面插图的文章中，平面设计师分享了如何抓住这条金鱼的实用技巧，并在标题插图中应用了相同的比喻。

10. 人们快速注意并解码图像，因此明智地使用插图可以使交互更简单，更快捷

图标和插图等自定义图形可以成为界面清晰直观导航的重大改进。在许多情况下，用户界面中的基本交互通常会花费几秒钟，这点非常重要，并且这也是将具有视觉标记的的内容转换为图形的基本原因。但是，请记住：如果图像可能被错误地解码或根本没有解码，他们则需要额外的复制内容支持。而用户测试将有助于找出哪些元素绝对清晰，哪些元素需要用文本解释。

以下是为移动照片编辑器创建的原始图标Cuteen：支持文本提示的优雅插图可帮助用户快速轻松地处理内容。

要考虑的要点

当然，现有的认知方案不可能满足用户的任何要求，但在图形设计方面有一些必须考虑的要点：

•目标受众（身体能力，年龄，文化背景，总体发展和教育水平）

•典型的产品使用环境

•全球或本地产品差价水平

•所选图形和隐喻的识别水平

•图形提供的分心/集中程度

所有提到的要点都涉及人类认知能力并影响视觉数据感知的质量。对于设计师来说，重要的是要记住：仅仅让用户看到布局的元素是不够的，让他们认识到这些图形的意义并快速理解它们所传递的信息是至关重要的。

原文地址：Mockplus

作者：Grace

截止到目前为止，越来越多的设计师将动画作为一种功能元素融入其中，以增强用户体验。动画不再只是为了娱乐；它是完成交互的最重要工具之一。

然而，动画在设计中只有用在合适的时间和地点的时候，才能够增强用户体验。好的用户界面动画是有目的的；它们有意义，而且功能性强。在本文中，我们将讨论功能动画在UX设计中的作用，并了解何时将动画运用到设计中。

什么是功能动画？

功能动画是嵌入在UI设计中的一个微妙元素，它是该设计功能的一部分。并且它强化了设计，具有非常明确和合乎逻辑的目的，包括：

1、减少认知负担

2、防止变化迷失

3、在空间关系中建立更好的联系

动画使用户界面栩栩如生。在以用户为中心的设计方法中，用户是主要焦点，用户界面需要直观、快速响应和人性化。功能动画就可以帮助你实现这些目标。

功能动画在用户界面设计中的作用

经过深思熟虑和经过测试的功能动画有可能实现多种功能。

用户操作的可视反馈

良好的交互设计提供反馈。这种反馈会让你觉得你正在与屏幕上的元素进行交互，并演示这种交互的结果（不管它是否成功）。

用户界面元素，如按钮和控件，即使它们位于一层玻璃的后面，也应该是可感知的。

按钮和其他活动控件应通过视觉反馈响应用户操作。（图片来源：Behance）

当您需要告诉用户操作结果时，视觉反馈也很很重要。在操作未成功完成的情况下，功能动画以快速、简单的方式提供有关问题的信息。例如，当输入错误的密码时，可以使用震动动画。这样很容易理解，因为晃动是一个普遍表达“不”的含义，就像摇头是人们相互反馈的方式。

用户看到此动画并立即了解问题。图片来源：thekineticui

目的

确认系统已收到用户的操作。

确认（或拒绝）用户的操作。

系统状态的可见性

作为尼尔森的可用性的10大法则之一，系统状态的可见性仍然是用户界面设计中最重要的原则之一。用户希望在任何给定时间知道他们在系统中的当前位置，并且应用程序不应该让他们猜测，系统应该通过适当的视觉反馈告诉用户发生了什么。

数据上传和下载得到过程是使用功能动画的最好时机。例如，下载进度条，给用户实时反馈和心理预期。

有趣的动画也会分散用户的注意力，并使他们等待更长时间。

功能动画还可以用于吸引用户注意应用程序中的重要状态变化，例如来电：

或收件箱中的新电子邮件。

目的：

提供系统状态的实时通知，并使用户能够快速了解正在发生的事情。

视觉提示

用户在第一次使用某个应用程序时，通常需要一些帮助来理解如何使用该应用程序。特别是含有不熟悉或者独特交互方式的界面（如手势操作的界面），这一点尤为重要。如果没有帮助，用户可能会对如何与应用程序交互感到困惑。

当涉及到教用户如何使用你的UI界面时，你应该提供一组视觉提示，来传达哪些是可能存在的交互。这种功能性动画驱使用户注意到可能存在的交互。

视觉提示可以让用户了解将要发生的事情。例如，可以在iOS相机应用程序（iOS 7之前）中找到功能动画，它为用户拍摄照片做准备。

==相机应用程序中的快门图像===

或者，通过演示设计中的某些功能是如何工作的，这种方式可以让用户采取进一步的步骤。同时，视觉提示也可以提高产品的可用性。

用途：

告诉用户即将发生什么给用户足够的心理预期  帮助用户定位自己在界面中的位置  告诉用户他们怎样做才能与屏幕上的元素进行交互

导航过渡

导航过渡是应用程序中状态之间的转换，例如，从主屏幕到细节屏幕。通常默认情况下的状态变化是界面之间很僵硬的切换，这样很难区分界面之间的层级关系。功能动画可以帮助用户更好的理解；它可以在导航上下文之间平滑转换，并通过状态的转换创建可视连接来解释屏幕上的变化。

导航过渡可以是分层转换（亲子过渡）或同行过渡（兄弟过渡）。当用户探索应用程序的更深层次的时候，将使用分层转换，这些应用程序是当前（父屏幕）的子级。运动突出显示从父母到子女（子元素）的移动，同时加强父屏幕和子屏幕之间的关系。

同行过渡发生在层次结构的同一级别的元素之间。例如，当用户浏览选项卡时使用此动画。

每个标签的内容和表面保持在同一级别，动画只是引导视图之间的焦点。

在这两种情况下，功能动画都可以帮助眼睛看到新对象在其显示的位置以及隐藏对象的位置（并且可以再次找到）。它提供了视觉提示，使交互更容易被发现并强调已发生的事情。

用途：

定义屏幕和元素之间的空间关系  通过帮助用户理解页面布局中刚刚发生的变化，避免出现意外的过渡

品牌塑造

通常情况下，有几十个应用程序具有相同的功能并完成相同的任务。他们可能都有很好的用户体验，但是人们喜欢的东西不仅仅是提供一个良好的用户体验。用户更希望与他们建立情感联系。

品牌动画负责参与品牌塑造。它可以作为营销工具-支持公司的品牌价值或突出产品的优势-同时使用户体验变得令人愉快和难忘。这种方法可能不是以用户为中心的设计，但它有一个功能性的目的。为了成功，品牌动画应该支持体验的连续性。

用途：

娱乐用户，为设计带来同理心和乐趣  创建产品的标签; 帮助用户与产品建立关联，增加品牌认知度

如何找到平衡

有用和炫酷的动画之间的平衡在哪里？花时间仔细考虑动画何时恰当的何时是不恰当的非常重要的。

动画的目的

动画应该是有目的性的，不要为了动而动。当一个动画不适合某个功能性的目的时，它可能会让人感到厌烦，尤其是当它减慢了一个没有任何动画的过程的时候。

请记住，用户出于某种目的访问网站或启动应用程序 – 我们需要在短时间内向他们展示他们所希望看到的内容。因此，当决定在应用程序中使用动画时，只有当动画有意义并且不会干扰用户成功完成他们想要做的事情时，才加入动画。

时刻牢记

即使是好的动画，如果使用过度也会很烦人。在设计动画时，问你自己一个问题：“动画在第100次使用时会很烦人吗，或者它是普遍清晰和不引人注目的吗？

原型和测试动画

在将UI动画添加到你自己的工作中时，与实际用户进行迭代原型设计和测试是非常正确的。原型设计是能够表达你打算如何在设计中使用动画的最佳方式。如果你使用交互原型，你将得到一个清晰的设计描述，关于怎样工作和应用程序的缺陷隐藏在哪里。通常，这会导致频繁的返工，因为动画的外观与感觉不同。因此，经常迭代和快速迭代！在最微小的细节上多次尝试和重复都会使你的动画很棒。

结论

如果你要在设计中运用动画，那么应该好好的创造关联，并且只有当动画是设计过程的自然组成部分时，这才是可能的。

作者：Coldrain1
个人主页：https://i.ui.cn/ucenter/310170.html

在本文中，我们将分享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）

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

源链接

吸引老年人作为用户群体的一部分，这曾经被认为是互联网世界中最后需要考虑的事情。但是，这种罕见的情况正在成为现实，我们见证了老年用户群体持续不断的增长，他们经常登录、注册和订阅。Statista的记录显示，光是在美国境内，2016年就有64%的老年人在线，这个数字在2013年的时候只有4%。

尽管数量在增长，老年用户群体在人口统计学中，仍然属于用户体验的不毛之地。如果用户体验从业者不将老年用户纳入考虑，就会疏远这个整个群体，把他们从在线体验中排除出去：这情况可不乐观。

通过加大UI元素、使用颜色强调重要内容、进行适当的用户测试，遵循这些最佳实践，可以做到为老年用户定制网页设计。

保证界面适合阅读

文字：越大越好

首先要考虑文字和屏幕本身的尺寸，确保用户界面清晰可辨。不像我们UX设计师，并非每个用户都有高分辨率的显示器，未必对眼睛友好。对于60岁以上的用户，小号文字真的会让人抓狂。如果你想要定位老年用户群体，界面正文字号不要小于12磅。

有时候用户会选择调节浏览器本身的字号。但是多数时候，这样只是放大了整个页面，这就会产生功能和显示问题。要避免让用户去手动设置字号。

而且，要把信息分解为更小的部分，通过留白分隔，就不会在局促的空间里塞进大量文字，使用户感到眼花缭乱。

调节颜色和对比度达到最佳可见性

当设计师忽略颜色规范时，用户体验就会崩塌。界面中的颜色和对比度帮助用户确定哪些元素对应哪些任务，掌握自己当前处在网站的什么位置，并且知道哪个词语可以通向特定的页面。比如说，不带链接的文字就要避免使用蓝色——深蓝色是网页链接约定俗成的标准用色。

而且，如果未访问和已访问的链接在颜色上没有区别，他们可能很难回到之前去过的地方。这对所有用户都有影响。不过，老年用户更难记住自己访问过网站的哪些部分，可能会浪费时间反复操作，然后又回到原点。

使用用户熟悉的语言

Nielsen Norman Group的Jakob Nielsen指出，不是所有设计师都会阅读自己设计出来的网页，因此就不会去思考人们阅读它所需的努力。

为老年用户设计网页时，要考虑展现信息的方式，他们听力不佳或者视觉损伤。WCAG提醒我们，内容必须可被感知，具有特殊障碍的用户仍然要能获取到这些信息。如果视频或音频的内容对于试听障碍者的体验至关重要，就要额外提供副标题或字幕。提供朗读功能，对于需要别人把文字读出来的用户至关重要。你可以尝试使用一个文字转语音（TTS）程序软件，比如说Ivona（它很快会成为Amazon Polly）。

还有，要知道语音学、俚语和双关语对于特定年龄的群体是一项挑战。俚语会破坏用户体验，所以得确保文案迎合受众。避免使用那些会让用户迷惑的行话，坚持使用能够准确表达含义的语言。同理心地图可以帮助你写出对特定目标群体有效的内容。

易于点击

55-65岁的年龄段，手眼协调和运动机能开始衰退，这就使得操作用户界面变得更加困难。对于运动机能逐渐衰退的用户，鼠标是一个特别的问题，因为点击界面目标、在界面元素间移动、响应屏幕上的某个目标，都十分困难。

按Smashing Magazine的Ollie Campbell所说的，要应对这种障碍，就要确保可点击的UI元素足够大（对角线长度至少11mm），并且与其他元素之间距离要足够大（至少2mm）。你也可以尽量减少鼠标点击，如有必要，可以只留一个可点击的元素。

对于运动机能损伤的用户，滚动条同样会导致可用性问题。按住细长的滚动条并执行滚动操作非常困难。而且，对于有阅读障碍的用户，滚动会影响他们的体验，因为在界面移动之后，他们要持续不断地重新找回之前阅读文字的位置。

简化滚动条——无论是外观还是感受。给用户多一些选择（点击滚动条箭头、点击页面自身的可拖动区域、拖动滑块、使用鼠标滚轮、或者使用键盘的上下键）。不过总而言之，还是尽可能避免产生滚动吧。

所幸的是，电脑键盘和移动触摸屏能帮助老年用户跟上时代。因为手指点按的机能退化得比其他机能要晚，许多老年用户更擅长使用电脑键盘和触摸屏。

使UI模式易于记忆，帮助认知

对于任何想要通过UI来完成任务的用户，他们都需要尽可能快和简单地从A点（入口）到达B点（任务完成）。所以清晰的UI导航如此重要。

但对于老年人，UI导航系统还需要更直接地为用户流程提供方便。为什么？虽然我们的长期程序性记忆（记住如何做某件事）能力不容易随年龄增长改变，但我们的注意力在衰退，短期的情景记忆会受损。这就意味着，我们学习新概念的能力会有极限，比方说学习操作一套为年轻人设计的新界面。

应该尝试使用标准的图标和导航模式，例如顶部通栏，能够一眼看到所有选项，或者面包屑导航来引导用户通过几次点击前往特定的位置。这有助于用户习惯各功能所在位置，还有如何在网站上找到它们。

不要隐藏重要信息。保留面包屑导航来引导用户前往网站的相关区域。

还有，要避免出现非必要的链接。这么做可以增加用户的信任，鼓励他们点击链接，前往网站或应用中的重要位置。

了解你的用户基础

要使用户体验更愉快，应该要有一套捕捉目标用户需求的框架。但是，不同的用户成长在不同的科技年代，设计师们永远无法取悦所有年龄层的用户。

怎么解决？做用户测试。

即使设计师们遵循这些为老年用户设计的准则，但真正了解某人如何操作网站的唯一方法，就是做测试。对于老年用户，考虑使用边想边说的方法做定性分析，通过测试，你能看到受试者屏幕上发生的一切。这有助于增进你对于用户认知过程和物理限制的理解，并且确定UI系统的哪些部分需要再调整。

老年用户最大的一个痛点是难以看清和阅读屏幕内容。视觉或听觉障碍，意味着某些老年人要非常费劲地解读网站和移动设备上的内容。通过对你的界面设计进行真人测试，发现真实问题，你就会更准确的知道解决方案效果如何。

考虑使用原型工具来进行用户测试，例如Justinmind，可以实时演示你的设计。这能让你获得即时反馈，知道为何和如何解决设计上的问题——这是定性用户测试背后的原则。

而且，为什不再更进一步呢：把老年人受试者加入到设计过程中，让老年用户掌控自己的在线体验。

总结

老年用户群仍然有巨大的增长潜力。但就像其他任何用户群体一样，老年用户需要我们设计出符合他们需求的体验。随年龄而产生的局限意味着，数字科技中一些常规的吸引用户手段对老年用户不管用。

识别出老年用户的这些糟糕体验，可以避免设计师在设计中犯这些错误。用户测试是很安全的方式，确保你的用户得到他们所需的东西。把老年用户纳入到界面设计过程中，用户体验绝不会差。

作者信息：Emily Grace Adiseshiah

原文链接：http://usabilitygeek.com/ux-design-thinking-senior-citizen-user/

译文链接：http://colachan.com/post/3559

图中可以看出5.5英寸以上屏幕可以称Phablet，7英寸以上就是Tablet。这次案例以Tablet设备为主，Phablet设备为辅进行体验设计。

在我们的社交平台上，用户消息在多个终端设备传递中，产品功能只是在原有基础上简单粗暴放大而已，那么大屏手机/平板电脑存在的价值化为乌有。

案例分析：这种结构化消息是目前国内主流的一种设计形态。

1.以消息为主的结构化设计:

不论是资讯分享、音乐分享、视频分享不以内容区分而设计，都在一种载体内呈现，这种结构虽普适性强，可以兼容多元化的场景。但因设计形态统一，导致在内容辨识度上也有所下降，内容设计上没有各自特点，用户在浏览过程中容易忽略内容本质。

2.信息内容碎片化:

用户可以获取到更多信息，但因内容平均分布，所以画面不够聚焦。我们可以把这些内容信息看成点的组合，点的基本属性是瞩目性，能形成视觉的中心.当画面中有3个以上的相同大小点时，画面就会显的凌乱。当画面有不同面积的点时，较大点会引起人们的注意 ，依次会关注较小的点。

3.以标题文字为主进行快速浏览：

在浏览过程中用户通常以抓取关键词为主,快速吸引到下一级信息。而图片在大部分情况下会有被缩小，裁剪，因图片尺寸较小，从图中获取不到更多的信息。
在原图中可以清晰的看到电视剧领衔主演的演员，这也是吸引用户的关键因素之一。但被缩小裁剪后，必须借助文字才能获取到关键信息。

这种以消息为主的结构化设计在iPhone7Plus设备显示，相同信息可显示约4-4.5条左右,有效提升屏幕利用率。但如果直接放大或拉伸到大屏幕中，这种设计体验显的苍白无力，没有充分体现大屏幕沉浸感、聚焦、画面感的优势。

1.以内容为主进行设计：

用户会更加关注内容本身，不同的内容采用不同图片的尺寸和排版，有利于用户快速区分和记忆。

2.以图片为主进行快速浏览：

首先图片消费已成为阅读消费中的一个大类，比文字而言，图片更直观，更具有视觉冲击力，也更能适应现代社会的快节奏。图片对于文字的诠释作用帮助个人加深文字理解和形象记忆，提高阅读的有效性和趣味性。一张图片胜千言万语，可以有效传达情绪，迅速和用户建立起共鸣。

3.比例结构：

从布局结构上尽量保证原始的摄影图片和视频比例不被过度裁剪。Flickr的一组数据显示，随着iPhone很大程度上替代单反成为主流拍照设备，4:3和16:9的图片数量占比追上了传统摄影的3:2。而16:9更接近美学比例，黄金分割。

4.突显内容，降低信息密度：

使用负空间让重要内容吸引用户的注意力。很多人都说设计师这样会浪费屏幕的空间，但是留白本身就是设计的基本元素之一。这样更专注内容展现，通过放大内容，降低页面信息密度，内容读取更加舒适。

方案场景应用：

用户可以快速辨识出内容类型，画面有了聚焦元素，而不是满屏的文字，界面赋予了感染力和活力。但如果用户快速转发了很多内容时，在兼容小屏设备时，屏幕利用率会有所下降。在iPhone7Plus设备上，同样大小的信息在一屏内展示2-2.5条。用户需要在纵向滑动多次才能抵达下一个信息类别。所以针对提高屏幕利用率上进行了方案2横滑设计。

方案场景应用，引入横滑设计

打破屏幕界限，减少跳转，便于用户获得更多信息，在这个系统的基础之上，构建跨平台和超越设备尺寸的统一体验。

总而言之不去追求那些奇异的事物，而是从人们所“共有的特征”来提取价值，用最自然最合适的方法来重新审视，重新设计。

Via: ISUX