不可錯過的手機APP常見8種界面導航樣式


前言:相信每個移動開發project師都會遇到,當一個項目開發啟動時,須要考慮搭建怎么的框架。一個好的框架。也會決定着一個APP的前途與命運。框架的風格,如今常見的有八種:標簽導航、舵式導航、抽屜導航、宮格導航、組合導航、列表導航、tab導航、輪播導航。近期在網上收集到一些資料。正好和大家分享一下。感謝原作者的貢獻。

當我們確定了移動APP的設計需求和APP產品設計流程之后,開始着手設計APP界面UI或是APP原型圖啦。這個時候我們都要面臨的第一個問題就是怎樣將信息以最優的方式組合起來?

或許我們對照和了解了其它一些經常使用的APP導航設計模式。

並且良好的APP導航設計模式決策對整個app的核心體驗起到關鍵作用。

有一些優秀的app基於這些模式做了一些創新的優化方案。本文總結了眼下通用且流行的模式。並討論了這些模式適用的場景,希望幫助交互設計師更快的作出較合理的信息組織決策。

先來看看8種移動APP導航設計模式對照圖吧!

8種移動導航


8種移動導航

第一種:app標簽導航

標簽導航位於頁面底部,通常包括5個標簽是比較合適的數量。這樣的導航是很常見的。假設你的應用須要用戶頻繁的在不同分頁切換。能夠採用這樣的導航。它的缺點是會占用一定高度的空間。如微信最新版的APP界面設計圖。

app標簽導航
app標簽導航

另外一種:APP舵式導航

眼下流行一種標簽導航的變體。個人把它稱為“舵式導航”,由於它的樣式非常像輪船上用來指揮的船舵,兩側是其它操作button。當頁面有處於同一層級的幾大部分內容,同一時候又須要一個非常重要且頻繁操作的入口,就能夠採用這樣的APP導航模式。

例如以下圖葡萄社APP。

app舵式導航

app舵式導航

第三種:APP抽屜式導航模式

抽屜導航是講菜單隱藏在當前頁面后,點擊入口就可以像拉抽屜一樣拉出菜單,這樣的導航的長處是節省頁面展示空間,讓用戶將很多其它的注意力聚焦到當前頁面。比較適 合於不那么須要頻繁切換內容的應用,比如對設置、關於等內容的隱藏。

這樣的導航設計須要注意的是一定要提供菜單畫出的過渡動畫。

自從path應用以來,這樣的抽屜式導航菜單很受到大家的喜愛。

app抽屜式導航

app抽屜式導航

第四種:APP宮格導航(比方九宮格)

這樣的宮格導航是將主要入口所有聚合在頁面,讓用戶做出選擇。這樣的組織方式無法讓用戶在第一時間看到內容。選擇壓力較大,採用這樣的導航的應用已經越來越少,往往用在二級頁作為內容列表的一種圖形化形式呈現。或是作為一系列工具入口的聚合。

app宮格導航

app宮格導航

第五種:APP混合組合導航

當用戶須要聚焦內容。同一時候又須要一些快捷入口能夠連接到某些頁面時,就能夠採用組合導航。組合導航上方用宮格的形式展現快捷入口,與標簽導航不同的是。這 些宮格入口之間不須要是平級的關系,也不必包括整個層級的內容,你能夠將它理解為一種圖形化的文字鏈。這樣的導航比較靈活,能適應架構的高速調整。

app混合組合導航

         

app混合組合導航

第六種:列表式APP導航

列表式APP導航是我們在APP設計種不可缺少的一個信息承載模式。

當然作為一個APP的導航也是很方便的。

只是眼下來看,列表導航通經常使用於二級頁,因為它與宮格導航一樣,不會默認展示不論什么實質內容,所以通常app不會在首頁使用它。

這樣的導航結構清晰,易於理解。冷靜高效,可以幫助用戶高速的定位去到相應的頁面。列表項目可以通過間距、標題等進行分組。

app列表式導航


app列表式導航

第七種:tab導航

用於二級頁,本質和標簽導航同樣,當應用層級較多的情況下,能夠採用tab導航,典型場景是用於改變的當前的視圖。或對當前頁面內容進行分類查看。

                                                                                                                                   tab導航

tab導航

第八種:大圖輪播導航或是 大圖上面的導航設計

當你的應用信息足夠扁平。可以嘗試輪播導航。假設應用得當。可以給人耳目一新的體驗。這樣的導航可以最大程度的保證應用的頁面簡潔性,操作也是最方便的。

可是缺點是不可以高速的定位相應的分頁內容。

大圖輪播導航

大圖輪播導航

------------------------------------------------------------------

有什么問題,大家能夠一起交流……

很多其它精彩關於關注博主的微信訂閱號:很周末

微信搜索:很周末

你能夠掃描一下關注就可以:



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM