網頁|厭倦了漢堡圖標,這4個替代方案也許不錯

越來越多的用戶抱怨網頁設計已經變得無聊無趣了。高端的技術和流行的趨勢已經為網頁設計構建起了一套約定俗成的規則,而開發者和設計師在社區中依然不停地探索新的可能性,尋求下一個病毒式流行的新熱點。

雖然新設計和新界面層出不同,但是許多看起來和之前流行的設計大同小異。

說道UI界面,這幾年最深入人心的應該就是漢堡圖標了。前年,對于漢堡圖標是否會成為大勢所趨的撕逼一直沒停過,而在去年,針對漢堡圖標的討論核心就變成了使用漢堡圖標的技巧有哪些。現在,漢堡圖標已經談不上是“熱潮”了,說它是使用過度也不為過。

漢堡圖標的優勢很明顯,它緊湊,直觀,便捷。它的“缺陷”也相當突出:太熟悉,“無聊”。我的意思是,每一個APP都有三條橫線在UI的頂端告訴你“我是菜單”,有沒有更加有趣,讓人眼前一亮的替代方案呢?有。今天我們就聊四種不錯的漢堡圖標替代方案。

1、垂直字母縱向導航

將整個導航連同字母方向都翻轉90度,這樣的設計比起漢堡圖標看起來要新鮮得多。這種設計占用的空間更少,它看起來更像是一條縱向的線,在視覺上,它幾乎和屏幕等高,視覺形式感上也很強,結構緊湊,內容也足夠豐富,可以說,它是一種非常符合現代設計風格的一種呈現形式。這種設計對于絕大多數的用戶而言,都沒有識別度上的問題,如果說它真有什么缺陷的話,大概就是治好了我多年的頸椎病吧……

VR Sessions 這個網站就選取了這種導航設計。他們將這種縱向的導航和他們的LOGO排布在了一起,看起來漂亮又精巧。

網頁|厭倦了漢堡圖標,這4個替代方案也許不錯

你剛剛打開 Snake River Interiors 的網站的時候,它的導航看起來相當普通,可是當你向下滾動的時候,整個導航會變成縱向排列的,并且懸浮在屏幕左側,隨時待命幫你導航,這種設計思路非常有趣。

網頁|厭倦了漢堡圖標,這4個替代方案也許不錯

2、位于屏幕邊角的菜單

這種設計明顯不是一個被廣泛使用的解決方案,通常它會用于中心式布局的網頁,這樣用戶會清晰的感知到中心周圍的空間,這種導航就是為此而生的。也許你會認為,在頁面的四個角上做導航已經很離奇了,但是接受了這一設定的設計師,還有其他的玩法:

網頁|厭倦了漢堡圖標,這4個替代方案也許不錯

Proud & Punch 這個頁面的設計師將LOGO、社交媒體分享、菜單和關于我們分別置于四角,這樣的設計讓整個頁面看起來整潔又不羈,自由而高效的利用空間。而Kygo-Life 這個網站則盡可能將邊邊角角的位置都用了起來,讓網站看起來更加飽滿。

網頁|厭倦了漢堡圖標,這4個替代方案也許不錯

3、超窄滑出式菜單

側邊欄式的設計又回歸了。這種回歸并非大張旗鼓,它悄無聲息地出現在了APP和網頁設計中,它比以往更加輕量級,更加單薄,盡量顯得緊湊而優雅。新的側邊欄設計通常不會太復雜,僅包含幾個基本的元素,LOGO、菜單和社交媒體按鈕等幾個基本的元素。和往常一樣,設計師常常會將這種側邊欄置于頁面的左側,絕大多數時候是隱藏的,在用戶打開的時候或者鼠標移動到其上的時候會顯示。

設計師 Maison Ullens 的個人作品頁當中,就采用了這樣的超窄側邊欄。頁面主要的視覺內容是右側大篇幅的內容主體,輕量級的側邊欄以一種低調的形式置于左側,當光標移動到上面的時候會有動效提示。主次分明,還不失功能性。

網頁|厭倦了漢堡圖標,這4個替代方案也許不錯

4、垂直導航

和第一種導航設計不同,這種垂直導航不會讓字母也跟著一同翻轉,只是采用了縱向的排版。在漢堡圖標還是潮流的時代,這種設計也不算多見。這種垂直排版的導航通常會用純色或者透明的背景,這種垂直導航可以和LOGO一起搭配,和現在的極簡設計風可以很好的搭配,優雅也富有形式感。

Linmark 這個頁面為例,設計團隊將垂直排布的導航置于屏幕右上角,為了保證這一部分的正常顯示,有目的地讓背景的幻燈片每一張都盡量使用淺色,確保對比度。

網頁|厭倦了漢堡圖標,這4個替代方案也許不錯

Trihorf 這個頁面的設計則采用了更加穩妥的設計,頁面中垂直導航作為整個頁面的心臟而存在,用戶的注意力只會被導航所吸引。整個頁面設計得足夠整潔干脆,微妙又如何目前的商業氛圍。

網頁|厭倦了漢堡圖標,這4個替代方案也許不錯

結語

細節決定成敗,作為網站的必須的組成部分,菜單和導航總能夠很好的體現網站的設計美學,出人意表又合乎情理的設計無疑能夠強化用戶體驗。這四種類型的設計并不復雜,但是能夠給用戶帶來不一樣的體驗,根據你的需求,酌情使用吧。

【Nick Babich 的用戶體驗設計經驗之談】

  1. 輸入框設計:《講真,你真的懂得文本輸入框設計的那些潛規則么?》
  2. 表單設計:《摳細節!設計高效好用表單的10個技巧》
  3. 極簡APP UI:《超贊!幫你打造極簡風APP UI 的實用設計技巧》
  4. 前端開發:《有法可依!幫你衡量一個動效是否合格的六個核心因素》
  5. 面包屑:《并不簡單!網頁中為你指路的面包屑到底應當怎么使用?》
  6. 移動端頁面:《跟著建議走!這樣的移動端網站設計才對頭》

原文地址:webdesignerdepot
原文作者:Nick Babich
優設譯文:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量180萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 8
點贊 1

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。