您的当前位置:主页 > X漾生活 >别再让网友迷失在点击中,2015年十大网页设计趋势

别再让网友迷失在点击中,2015年十大网页设计趋势

分类:X漾生活 作者:
别再让网友迷失在点击中,2015年十大网页设计趋势

2015 年的开端,网页设计师準备好今年怎幺大展身手了吗?网页设计师与作家 Amber Leigh Turner 于 The Next Web 发文,整理了 2015 年 网页设计十大趋势 ,帮助你快速进入状况。

1. 捲动网页取代点击
别再让网友迷失在点击中,2015年十大网页设计趋势

单一网页愈来愈长已是很普遍的做法,尤其是在行动装置普及的时代,首页通常不置连结,改将所有内容放在单一页面,让低头族「滑上瘾」。因为比起在一堆连结中跳转,必须不断重新等待新的页面载入,资讯通通放在一页的形式更容易浏览。而且不再只是首页「变长」,其实「about」或描述产品的网页,都能採取捲到底的方式,比如苹果 iPhone 6 的呈现,就很符合长网页的趋势,把所有规格与功能全部放在单一网页内,并且增添了一些精緻的动画元素,抓住网友捲动全程的注意力。

2. 运用叙事与互动製造惊喜

精彩的内容是决定网站优劣的关键因素,如果善于以说故事的方式呈现内容,更是大加分。西雅图 Space Needle 网站,运用数位叙事与设计,生动的述说了 Space Needle 的背景故事。同时也运用 2015 的另一个显着趋势:互动,带给网友宛如亲临实境的独特体验。在网页设计中交互使用互动与动画,而且运用得当,能够製造惊喜,让观者留下深刻印象,浏览 Impossible Bureau 时,一边滑动捲轴、一边滑过不同元素,会有各种令你惊奇万分的互动感。

别再让网友迷失在点击中,2015年十大网页设计趋势
3. 背景争夺战:大张背景图 vs. 大型色块
别再让网友迷失在点击中,2015年十大网页设计趋势

前几年,一定看过不少大型图片作为背景、文字浮于其上的设计,这是网友打开网站首先映入眼帘的部分,觉得腻了、想要「非主流」一下吗?那就逆势而行。有些新网站就选择抽除背景图片,只留下巨大的色块与文字。抽的好处除了特别突出之外,也有助于改善载入速度。在一片大型背景图片的网站中,The New Wave 优雅的设计值得参考。

4. 去除非必要的元素,简化再简化
别再让网友迷失在点击中,2015年十大网页设计趋势

有个设计理论是这幺说的,所有非必要元素全部都被清除之后,设计才大功告成。2015 年可能会是设计师大举实践这个理论的年份。前面所提的 New Wave Company 与 Rareview Digital Agemcy 网站都属「去除大型背景图片」的模範。后者更将背景颜色、複杂的版式通通扫光。过度设计、过多影像、过多色彩的网站充斥,极端简洁的设计反倒显得特别。

5. 固定宽度置中版型
别再让网友迷失在点击中,2015年十大网页设计趋势

过去几年大部分网站多把「banding」或宽度设为 100%,影像与区块随着浏览器视域而变化。在更之前,设计师倾向设定固定宽度,并将图像置中在页面。这种固定宽度的趋势以现代化的面貌,出现复兴的迹象,有些网站选择设定「最大宽度」,让内容在浏览器中置中。Michele Mazzucco 的网站就是一个例子,你发现什幺玄机了吗?缩小浏览器时,含有主要内容的色块占满萤幕,放大时却有留白。

6. 专业高品质、独一无二的摄影
别再让网友迷失在点击中,2015年十大网页设计趋势

为求方便也为减省成本,图库影像还是很多设计师的选择。不过最近窜起的新网站,宁可多花一点钱请专业摄影师拍摄高品质、独一无二而且完全按照网站目的需求定製的影像,不仅能够切实展现网站品味,还能避免与其他网站「撞衫」。Grain and Mother 的网站图片是几个人坐在餐桌前,彷彿开心地正在谈论什幺事情,他们不是什幺临演,而是 Grain and Mother 的创办人与员工。如果点进其「about」页面,美丽且专业的影像肯定会夺走你的注意力,美妙的办公空间都是真的!

别再让网友迷失在点击中,2015年十大网页设计趋势
7. 手机选单移植回网站
别再让网友迷失在点击中,2015年十大网页设计趋势
别再让网友迷失在点击中,2015年十大网页设计趋势

目前大部分网站还是比较重视桌面版,无法完美过渡到手机与平板装置。不过响应式设计兴起,协助设计师顺利让网站顺应装置,无论何种萤幕都能有最佳浏览体验。在这样的趋势下,我们开始看到本来在手机上流行的元素,反倒移植回桌电上。比如 24 Ways 与 Rawnet 都有如同 app 与响应式的选单,儘管是在桌电观看,却像是在用手机浏览。这两个网站一改传统水平选单的形式,而是像手机版网页常见的直式 flyout/sideout 选单。

8. 主选单藏起来!
别再让网友迷失在点击中,2015年十大网页设计趋势

有些网站则把选单藏起来,唯有网友点击或悬停在某个元素上,才会开启选单,儘量维持画面整洁、强调功能性。这个同样源自手机萤幕特性的设计,或许也将成为 2015 年的趋势。看看 Brian Hoff Design 新网站,右上侧置放汉堡图示,由于使用者已很习惯在手机上看到这种代表选单的象徵,因此并不会无所适从。

9. 超级大的字型
别再让网友迷失在点击中,2015年十大网页设计趋势

前面所提的示例网站,绝大多数都有个相同的特徵:巨大的文字标题。2015 年这样的流行将会继续,而且可能有愈长愈大的现象,就像在地面上看到一架即将降落的飞机,那幺大。Tiny Giant 网站超大标题直冲眼帘,要忽略也难。众声喧哗的时代,就是要比别人更大声,才有被看见的机会,标题字型,在 2015 年会继续放大。

10. 不受环境优劣影响的浏览体验

本文提到的网页设计趋势,多数都出自为网站「瘦身」,加快手机或平板,以及频宽不足环境的载入速度。网站设计师与开发者愈来愈重视网站「重量」以及使用者与其互动的形式。如何在行动装置中、不同频宽环境下营造同样良好的体验,也是 2015 年益发重要的问题。相信今年我们会有更多更顺畅的网站,不会载到一半就喊咔。

另外数位行销谘询网站 Econsultancy 作者 Christopher Ratcliff 根据自己的观察 ,并且访问了 Dan Barker 与 Chris Lake 两位行销专家,也统整出 17 项 2015 年网页趋势,同样相当值得参考。以下节选出与 The Next Web 没有重複的观点:

1. 视差滚动 :Wordpress 等网页製作平台提供视差捲动的模板,因此我们可以期待未来出现更多高度创新、以叙事为主体的网页。

别再让网友迷失在点击中,2015年十大网页设计趋势
Boycoy

2. 卡片设计 :前几年类似 Pinterest 的卡片瀑布流今年可能会捲土重来,这种重视影像的设计非常符合「TL;DR」的网路族群,也非常适于呈现在行动装置与响应式设计。

别再让网友迷失在点击中,2015年十大网页设计趋势
可口可乐 AHH

3. 物质设计:拟真设计与扁平设计的交叉点,Google 去年推出的 material design,今年预计也将大为风行。

别再让网友迷失在点击中,2015年十大网页设计趋势

4. 幽灵按钮:按钮透明化,仅以能够识别的超细边框,包裹无衬线字型。一方面减少按钮与背景的突兀感,一方面依然有清楚的指向。

别再让网友迷失在点击中,2015年十大网页设计趋势
bilder

5. 动态设计:比如不断捲动,不会直接出现图片,而是先有色块才有图片开展。或者数据长条图「动起来」。

别再让网友迷失在点击中,2015年十大网页设计趋势

6. 模组捲动:一般我们是捲动整个网页,但捲动个别栏位也是没问题的。

别再让网友迷失在点击中,2015年十大网页设计趋势
Rocco Forte Hotels

7. 色彩渐变 :选择一个色彩作为主体,配以许多深浅不同的相同色系。

8. 固定的导航栏 :无论你捲动到哪个位置,导航栏永远固定在最上方,方便使用者在各种页面中切换,用处较为複杂的大型网站如 Facebook 就会使用这种设计。

9. 行动第一,但非行动唯一 :毕竟还是有一大票人工作倚赖桌上型电脑维生,比如正在看本文的网页设计师们,对吧~

您认为 2015 年还会有哪些网页设计趋势呢?欢迎与我们分享:)