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

翻转行销 黄诗宜 2016-12-07

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

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

一、全幅或是影片背景

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

网页设计_全幅背景

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

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

网页设计_一页式设计

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

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

网页设计_卡片式设计

四、娱乐与个性化

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

网页设计_个性化设计

五、扁平式设计

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

网页设计_肩平式设计

六、Cinemagraph图(cinemagraph)的运用

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

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

网页设计_Cinemagraph图

七、预览

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

八、具手绘感的设计元素

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

网页设计_手绘感设计

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

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

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

十、微型互动设计

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

网页设计_微互动设计

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

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

网页设计_渐变滤镜

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

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

网页设计_无框架设计

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

十三、独创字型

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

网页设计_字体设计

十四、导航设计

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

网页设计_导航设计

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

十五、视差滚动

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

网页设计_视差滚动

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

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

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

资料参考

Envato blog

Creative Bloq

  • 49