2016网站设计趋势 | 圣侨资讯

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

网页设计的风格每年都在变动,尤其是近期行动载具的出现,大幅改变了人们的阅读习惯,利于行动阅读的排版方式逐渐成为主流,而在未来将更着重于使用者体验,比起酷炫的技术或是精致的排版风格,加载速度快且易上手的网站将更能抓住使用者的目光。2016已经过去一半了,现在让我们来整理一下今年流行什么样的设计风格︰

一、RWD

对未曾学过网页设计的人而言,只要你有使用智慧型手机、平板等行动工具,就一定会接触到这个名词,RWD又名响应式网页设计,它可以让网站以适合的版面配置在多种不同的装置上浏览,同时也能因应萤幕的宽度自动调整浏览器尺寸。

响应式网页设计

▲ 响应式网页设计 (图片取自Pixabay)

Netflix 响应式网页设计

▲ Netflix的官网完美诠译RWD设计风格 (取自Netflix官网)

二、全幅背景及全萤幕影片

相较传统固定宽度的banner,全幅背景更能突显企业形象,打造磅薄气势,且如今在html5的支援下,已可采用全幅影片,加强叙事能力,可参考airbnb官网的设计↓ ↓

airbnb官网

三、智能选单

隠藏式导航的网页数量增加,提高用户吸收关键讯息的效率,又被称做汉堡式选单,将众多的选项统合在一起,相当便利,专家甚至还预测未来选单可能改为多方滚动。

四、扁平化设计

扁平化其实已流行了一段时间,早在之前许多品牌的识别设计就开始迈向扁平化、简洁化,仅保留最重要的元素,之后网页设计也将以此为标准持续朝轻量化、网页速度优化的方向发展。

未来扁平化将结合RWD、极简主义等设计风格,持续衍生新的视觉效果,为呈现更清晰的内容页面,以下几点将是设计师需要着重的项目:

(1) 重点排版

「一页式网页」的设计标准,意在将每个页面以PPT简报的方式呈现给浏览者,区块式的设计帮助使用者立即抓住重点。

(2) 清楚好懂的ICON图标

适当地加入简单icon图示,在创造丰富的视觉效果的同时让使用者直接意识到你想要表达的讯息。

(3) 创新的后扁平化-Material Design

Google所发布的设计风格语言,旨在运用一本书中每张纸之间所具备的空间关系概念,藉由投影物件的方式进行空间模拟,透过阴影深浅,让各视窗呈现立体化的视觉效果,令资讯内容展现明显的上下层关系。

五、区块式设计及长型滚动页面

将网页依主题划分多个独立的区块,让读者阅览更为便利,而且因为区块为方型设计,可依萤幕大小重新配置版面,所以广泛地用在RWD网站中,此技术称为区块式设计(又名砖墙式设计、卡片式设计)。另一方面,由于FB的操作模式已广为大众所知,因此其所采用的滚动式设计也逐渐蔚为主流,这样的设计非常适合用于行动装置,设计师可透过背景、侧栏与主栏内容滚动速度的不同来说故事,给予读者不同的视觉感受。

Pinterest

▲ Pinterest区块式设计介面 (取自软体邦)

六、资讯图

图像化能力近年来已成为重要的职场能力,再加上大数据时代的来临,该如何以视觉化图表呈现各种数据跟内容,考验的不仅是设计师的图像表达能力,同时也在考验他们的重点归纳能力。

Pinterest

▲ Future of Car Sharing互動圖表 (取自INSIDE)

七、动画特效的运用

为了让网页充满娱乐性和提高互动率,适当地加入动画将产生加分效果,包含视差滚动、悬停效果、载入条和微动画等等。

Slack via Lauren Tan

▲ 載入特效 (圖片取自Slack via Lauren Tan)

结论

虽然网页设计的技术和风格逐年都在变动,但唯一不变的就是都要以使用者体验为重点去思考,并根据网站的属性和诉求来设计,建置有你个人风格的独特作品。

资料参考︰

emaze

设计大舌头

爱思科网路行销

16 Web & Graphic Design Trends To Watch In 2016

6 Web Design Trends You Must Know for 2015 & 2016

  • 48