又到新的一年，讓我們?cè)俅握雇磥?lái)。2017年，Web設(shè)計(jì)領(lǐng)域?qū)⒊霈F(xiàn)哪些新興趨勢(shì)？讓我們馬上進(jìn)入正題。

　　1.嵌入徽標(biāo)

初創(chuàng)企業(yè)、博客以及SaaS項(xiàng)目開始越來(lái)越多地在網(wǎng)站上使用嵌入徽標(biāo)。這些徽標(biāo)指向的則是其它一些主流博客上與其相關(guān)的文章內(nèi)容。

嵌入徽標(biāo)目標(biāo)在于證明網(wǎng)站本身的有效性并與新訪客建立信任關(guān)系。如果當(dāng)前網(wǎng)站在其它權(quán)威出版物中被提及，那么用戶顯然會(huì)更信任此網(wǎng)站中的內(nèi)容。

事實(shí)上，很多頂級(jí)博客都喜歡發(fā)布徽標(biāo)，而且大家能夠通過(guò)搜索引擎找到透明PNG或者SVG的相關(guān)圖像格式。

　　2.加粗的全大寫導(dǎo)航鏈接

加粗的全大寫導(dǎo)航鏈接，已經(jīng)有很多出色的導(dǎo)航菜單都在采用這種設(shè)計(jì)思路。這些導(dǎo)航鏈接雖然各自選取了不同的字體與尺寸，但卻擁有一些共性，具體包括：

全部大寫

加粗

均勻間隔

對(duì)齊至右角

Zazzle網(wǎng)站的主頁(yè)就是個(gè)很好的例子。不過(guò)大家也能在其它很多初創(chuàng)網(wǎng)站上發(fā)現(xiàn)這種特色，這種簡(jiǎn)潔的方式能夠簡(jiǎn)化閱讀過(guò)程并讓訪客更易于瀏覽鏈接內(nèi)容。

采用這種風(fēng)格的大多數(shù)為商業(yè)與技術(shù)初創(chuàng)企業(yè)，不過(guò)相信未來(lái)其也會(huì)在博客中廣泛出現(xiàn)。

請(qǐng)記住這種趨勢(shì)，也許您會(huì)在2017年越來(lái)越多看到它的出現(xiàn)。

3.雜志風(fēng)格博客

十多年前，博客還只是種小眾概念?；仡?003的博客，其還只是一種個(gè)人愛好的體現(xiàn)。但如今這種狀況發(fā)生了根本性變化，如今開設(shè)博客已經(jīng)成為一種全職工作，且其定位也越來(lái)越像是數(shù)字化雜志。

看看TechCrunch于2006年最初發(fā)布的博客設(shè)計(jì)——看起來(lái)就像是那種標(biāo)準(zhǔn)的WordPress博客模板，對(duì)吧？

　　現(xiàn)在再來(lái)看看2017版本的Techcrunch主頁(yè)：

Techcrunch主頁(yè)不僅看起來(lái)更像是雜志，同時(shí)在功能上也與雜志趨于一致。TechCrunch每天發(fā)布大量新鮮資訊，同時(shí)也是獲取初創(chuàng)企業(yè)信息的最佳來(lái)源。

這種雜志風(fēng)格的設(shè)計(jì)趨勢(shì)造就了重大差異。主頁(yè)中采用大版面的故事摘要，每篇文章都擁有自己的縮略圖，同時(shí)文章頁(yè)面則環(huán)繞標(biāo)題排布。

從這個(gè)角度來(lái)看，TechCrunch其實(shí)并沒有改變太多——仍然只是博客。但設(shè)計(jì)與管理方式則更接近雜志，并借此帶來(lái)更出色的瀏覽體驗(yàn)。

4.視頻背景

自動(dòng)播放音頻可能是網(wǎng)絡(luò)上最煩人的設(shè)計(jì)趨勢(shì)。但令人驚訝的是，在背景中自動(dòng)播放無(wú)聲視頻卻相當(dāng)受人歡迎。大家可以在大量商業(yè)網(wǎng)站上發(fā)現(xiàn)這種設(shè)計(jì)，其中視頻背景占據(jù)了整個(gè)屏幕。

我真的很喜歡這項(xiàng)技術(shù)，當(dāng)然前提是正確加以運(yùn)用。只要視頻與網(wǎng)站內(nèi)容相關(guān)且不妨礙正常瀏覽，我認(rèn)為這樣的效果很酷且極具吸引力。

5.僅邊框按鈕

隨著極簡(jiǎn)主義設(shè)計(jì)風(fēng)格逐步進(jìn)入網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，許多相關(guān)新興趨勢(shì)也在不斷涌現(xiàn)。其中之一正是僅邊框按鈕的崛起，即無(wú)內(nèi)部填充而僅保留外部邊界的按鈕。

大多數(shù)情況下，此類按鈕較普通按鈕更具吸引力。大家可以在Instantmojo主頁(yè)上看到這樣的按鈕，綠色的注冊(cè)按鈕旁邊就是用于鏈接實(shí)時(shí)演示的僅邊框按鈕。

也有不少其它網(wǎng)站采用這種按鈕設(shè)計(jì)風(fēng)格。我認(rèn)為僅邊框按鈕最適合采用極簡(jiǎn)風(fēng)格的網(wǎng)站。雖然其并不適合每一種網(wǎng)站，但可以肯定的是其使用頻率正在穩(wěn)定地逐步提升。

6.模式窗口選項(xiàng)

模式窗口真的很煩人，我很難想象真的會(huì)有用戶喜歡這種設(shè)計(jì)。然而，事實(shí)證明其確實(shí)能夠增加注冊(cè)量，因此營(yíng)銷人員往往更傾向于使用這項(xiàng)技術(shù)。

因此基本可以肯定，模式選項(xiàng)窗口將在2017年迎來(lái)更為廣泛的采用比例。

當(dāng)然，我個(gè)人很不喜歡這種東西，也不打算將模式窗口添加進(jìn)自己的網(wǎng)站。但如果目標(biāo)是為了增加注冊(cè)量，那么模式窗口確實(shí)能夠起到不錯(cuò)的效果。究竟如何決定，就由大家自行權(quán)衡吧。

一些新型插件甚至能夠在用戶嘗試退出站點(diǎn)時(shí)觸發(fā)模式窗口。也有一些模式窗口會(huì)在若干秒后自動(dòng)彈出，或者在用戶滾動(dòng)至一定長(zhǎng)度后出現(xiàn)。

無(wú)論具體觸發(fā)機(jī)制如何，怎樣進(jìn)行設(shè)計(jì)或者您對(duì)其給出什么評(píng)價(jià)，我認(rèn)為這種方案未來(lái)將越來(lái)越多地出現(xiàn)。

7.圖像與矢量圖形

憑借著Sketch與Affinity Designer等新型矢量設(shè)計(jì)工具的出現(xiàn)，又一波圖像設(shè)計(jì)師開始?xì)⑷刖W(wǎng)絡(luò)領(lǐng)域。圖像設(shè)計(jì)與界面設(shè)計(jì)領(lǐng)域開始越來(lái)越多地同各類跨領(lǐng)域設(shè)計(jì)師開展合作。

這意味著不久的將來(lái)會(huì)出現(xiàn)更多更具定制化風(fēng)格的圖標(biāo)與全頁(yè)面圖像。

很多圖像設(shè)計(jì)師本身也是行為藝術(shù)家，因此相信他們會(huì)利用數(shù)字化繪畫軟件為用戶帶來(lái)更多全頁(yè)面背景，并在其中加入更多概念性藝術(shù)渲染效果。

8.固定滾動(dòng)邊欄

固定設(shè)計(jì)的第一波浪潮出現(xiàn)在導(dǎo)航欄當(dāng)中。特別是在響應(yīng)式設(shè)計(jì)當(dāng)中，固定導(dǎo)航欄的出現(xiàn)能夠?yàn)橛脩魩?lái)更接近于本地移動(dòng)應(yīng)用的使用感受。

不過(guò)在2017年，我相信將有更多粘性元素出現(xiàn)——即粘性邊欄設(shè)計(jì)。

目前幾乎各類高人氣博客都在使用這種粘性邊欄。粘性邊欄設(shè)計(jì)能夠始終保持內(nèi)容可見，同時(shí)增加用戶與邊欄內(nèi)容間的交互可能性。

另外，眾多免費(fèi)jQuery插件亦可復(fù)制這種粘性邊欄設(shè)計(jì)效果。因此，我們能夠以前所未有的便利方式將這一設(shè)計(jì)引入任何網(wǎng)站。

9.頁(yè)面內(nèi)目錄

根據(jù)最近的一項(xiàng)調(diào)查發(fā)現(xiàn)，較長(zhǎng)的內(nèi)容目錄在搜索引擎排名與用戶保留水平方面較勝于短目錄設(shè)計(jì)。不過(guò)可以肯定的是情況不能一概而論，因?yàn)楹笳叩牟樵冺憫?yīng)速度顯然更快。

但總體來(lái)說(shuō)，如果網(wǎng)站當(dāng)中包含更多較長(zhǎng)的內(nèi)容，那么在文章中添加更多目錄將成為一種必然。這樣的設(shè)計(jì)往往多見于篇幅很長(zhǎng)的評(píng)論性網(wǎng)站或者詳盡列出條目以幫助訪客快速前往文章對(duì)應(yīng)位置的站點(diǎn)。

添加目錄能夠改善用戶體驗(yàn)，并幫助其將閱讀內(nèi)容分解成更小的區(qū)塊。另外，目錄機(jī)制也能幫助您的網(wǎng)站獲得更理想的搜索引擎排名。如果谷歌發(fā)現(xiàn)您的頁(yè)面具有價(jià)值，則會(huì)更傾向于在搜索結(jié)果中將您的網(wǎng)站鏈接顯示出來(lái)。

雖然目前頁(yè)面內(nèi)目錄的使用范圍還不是很廣，但我預(yù)計(jì)這種趨勢(shì)將在2017年及未來(lái)持續(xù)升溫。

10.明亮的顏色設(shè)計(jì)

我不太確定這種趨勢(shì)是出于極簡(jiǎn)主義思維還是對(duì)谷歌Material設(shè)計(jì)風(fēng)格的反應(yīng)。但通過(guò)瀏覽，我發(fā)現(xiàn)已經(jīng)有大量網(wǎng)站采用明亮與柔和的顏色組合出充滿活力的色調(diào)，從而構(gòu)建起極具幻想風(fēng)格的外觀。

Rentberry主頁(yè)就是個(gè)很好的例子，使用了大量色彩梯度漸變，并且也使用了之前提到的嵌入徽標(biāo)。集二者于一身，想不成功都難！

大家可能還注意到，色彩并未直接滲透整個(gè)頁(yè)面——其中還摻雜了白色與灰色陰影區(qū)域。

而且根據(jù)我最近關(guān)注過(guò)的各類人氣色彩搭配主題，相信這種風(fēng)格將在未來(lái)獲得更多人的認(rèn)可。

11.滾動(dòng)動(dòng)畫

設(shè)計(jì)師都知道滾動(dòng)卡頓問題的嚴(yán)重性與可怕性。請(qǐng)大家相信，我在提出“滾動(dòng)動(dòng)畫”這項(xiàng)建議時(shí)，絕對(duì)沒有接受由此帶來(lái)的性能妥協(xié)的意思。必須承認(rèn)，如今已經(jīng)有很多網(wǎng)站開始在滾動(dòng)頁(yè)面特定部分時(shí)提供動(dòng)畫視圖。

這種趨勢(shì)主要來(lái)自初創(chuàng)企業(yè)主頁(yè)與SaaS廠商，他們希望在設(shè)計(jì)中添加一些精彩之處。

其實(shí)我對(duì)這種趨勢(shì)的評(píng)價(jià)并不太高。雖然能夠在一定程度上吸引眼球，但我覺得這并不能提供多少審美層面的改善。不過(guò)必須承認(rèn)，這種趨勢(shì)正在逐漸升溫，而且合理利用確實(shí)能夠帶來(lái)更為驚艷的觀感。

12.單頁(yè)面應(yīng)用（簡(jiǎn)稱SPA）

單頁(yè)面應(yīng)用與網(wǎng)站純粹由Ajax調(diào)用構(gòu)建而成。JavaScript從服務(wù)器處提取內(nèi)容，

并以動(dòng)態(tài)方式進(jìn)行加載，如此一來(lái)頁(yè)面就永遠(yuǎn)不需要進(jìn)行刷新。

常見的此類范例包括Gmail與Facebook。不過(guò)隨著更多JS技術(shù)的加入，我發(fā)現(xiàn)越來(lái)越多的單頁(yè)面應(yīng)用開始在市場(chǎng)上出現(xiàn)。

考慮到React與Aurelia等強(qiáng)大前端庫(kù)的支持，相信2017年內(nèi)我們將能夠更輕松地構(gòu)建起單頁(yè)面應(yīng)用。

13.可切換搜索欄

曾幾何時(shí)，搜索欄會(huì)始終顯示在網(wǎng)頁(yè)上的特定位置——包括處于側(cè)邊欄或者導(dǎo)航欄當(dāng)中。但最近我發(fā)現(xiàn)，越來(lái)越多的視圖方案開始默認(rèn)將搜索字段隱藏起來(lái)。

誠(chéng)然，這種設(shè)計(jì)趨勢(shì)能夠有效節(jié)約頁(yè)面空間，同時(shí)保證用戶仍能隨時(shí)使用搜索功能。如果大家不確定應(yīng)在新設(shè)計(jì)中將搜索字段放在哪里，則可考慮使用放大鏡圖標(biāo)鏈接至導(dǎo)航欄中的搜索字段處。

14.Adblock消息

必須承認(rèn)的是，如今越來(lái)越多的用戶開始使用廣告屏蔽工具。惟一的問題是，內(nèi)容發(fā)布商該如何應(yīng)對(duì)這種趨勢(shì)。有些網(wǎng)站會(huì)禮貌性地在廣告區(qū)域內(nèi)添加提示信息。而在Honkiat中，大家會(huì)發(fā)現(xiàn)它選擇使用內(nèi)部廣告以填補(bǔ)由外部廣告屏蔽引發(fā)的空白現(xiàn)象。

作為一大明顯趨勢(shì)，我發(fā)現(xiàn)人們開始越來(lái)越多使用adblock內(nèi)容屏蔽工具。這項(xiàng)技術(shù)意在“屏蔽屏蔽工具”。Business Insider與福布斯等大型網(wǎng)站都開始使用這項(xiàng)技術(shù)。遺憾的是，這種作法同時(shí)傷害到了用戶與發(fā)布商，而這一切都源于廣告技術(shù)的低下質(zhì)量。

最終，無(wú)論大家對(duì)這種作法抱持怎樣的態(tài)度，都必須承認(rèn)adblock插件的普及度越來(lái)越高，而預(yù)計(jì)也將有更多內(nèi)容發(fā)布商據(jù)此予以還擊。

15.純SVG圖標(biāo)

SVG圖像已經(jīng)在網(wǎng)絡(luò)領(lǐng)域內(nèi)加速擴(kuò)張，但如今的發(fā)展速度可謂前所未有。在我看來(lái)，2017年將成為SVG在網(wǎng)絡(luò)領(lǐng)域全面騰飛的一年。

大家可以在Flaticon等網(wǎng)站上發(fā)現(xiàn)無(wú)數(shù)免費(fèi)的SVG圖標(biāo)資源。另外，大家也能夠在HTML代碼內(nèi)添加SVG。

因此，設(shè)計(jì)師與開發(fā)者都將迎來(lái)新的SVG使用方式。現(xiàn)代瀏覽器在這方面擁有良好的顯示表現(xiàn)，因此兼容性絕對(duì)不必?fù)?dān)心。設(shè)計(jì)師們惟一需要關(guān)注的就是了解SVG的強(qiáng)大能力并加以運(yùn)用。

16.Adobe XD

Adobe公司于2016年推出了Adobe XD的完整beta測(cè)試版，這套方案也得到快速發(fā)展。Adobe XD目前同時(shí)支持Mac與Windows系統(tǒng)環(huán)境，且仍處于正式發(fā)布前的測(cè)試階段。

大家可能認(rèn)為Sketch足以搞定一切，但Adobe能夠成為創(chuàng)造性工作領(lǐng)域的主流軟件廠商也絕對(duì)有著過(guò)硬的理由?？紤]到Sketch只支持Mac設(shè)備，Adobe希望為每位用戶提供支持。

　　我堅(jiān)信未來(lái)一年中，Adobe XD將得到更多人的了解與喜愛。其可能成為UI模型

設(shè)計(jì)領(lǐng)域的先進(jìn)軟件——這意味著我們終于能夠獲得UI設(shè)計(jì)層面的Photoshop了。

隨著這款新軟件的崛起，大量教程指南與免費(fèi)GUI工具包也在不斷涌現(xiàn)。Dribbble、Designmine以及XD Guru等網(wǎng)站都提供大量相關(guān)資源。

17.更多漢堡式菜單

無(wú)論大家是否喜歡，漢堡式菜單已經(jīng)確立了自己的市場(chǎng)地位。雖然不少研究結(jié)果表明，這種將菜單進(jìn)行折疊隱藏的視圖并不利于用戶瀏覽，但考慮到移動(dòng)設(shè)備那可憐的顯示尺寸，目前我們還找不到更為有效的解決辦法。

漢堡式圖標(biāo)亦慢慢成為導(dǎo)航菜單的典型象征。與放大鏡圖標(biāo)代表著“搜索”一樣，三條橫杠構(gòu)成的漢堡圖標(biāo)將很快與“菜單”二字緊密掛鉤。

即使是技術(shù)水平很高的設(shè)計(jì)老鳥也必須承認(rèn)這一現(xiàn)象。隨著時(shí)間的推移，越來(lái)越多的人開始利用智能手機(jī)瀏覽移動(dòng)網(wǎng)絡(luò)內(nèi)容。而他們將很快習(xí)慣并接受以漢堡式設(shè)計(jì)作為導(dǎo)航菜單方案的現(xiàn)狀。

18.產(chǎn)品功能圖標(biāo)

著眼于2017年，相信產(chǎn)品功能圖標(biāo)這一趨勢(shì)將逐步成為主流。另外，目前也確實(shí)存在多種常見方式幫助我們?cè)谥黜?yè)上共享產(chǎn)品功能。

首先，我們可以為產(chǎn)品設(shè)計(jì)一套功能列表。該產(chǎn)品可以是SaaS、WordPress主題甚至是物理性商品，一切皆可。

在此之后，大家可以為其設(shè)計(jì)定制化圖標(biāo)或者直接尋找適合這些功能的現(xiàn)成圖標(biāo)。當(dāng)然，最好不要涉及“可靠”或者“快速”等常規(guī)特性，因?yàn)檫@些因素太過(guò)基本而很難引起用戶的興趣。

相反，我們應(yīng)當(dāng)列出真正重要功能特性。如果您宣傳的是一套高級(jí)WordPress主題，那么其中可以列出其響應(yīng)式能力、包含多少功能部件或者菜單機(jī)制如何運(yùn)作等。

這些功能圖標(biāo)的作用在于以可視化方式幫助我們進(jìn)行宣傳。純文本的接納效果往往不好，但可視化元素則更易于理解并能夠抓住人們的眼球。

19.添加號(hào)召式用語(yǔ)

雖然網(wǎng)站向來(lái)樂于使用號(hào)召式用語(yǔ)，但隨著訪問者在每個(gè)網(wǎng)站上花費(fèi)的時(shí)間越來(lái)越少，強(qiáng)大的號(hào)召性用語(yǔ)開始變得更加重要。

這些號(hào)召式用語(yǔ)可以表現(xiàn)為按鈕、選項(xiàng)表單或者其它輸入字段，用以驅(qū)使人們采取某些操作——例如注冊(cè)或者閱讀博文等。

我也無(wú)法確切告訴大家如何如何設(shè)計(jì)這種口號(hào)或者對(duì)字句進(jìn)行優(yōu)化。但可以肯定的是，其重要性將不斷提高，并明確影響到每一位網(wǎng)站訪問者。

20.內(nèi)容區(qū)域更小

如今顯示器的尺寸正變得越來(lái)越夸張，這意味著大多數(shù)網(wǎng)站都需要設(shè)定最大寬度。相較于700像素的標(biāo)準(zhǔn)寬度，如果將網(wǎng)站拉伸至2000像素寬，那么用戶將很難閱讀其中的字句。

更小的內(nèi)容區(qū)域能夠改善瀏覽體驗(yàn)，并最終讓內(nèi)容密集型網(wǎng)站獲得更出色的用戶口碑。

我認(rèn)為越來(lái)越多的設(shè)計(jì)師已經(jīng)意識(shí)到了這個(gè)問題，并開始慢慢減少內(nèi)容顯示區(qū)域的大小。我個(gè)人能接受的最大寬度為750像素，但大家也可以將其設(shè)置為600像素甚至更低。

較少的字句與較小的內(nèi)容顯示區(qū)域能夠?qū)崿F(xiàn)較短的段落布局，從而提升內(nèi)容可讀性。目前《紐約時(shí)報(bào)》等主要發(fā)行媒體可能仍在堅(jiān)持自己的結(jié)構(gòu)準(zhǔn)則，但對(duì)于簡(jiǎn)單的博客或者商業(yè)網(wǎng)站而言，整體趨勢(shì)確實(shí)正朝著更長(zhǎng)內(nèi)容、更小段落與更小內(nèi)容顯示區(qū)域的方向發(fā)展。

總結(jié)

受篇幅所限，我無(wú)法與大家分享全部設(shè)計(jì)發(fā)展趨勢(shì)。但我認(rèn)為本文列出的20項(xiàng)最有趣也最值得關(guān)注。

另外，如果大家有著其它想法或者對(duì)即將到來(lái)的設(shè)計(jì)趨勢(shì)擁有自己的理解，請(qǐng)?jiān)谠u(píng)論中與我們分享。