2017最值得關注的8個前沿網頁設計趨勢

影響網頁設計趨勢的最根本因素，並非審美情趣，而是技術的發展。

就過去幾年來說，以下4點值得在未來繼續關註：

• 移動設備使用人數逐年增長

• 移動和家用網路中的帶寬增加

• WebGL技術的出現，使開發人員能夠藉助系統顯示晶元在瀏覽器中展示各種3D模型和場景

• HTML5，CSS3的廣泛應用及JS框架技術的崛起

這些技術進步在很大程度上對網頁設計產生了影響，其中最突出的是2010年「自適應（響應式）網頁設計」概念的產生及應用。

在樣式方面，最近幾年扁平化設計成為主流，後來Google引入Material Design，又稍稍將我們的視線從抽象化中拉回來一些。

2017年，網頁設計會進一步重返現實。

從樣式、配色到功能性，2017會是現實與技術發生碰撞與融合的一年。最終目的就是連接這二者，實現更加「無縫銜接」的瀏覽體驗。

1.??「 多樣化導航 」

自適應網頁設計興起之後，「漢堡包菜單」大行其道。它確實是針對移動設備瀏覽的可行方案，但仍然有缺陷：

不夠直觀，可發現性低；

妨礙用戶參與；

效率較低（對用戶、設計師、開發來說都是）...

我們期待接下來的一年中出現更多實驗性導航設計靈感。

以下幾種菜單設計趨勢作為拋磚引玉：

a. 相框式菜單欄

組合網頁上部、左右，以及向下滾動，形成一個獨特的相框式菜單。

b. Pop over！

Pop over 是彈出式菜單欄（Pop-up）的演變，在Pop over中，導航菜單佔據整個頁面，鮮明大膽卻又不突兀。

c. 乾脆不要菜單了

不使用菜單，取而代之用「scroll →」等提示用戶進行滾動以獲取更多頁面內容。把圖片作為主導，去除多餘信息干擾，簡明突出，尤其適合美食主題網站～

2.??「 分裂 屏幕 」

垂直將屏幕界面分為左右相等的兩塊，用撞色等方式進行分割，營造清晰的視覺分離效果，這種直截了當的網站風格會成為2017年一大趨勢。

簡單的垂直分割看似千篇一律，其實充滿想像力和發揮空間，適用於各類網站。

3.??「色彩復興 」

過去兩年中，灰色大規模劫持了我們的網站。從前的白色網頁背景變成了淡灰色；黑色文本變成了暗灰色；在Material Design中，用淺灰表示縱深的陰影。

2017，是時候讓更多的顏色回來了。可以預見的是，復古色調將受到追捧。

無論你最終決定用藍色還是橙色，可以再試著給它加上一個「濾鏡」，為用戶製造一種溫暖、懷舊的感覺，提升網站的整體氛圍與質感。

4.????????「 自定義滾動 」

越來越多的網站捨棄了傳統的滾動條，轉而創造一種自定義的滾動體驗。一些網站使用的是「虛擬滾動」，即在頁面程序內讓用戶進行滾動操作，而不受瀏覽器控制。

虛擬滾動使更多類型的滾動方式得以實現。比如設計為水平線上的左右滾動，但可以用正常的滑鼠進行控制。

5.????「融合真實與數字世界 」

Material Deaign的出現，在扁平化設計的基礎上加入陰影和斜度，為平面圖標增加了三維立體的視感。

網頁設計的2017年，是進一步重回現實的一年。但這裡所說的並非擬真設計（skeuomorphism），而是讓有形的、可觸碰的真實世界與電子世界無縫對接，創造沒有界限的體驗——

現實中的物體將保留它們的真實細節，完整進入到數字環境中，但又不再受限於現實規則——小物件可以在屏幕上變得巨大，並與數字元素髮生互動。

在Beoplay的網頁上，耳機被突出放大，遠超出真實尺寸，同時與象徵聲音的動態線條結合產生互動。

現實與屏幕的界限被模糊之後，用戶與屏幕上的圖像更容易產生情感聯結。

6.??「 影院級別的交互體驗 」

大幅的視頻錄像背景在2015年就成為網頁設計的趨勢，並且越來越流行。如今，技術的進步使得視頻載入時間大大縮短，同時，WebGL（一種3D繪圖技術）讓這種背景變得更具互動性。

7.??「 讓美術指導取代長寬比 」

在Retina屏上完美顯示的圖片場景，在手機上可能看起來完全不是那麼回事。面對諸多的顯示屏幕，以及各種各樣的長寬比，設計師如何處理這個「自適應的宇宙」？大多數情況下，他們選擇裁剪。

怎樣才能在裁剪中保留設計的本意，不過分丟失信息呢？你需要：數字美術指導。

設計的本質是提供解決問題的方法，而美術指導關注引發對的情感，讓用戶能夠與他們所看到、所經歷的事物產生關聯和共鳴。在網頁設計的過程中引入美術指導的思想，就不會拘泥於將所要傳達的內容看作一張靜止的圖片，而是將它作為一個能傳達故事的主題。

基於這樣的考慮，一些網站已經選擇無視長寬比。例如，Google Arts & Culture支持的網站：The Hidden World of the National Parks（國家公園裡的隱秘世界），這個網站用全屏vedio作為背景，同時也作為網站的主要內容呈現，它能不斷延伸覆蓋任何尺寸的瀏覽器。

8.??「 微動效與微交互 」

運動能吸引注意，這是人類進化的結果。但突發性的大動作只會讓帶來驚嚇和警惕。相反，輕微流暢的運動能給人生機勃勃之感。

在為網頁設計動效時，要記住這二者的差別。

過去很長一段時間，網頁中的動效往往是用來「獎勵」用戶的某種動作，比如點擊。但最近，越來越多的網頁開始將小動效作為一種設計元素，用來吸引用戶的注意力。

比如我們常見的「waypoints」（滾動監聽觸發插件），當頁面滾動到某個元素時，觸發某種動畫，從而精準地讓用戶注意到我們想讓他們重點關注的地方。

這些輕巧的互動不僅僅為用戶體驗加分，而且能賦予一個網站獨特的個性魅力。

??

接下來這一年

能為我們留下深刻印象的網站的

會是哪一家公司呢？

Designup拭目以待

http://Designup.cn| 到Designup 用可靠設計師

推薦閱讀：