2018 UI + 交互 流行趋势(案例)汇总

一、UI设计趋势

设计趋势往往会受到当今主流媒体，技术的发展，时尚趋势等等影响，设计趋势一般是慢慢形成的，循序渐进的。当然，随着时间的交替也会以同样新旧交替的形式变得落后。2018年的设计趋势将继续延续2017的设计形式，同时也增加了许多新的方式，下面我们就一起来扯一扯。

先来看一下整体目录：

一、扁平化、极简主义设计依然是主流

扁平化相信大家已经很熟悉了，概念的核心意义是：去除冗余、厚重和繁杂的装饰效果，倡导简单、清晰、空间、留白等，突出核心的设计元素。目前很多app都开始去除多余的线条，通过间距来拉开关系；去icon化也是一种趋势，开始流行；这些设计行为目的都是为了让用户使用时更为直观和更有目的性，令人满意的审美趋势也让极简的ui设计拥有良好的用户体验。

二、更大 更粗的字体、留白更多

相信你们很多人已经升级了iPhone新系统，随着ios11的发布，新的设计趋势也随之流行开来。如果你熟悉Material Design（以下简称MD）的话，ios和Android在设计上正慢慢的靠近。在扁平化设计中，文字排版影响着信息层级展示的清晰与否，通过文字的字号、字重、间距、颜色等对比去建立出清晰的信息层级，而不用太多的装饰元素。

同样的，Airbnb也采用了粗标题设计。大标题文本包含一组带有图片和描述的文字，文字之间保持较大的留白，看起来它们互不干扰，又不会令界面看上去显得松散，因而带给用户非常轻松的浏览体验。

（对于一些国内的电商App，我个人猜测采用这种设计方式的可能性较小，因为对于这些应用，页面内的位置相对寸土寸金，应该不会用大字体来浪费空间）

三、页面icon的3种设计趋势

1.icon图标的变化，由线转面

自ios7开始，苹果规范了2px的线性图标；到了ios10中，线性图标的选中状态变成背景填充样式；而在现在的ios11中，采用了面性图标，未选中和选中状态只有颜色上的区分，并且图标更加圆润，目前这种设计，国外的app用的比较多，国内还相对比较少见，采用ios10的样式较多。

2.给icon图标加上动效，更加有趣味

目前很多app已经给页面底部标签栏的icon加上微动效，这类动效起到的是画龙点睛的作用，不太会被注意，察觉到会让用户觉得很有趣味，比如阿里的淘宝、菜鸟裹裹…我觉得鹅厂的QQ做的最有意思，底部标签栏icon不仅有微动效，而且icon的笑脸会自动转向看向被点击的一侧，并且长按icon移动时它也会根据手指的方向转动，十分有意思，符合当下95后00后的用户心态。

3.icon的细节刻画越来越重要

目前icon的设计已经不单单只满足于简洁易懂为前提，同时细节的设计也十分重要。在色彩上可以加以渐变，线性图标也可以加以色彩的对比等等，会显得icon是精心设计过的，带给用户的感受也会上一个档次。

四、卡片 投影相结合

ios11中采用了大圆角卡片设计，它不再像过去MD中的小圆角那样呆板，大圆角让设计更加轻快大气。相信大家已经看到了很多卡片都使用了投影这一手法，轻微的、似有似无的投影，不会被用户立即察觉，但是会给设计增加深度，形成层叠的关系，更加醒目，可以更好的抓住用户的注意力。

五、渐变色当然依旧十分流行

渐变色是今年最大的趋势之一，开始于16年，Instagram将自己的logo改变成渐变色，这一趋势便开始流行，国内的app也开始效仿，目前淘宝、QQ等状态栏就是使用自己的品牌色进行渐变。在设计渐变色的时候，要做到色彩的过渡柔和，颜色明快，避免生硬，可以有效的提升用户体验。

六、3D效果正流行

今年C4D大热，相信大家已经感受到了，今年双十一很多商家都使用了3D效果，有的还加上了动效，可以让你全方位、多角度、更加真实的观察商品。目前还不会C4D的设计师们，为了提升你的竞争力，有必要学起来了，毕竟技多不压身。

七、插画风格也是大趋势

插画风格运用的越来越广泛，适用于app当中的启动页、缺省页、banner图、专题头图、弹窗插画、icon等等，运用时要和app的整体风格搭配，有趣味、富有创意的插画会让用户对app的好感大幅提升。

btw，今年比较流行的孟菲斯风格设计，我个人也很喜欢，在地铁站看见各大品牌挂出的海报十分抢眼。该风格色彩比较鲜明、活泼、多采用高饱和色彩，18年估计还会继续流行一阵。

八、交互动效一直很重要

交互动效越来越多的使用在ui设计中，它对于产品设计的作用包含：传递层级和状态信息，好的动效应该是隐形的，以提高可用性为前提，提升体验为目的。它的几点特性：快速且流畅、恰到好处的反馈、提升操作感受、提供良好的视觉效果。

九、动态视频的应用

1.启动页的小视频

一般小视频使用在启动页多用于第一次打开app的场景，对用户的代入感较强，能够很好的感染用户的情绪，但是视频时间不宜过长。

2.由动态图片转变成动态视频

自16年开始流行的动态图片，即：cinemagraph，17年也流行了一阵，一般常见于微信配图，核心是图片中有少量的动态元素，仿佛赋予图片生命，比较唯美和贴近现实。

为了吸引更多用户的注意力，手机banner设计上采用了动态视频进行展现，另外淘宝商品详情页也会放置动态视频效果，方便360度的查看商品，刺激你剁手的欲望。

另外一些网页的首页也会放置高质量、有故事性的视频，会让你的网站与众不同。

十、响应式设计

随着移动端的增长，手机已经超越了pc机作为日常浏览网站的第一选择，Google推出的MD响应式栅格系统，由于人力成本过高，国内大部分网页都没有做，国外采用响应式设计的网站有：Youtube、Spotify、Behance…国内的有京东、腾讯视频等。这种响应式设计确实比较复杂，但是这个趋势会一直继续下去，对于产品、公司而言，还是需要量力而行的进行升级。

十一、VR/AR/VUI是未来的大趋势

众所周知，现在VR（虚拟现实）和AR（增强现实）大火，它俩的核心都是计算机视觉。VR目前在娱乐领域被使用，而AR将会真正影响我们的工作和生活，多用于多媒体、市场营销、教育等方面。

17年春节支付宝的VR找红包，美图秀秀等拍照软件的功能普及，这类交互方式都是对用户的代入感比较强烈，体验感较好。

从Siri、Amazon echo、Google home、小冰等等的发展来看，VUI（语音用户界面）与GUI不同，属于一个新领域，将基于“对话”进行设计，呈现给用户的主要是说和听。VUI是最自然也是最省事的交互方式，但是不会完全取代GUI，而是更好的协作。

这些领域对于设计师而言都是比较新颖的，也是发展初期，我们需要时刻保持学习的心态，提升自己的竞争力。

二、UI设计趋势

全感官体验

All-sense experience

趋势简述

人有五感，强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态，而更真切的感知信息是用户体验升级的客观诉求，全感官体验能更好的打造“身临其境的沉浸式”体验印象。2018年我们将会看到更多以虚拟+实体组合的全感官体验方式，用户在交互过程中获取更多维的与真实场景匹配的信息反馈（听觉、嗅觉、触觉等），加深对信息的理解和体验记忆。

运用案例

全感官体验目前在游戏领域有了较为广泛的探索。《星舰指挥官》一改沿用十几年的鼠标，键盘游戏方式，直接以语音驱动进行游戏，同时搭配VR眼镜，真实模拟了指挥官的科幻工作场景，用户可以使用更随意更生活的语句，来实现更多控制动作。

星舰指挥官语音控制游戏

全感官体验在虚拟现实场景中应用也很多。如Hardlight Suit力反馈背心主打触觉模拟为主的全维度身体感知，这款装备配有16个振动点和触觉传感器，能够为用户提供沉浸其中的虚拟现实体验；VRgluv能让我们感受到与任何目标交互的不同方式，通过力觉反馈技术，对手指的模拟动作以及触感进行真实的还原，这样无论是棒球、射击还是射箭，甚至是手指轻划过头发丝，都可以获得身临其境的沉浸感。

Hardlight Suit力反馈背心

VRgluv

不止于“屏”

Not be limited to the screen

趋势简述

人与设备的交互本质上是与信息的交互，信息的载体本就可以不止于屏。人达成目标的交互介质有更多屏幕外的拓展，更多“类屏幕产品”或者无屏幕产品出现，运用投影、语音、AR/VR等技术，实现人与设备之间的互动。不止于屏这一趋势拓展了用户的可交互空间，丰富了互动场景，使用户可以随时随地获取信息获得服务。

运用案例

Sony Xperia Touch便携投影可实现投影在任何平面，并把这个平面变成可触控的“屏幕”。通过感应探头，你可以在平面上翻动网页、打王者荣耀、切水果等等，所有的操作都如此方便、流畅。

SONY Xperia Touch

Google Assistant可以通过自然的语音交互来帮用户找歌曲播放、找新闻、打电话等等，并且就像一个朋友一样，只要正常地交流就可以。

Google Assistant

Vuzix Blade打破了原来人们对AR眼镜笨重的印象，外型轻薄，和太阳眼镜一般。用户可以通过眼镜上的触摸板来查看天气、打电话、查看消息等等，也可以通过语音来控制。

Vuzix Blade

拟人化／情感化

Personification/ Emotionalization

古希腊哲学家泰勒斯说过“万物有灵”，人机交互体验是一种人机共生的状态，可以看到现在乃至未来，无论是智能设备，机器语音交互将被赋予更多“灵性”。

1.有“情感温度”的设备

Device comes with Emotion and Warmth

趋势简述

越来越多的硬件产品在设计过程中不仅具备满足用户需求的基本功能点，更多开始考虑产品的拟人化和情感化。机器从一个呆板的服务工具，逐渐变成一个有情感温度的陪伴者或服务者。拟人化和情感化的运用从产品的外观、材质、颜色、形象和交互方式（语音、抚摸等）等维度一改用户对硬件产品冰冷僵硬的认知，使其更加贴合使用场景降低用户的心理戒备，产生更多的情感互动。

运用案例

新一代Sony aibo机器狗有着更加形象逼真的外型，它会像真正的小狗一样摇摇尾巴、弯弯腿做一系列动作，宛如一只真正惹人怜爱的小狗。aibo还采用新的AI技术，学习周围的环境，具有更强的适应性，和主人有更多情感化的互动。

aibo机器狗

My Special Aflac Duck是一只毛绒绒具有“心跳”、“呼吸”，能够摇头，甚至可以跳舞的鸭子，它旨在给予儿童癌症患者安抚和陪伴。借助触摸传感器当孩子抚摸它时会有相应的反应，孩子们还可以把不同的情绪卡片（如快乐、悲伤等）插入鸭子胸前，这样它会作出不同的动作、发出不同的声音。这只鸭子的传感器还可以和化疗PICC线连接，陪伴孩子一起治疗。

My Special Aflac Duck

Luka，一只拥有灵动大眼睛的猫头鹰是给孩子准备的绘本阅读机器人。绘本放在它的面前，他就可以快速识别绘本，翻动绘本就可以自动阅读给孩子听。此外，Luka还会和孩子互动，发出笑声，会撒娇，还会根据不同的状态作出不同表情。

Luka

2.更自然的语音交互

Voice Interaction in more Natural Way

趋势简述

想必你对Siri，在线客服这类语音交互并不陌生，那你是否发现现在和你会话的另一端变的越来越“有趣”？在这个“有趣角色”的帮助下，获取信息、获得服务的效率大大提高。更注重对话的场景、角色、上下文关联性；会话的结构、语法、词汇更加贴合人与人的交流模式是语音交互发展的趋势。例如，机器不需要被反复唤醒，更聪明地进行多轮会话，同时，通过AI技术逐渐学习人类沟通过程中的模糊语义，和人更自然的交流。更自然的语音交互能有效降低用户的学习门槛，降低用户对于机器设备的抵触，促使设备更顺畅的融入用户真实使用场景。

运用案例

李彦宏说：“日常生活当中人和人进行交流的时候，不会拉着手才能说话，也不会每说一句话都叫一次对方的名字。”手机百度语音版采用了免唤醒词语音交互，能够不间断聆听用户的语音输入信号，并识别，只需打开语音播报内容模式，直接发出指令如“下一条”“大声一点”便可操控，无需每次都唤醒，使人与机器更自然地交流。

手机百度(语音版)

Nomi车载智能系统，通过机器学习，逐渐能够识别模糊的语义命令。如：给我们拍个合影，Nomi可以自动唤起拍照功能，当和Nomi说车快没油了，它便会导航到最近的加油站，而不再需要输入“帮我查最近的加油站”这样机械的命令。

Nomi车载智能系统

天猫精灵支持类似朋友间的对话，比如“来个开心的音乐”，“今天天气怎么样”，“明天呢”，这种前后相连的简单对话更贴合真实的用户场景。

天猫精灵

人工智能个性化

AI-based Personalized Recommendation

趋势简述

个性化推荐已经发展数年，大数据和云计算的技术日趋成熟，更加精准、更加智能、与个体个性化需求相匹配的人工智能将成为趋势。产品在先前做推荐、关联的基础上，更多的趋向认知、联想、预测等模式。个性化的人工智能在深入理解用户画像和痛点的基础上，将更好地扫除顾虑、建立用户信任、形成“你最懂我”的用户认知，有效提高用户决策效率，制造体验惊喜，提升产品的用户粘性，更有效的促成商业目标的达成。

运用案例

过去，基于数据的推荐，主要以筛选内容、关联内容为主。现在Netflix的个性化推荐系统针对同样的电影海报资源，会分析每个用户的喜好，以匹配个人喜好的视觉风格将电影海报展示在用户面前，增强用户的看片意愿。

Netflix根据个人喜好对同一电影海报做不同风格展示

过去，投资理财用户一般需要面对大量数字和K线进行复杂的分析判断，现在招商银行摩羯智投通过机器学习算法提供理财服务，智能量化、甄选产品、风险监控，为用户决策提供了更加便捷的方式。

招商银行摩羯智投

市面上在线教学多数是依据固定的课程大纲进行学习，Summit Public Schools 个性化学习计划平台强调“以学生为中心”，探索式的学习模式。一方面，给学生更多关于其学习的速度和方向的命令，随时为学生提供其需要的学习资源，另一方面，使教师的行为更像是“教练”，他们通过学术标准监测学生是否按照他们的要求学习。

Summit Public Schools

更高效更低成本的交互方式

More efficient and lower-cost interaction

趋势简述

随着生物识别、语言识别、网络提速、硬件升级等技术的发展，机器对人类的意图、事物的理解、复杂问题的认知越来越深入，更高效更低成本的交互方式将使学习成本降低，操作和反馈的效率更高，一定程度上缩短了体验路径、解放了双手双眼。不断强大的机器辅助能力，有效解放用户的大脑，使人更好的聚焦决策和创意。例如，生物识别技术精度的大幅提升，使支付等身份认证环节前所未有的安全、快捷且便利；语音交互因其可以在同一时间处理多项任务的特性，正在场景化的体验中发挥出巨大的优势；工具类AI帮助用户解决了繁琐的数据分析、处理等操作，使其可以专注于沟通交流、创意创作。

运用案例

2017年，vivo展示了为全面屏智能手机设计的屏下指纹技术，取名为clear ID。这一技术识别速度快，连湿手也可以解锁，解锁更便捷；三星S8采用先进的虹膜识别技术来解锁手机，当你拿起三星S8手机，注视屏幕上的两个圆，手机会扫描你的虹膜，从而识别用户身份，简单高效；iphoneX采用了新的身份认证——FaceID，通过手机“齐刘海”的原深感摄像头的扫描来感知用户的面部特征，记住用户的脸部信息并快速识别。

借助图片识别，我们不仅可以快速知道所查询对象的描述信息，而且还能知道它是什么样的。Microsoft Seeing AI可以利用人工智能的力量，识别、描述所拍的事物，进行认知、理解、转述。人工智能可以认出图中是什么，还可以对其进行描述，甚至对场景进行叙述，这一应用可帮助视觉障碍人群理解这个世界。

Seeing AI

在设计工具领域，设计一张海报，传统的方式需要借助商业图库，花费大量时间和人力来做素材筛选的工作；后来随着技术发展，提供了以图搜索的方式，提高了筛选效率；未来，大数据+人工智能辅助创作将会广泛普及，让人能够把更多的精力聚焦在创意上。Adobe Sensei提供基于云平台的数据服务，图片的查找和筛选会根据设计者的需要实时关联、帮助发现和搜索素材，基于大数据进行建模，预测设计方案，更加高效的辅助创作。

Adobe Sensei

线上线下自然无缝融合

Online-Merging-Offline Service Experience

趋势简述

用户达成目标，获得需求满足的过程本就是基于某一特定场景进行的，用户只关注自己的目标能否更快、更好的实现，并不会过多考虑实现方式本身。因此，围绕解决用户问题这一目标，设计将不再仅聚焦单一触点，纠结线上和线下的边界，更多考虑基于场景的、整体的、系统化的闭环服务体验，通盘考虑用户产生意愿-进行决策-采取行动-达成目标全链路涉及的人工触点、物理触点和数字触点，实现线上线下多触点自然无缝融合，给用户达成目标带来更多的便捷性、易达成感和惊喜感。线上线下数据打通，大数据驱动，AR、VR给多触点自然无缝融合提供了强有力的技术支持。

运用案例

Amazon GO带给用户一种智慧购物体验。线上账户和线下购买行为在入口处自动绑定，并利用摄像机人脸识别确定身份；在线下购买过程中，通过摄像机识别手势、麦克风判断位置，结合货架上的红外线传感器、压力感应装置、荷载传感器确定消费者真正购买的商品，同步到线上购物车；离店后，线上账户自动结账，购物完成。

实景GO通过对“家”场景的3D实景复刻，消费者逛天猫时可以一站式选齐电视、沙发、空调、冰箱、衣柜甚至鲜花、衣架等居家常用的电器家居用品，无需按照类目一一挑选，免去以往漫长挑选、搭配的过程。

虚拟试衣镜，用户走到镜子前被扫描识别后，镜子内会直接变幻出另一个虚拟用户，通过对脸型、身高、体重、发型、肤色甚至身材细节的调整，无限贴近用户本人，点击就可快速试“穿”各种陈列在虚拟货架上的服装。在智能新零售环境里，当用户打开购物app，她只会看到符合自己身材，和自己消费需求最贴合的服装，极大增强购买意愿，有效降低决策成本，缩短决策路径。