2017年最值得關注的20個網頁設計趨勢！

初創企業、博客以及SaaS項目開始越來越多地在網站上使用嵌入徽標。這些徽標指向的則是其它一些主流博客上與其相關的文章內容。

嵌入徽標目標在於證明網站本身的有效性並與新訪客建立信任關係。如果當前網站在其它權威出版物中被提及，那麼用戶顯然會更信任此網站中的內容。

事實上，很多頂級博客都喜歡發布徽標，而且大家能夠通過搜索引擎找到透明PNG或者SVG的相關圖像格式。

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

全部大寫

加粗

均勻間隔

對齊至右角

Zazzle網站的主頁就是個很好的例子。不過大家也能在其它很多初創網站上發現這種特色，這種簡潔的方式能夠簡化閱讀過程並讓訪客更易於瀏覽鏈接內容。

採用這種風格的大多數為商業與技術初創企業，不過相信未來其也會在博客中廣泛出現。

請記住這種趨勢，也許您會在2017年越來越多看到它的出現。

十多年前，博客還只是種小眾概念。回顧2003的博客，其還只是一種個人愛好的體現。但如今這種狀況發生了根本性變化，如今開設博客已經成為一種全職工作，且其定位也越來越像是數字化雜誌。

看看TechCrunch於2006年最初發布的博客設計——看起來就像是那種標準的WordPress博客模板，對吧？

現在再來看看2017版本的Techcrunch主頁：

Techcrunch主頁不僅看起來更像是雜誌，同時在功能上也與雜誌趨於一致。TechCrunch每天發布大量新鮮資訊，同時也是獲取初創企業信息的最佳來源。

這種雜誌風格的設計趨勢造就了重大差異。主頁中採用大版面的故事摘要，每篇文章都擁有自己的縮略圖，同時文章頁面則環繞標題排布。

從這個角度來看，TechCrunch其實並沒有改變太多——仍然只是博客。但設計與管理方式則更接近雜誌，並藉此帶來更出色的瀏覽體驗。

自動播放音頻可能是網路上最煩人的設計趨勢。但令人驚訝的是，在背景中自動播放無聲視頻卻相當受人歡迎。大家可以在大量商業網站上發現這種設計，其中視頻背景佔據了整個屏幕。

我真的很喜歡這項技術，當然前提是正確加以運用。只要視頻與網站內容相關且不妨礙正常瀏覽，我認為這樣的效果很酷且極具吸引力。

隨著極簡主義設計風格逐步進入網頁設計領域，許多相關新興趨勢也在不斷湧現。其中之一正是僅邊框按鈕的崛起，即無內部填充而僅保留外部邊界的按鈕。

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

也有不少其它網站採用這種按鈕設計風格。我認為僅邊框按鈕最適合採用極簡風格的網站。雖然其並不適合每一種網站，但可以肯定的是其使用頻率正在穩定地逐步提升。

模式窗口真的很煩人，我很難想象真的會有用戶喜歡這種設計。然而，事實證明其確實能夠增加註冊量，因此營銷人員往往更傾向於使用這項技術。

因此基本可以肯定，模式選項窗口將在2017年迎來更為廣泛的採用比例。

當然，我個人很不喜歡這種東西，也不打算將模式窗口添加進自己的網站。但如果目標是為了增加註冊量，那麼模式窗口確實能夠起到不錯的效果。究竟如何決定，就由大家自行權衡吧。

一些新型插件甚至能夠在用戶嘗試退出站點時觸發模式窗口。也有一些模式窗口會在若干秒后自動彈出，或者在用戶滾動至一定長度后出現。

無論具體觸發機制如何，怎樣進行設計或者您對其給出什麼評價，我認為這種方案未來將越來越多地出現。

憑藉著Sketch與Affinity Designer等新型矢量設計工具的出現，又一波圖像設計師開始殺入網路領域。圖像設計與界面設計領域開始越來越多地同各類跨領域設計師開展合作。

這意味著不久的將來會出現更多更具定製化風格的圖標與全頁面圖像。

很多圖像設計師本身也是行為藝術家，因此相信他們會利用數字化繪畫軟體為用戶帶來更多全頁面背景，並在其中加入更多概念性藝術渲染效果。

固定設計的第一波浪潮出現在導航欄當中。特別是在響應式設計當中，固定導航欄的出現能夠為用戶帶來更接近於本地移動應用的使用感受。

不過在2017年，我相信將有更多粘性元素出現——即粘性邊欄設計。

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

另外，眾多免費jQuery插件亦可複製這種粘性邊欄設計效果。因此，我們能夠以前所未有的便利方式將這一設計引入任何網站。

根據最近的一項調查發現，較長的內容目錄在搜索引擎排名與用戶保留水平方面較勝於短目錄設計。不過可以肯定的是情況不能一概而論，因為後者的查詢響應速度顯然更快。

但總體來說，如果網站當中包含更多較長的內容，那麼在文章中添加更多目錄將成為一種必然。這樣的設計往往多見於篇幅很長的評論性網站或者詳盡列出條目以幫助訪客快速前往文章對應位置的站點。

添加目錄能夠改善用戶體驗，並幫助其將閱讀內容分解成更小的區塊。另外，目錄機制也能幫助您的網站獲得更理想的搜索引擎排名。如果谷歌發現您的頁面具有價值，則會更傾向於在搜索結果中將您的網站鏈接顯示出來。

雖然目前頁面內目錄的使用範圍還不是很廣，但我預計這種趨勢將在2017年及未來持續升溫。

我不太確定這種趨勢是出於極簡主義思維還是對谷歌Material設計風格的反應。但通過瀏覽，我發現已經有大量網站採用明亮與柔和的顏色組合出充滿活力的色調，從而構建起極具幻想風格的外觀。

Rentberry主頁就是個很好的例子，使用了大量色彩梯度漸變，並且也使用了之前提到的嵌入徽標。集二者於一身，想不成功都難！

大家可能還注意到，色彩並未直接滲透整個頁面——其中還摻雜了白色與灰色陰影區域。

而且根據我最近關注過的各類人氣色彩搭配主題，相信這種風格將在未來獲得更多人的認可。

設計師都知道滾動卡頓問題的嚴重性與可怕性。請大家相信，我在提出「滾動動畫」這項建議時，絕對沒有接受由此帶來的性能妥協的意思。必須承認，如今已經有很多網站開始在滾動頁面特定部分時提供動畫視圖。

這種趨勢主要來自初創企業主頁與SaaS廠商，他們希望在設計中添加一些精彩之處。

其實我對這種趨勢的評價並不太高。雖然能夠在一定程度上吸引眼球，但我覺得這並不能提供多少審美層面的改善。不過必須承認，這種趨勢正在逐漸升溫，而且合理利用確實能夠帶來更為驚艷的觀感。

單頁面應用與網站純粹由Ajax調用構建而成。JavaScript從伺服器處提取內容，

並以動態方式進行載入，如此一來頁面就永遠不需要進行刷新。

常見的此類範例包括Gmail與Facebook。不過隨著更多JS技術的加入，我發現越來越多的單頁面應用開始在市場上出現。

考慮到React與Aurelia等強大前端庫的支持，相信2017年內我們將能夠更輕鬆地構建起單頁面應用。

曾幾何時，搜索欄會始終顯示在網頁上的特定位置——包括處於側邊欄或者導航欄當中。但最近我發現，越來越多的視圖方案開始默認將搜索欄位隱藏起來。

誠然，這種設計趨勢能夠有效節約頁面空間，同時保證用戶仍能隨時使用搜索功能。如果大家不確定應在新設計中將搜索欄位放在哪裡，則可考慮使用放大鏡圖標鏈接至導航欄中的搜索欄位處。

必須承認的是，如今越來越多的用戶開始使用廣告屏蔽工具。惟一的問題是，內容發布商該如何應對這種趨勢。有些網站會禮貌性地在廣告區域內添加提示信息。而在Honkiat中，大家會發現它選擇使用內部廣告以填補由外部廣告屏蔽引發的空白現象。

作為一大明顯趨勢，我發現人們開始越來越多使用adblock內容屏蔽工具。這項技術意在「屏蔽屏蔽工具」。Business Insider與福布斯等大型網站都開始使用這項技術。遺憾的是，這種作法同時傷害到了用戶與發布商，而這一切都源於廣告技術的低下質量。

最終，無論大家對這種作法抱持怎樣的態度，都必須承認adblock插件的普及度越來越高，而預計也將有更多內容發布商據此予以還擊。

SVG圖像已經在網路領域內加速擴張，但如今的發展速度可謂前所未有。在我看來，2017年將成為SVG在網路領域全面騰飛的一年。

大家可以在Flaticon等網站上發現無數免費的SVG圖標資源。另外，大家也能夠在HTML代碼內添加SVG。

因此，設計師與開發者都將迎來新的SVG使用方式。現代瀏覽器在這方面擁有良好的顯示錶現，因此兼容性絕對不必擔心。設計師們惟一需要關注的就是了解SVG的強大能力並加以運用。

Adobe公司於2016年推出了Adobe XD的完整beta測試版，這套方案也得到快速發展。Adobe XD目前同時支持Mac與Windows系統環境，且仍處於正式發布前的測試階段。

大家可能認為Sketch足以搞定一切，但Adobe能夠成為創造性工作領域的主流軟體廠商也絕對有著過硬的理由。考慮到Sketch只支持Mac設備，Adobe希望為每位用戶提供支持。

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

設計領域的先進軟體——這意味著我們終於能夠獲得UI設計層面的Photoshop了。

隨著這款新軟體的崛起，大量教程指南與免費GUI工具包也在不斷湧現。Dribbble、Designmine以及XD Guru等網站都提供大量相關資源。

無論大家是否喜歡，漢堡式菜單已經確立了自己的市場地位。雖然不少研究結果表明，這種將菜單進行摺疊隱藏的視圖並不利於用戶瀏覽，但考慮到移動設備那可憐的顯示尺寸，目前我們還找不到更為有效的解決辦法。

漢堡式圖標亦慢慢成為導航菜單的典型象徵。與放大鏡圖標代表著「搜索」一樣，三條橫杠構成的漢堡圖標將很快與「菜單」二字緊密掛鉤。

即使是技術水平很高的設計老鳥也必須承認這一現象。隨著時間的推移，越來越多的人開始利用智能手機瀏覽移動網路內容。而他們將很快習慣並接受以漢堡式設計作為導航菜單方案的現狀。

著眼於2017年，相信產品功能圖標這一趨勢將逐步成為主流。另外，目前也確實存在多種常見方式幫助我們在主頁上共享產品功能。

首先，我們可以為產品設計一套功能列表。該產品可以是SaaS、WordPress主題甚至是物理性商品，一切皆可。

在此之後，大家可以為其設計定製化圖標或者直接尋找適合這些功能的現成圖標。當然，最好不要涉及「可靠」或者「快速」等常規特性，因為這些因素太過基本而很難引起用戶的興趣。

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

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

雖然網站向來樂於使用號召式用語，但隨著訪問者在每個網站上花費的時間越來越少，強大的號召性用語開始變得更加重要。

這些號召式用語可以表現為按鈕、選項表單或者其它輸入欄位，用以驅使人們採取某些操作——例如註冊或者閱讀博文等。

我也無法確切告訴大家如何如何設計這種口號或者對字句進行優化。但可以肯定的是，其重要性將不斷提高，並明確影響到每一位網站訪問者。

如今顯示器的尺寸正變得越來越誇張，這意味著大多數網站都需要設定最大寬度。相較於700像素的標準寬度，如果將網站拉伸至2000像素寬，那麼用戶將很難閱讀其中的字句。

更小的內容區域能夠改善瀏覽體驗，並最終讓內容密集型網站獲得更出色的用戶口碑。

我認為越來越多的設計師已經意識到了這個問題，並開始慢慢減少內容顯示區域的大小。我個人能接受的最大寬度為750像素，但大家也可以將其設置為600像素甚至更低。

較少的字句與較小的內容顯示區域能夠實現較短的段落布局，從而提升內容可讀性。目前《紐約時報》等主要發行媒體可能仍在堅持自己的結構準則，但對於簡單的博客或者商業網站而言，整體趨勢確實正朝著更長內容、更小段落與更小內容顯示區域的方向發展。

受篇幅所限，我無法與大家分享全部設計發展趨勢。但我認為本文列出的20項最有趣也最值得關注。

另外，如果大家有著其它想法或者對即將到來的設計趨勢擁有自己的理解，請在評論中與我們分享。