[ 平面理論教程 ] 4個替代方案替代傳統的漢堡圖標設計- 設計教程 - 骨子愛創意

教學主題: 4個替代方案替代傳統的漢堡圖標設計

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 4個替代方案替代傳統的漢堡圖標設計

這教學的重點為這幾點 [ 替代,設計,圖標,傳統,方案,導航,這種,頁面,起來,垂直, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

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

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

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

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

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

1、垂直字母縱嚮導航

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

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

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

2、位於屏幕邊角的菜單

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

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

3、超窄滑出式菜單

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

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

4、垂直導航

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

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

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

結語

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

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 4個替代方案替代傳統的漢堡圖標設計 這教學會喜歡

文章標題: 骨子愛創意- 4個替代方案替代傳統的漢堡圖標設計–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 替代,設計,圖標,傳統,方案,導航,這種,頁面,起來,垂直,

本文永久連結 :4個替代方案替代傳統的漢堡圖標設計

本文轉載自 :VIA