你不想错过的10个2017年UI设计流行趋势

几乎每一年，UI 的设计风格都在发生变化。例如扁平化、手势、微交互、卡片等等那些过去两年让众多设计师踊跃尝试的设计，总会有一些好的设计想法在改变着你的设计习惯。

那么，对于即将到来的2017年，又有哪些设计可能会占据设计师的视野呢？

小编最近在网站creative bloq 以及 vandelay上搜罗到一些信息，整理了当下10个 2017 年的 UI 设计趋势的案例，希望对你有所启发。

01 - 渐变色的运用比例将进一步提高

2013 年开始盛行的扁平化设计中，强调简洁的功能界面区分，抛弃多余的元素。至今，这种设计风格依然有着借鉴的价值。

不过，随着扁平化的流行，它的弊端也开始显现出来：一时之间几乎是所有的平面设计都在强调扁平化，这使得它们趋于雷同，看上去毫无个性。

想要在扁平化设计中，加点不一样的元素让它更为生动，渐变色不失为一个好的选择。

Spotify 的网站，就是一个极好的例子。它的主页面把 2016 年最流行的粉色和蓝色糅合，产生了双色渐变，看起来十分绚丽。

再往下拉，就变成了橙色的渐变色，显得十分有夏天的感觉。

虽然此前设计界对于 Instagram 的扁平化渐变色 logo 的设计褒贬不一，不过，它也意味着一种设计的趋势：渐变色能让设计看起来更活泼有趣，毫无疑问，它是 2017 年的十大设计趋势之一。

02 - 长滚动式设计

“滚动”，并不算是一个新的设计趋势。

在过去的几年内，滚动式的阅读体验在小屏幕设备上的发展尤为突出。想想你手机上的 App，一定有很多采取的是这种滚动式设计。

National Geographic

正如你所看到的这个国家地理的官方网站一样，这种滚动设计的好处非常直白：它提供给用户一个更为流畅的浏览体验，以一个线性的方式，引导用户在短时间内不受打扰地阅读到更多的内容。

Riding the new silk road by New York Times

现在，“滚动”从小屏幕越来越多地转向大屏幕设计。也有很多的设计师在研究大屏幕上的“滚动”机制如何处理，才能带来更为卓越的使用感受。

在 2017 年，这种长条状的滚动式网页设计也许将成为主流。

03 - 插画的运用

插画可以让设计具有“性格”，比起传统的摄影，它是一种直观的与用户进行情感交流的视觉语言。

对于品牌来说，没有什么能比用插画来塑造品牌形象、传递品牌性格还要简单有效的方式了。作为一种有趣的情感表达，插画可以是量身定制的，因而它能帮助获得用户的信任，让人感觉更为亲切。

Dropbox

Dropbox 和 Payplan 都是不错的例子，它们的首页以简笔画的形式很直观地表达了产品的几大功能，能够帮助用户快速理解。

payplan

此外，插画的实现途径并不唯一。它提供多种创意方向的选择，不同的插画也可以传递不同的情绪。比如简笔风的手绘看上去单纯可爱，精细繁复的笔触可以产生一种“高级”质感，当插画与摄影结合，则给人一种虚实难辨的奇幻感。

04 - 隐藏菜单

隐藏菜单并不是什么特别的新发现。长久以来他都被隐藏在幕后，现在设计师们终于将他们展现在了台前，让我们尽情期待吧。

不要被充满屏幕的画面所蒙骗。虽然移动设备的桌面不亚于台式机，但我们也可以为了节约用户的空间来将一些功能隐藏。

需要使用的功能有很多，我们可以利用滑动菜单栏，将必要的功能显示，不必要的功能隐藏起来。越来越多的导航菜单都在做减法，让显示的功能尽可能的变少，只有特定的需要使用的选项还保留在上面。

05 - 更加频繁的卡片式设计

卡片型设计，对于在移动终端上查看网页十分友好这点已被证实。实际上，越来越多的手机网页已经开始逐渐尝试使用这种方法。

将内容分割、调整内容放置在合适的地方、与相关联的信息放在一起表示等等这样的想法用卡片式设计是十分方便的。另外，在使用卡片型设计时，用户只能选择特定的动作，所以设计师可以专注于你觉得必要的内容上进行设计。

由于卡片型设计，用户可以上传属于自己的多媒体（例如Twitter的动画或图片等等），可以为你的网站创造更多的流量。

06 - Touch ID的完全控制

TouchID初登场时，仅仅被用于解锁。2015年时Apple在ApplePay上展现了他革命性的使用方法，才让这种功能的重要作用的来龙去脉变得明显。

在那年年末，iOS8上的第三方应用（如Dropbox或Amazon等等），纷纷表示接受TouchID的指纹认证功能。

手动输入密码，事实上已经成为过去。在网络飞速发展的现在我们需要更加简单快捷的途径。虽然这一技术已经进化，我想在接下来的一年，这一技术也将会得到更加飞速的发展。

07 - 娱乐和个性化

正如之前所说，文化是界面设计变更的重要因素。接下来让我们来看一些具体的例子吧。

一个新的APP，将保守的要素用大胆的配色，有趣的面板和俏皮的附件所取代，将会表现出更具有娱乐性的效果。不管是这里还是那里，都利用了有趣的信息或独特的对话框。

这也意味着这个APP成了一位表演者，APP更加个性化，一如友人般的存在。

虽然个人软件通信已经是老物了，但现在也是打到了前所未有的完美状态。让我们来看看Microsoft的OFFICE助手工具Clippy吧。Clippy比助手和朋友更加麻烦，但他现在已经成了在互联网上流行的一个有趣的故事了。

在如今科技高速发展的现代，我们需要一个能够恰当的安排我们的工作、时间或需求的软件。太过复杂的技术在我们的日程表上可是没有位置的。

08 - 精挑细选的配色

「少即是多」这个概念，已经独占鳌头。所以设计师无论何时都必须保持简洁，尤其是在于颜色打交道的时候。让我们来看看这款时尚的APP设计吧。你瞧，无论是哪一种颜色，都采用了极简的设计方法。

与华丽强烈的颜色不同，适当的柔和配色也许并没有引起足够的重视。但这并不是说有必要变更你的品牌颜色。保持优雅专业的氛围，让我们再来使用你所选择的颜色。

09 - 原质化设计

原质化设计最初是在2014年Google上发表的较为新颖的视觉语言。一经发布便马上在互联网上流传开来，对于移动终端设计来说是革命性的发现。

相信经过2年的沉淀，在2017年会有更多优秀的APP或网页设计利用简约的效果来表现出原质化设计。（合理的层次感与适当的分割，以及精挑细选的动效等等）；同时原质化设计与常年被使用的卡片化设计也有着密不可分的关系。

10 - 打破网格设计

对于大多数设计师而言，网格一直以来都是设计的基础，它能够保证一致性、平衡性和某种节奏。

此外，一个用户很熟悉的网格，也代表着一个不会出错的选择，起码用户在看到这个设计的时候，可以不用指导地、下意识地去使用网站或者应用程序。

然而，网格也意味着限制。在一个有限的网格内，富有才华的设计师，很难去完整地表现他的天马行空。于是，有些设计师正在尝试突破传统的数字体验，打破网格。

Red Collar Digital

Red Collar Digital 的页面以云为背景，前景是滚动式的图文内容，没有网格的限制，显得清新且自由。

SERGEY MAKHNO Architects

无疑，这种无网格的创造性设计可以充分发挥设计师的奇思妙想，让网页看起来更加灵活自由。不过，这种设计搞不好也会导致一种缺乏秩序的混乱感。

值得注意的是，无论是怎样颠覆性的无网格设计，用户的体验永远是第一位的，它的所有接口，都应该是用户友好型的。

最后，相信2017年的趋势可能并不止这些，也可能会改变，期待下次分享吧~