從隱藏的導航到跳出的菜單，到更多視頻，再到可穿戴到分屏，最新的潮流變化與潮流，時刻影響著網(wǎng)頁設計的走向，以下是尚略廣告上海網(wǎng)站設計建設公司期待在2017年看到網(wǎng)頁設計會發(fā)生的變化。

實際上關于網(wǎng)站設計趨勢，之前尚略設計公司，之前已有一篇文章“2017年9個最前沿的網(wǎng)頁設計流行趨勢”進行了介紹。這篇是另外的一些思考，供網(wǎng)頁設計師們參考學習。后續(xù)尚略還將繼續(xù)對網(wǎng)頁網(wǎng)站的發(fā)展，進行相關研究。

1. 隱藏的導航和彈出式菜單

網(wǎng)站網(wǎng)址：https://www.spotify.com/us/

當移動設備的瀏覽比電腦端的瀏覽更加流行的時候，屏幕空間是寶貴的商品。

特點和菜單隱藏起來，直到需要它們的時候。這給屏幕留下更多令人愉悅的元素的空間，如圖片或者視頻，也創(chuàng)造出干凈簡約的設計，讓人更加容易集中精力。

選擇一個網(wǎng)站建設：16個最好的工具

移動友好，隱藏的導航也提高了更大屏幕設備的用戶體驗。奇怪的是，隱藏導航菜單事實上更強調(diào)了導航；用戶能夠在一段時間集中在一件事情上，當他們需要打開菜單的時候，導航就占據(jù)了比網(wǎng)站其它部分更加中心的位置?！?/p>

案例網(wǎng)址：http://take-your-pulse.com/en-US

優(yōu)點：

節(jié)省屏幕空間

強調(diào)導航

簡約的設計更加容易集中精力

提高第一屏的外觀感受

整體設計結構的更加靈活性

最佳實踐：

單色覆蓋。為了最大化簡化的優(yōu)點，大多數(shù)彈出菜單使用單色背景或者覆蓋，而不是容易分散注意力的或者零碎的背景。你不會想讓用戶把時間花在尋找菜單上面 - 為網(wǎng)站頁面保留好的東西。

網(wǎng)站網(wǎng)址：http://www.alerkyahcity.com/

大的，簡單的排版。與上面的東西相呼應，夸大，大膽，易讀的排版讓導航菜單更清晰更高效，也填補了空間。設計師通常用大寫的文字進一步加強效果。

網(wǎng)站網(wǎng)址：https://www.bvaccel.com/

漢堡式和X圖標（用菜單標簽更好）。在這一點上，標準被接受的代表彈出菜單的用戶界面模式是漢堡式圖標，當激活后會變成X圖標，這樣用戶就知道如何關閉了（尤其它出現(xiàn)在右上角的時候）。我們一直建議增加一個“菜單”的標簽防止混淆。

網(wǎng)站網(wǎng)址：http://designova.net/reflex/index07.html

推開或者覆蓋內(nèi)容。彈出的菜單很少會占據(jù)整個屏幕。給原始內(nèi)容留出一些空間能夠讓移動端變的更易讀，也會給電腦端創(chuàng)造出有趣的模仿移動端的瀏覽體驗。

網(wǎng)站網(wǎng)址：http://veille.reputationsquad.com/#accueil

2. 可穿戴設備的靈感

網(wǎng)站網(wǎng)址：http://thelobster-movie.com/

正如移動瀏覽影響著電腦瀏覽設計一樣，可穿戴設備也影響著網(wǎng)頁設計。2015年可穿戴設備大火了一把，用戶開始期待在其它設備上有同樣用戶界面的風格。

盡管可穿戴設備浪費不起多余的空間，同樣簡約的原則適用于在其它設備上更快更容易的瀏覽?！吧偌词嵌唷钡睦砟钤谌魏纹聊怀叽缟隙歼m用。

網(wǎng)站網(wǎng)址：https://www.fitbit.com/uk

優(yōu)點：

流線型的用戶體驗

更少的干擾和困惑

極簡風格減少了下載時間

最佳實踐：

容器和卡片。卡片已經(jīng)成為持續(xù)的趨勢了，可穿戴設備給它們帶來了新的生機?？纱┐黠L格的結構包括獨立容器和卡片，這導致在大屏幕上的可掃描性的提高。

網(wǎng)站網(wǎng)址：http://www.adidas.com/us/home-show

大的可伸縮向量圖形圖標。確保它們在高清設備上也能放縮，也簡單易懂。

網(wǎng)站網(wǎng)址：http://play2give.org/

嚴格的配色。配色開始回歸基礎。雙色配色或者單色和黑白色越來越流行。

網(wǎng)站網(wǎng)址：http://tramastudio.net/

大面積空白。為了在不同設備之間保持連續(xù)，設計更傾向于大面積空白，或者極簡主義風格。這不是美學的選擇：它能在小設備上節(jié)省屏幕空間，減少下載時間，提高可視性，創(chuàng)造出更加濃郁的氛圍。

網(wǎng)站網(wǎng)址：http://www.filipnordin.com/

3. 設計材料簡化

網(wǎng)站網(wǎng)址：https://www.dropbox.com/business/

設計材料簡化，或者稱之為MDL，為網(wǎng)頁設計優(yōu)化了紙張設計語言。有了指導手冊，六個模板以及開放源代碼，MDL讓材料設計對任何網(wǎng)站或者網(wǎng)頁app設計師來說都變得唾手可得。

同樣也可以應用基于物理的界面：分層，運動，陰影等等，這些都被真正使用起來，是我們和真實世界互動的一面鏡子。

網(wǎng)站網(wǎng)址：https://www.paypal.com/us/webapps/mpp/pay-online

優(yōu)點：

傳統(tǒng)的材料設計的提高，但是保留了原始的優(yōu)點

“逼真的”界面中更良好的易學性

在所有設備上都可以使用，跨平臺可得性（不是基于JavaScript）

最好的實踐：

基于物理力學。通過與真實世界中的物理原則保持一致來利用MDL的能量，那就是：

陰影看起來應該是從從一個自然光源中出現(xiàn)的

物體應該有重量和厚度

運動是對用戶互動的反應

網(wǎng)站網(wǎng)址：http://www.rumchata.com/age-gate

定制。利用MDL的多樣組成圖書館來互相組合，看看哪個適合你。

網(wǎng)站網(wǎng)址：http://waaark.com/

平面配色。MDL的在使用平面配色時效果最好：明亮大膽的色彩，通常一個主色彩一個強調(diào)色。這對前面兩個簡約美學的趨勢來講也適用。

網(wǎng)站網(wǎng)址：http://www.lovefila.com/ 

4.網(wǎng)站分屏效果

網(wǎng)站網(wǎng)址：暫缺。

分屏就像是把你的網(wǎng)站用兩部分獨立的卡片切割開來（其中的一個可能包含了小一點的傳統(tǒng)卡片）。

分屏允許內(nèi)容的多樣性：一般可能用吸引注意力的圖片，另外一半是導航菜單。整個布局用自然視覺的層級創(chuàng)造出了令人愉悅的美學效果。

網(wǎng)站網(wǎng)址：http://www.renaterechner.at/en/

優(yōu)點:

在沒有給用戶造成負擔的前提增加了兩種視覺內(nèi)容的質(zhì)感

傳達出兩種內(nèi)容的強烈聯(lián)系

創(chuàng)造出迷人有活力的第一屏

最好的實踐:

使用成對的內(nèi)容。分屏總是暗示著關系 - 協(xié)調(diào)或者對比 - 在兩個選擇出的內(nèi)容之間，所以謹慎選擇。這包括兩種元素之間同等的重要性，兩種相反的元素，或者兩個主要的用戶選擇。

網(wǎng)站網(wǎng)址：http://oneofakindshowchicago.com/

有活力的視覺效果。生動的照片，明亮的色彩，絢麗的排版，這些都會給分屏加分，只要沒有過度使用而令人精力渙散就好了。

常見的模式當用戶的光標懸停在一面時，另外一面變灰，這樣用戶可以一次集中在一個視覺效果上。

網(wǎng)站網(wǎng)址：http://www.baesman.com/

在屏幕之間創(chuàng)造流動性。每一屏都應該是獨立的，但也不是完全獨立于其他屏。記住在兩個屏幕之間引導用戶實現(xiàn)視覺設計核心原則。試著通過使用單個元素覆蓋兩個屏幕的方式來統(tǒng)一，例如網(wǎng)站的名稱。或者在兩個屏幕上都使用同樣奪人眼球的色彩，就像BUMP所做的那樣。

網(wǎng)站網(wǎng)址：https://www.needabump.com/

5. 更多視頻

網(wǎng)站網(wǎng)址：https://www.designhotels.com/original-experiences

作為一個已經(jīng)確立的趨勢，視頻在內(nèi)容和超大背景尺寸上都維持了流行。

2017年視頻的最大不同是數(shù)量，而不是質(zhì)量。我們會看到同樣風格的視頻在更多的網(wǎng)站被更高頻率地使用，有令人愉悅的驚喜形式，也可能不會超出期待的基線。但是未來還會有更多視頻的應用，例如互動的故事敘述，如下面所描述的。

網(wǎng)站網(wǎng)址：http://www.muller.it/

優(yōu)點：

吸引用戶

情感聯(lián)系的強大容量

可能增加網(wǎng)站停留時間

比精致圖片更加多樣

最佳實踐：

高品質(zhì)。視頻的視覺重要性是雙刃劍，次要的缺點會吸引更多注意力。盡可能使用高清視頻，并用專業(yè)的視頻技巧來處理。

網(wǎng)站網(wǎng)址：https://nameourship.nerc.ac.uk/

創(chuàng)造對比。尤其當你使用視頻背景時，和屏幕上的其它元素形成對比。覆蓋的文字一定高對比強烈引起注意，通常通過對比色彩。同樣，使用有限的動畫和其它動圖，否則界面就太混亂了。

網(wǎng)站網(wǎng)址：http://www.visithumboldt.com/

互動性的故事敘述。把故事和其它新型的流行趨勢結合起來，互動性的故事敘述，當用戶點擊或者下拉時一個故事會不斷發(fā)生進展，模擬游戲。視頻的劇院和情感的特點提高了故事敘述技術技巧期望達成的所有事情。

網(wǎng)站網(wǎng)址：http://www.converse.com/uk

自動靜音。 沒有人喜歡被突然出現(xiàn)的聲音嚇一跳的體驗。設置視頻自動靜音為默認狀態(tài)，加上打開的選項。

網(wǎng)站網(wǎng)址：https://eyezen-challenge.com/

“無視頻”。如果你想要在精致圖片和視頻之間找到折中的話，試試無視頻，這是一種整體上靜止但是只有小范圍移動來體現(xiàn)其視頻屬性。想想一些自然情景，如只有飄落的雪花或者瑟瑟的落葉，或者一對情侶在一段時間之后的移動，下面寫著BUNDY BUNDY 。

網(wǎng)站網(wǎng)址：http://bundy.madebywild.com/

6. VR虛擬現(xiàn)實元素

網(wǎng)站網(wǎng)址：http://www.samsung.com/us/explore/gear-vr/

展望2017，我們能夠看到VR元素已經(jīng)開始滲透到現(xiàn)代網(wǎng)頁設計中了。

我們不需要VR設備來復制它浸入式的元素，正如我們在未來一年中的網(wǎng)頁設計中將要看到的。移動端和電腦設備的扁平屏幕已經(jīng)可以很好地被操作來攫取VR的一些優(yōu)勢了。

網(wǎng)站網(wǎng)址：https://store.google.com/category/virtual_reality

優(yōu)勢：

浸入式迷人的用戶體驗

引領潮流

直覺的現(xiàn)實界面

最好的實踐:

合適比例。VR和網(wǎng)頁設計的不同是，對VR來說，元素必需根據(jù)現(xiàn)實世界中的視角來縮放。人不一定和實際人類大小一致，但是當用戶移動的時候尺寸一定是變化的。

網(wǎng)站網(wǎng)址：https://aframe.io/examples/showcase/shopping/

距離的重要性。在VR中，距離意味著用戶如何和特定元素互動。在沒有平面，2D平面的便利性的前提下，VR設計師不得不在項目中結合模擬現(xiàn)實空間的圓形的，360度視角。

網(wǎng)站網(wǎng)址：http://film.livyatanim.com/

注意細節(jié)。VR可能還很年輕，但是目前為止已經(jīng)足夠成熟來建立自己最佳的實踐：

避免過度使用快速動畫，這會減少惡心。

使用天際線作為連續(xù)的參照系。

設計用戶不需要對周圍看得太多來了解大致情況的視覺。

擁抱完全的真實或者完全的想象 - 避免混用.。

網(wǎng)站設計建設教程知識，尚略廣告，上海網(wǎng)站設計公司，上海網(wǎng)站建設公司策劃設計部原創(chuàng)翻譯發(fā)布。

本文網(wǎng)址：http://www.zpcysw.cn/news_info.asp?id=2516，源自：http://www.creativebloq.com/features/6-web-design-trends-worth-knowing-for-2017，轉載請注明出處。