網(wǎng)頁設(shè)計(jì)體現(xiàn)在形式與功能的互動(dòng)上。因此可以理解網(wǎng)頁設(shè)計(jì)流行趨勢被工業(yè)所影響，也就是我們使用的工具的處理能力，瀏覽器的復(fù)雜程度，或者可用的編程庫。但是它們也被設(shè)計(jì)原則和設(shè)計(jì)哲學(xué)所影響。
過去的幾年發(fā)生了很多技術(shù)上的改變和進(jìn)步，包括：
a.移動(dòng)設(shè)備的廣泛使用
b.內(nèi)置的3D支持的引進(jìn)（通過矢量地圖的技術(shù)）
c.HTML5, CSS3以及前后端javascript框架的使用
d.增加的網(wǎng)絡(luò)寬帶速度（移動(dòng)端和家庭網(wǎng)絡(luò)）
這些技術(shù)結(jié)合起來給網(wǎng)頁設(shè)計(jì)范例帶來了巨大的變化，最廣為人知的是創(chuàng)造了響應(yīng)式網(wǎng)站設(shè)計(jì)哲學(xué)（越來越傾向于移動(dòng)客戶端）。
從美學(xué)角度來講，三年前的平面設(shè)計(jì)達(dá)到了登峰造極的地步。接著谷歌推出了設(shè)計(jì)素材，這稍稍把我們從抽象中帶出來了。2017年是設(shè)計(jì)年，它在把我們帶回到現(xiàn)實(shí)中的路上更進(jìn)一步。無論是通過形式，色彩選擇還是功能性，2017年是現(xiàn)實(shí)和技術(shù)完美的碰撞出無縫的瀏覽體驗(yàn)的一年。
下面是尚略，上海品牌設(shè)計(jì)公司，上海網(wǎng)站設(shè)計(jì)公司，認(rèn)為會(huì)起到溝通橋梁作用的9個(gè)網(wǎng)站網(wǎng)頁設(shè)計(jì)案例，供大家對(duì)照學(xué)習(xí)。
1.創(chuàng)新導(dǎo)航菜單網(wǎng)站案例
從20年前的網(wǎng)頁設(shè)計(jì)的黑暗時(shí)期起，有兩種標(biāo)準(zhǔn)類型的導(dǎo)航：頂部和側(cè)欄。隨著回應(yīng)式網(wǎng)頁設(shè)計(jì)的興起，我們看到了漢堡包式的導(dǎo)航菜單有了更簡單的列表。對(duì)移動(dòng)端來說漢堡包式的結(jié)構(gòu)是可解決方案，但是它并不是完美的。因?yàn)椋?/p>
a.妨礙了用戶參與
b.低暴露性
c.效率低下（對(duì)用戶和設(shè)計(jì)/開發(fā)團(tuán)隊(duì)均如此）
d.沒有活力
由于這些混合的，相互矛盾的感覺，以及移動(dòng)用戶的持續(xù)增加，我們期待在2017年看到更多的菜單的創(chuàng)新。以下是幾種用來打破傳統(tǒng)菜單和漢堡菜單的方式：
給菜單加上框架
放棄菜單
用戶不用再被告知在網(wǎng)站上面應(yīng)該怎么操作了。他們知道應(yīng)該怎么用滾動(dòng)條，并且會(huì)在找到自己想要的信息的。一些網(wǎng)頁設(shè)計(jì)師選擇完全放棄菜單，允許用戶自己在網(wǎng)站上探索。隨著手機(jī)和平板電腦的普及，也有了側(cè)滾動(dòng)條。
匿名漢堡網(wǎng)站不使用菜單，而是要求觀眾滾動(dòng)可訪問更多的內(nèi)容。
擁抱漢堡包式菜單，把它變成導(dǎo)航的唯一途徑
比起設(shè)計(jì)兩種不同的菜單，一種適用于電腦另外一種適用于移動(dòng)端瀏覽，許多網(wǎng)站開始選擇在不同的設(shè)備上都使用漢堡包式菜單。因?yàn)楹芏嗳艘呀?jīng)知道了這種三條小短線代表著菜單，所以沒有必要用實(shí)際的導(dǎo)航條來占據(jù)屏幕了。當(dāng)然，你不一定要用真正的漢堡包式的圖標(biāo)。我們見過剛剛學(xué)習(xí)排版的設(shè)計(jì)師來用圖標(biāo)提示用戶點(diǎn)擊菜單按鈕。
訪問：Dursun網(wǎng)站
DESS使用了“ALL”一詞讓我們知道應(yīng)該點(diǎn)擊哪里。
訪問：Marmo Elite
彈出式菜單
我們被下拉式菜單遮蔽了眼睛，而忽略了探索簡單的方式：彈出式導(dǎo)航！（或者像案例中的那樣在屏幕的正中央彈出）。有許多地方可以彈出菜單來讓用戶看到并使用它，而不是傳統(tǒng)的下拉式。
點(diǎn)擊側(cè)邊欄的優(yōu)雅漢堡包提示居中彈出式導(dǎo)航菜單。通過circlesconference.com
彈出框
彈出式導(dǎo)航的一種變形是彈出框，這是用導(dǎo)航覆蓋在整個(gè)頁面上的方法。這很大膽，但是感覺很舒服。有一些回歸到印刷出版業(yè)中的目錄部分。
該pinqponq網(wǎng)站使用一個(gè)漢堡包菜單...
www.edelson.com使用相同的概念，但酥料餅導(dǎo)航包括在網(wǎng)格6項(xiàng)。每個(gè)網(wǎng)格單元，在上空盤旋，改變頁面的背景圖像，并顯示照片的焦點(diǎn)。
2.分屏處理
用清楚的視覺上的分隔，垂直的把屏幕分成相等的兩份。我們期待在2017年看到更多類似的設(shè)計(jì)。這種設(shè)計(jì)的視覺效果很突出，讓人想起打開一本書的情景，讓網(wǎng)站看起來很自然。這個(gè)方式也很多功能：在小型的顯示器或者設(shè)備上，兩部分能夠組成連續(xù)的塊或者變成側(cè)板導(dǎo)航。
請(qǐng)?jiān)L問：ParadisePad
請(qǐng)?jiān)L問：duskoskoko
訪問：Texas Beard Company
3.使用復(fù)古風(fēng)格的顏色
過去的幾年時(shí)間里，網(wǎng)頁基本的色調(diào)都是灰色：淺灰色背景，而不是白色。青灰色文字而不是黑色的。淡灰色背景來創(chuàng)造材質(zhì)設(shè)計(jì)上的深度。2017年我們終于要看到顏色的回歸了！回歸到明亮的復(fù)古色調(diào)。
為一個(gè)網(wǎng)站選擇顏色很復(fù)雜，這其中有多重因素，包括當(dāng)前的企業(yè)形象，行業(yè)，色彩心理學(xué)，個(gè)人品味等等。無論你決定用喜歡的藍(lán)色，或者橘色，把這些顏色通過Instagram的濾鏡來創(chuàng)造出溫暖懷舊的感覺。
Wolf and Son鞋子網(wǎng)站選擇靜音，棕褐色調(diào)一樣，調(diào)用老照片，并強(qiáng)調(diào)家族傳承和優(yōu)質(zhì)工藝的自己的品牌價(jià)值。
The Practical Man使用了70年代風(fēng)格的綠色帶來的樂趣懷舊感到他們的網(wǎng)站。
SmartFX（設(shè)計(jì)由亞瑟Baklachyan）喚起他們的靜音鮮亮70年代。
gassiheld.de（由設(shè)計(jì)smashingbug）使用一個(gè)明亮舒適的橙色，使他們的網(wǎng)站感覺溫馨。
udiograph網(wǎng)站玩弄60年代啟發(fā)的迷幻圖案和顏色。
4.定制滾動(dòng)滾輪
我們見證了傳統(tǒng)網(wǎng)頁中的滾動(dòng)條被逐漸放棄的過程，而不是為內(nèi)容設(shè)計(jì)出定制的網(wǎng)頁體驗(yàn)。有的網(wǎng)站使用虛擬滾輪，這個(gè)虛擬滾輪允許用戶在應(yīng)用程序內(nèi)控制而不是在瀏覽器中控制。這實(shí)現(xiàn)不同類型的滾動(dòng)方式，比如內(nèi)嵌式阿姆斯特丹網(wǎng)站的設(shè)計(jì)是水平式滾軸設(shè)置，但是可以用標(biāo)準(zhǔn)鼠標(biāo)來控制。向上下滾動(dòng)可以控制左右的內(nèi)容，把移動(dòng)端和平板電腦的體驗(yàn)帶入了電腦中。
Dess 瀏覽器滾動(dòng)條和與其建立虛擬滾動(dòng)
訪問：Build in Amsterdam
還有別的網(wǎng)站使用了“點(diǎn)擊拖拉來探索”式的導(dǎo)航。Grim London 和Magic in New York展現(xiàn)給使用者一幅地圖，讓他們拖拉這張地圖來尋找自己想要的東西，假裝把滾動(dòng)條放在了用戶的手中。替代了傳統(tǒng)的導(dǎo)航，用戶點(diǎn)擊分散在地圖上的圖標(biāo)來了解更多。
這些網(wǎng)站幾乎都使用了 WebGL 應(yīng)用來創(chuàng)建和展示他們的內(nèi)容。Grim London是一個(gè)創(chuàng)新的技術(shù)實(shí)現(xiàn)：一個(gè)定制的地圖引擎建立在PixiJS 的頂端。
訪問： Grim London
訪問：Fantastic Beasts Magical Maps
5.增加數(shù)字觸覺
三年前，平面設(shè)計(jì)讓路于材料設(shè)計(jì)，材料設(shè)計(jì)是給平面的圖像增加陰影和漸變，最終帶給平面的屏幕3D的效果。今年我們又要向現(xiàn)實(shí)踏進(jìn)一步了。也就是說，我們不是回到擬真設(shè)計(jì)，這是一種在電子領(lǐng)域模仿真實(shí)世界的技術(shù)。2017年是關(guān)于把身體的觸覺和電子完美結(jié)合的一年。
區(qū)別于把不同的圖案元素放到一個(gè)清晰的長方形中，從屏風(fēng)中創(chuàng)造出一個(gè)真實(shí)世界中的窗戶（去除了物體的背景，放進(jìn)完全數(shù)字景觀中）。允許保留他們的光線和陰影，以及3D的本質(zhì)，但是它們也不用繼續(xù)扮演在真實(shí)世界中的角色了。物體沒有在真實(shí)世界中的尺寸，一本書可能和卡車一樣大，這樣這些物品就可以刻數(shù)字元素進(jìn)行互動(dòng)。Beoplay網(wǎng)站：他們做出的耳機(jī)比現(xiàn)實(shí)生活中的大，這可以讓耳機(jī)和表示聲音的動(dòng)畫數(shù)字線條進(jìn)行互動(dòng)。
在數(shù)字領(lǐng)域融合實(shí)際物品模糊了屏幕和真實(shí)世界的界限。反過來，建立了我們和設(shè)備上的圖像的感情聯(lián)系。
訪問：Beoplay
訪問：trumpdesign
6.巧妙的動(dòng)畫效果和微互動(dòng)
運(yùn)動(dòng)的東西總是吸引人的注意力，這是人類進(jìn)化的結(jié)果。突然闖進(jìn)視野的大東西尤其會(huì)提醒我們危險(xiǎn)的到來。另外一方面來說，小的，流動(dòng)的運(yùn)動(dòng)代表著生命。在給你的網(wǎng)頁設(shè)計(jì)中注入運(yùn)動(dòng)元素時(shí)記住這個(gè)知識(shí)。在你面前的大的東西可能是具有壓倒性的，分散瀏覽者的注意力。但是更微妙的元素能夠給設(shè)計(jì)增加有機(jī)的感覺。
幾年以來，我們看到的都是動(dòng)畫用作獎(jiǎng)勵(lì)用戶的一個(gè)動(dòng)作。比如說，盤旋運(yùn)動(dòng)的一些東西或者點(diǎn)擊互動(dòng)。最近我們看到動(dòng)畫作為設(shè)計(jì)元素更精妙地融合到網(wǎng)頁中，用來吸引用戶的注意力。尤其是很多轉(zhuǎn)折點(diǎn)的使用，這允許用戶在下拉網(wǎng)頁的時(shí)候有一些情景的產(chǎn)生。這就意味著用戶看到的東西正是我們想要他們看到的。
無論是通過 javascript還是CSS植入，微互動(dòng)不止視為用戶體驗(yàn)服務(wù)，而且也給網(wǎng)站帶來了個(gè)性。
訪問：Project Sunday
y
訪問：Kekselias
7.放棄縱橫比，擁抱藝術(shù)設(shè)計(jì)
又短又寬的東西在視網(wǎng)膜級(jí)電影院設(shè)備上看起來很棒，但是在垂直使用的手機(jī)上就不合適了。構(gòu)成是設(shè)計(jì)的一個(gè)最基本要素。所以你如何創(chuàng)造出一個(gè)響應(yīng)的世界，內(nèi)容在屏幕和瀏覽器的什么地方展示？而其中瀏覽器有著各種不同的縱橫比尺寸。你一定要裁剪。但是如何同時(shí)保持設(shè)計(jì)的完整性呢？答案是：數(shù)字設(shè)計(jì)方向。
最近我們看到了許多新工具的出現(xiàn)，這些新工具允許我們?cè)诜艞墏鹘y(tǒng)的自動(dòng)裁剪的同時(shí)能精確地控制頁面。這也讓我們思考，不是思考靜止的圖片內(nèi)容，而是主題。你要通過圖片來講什么故事？強(qiáng)調(diào)出這一點(diǎn)，然后讓用戶來控制顯示。
smartcrop.js
一些網(wǎng)站選擇徹底忽視縱橫比，給瀏覽者來重構(gòu)的自由。The Hidden World of the National Parks 使用了全背景視頻- 這是網(wǎng)站的主要內(nèi)容- 無論你做的是什么形狀，最終都會(huì)被拉到瀏覽器的邊緣。
Google Arts & Culture
8.影院體驗(yàn)
在2015年的時(shí)候大型的電影試聽背景已經(jīng)開始流行了。現(xiàn)在隨著技術(shù)的進(jìn)步，網(wǎng)速的提高，變得越來越盛行。WebGL 的進(jìn)步讓這些背景變得具有互動(dòng)性，在網(wǎng)站上創(chuàng)造了浸入式的影院體驗(yàn)。
visithumboldt.com
audiograph.xyz
另一方面來說，影院體驗(yàn)的尺寸被減小了，小型的視頻元素給頁面帶來了生機(jī)，給觀看者帶來了更多的時(shí)尚感。
Kikk
Project Sunday
9.游戲化
游戲化是“在非游戲環(huán)境中使用游戲設(shè)計(jì)元素和游戲原則”，目的是增加用戶的興趣。換句話說，你想讓人們記住你的網(wǎng)站嗎？更加深入的探索怎么樣呢？把它做的有趣！
一個(gè)使用游戲化的經(jīng)典例子是 WebGL作技術(shù)支持的網(wǎng)站上的電影《瑞士軍人》。頁面上的3D元素不止是隨意的效果。在頭腦中設(shè)計(jì)出來的，有著重力和物理環(huán)境的空間（包括流體力學(xué)）中給你一個(gè)人物來讓你扔。（如果你喜歡的話也可以讓他做其他類似于放屁的事情。）
別的網(wǎng)站使用游戲化來教授他們的用戶新的語言，或者教授他們宇宙歷史。
訪問：visithumboldt.com
訪問： bs.com
2017年一定是網(wǎng)頁設(shè)計(jì)大放光彩的一年。因?yàn)閿?shù)字設(shè)計(jì)開始趨向于融合更有觸感的，真實(shí)世界的感覺。
網(wǎng)頁設(shè)計(jì)教程與觀點(diǎn)分享，尚略廣告，上海品牌設(shè)計(jì)公司，上海網(wǎng)站策劃設(shè)計(jì)公司設(shè)計(jì)部。
本文網(wǎng)址：http://www.uk2b.cn/news_info.asp?id=2462，轉(zhuǎn)載請(qǐng)注明出處。
尚略上海品牌策劃設(shè)計(jì)公司快速導(dǎo)航：