網頁設計體現(xiàn)在形式與功能的互動上。因此可以理解網頁設計流行趨勢被工業(yè)所影響，也就是我們使用的工具的處理能力，瀏覽器的復雜程度，或者可用的編程庫。但是它們也被設計原則和設計哲學所影響。

過去的幾年發(fā)生了很多技術上的改變和進步，包括：

這些技術結合起來給網頁設計范例帶來了巨大的變化，最廣為人知的是創(chuàng)造了響應式網站設計哲學（越來越傾向于移動客戶端）。

從美學角度來講，三年前的平面設計達到了登峰造極的地步。接著谷歌推出了設計素材，這稍稍把我們從抽象中帶出來了。2017年是設計年，它在把我們帶回到現(xiàn)實中的路上更進一步。無論是通過形式，色彩選擇還是功能性，2017年是現(xiàn)實和技術完美的碰撞出無縫的瀏覽體驗的一年。

下面是尚略，上海品牌設計公司，上海網站設計公司，認為會起到溝通橋梁作用的9個網站網頁設計案例，供大家對照學習。

1.創(chuàng)新導航菜單網站案例

從20年前的網頁設計的黑暗時期起，有兩種標準類型的導航：頂部和側欄。隨著回應式網頁設計的興起，我們看到了漢堡包式的導航菜單有了更簡單的列表。對移動端來說漢堡包式的結構是可解決方案，但是它并不是完美的。因為：

由于這些混合的，相互矛盾的感覺，以及移動用戶的持續(xù)增加，我們期待在2017年看到更多的菜單的創(chuàng)新。以下是幾種用來打破傳統(tǒng)菜單和漢堡菜單的方式：

給菜單加上框架

放棄菜單

用戶不用再被告知在網站上面應該怎么操作了。他們知道應該怎么用滾動條，并且會在找到自己想要的信息的。一些網頁設計師選擇完全放棄菜單，允許用戶自己在網站上探索。隨著手機和平板電腦的普及，也有了側滾動條。

匿名漢堡網站不使用菜單，而是要求觀眾滾動可訪問更多的內容。 

擁抱漢堡包式菜單，把它變成導航的唯一途徑

比起設計兩種不同的菜單，一種適用于電腦另外一種適用于移動端瀏覽，許多網站開始選擇在不同的設備上都使用漢堡包式菜單。因為很多人已經知道了這種三條小短線代表著菜單，所以沒有必要用實際的導航條來占據屏幕了。當然，你不一定要用真正的漢堡包式的圖標。我們見過剛剛學習排版的設計師來用圖標提示用戶點擊菜單按鈕。

訪問：Dursun網站

DESS使用了“ALL”一詞讓我們知道應該點擊哪里。

訪問：Marmo Elite

彈出式菜單

我們被下拉式菜單遮蔽了眼睛，而忽略了探索簡單的方式：彈出式導航！（或者像案例中的那樣在屏幕的正中央彈出）。有許多地方可以彈出菜單來讓用戶看到并使用它，而不是傳統(tǒng)的下拉式。

點擊側邊欄的優(yōu)雅漢堡包提示居中彈出式導航菜單。通過circlesconference.com

彈出框

彈出式導航的一種變形是彈出框，這是用導航覆蓋在整個頁面上的方法。這很大膽，但是感覺很舒服。有一些回歸到印刷出版業(yè)中的目錄部分。

該pinqponq網站使用一個漢堡包菜單...

www.edelson.com使用相同的概念，但酥料餅導航包括在網格6項。每個網格單元，在上空盤旋，改變頁面的背景圖像，并顯示照片的焦點。 

2.分屏處理

用清楚的視覺上的分隔，垂直的把屏幕分成相等的兩份。我們期待在2017年看到更多類似的設計。這種設計的視覺效果很突出，讓人想起打開一本書的情景，讓網站看起來很自然。這個方式也很多功能：在小型的顯示器或者設備上，兩部分能夠組成連續(xù)的塊或者變成側板導航。

請訪問：ParadisePad

請訪問：duskoskoko

訪問：Texas Beard Company

3.使用復古風格的顏色

過去的幾年時間里，網頁基本的色調都是灰色：淺灰色背景，而不是白色。青灰色文字而不是黑色的。淡灰色背景來創(chuàng)造材質設計上的深度。2017年我們終于要看到顏色的回歸了！回歸到明亮的復古色調。

為一個網站選擇顏色很復雜，這其中有多重因素，包括當前的企業(yè)形象，行業(yè)，色彩心理學，個人品味等等。無論你決定用喜歡的藍色，或者橘色，把這些顏色通過Instagram的濾鏡來創(chuàng)造出溫暖懷舊的感覺。

Wolf and Son鞋子網站選擇靜音，棕褐色調一樣，調用老照片，并強調家族傳承和優(yōu)質工藝的自己的品牌價值。

The Practical Man使用了70年代風格的綠色帶來的樂趣懷舊感到他們的網站。

SmartFX（設計由亞瑟Baklachyan）喚起他們的靜音鮮亮70年代。

gassiheld.de（由設計smashingbug）使用一個明亮舒適的橙色，使他們的網站感覺溫馨。

udiograph網站玩弄60年代啟發(fā)的迷幻圖案和顏色。

4.定制滾動滾輪

我們見證了傳統(tǒng)網頁中的滾動條被逐漸放棄的過程，而不是為內容設計出定制的網頁體驗。有的網站使用虛擬滾輪，這個虛擬滾輪允許用戶在應用程序內控制而不是在瀏覽器中控制。這實現(xiàn)不同類型的滾動方式，比如內嵌式阿姆斯特丹網站的設計是水平式滾軸設置，但是可以用標準鼠標來控制。向上下滾動可以控制左右的內容，把移動端和平板電腦的體驗帶入了電腦中。

Dess 瀏覽器滾動條和與其建立虛擬滾動

訪問：Build in Amsterdam 

還有別的網站使用了“點擊拖拉來探索”式的導航。Grim London 和Magic in New York展現(xiàn)給使用者一幅地圖，讓他們拖拉這張地圖來尋找自己想要的東西，假裝把滾動條放在了用戶的手中。替代了傳統(tǒng)的導航，用戶點擊分散在地圖上的圖標來了解更多。

這些網站幾乎都使用了 WebGL 應用來創(chuàng)建和展示他們的內容。Grim London是一個創(chuàng)新的技術實現(xiàn)：一個定制的地圖引擎建立在PixiJS 的頂端。

訪問： Grim London

訪問：Fantastic Beasts Magical Maps

5.增加數字觸覺

三年前，平面設計讓路于材料設計，材料設計是給平面的圖像增加陰影和漸變，最終帶給平面的屏幕3D的效果。今年我們又要向現(xiàn)實踏進一步了。也就是說，我們不是回到擬真設計，這是一種在電子領域模仿真實世界的技術。2017年是關于把身體的觸覺和電子完美結合的一年。

區(qū)別于把不同的圖案元素放到一個清晰的長方形中，從屏風中創(chuàng)造出一個真實世界中的窗戶（去除了物體的背景，放進完全數字景觀中）。允許保留他們的光線和陰影，以及3D的本質，但是它們也不用繼續(xù)扮演在真實世界中的角色了。物體沒有在真實世界中的尺寸，一本書可能和卡車一樣大，這樣這些物品就可以刻數字元素進行互動。Beoplay網站：他們做出的耳機比現(xiàn)實生活中的大，這可以讓耳機和表示聲音的動畫數字線條進行互動。

在數字領域融合實際物品模糊了屏幕和真實世界的界限。反過來，建立了我們和設備上的圖像的感情聯(lián)系。

訪問：Beoplay

訪問：trumpdesign

6.巧妙的動畫效果和微互動

運動的東西總是吸引人的注意力，這是人類進化的結果。突然闖進視野的大東西尤其會提醒我們危險的到來。另外一方面來說，小的，流動的運動代表著生命。在給你的網頁設計中注入運動元素時記住這個知識。在你面前的大的東西可能是具有壓倒性的，分散瀏覽者的注意力。但是更微妙的元素能夠給設計增加有機的感覺。

幾年以來，我們看到的都是動畫用作獎勵用戶的一個動作。比如說，盤旋運動的一些東西或者點擊互動。最近我們看到動畫作為設計元素更精妙地融合到網頁中，用來吸引用戶的注意力。尤其是很多轉折點的使用，這允許用戶在下拉網頁的時候有一些情景的產生。這就意味著用戶看到的東西正是我們想要他們看到的。

無論是通過 javascript還是CSS植入，微互動不止視為用戶體驗服務，而且也給網站帶來了個性。

訪問：Project Sunday

y

訪問：Kekselias

7.放棄縱橫比，擁抱藝術設計

又短又寬的東西在視網膜級電影院設備上看起來很棒，但是在垂直使用的手機上就不合適了。構成是設計的一個最基本要素。所以你如何創(chuàng)造出一個響應的世界，內容在屏幕和瀏覽器的什么地方展示？而其中瀏覽器有著各種不同的縱橫比尺寸。你一定要裁剪。但是如何同時保持設計的完整性呢？答案是：數字設計方向。

最近我們看到了許多新工具的出現(xiàn)，這些新工具允許我們在放棄傳統(tǒng)的自動裁剪的同時能精確地控制頁面。這也讓我們思考，不是思考靜止的圖片內容，而是主題。你要通過圖片來講什么故事？強調出這一點，然后讓用戶來控制顯示。

smartcrop.js

一些網站選擇徹底忽視縱橫比，給瀏覽者來重構的自由。The Hidden World of the National Parks 使用了全背景視頻- 這是網站的主要內容- 無論你做的是什么形狀，最終都會被拉到瀏覽器的邊緣。

Google Arts & Culture

8.影院體驗

在2015年的時候大型的電影試聽背景已經開始流行了。現(xiàn)在隨著技術的進步，網速的提高，變得越來越盛行。WebGL 的進步讓這些背景變得具有互動性，在網站上創(chuàng)造了浸入式的影院體驗。

visithumboldt.com

另一方面來說，影院體驗的尺寸被減小了，小型的視頻元素給頁面帶來了生機，給觀看者帶來了更多的時尚感。

9.游戲化

游戲化是“在非游戲環(huán)境中使用游戲設計元素和游戲原則”，目的是增加用戶的興趣。換句話說，你想讓人們記住你的網站嗎？更加深入的探索怎么樣呢？把它做的有趣！

一個使用游戲化的經典例子是 WebGL作技術支持的網站上的電影《瑞士軍人》。頁面上的3D元素不止是隨意的效果。在頭腦中設計出來的，有著重力和物理環(huán)境的空間（包括流體力學）中給你一個人物來讓你扔。（如果你喜歡的話也可以讓他做其他類似于放屁的事情。）

別的網站使用游戲化來教授他們的用戶新的語言，或者教授他們宇宙歷史。

訪問： bs.com

2017年一定是網頁設計大放光彩的一年。因為數字設計開始趨向于融合更有觸感的，真實世界的感覺。

網頁設計教程與觀點分享，尚略廣告，上海品牌設計公司，上海網站策劃設計公司設計部。

本文網址：http://m.907632.com/news_info.asp?id=2462，轉載請注明出處。

尚略上海品牌策劃設計公司快速導航：