滑动标志的网页设计(网页滑动按钮)

关注微信公众号平台：“CGWANG实训中心”，全球的CG爱好者都在这里，行业新闻齐分享，专业教程随心学。

那么，对于即将到来的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的完全控制

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

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

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

转自：阿里妈妈MUX（ID：alimama-mux）

作者：才谦

更多UI作品内容请下载绘学霸APP和关注微信公众号

https://itunes.apple.com/cn/app/hui-xue-ba/id1004304139

ios下载链接

https://210.21.67.93/update/cgxueba.apk

安卓下载链接

“看到这的都是真爱，关注我们的微信公众号“CGWANG实训中心”，是我们最大的动力，么么哒~