從隱藏的導(dǎo)航到跳出的菜單，到更多視頻，再到可穿戴到分屏，最新的潮流變化與潮流，時(shí)刻影響著網(wǎng)頁(yè)設(shè)計(jì)的走向，以下是尚略廣告上海網(wǎng)站設(shè)計(jì)建設(shè)公司期待在2017年看到網(wǎng)頁(yè)設(shè)計(jì)會(huì)發(fā)生的變化。
實(shí)際上關(guān)于網(wǎng)站設(shè)計(jì)趨勢(shì)，之前尚略設(shè)計(jì)公司，之前已有一篇文章“2017年9個(gè)最前沿的網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)”進(jìn)行了介紹。這篇是另外的一些思考，供網(wǎng)頁(yè)設(shè)計(jì)師們參考學(xué)習(xí)。后續(xù)尚略還將繼續(xù)對(duì)網(wǎng)頁(yè)網(wǎng)站的發(fā)展，進(jìn)行相關(guān)研究。
1. 隱藏的導(dǎo)航和彈出式菜單
網(wǎng)站網(wǎng)址：https://www.spotify.com/us/
當(dāng)移動(dòng)設(shè)備的瀏覽比電腦端的瀏覽更加流行的時(shí)候，屏幕空間是寶貴的商品。
特點(diǎn)和菜單隱藏起來(lái)，直到需要它們的時(shí)候。這給屏幕留下更多令人愉悅的元素的空間，如圖片或者視頻，也創(chuàng)造出干凈簡(jiǎn)約的設(shè)計(jì)，讓人更加容易集中精力。
選擇一個(gè)網(wǎng)站建設(shè)：16個(gè)最好的工具
移動(dòng)友好，隱藏的導(dǎo)航也提高了更大屏幕設(shè)備的用戶體驗(yàn)。奇怪的是，隱藏導(dǎo)航菜單事實(shí)上更強(qiáng)調(diào)了導(dǎo)航；用戶能夠在一段時(shí)間集中在一件事情上，當(dāng)他們需要打開(kāi)菜單的時(shí)候，導(dǎo)航就占據(jù)了比網(wǎng)站其它部分更加中心的位置?！?/p>
案例網(wǎng)址：http://take-your-pulse.com/en-US
優(yōu)點(diǎn)：
節(jié)省屏幕空間
強(qiáng)調(diào)導(dǎo)航
簡(jiǎn)約的設(shè)計(jì)更加容易集中精力
提高第一屏的外觀感受
整體設(shè)計(jì)結(jié)構(gòu)的更加靈活性
最佳實(shí)踐：
單色覆蓋。為了最大化簡(jiǎn)化的優(yōu)點(diǎn)，大多數(shù)彈出菜單使用單色背景或者覆蓋，而不是容易分散注意力的或者零碎的背景。你不會(huì)想讓用戶把時(shí)間花在尋找菜單上面 - 為網(wǎng)站頁(yè)面保留好的東西。
網(wǎng)站網(wǎng)址：http://www.alerkyahcity.com/
大的，簡(jiǎn)單的排版。與上面的東西相呼應(yīng)，夸大，大膽，易讀的排版讓導(dǎo)航菜單更清晰更高效，也填補(bǔ)了空間。設(shè)計(jì)師通常用大寫(xiě)的文字進(jìn)一步加強(qiáng)效果。
網(wǎng)站網(wǎng)址：https://www.bvaccel.com/
漢堡式和X圖標(biāo)（用菜單標(biāo)簽更好）。在這一點(diǎn)上，標(biāo)準(zhǔn)被接受的代表彈出菜單的用戶界面模式是漢堡式圖標(biāo)，當(dāng)激活后會(huì)變成X圖標(biāo)，這樣用戶就知道如何關(guān)閉了（尤其它出現(xiàn)在右上角的時(shí)候）。我們一直建議增加一個(gè)“菜單”的標(biāo)簽防止混淆。
網(wǎng)站網(wǎng)址：http://designova.net/reflex/index07.html
推開(kāi)或者覆蓋內(nèi)容。彈出的菜單很少會(huì)占據(jù)整個(gè)屏幕。給原始內(nèi)容留出一些空間能夠讓移動(dòng)端變的更易讀，也會(huì)給電腦端創(chuàng)造出有趣的模仿移動(dòng)端的瀏覽體驗(yàn)。
網(wǎng)站網(wǎng)址：http://veille.reputationsquad.com/#accueil
2. 可穿戴設(shè)備的靈感
網(wǎng)站網(wǎng)址：http://thelobster-movie.com/
正如移動(dòng)瀏覽影響著電腦瀏覽設(shè)計(jì)一樣，可穿戴設(shè)備也影響著網(wǎng)頁(yè)設(shè)計(jì)。2015年可穿戴設(shè)備大火了一把，用戶開(kāi)始期待在其它設(shè)備上有同樣用戶界面的風(fēng)格。
盡管可穿戴設(shè)備浪費(fèi)不起多余的空間，同樣簡(jiǎn)約的原則適用于在其它設(shè)備上更快更容易的瀏覽?！吧偌词嵌唷钡睦砟钤谌魏纹聊怀叽缟隙歼m用。
網(wǎng)站網(wǎng)址：https://www.fitbit.com/uk
優(yōu)點(diǎn)：
流線型的用戶體驗(yàn)
更少的干擾和困惑
極簡(jiǎn)風(fēng)格減少了下載時(shí)間
最佳實(shí)踐：
容器和卡片。卡片已經(jīng)成為持續(xù)的趨勢(shì)了，可穿戴設(shè)備給它們帶來(lái)了新的生機(jī)?？纱┐黠L(fēng)格的結(jié)構(gòu)包括獨(dú)立容器和卡片，這導(dǎo)致在大屏幕上的可掃描性的提高。
網(wǎng)站網(wǎng)址：http://www.adidas.com/us/home-show
大的可伸縮向量圖形圖標(biāo)。確保它們?cè)诟咔逶O(shè)備上也能放縮，也簡(jiǎn)單易懂。
網(wǎng)站網(wǎng)址：http://play2give.org/
嚴(yán)格的配色。配色開(kāi)始回歸基礎(chǔ)。雙色配色或者單色和黑白色越來(lái)越流行。
網(wǎng)站網(wǎng)址：http://tramastudio.net/
大面積空白。為了在不同設(shè)備之間保持連續(xù)，設(shè)計(jì)更傾向于大面積空白，或者極簡(jiǎn)主義風(fēng)格。這不是美學(xué)的選擇：它能在小設(shè)備上節(jié)省屏幕空間，減少下載時(shí)間，提高可視性，創(chuàng)造出更加濃郁的氛圍。
網(wǎng)站網(wǎng)址：http://www.filipnordin.com/
3. 設(shè)計(jì)材料簡(jiǎn)化
網(wǎng)站網(wǎng)址：https://www.dropbox.com/business/
設(shè)計(jì)材料簡(jiǎn)化，或者稱之為MDL，為網(wǎng)頁(yè)設(shè)計(jì)優(yōu)化了紙張?jiān)O(shè)計(jì)語(yǔ)言。有了指導(dǎo)手冊(cè)，六個(gè)模板以及開(kāi)放源代碼，MDL讓材料設(shè)計(jì)對(duì)任何網(wǎng)站或者網(wǎng)頁(yè)app設(shè)計(jì)師來(lái)說(shuō)都變得唾手可得。
同樣也可以應(yīng)用基于物理的界面：分層，運(yùn)動(dòng)，陰影等等，這些都被真正使用起來(lái)，是我們和真實(shí)世界互動(dòng)的一面鏡子。
網(wǎng)站網(wǎng)址：https://www.paypal.com/us/webapps/mpp/pay-online
優(yōu)點(diǎn)：
傳統(tǒng)的材料設(shè)計(jì)的提高，但是保留了原始的優(yōu)點(diǎn)
“逼真的”界面中更良好的易學(xué)性
在所有設(shè)備上都可以使用，跨平臺(tái)可得性（不是基于JavaScript）
最好的實(shí)踐：
基于物理力學(xué)。通過(guò)與真實(shí)世界中的物理原則保持一致來(lái)利用MDL的能量，那就是：
陰影看起來(lái)應(yīng)該是從從一個(gè)自然光源中出現(xiàn)的
物體應(yīng)該有重量和厚度
運(yùn)動(dòng)是對(duì)用戶互動(dòng)的反應(yīng)
網(wǎng)站網(wǎng)址：http://www.rumchata.com/age-gate
定制。利用MDL的多樣組成圖書(shū)館來(lái)互相組合，看看哪個(gè)適合你。
網(wǎng)站網(wǎng)址：http://waaark.com/
平面配色。MDL的在使用平面配色時(shí)效果最好：明亮大膽的色彩，通常一個(gè)主色彩一個(gè)強(qiáng)調(diào)色。這對(duì)前面兩個(gè)簡(jiǎn)約美學(xué)的趨勢(shì)來(lái)講也適用。
網(wǎng)站網(wǎng)址：http://www.lovefila.com/
4.網(wǎng)站分屏效果
網(wǎng)站網(wǎng)址：暫缺。
分屏就像是把你的網(wǎng)站用兩部分獨(dú)立的卡片切割開(kāi)來(lái)（其中的一個(gè)可能包含了小一點(diǎn)的傳統(tǒng)卡片）。
分屏允許內(nèi)容的多樣性：一般可能用吸引注意力的圖片，另外一半是導(dǎo)航菜單。整個(gè)布局用自然視覺(jué)的層級(jí)創(chuàng)造出了令人愉悅的美學(xué)效果。
網(wǎng)站網(wǎng)址：http://www.renaterechner.at/en/
優(yōu)點(diǎn):
在沒(méi)有給用戶造成負(fù)擔(dān)的前提增加了兩種視覺(jué)內(nèi)容的質(zhì)感
傳達(dá)出兩種內(nèi)容的強(qiáng)烈聯(lián)系
創(chuàng)造出迷人有活力的第一屏
最好的實(shí)踐:
使用成對(duì)的內(nèi)容。分屏總是暗示著關(guān)系 - 協(xié)調(diào)或者對(duì)比 - 在兩個(gè)選擇出的內(nèi)容之間，所以謹(jǐn)慎選擇。這包括兩種元素之間同等的重要性，兩種相反的元素，或者兩個(gè)主要的用戶選擇。
網(wǎng)站網(wǎng)址：http://oneofakindshowchicago.com/
有活力的視覺(jué)效果。生動(dòng)的照片，明亮的色彩，絢麗的排版，這些都會(huì)給分屏加分，只要沒(méi)有過(guò)度使用而令人精力渙散就好了。
常見(jiàn)的模式當(dāng)用戶的光標(biāo)懸停在一面時(shí)，另外一面變灰，這樣用戶可以一次集中在一個(gè)視覺(jué)效果上。
網(wǎng)站網(wǎng)址：http://www.baesman.com/
在屏幕之間創(chuàng)造流動(dòng)性。每一屏都應(yīng)該是獨(dú)立的，但也不是完全獨(dú)立于其他屏。記住在兩個(gè)屏幕之間引導(dǎo)用戶實(shí)現(xiàn)視覺(jué)設(shè)計(jì)核心原則。試著通過(guò)使用單個(gè)元素覆蓋兩個(gè)屏幕的方式來(lái)統(tǒng)一，例如網(wǎng)站的名稱?；蛘咴趦蓚€(gè)屏幕上都使用同樣奪人眼球的色彩，就像BUMP所做的那樣。
網(wǎng)站網(wǎng)址：https://www.needabump.com/
5. 更多視頻
網(wǎng)站網(wǎng)址：https://www.designhotels.com/original-experiences
作為一個(gè)已經(jīng)確立的趨勢(shì)，視頻在內(nèi)容和超大背景尺寸上都維持了流行。
2017年視頻的最大不同是數(shù)量，而不是質(zhì)量。我們會(huì)看到同樣風(fēng)格的視頻在更多的網(wǎng)站被更高頻率地使用，有令人愉悅的驚喜形式，也可能不會(huì)超出期待的基線。但是未來(lái)還會(huì)有更多視頻的應(yīng)用，例如互動(dòng)的故事敘述，如下面所描述的。
網(wǎng)站網(wǎng)址：http://www.muller.it/
優(yōu)點(diǎn)：
吸引用戶
情感聯(lián)系的強(qiáng)大容量
可能增加網(wǎng)站停留時(shí)間
比精致圖片更加多樣
最佳實(shí)踐：
高品質(zhì)。視頻的視覺(jué)重要性是雙刃劍，次要的缺點(diǎn)會(huì)吸引更多注意力。盡可能使用高清視頻，并用專業(yè)的視頻技巧來(lái)處理。
網(wǎng)站網(wǎng)址：https://nameourship.nerc.ac.uk/
創(chuàng)造對(duì)比。尤其當(dāng)你使用視頻背景時(shí)，和屏幕上的其它元素形成對(duì)比。覆蓋的文字一定高對(duì)比強(qiáng)烈引起注意，通常通過(guò)對(duì)比色彩。同樣，使用有限的動(dòng)畫(huà)和其它動(dòng)圖，否則界面就太混亂了。
網(wǎng)站網(wǎng)址：http://www.visithumboldt.com/
互動(dòng)性的故事敘述。把故事和其它新型的流行趨勢(shì)結(jié)合起來(lái)，互動(dòng)性的故事敘述，當(dāng)用戶點(diǎn)擊或者下拉時(shí)一個(gè)故事會(huì)不斷發(fā)生進(jìn)展，模擬游戲。視頻的劇院和情感的特點(diǎn)提高了故事敘述技術(shù)技巧期望達(dá)成的所有事情。
網(wǎng)站網(wǎng)址：http://www.converse.com/uk
自動(dòng)靜音。 沒(méi)有人喜歡被突然出現(xiàn)的聲音嚇一跳的體驗(yàn)。設(shè)置視頻自動(dòng)靜音為默認(rèn)狀態(tài)，加上打開(kāi)的選項(xiàng)。
網(wǎng)站網(wǎng)址：https://eyezen-challenge.com/
“無(wú)視頻”。如果你想要在精致圖片和視頻之間找到折中的話，試試無(wú)視頻，這是一種整體上靜止但是只有小范圍移動(dòng)來(lái)體現(xiàn)其視頻屬性。想想一些自然情景，如只有飄落的雪花或者瑟瑟的落葉，或者一對(duì)情侶在一段時(shí)間之后的移動(dòng)，下面寫(xiě)著B(niǎo)UNDY BUNDY 。
網(wǎng)站網(wǎng)址：http://bundy.madebywild.com/
6. VR虛擬現(xiàn)實(shí)元素
網(wǎng)站網(wǎng)址：http://www.samsung.com/us/explore/gear-vr/
展望2017，我們能夠看到VR元素已經(jīng)開(kāi)始滲透到現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中了。
我們不需要VR設(shè)備來(lái)復(fù)制它浸入式的元素，正如我們?cè)谖磥?lái)一年中的網(wǎng)頁(yè)設(shè)計(jì)中將要看到的。移動(dòng)端和電腦設(shè)備的扁平屏幕已經(jīng)可以很好地被操作來(lái)攫取VR的一些優(yōu)勢(shì)了。
網(wǎng)站網(wǎng)址：https://store.google.com/category/virtual_reality
優(yōu)勢(shì)：
浸入式迷人的用戶體驗(yàn)
引領(lǐng)潮流
直覺(jué)的現(xiàn)實(shí)界面
最好的實(shí)踐:
合適比例。VR和網(wǎng)頁(yè)設(shè)計(jì)的不同是，對(duì)VR來(lái)說(shuō)，元素必需根據(jù)現(xiàn)實(shí)世界中的視角來(lái)縮放。人不一定和實(shí)際人類大小一致，但是當(dāng)用戶移動(dòng)的時(shí)候尺寸一定是變化的。
網(wǎng)站網(wǎng)址：https://aframe.io/examples/showcase/shopping/
距離的重要性。在VR中，距離意味著用戶如何和特定元素互動(dòng)。在沒(méi)有平面，2D平面的便利性的前提下，VR設(shè)計(jì)師不得不在項(xiàng)目中結(jié)合模擬現(xiàn)實(shí)空間的圓形的，360度視角。
網(wǎng)站網(wǎng)址：http://film.livyatanim.com/
注意細(xì)節(jié)。VR可能還很年輕，但是目前為止已經(jīng)足夠成熟來(lái)建立自己最佳的實(shí)踐：
避免過(guò)度使用快速動(dòng)畫(huà)，這會(huì)減少惡心。
使用天際線作為連續(xù)的參照系。
設(shè)計(jì)用戶不需要對(duì)周圍看得太多來(lái)了解大致情況的視覺(jué)。
擁抱完全的真實(shí)或者完全的想象 - 避免混用.。
網(wǎng)站設(shè)計(jì)建設(shè)教程知識(shí)，尚略廣告，上海網(wǎng)站設(shè)計(jì)公司，上海網(wǎng)站建設(shè)公司策劃設(shè)計(jì)部原創(chuàng)翻譯發(fā)布。
本文網(wǎng)址：http://m.907632.com/news_info.asp?id=2516，源自：http://www.creativebloq.com/features/6-web-design-trends-worth-knowing-for-2017，轉(zhuǎn)載請(qǐng)注明出處。