2017年网页设计15个流行趋势

作者: fangjun 分类: 网站设计 发布时间: 2017-05-19 15:45

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

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

  一、全幅或是影片背景

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

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

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

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

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

  四、娱乐与个性化

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

  五、扁平式设计

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

  六、Cinemagraph图(cinemagraph)的运用

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

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

  七、预览

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

  八、具手绘感的设计元素

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

▲取自

日本レクシー株式会社

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

结合电商与智慧分析技术,可针对用户的性别、年龄,给予适当的回应,调整内容与排版。

举例来说:字体大小、颜色及间距会因用户年龄而变动,也能因应年龄层改变版面配色。

  十、微型互动设计

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

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

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

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

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

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

  十三、独创字型

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

  十四、导航设计

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

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

  十五、视差滚动

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注