2017年网页设计15个流行趋势 | 圣侨资讯

UI可以说是企业数位形象的门面，也是能留住和吸引顾客的关键，随着移动装置和网页技术的发展，UI设计每年都在推陈出新，继扁平化、微互动及卡片式设计之后，2017年又会有什么样新颖的设计手法呢?

我们根据目前所知的设计风格加上网路资讯的汇整，整理出15项2017年可能流行的设计趋势以供参考:

一、全幅或是影片背景

全篇幅的主视觉设计较传统主题横幅更容易聚焦，且能带给用户惊艳视觉和沉浸式体验。近年来在HTML5的影片支援下，也愈来愈多网页使用影片做为背景，相较于静态图，全幅影片拥有更强烈的叙事感。

二、一页长条状或微页式设计

第一页只呈现重要资讯，并如同居家收纳一般将细节内容层层堆叠，结合滚动式操作的长条状网页能够创造更流畅的线性浏览，同时能更秩序性地呈现内容，打造良好的故事性与阅读体验。

三、卡片化设计将会变得更常见

符合桌上型及移动装置的通用设计，能有效分类内容和处理大量资讯，同时也能让使用者快速阅览想看的讯息；另一方面，它能有秩序的呈现文字、图片或影象，并结合翻转等特效让页面产生多元变化。

四、娱乐与个性化

大胆配色、趣味性设计的信息栏或框架， 插图和创意字体的搭配较受使用者青睐。

五、扁平式设计

利用滑动选单栏隠藏非必要功能以简化使用介面，或运用渐变色系营造合理的阶层感，也可配合适当的层次分割、色块及留白达成简易的排版。

六、Cinemagraph图(cinemagraph)的运用

局部动态摄影照片近年来开始盛行，Cinemagraph 一词是由cinema（电影）和photograph（静态相片）所组成，它使图像介于影片、照片之间，意即在同一张照片中，可以看见部分动态影像，也能看见部分静态影像。

可至 Instagram 上搜寻　#cinemagraph　观看更多有趣的应用案例。

七、预览

在网页载入前，先显示出部份预览画面，让使用者愿意花时间等待载入。

八、具手绘感的设计元素

针对企业形象绘制适合的插画，可以呈现出品牌的个性和独创风格，达成更直观亲和的用户体验，在品牌与用户之间建立有温度的视觉交流。

▲取自日本レクシー株式会社

九、电子商务式的响应式设计

结合电商与智慧分析技术，可针对用户的性别、年龄，给予适当的回应，调整内容与排版。举例来说:字体大小、颜色及间距会因用户年龄而变动，也能因应年龄层改变版面配色。

十、微型互动设计

运用slider、Fade制作微动画元素或是细微的转场效果，增加网页趣味性的同时也能给予用户明确的行为回馈。

十一、大面积渐变阴影或滤镜

增强阴影元件和整体视觉形象。

十二、无网格的创意性设计

打破传统框架限制，让设计元素更灵活的跃动在网页之间，但在设计前，请务必考量介面是否方便使用者操作。

▲运用回总览及下方滑鼠卷动等元素提醒用户如何操作。

十三、独创字型

跳脱传统的文字排版，各大品牌近几年也开始使用更醒目、粗体以及精致衬线的字型来增强品牌形象。

十四、导航设计

汉堡式选单虽然已有被滥用的现象，但不容置疑地是随着移动端的发展，它在未来仍是网页选单的主流之一。

但网页设计好玩的地方就在于它的变化性，所以目前也有设计师跳脱汉堡式主流流创造出其它好玩的导航设计。

十五、视差滚动

让多层背景以不同速度滚动，让视觉呈现更加立体。

▲游戏公司Firewatch运用六个图层的移动打造层次感,阅读起来生动流畅。

更多优秀的视差滚动作品可参考

17 个优秀的视差滚动网站范例

资料参考

Envato blog

Creative Bloq