网站制作，不可不看的2018UI设计趋势

设计师需要借助设计来抓住用户的注意力，掌握近期的设计趋势就能更好的抓住客户的心。2018年的设计趋势将继续延续2017的设计形式，同时也增加了许多新的方式，接下来，我们就看一看2018年的UI设计趋势。

先来看一下2018UI设计趋势大纲：

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

扁平化始于iphone的官方UI设计规范（当然还有很多潮流也是iphone引领的），后来android开始跟风，继而所有其他产品几乎都开始了扁平化的设计。对于扁平化设计相信大家已经很熟悉了，概念的核心意义是：去除冗余、厚重和繁杂的装饰效果，倡导简单、清晰、空间、留白等，突出核心的设计元素。目前很多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度的查看商品，刺激你剁手的欲望。同时动态视频配合banner的js转场效果，可能让访客更加能够沉浸在网站的体验中。

另外一些网页的首页也会放置高质量、有故事性的视频，会让你的网站与众不同。一般访客看到这样的设计，第一感觉就是这家公司有实力、高大上，真可谓装逼最高境界！

十、响应式设计

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

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

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

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

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

总体来说，这些领域对于设计是而言都是比较新颖的，所以设计师们要时刻保持学习的心态，跟上时代的步伐，设计出交互性强的产品。