20個新穎絕妙的全屏導航網頁設計

來源:互聯網
上載者:User

   如譯者@十萬個為什麽 所說:隱藏式菜單和極簡式導覽列最近正處於風口浪尖,相比之下,全屏菜單多數時候幾乎都適用於所有項目。因為它靈活易變,能夠提升而非破壞使用者體驗。直接看優秀案例 >>>

  與其他使用者介面細節一樣,菜單的設計也在隨著當今的潮流改變。一些變化能帶來積極的效果,改善使用者體驗,還有一些卻會破壞有利的形象。追隨潮流是件棘手的事,尤其是在菜單上。

  比如,隱藏式菜單和極簡式導覽列最近正處於風口浪尖。但是,它們並不適用於所有網站。相比之下,全屏菜單多數時候幾乎都適用於所有項目。後者正在匯聚人氣,因為它靈活易變,能夠提升而非破壞使用者體驗。它在不經意間呈現了很多資料,整潔地排布文字與多媒體內容。當然,這使得首頁又多了一層點擊,但有時為了更好的使用者體驗,應該做這樣的犧牲。

  Maecia

  Maecia採用了討人喜愛的蒸汽龐克外觀,增添了一分獨特的精細和機械感。基於圖片的導航佔據整個螢幕,與動態首頁和主題高度吻合。

  Olcese

  Olcese有好幾個菜單,便於使用者更徹底地探索這個網站,同時也強化了品牌識別。基於圖片的網格式全屏導航中,充滿了有趣的照片、漂亮的圖表和令人愉快的效果。這些元素的結合扮演著至關重要的角色。

  Moeko ABE

  攝影師的線上作品集還能是什麼樣?以照片為核心的首頁明亮耀眼,導航運用了多媒體,為這位藝術家高調代言。菜單在整個頁面投下柔和的陰影,呈現出美麗的照片連結。

  Conference Awwwards

  頗具開創性的首頁,一流的HTML/CSS/JS動畫立刻引人注目,讓人印象深刻。簡單的導航佔據了整個螢幕,視覺聚焦於導航連結。這是非常合理的方案。

  Drygital

  Drygital的主菜單流露出歡樂積極的情感。華麗鮮豔的漸層背景,非常有利於展現亮白色的導航。一如往常,菜單覆蓋了整個首頁。不過得益於半透明的背景,使用者可以在著陸頁欣賞一段視頻。

  Aleman’s Design

  Aleman’s Design有著無縫式的導航,與整個情境搭配良好,對美感有重大貢獻。這個團隊採用了非同尋常的方案,利用動畫背景來強調功能表項目。

  Mas Industries

  Mas Industries的特點是基於圖片的全屏導覽功能表,它從“漢堡”菜單中優美地展開。對金屬組件的完美渲染散逸著冰冷嚴肅的氛圍。雖然前景與背景的反差很弱,但另一方面,這種方案對系列設計有強調作用。

  Danne Olsson

  壯觀的照片背景,映入Danne Olsson的使用者的眼帘,充滿自然意象。為了弱化如此吸引眼球的核心元素,將視線引向更簡單樸實的導航,他採用了很直接的解決方案,將全屏菜單與純色背景相結合。

  Impossible Bureau

  在這裡,主導航將首頁劃分為4列,讓網站的主要部分充滿全屏。為了使外觀鮮活明亮,不至於讓首頁看起來黑暗陰沉,每個連結都帶有美麗的漸層背景,還有絕佳的字型和配圖。

  Voisins

  Voisins的首頁是個龐大的導航體系,有兩個菜單組成。其中之一如我們所料,迎合了當今網頁設計 趨勢,通過“漢堡”菜單觸發。另一個則佔據全屏,可以更高效地處理視頻連結。

  Fornace Studio

  Fornace Studio採用了一種非常規方案,主菜單由小小的互動中心圖示觸發顯示。它從一個特別的角度滑入,模糊並覆蓋整個首頁,立刻吸引了使用者的注意力。

  Webgriffe

  Webgriffe的設計很精細,文案、極細的雅緻字型、幽靈按鈕、強烈而現代的圖形和趣的背景,共同構成了視覺焦點。菜單與主題的配合非常好。

  Moma

  全屏導航讓使用者很自然地點擊首頁的圖片,進入主菜單中的其他功能。這個方案相當整潔優雅,完全適用。

  Giaco Morelli

  和上一例類似,這個全屏菜單帶有輕微的半透明背景。厚實圓潤的字型轉移了訪客的注意力,從迷人的互動式首頁,轉向網站更重要的部分。

  Gianluca Bocchi

  雖然極簡式設計缺乏豐富的裝飾,但這家畫廊的官網散發著典雅、精美的藝術氣息。在這裡,第一印象尤為重要,莊嚴的菜單巧妙含蓄地將著陸頁分成3部分。

  Elliot Lepers

  Elliot Lepers有著全屏式輪播,一列列呈現資訊。儘管這並非菜單的傳統形式,但它是純正的導航,使其得以充分運用。

  Fahrenheit

  Fahrenheit的菜單由4個基本的連結構成,這適用於多數小型線上作品集。儘管如此,這個團隊仍然在其中傾注心血,將整個頁面讓給導航列表,證明了它的重要性。

  N3RD

  首頁就是個導航頁面。最棒的一點是,這個團隊應該不會擔心平板和移動端的變化,因為這個方案全平台適用。簡單而優雅,儘管相當原始。

  ivxvixviii

  ivxvixviii有著相當精緻的幾何體,壯麗的圖片和微妙的效果豐富了造型。精巧獨特的導航足以激發興趣,迫使使用者深入其中。

  The Colors of Motion

  這個網站的特色是奇異的無字導航,一眼看去使人迷惑。設計師採用了打破常規的方案。在這種方式中,菜單與名稱相結合,支撐著整個主題。

  結論

  受趨勢影響,導航可以採用不同形式。全屏菜單是種雙贏的做法,可以解決很多網頁設計 的問題。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。