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

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

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

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

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

1.創新導航菜單網站案例

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

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

給菜單加上框架

放棄菜單

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

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

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

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

訪問：Dursun網站

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

訪問：Marmo Elite

彈出式菜單

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

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

彈出框

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

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

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

2.分屏處理

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

請訪問：ParadisePad

請訪問：duskoskoko

訪問：Texas Beard Company

3.使用復古風格的顏色

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

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

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

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

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

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

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

4.定制滾動滾輪

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

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

訪問：Build in Amsterdam 

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

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

訪問： Grim London

訪問：Fantastic Beasts Magical Maps

5.增加數字觸覺

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

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

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

訪問：Beoplay

訪問：trumpdesign

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

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

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

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

訪問：Project Sunday

y

訪問：Kekselias

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

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

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

smartcrop.js

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

Google Arts & Culture

8.影院體驗

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

visithumboldt.com

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

9.游戲化

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

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

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

訪問： bs.com

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

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

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

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