五種行動裝置 App導航設計總結

來源:互聯網
上載者:User

   下圖是《行動裝置 AppUI設計模式》一書的截圖,截圖中列出的是一些適合做主導航的導航模式。

  其中跳板式導航、列表式導航和選項卡式導航最為常見,儀錶式導航和隱喻式導航一般在擬物化設計或者是工具類的app中比較常見,超級菜單式現在會用到的比較少。由於這個行業發展速度很快,還出現了一些書中沒有列出,但是在現在也很常見的導航模式,例如,出現於Android的側邊抽屜式設計,現在在ios中也得到了廣泛的應用。下拉式菜單也會作為主導航出現。

  下圖是書中列出的一些只適合做次級導航的模式:

  例如:頁面輪盤式、圖片輪盤式和列表式中的行內擴充式,還有一些超級菜單式導航也被用作次級導航。

  一 :跳板式導航

  跳板式導航的特徵是,登入介面中的菜單選項就是進入各個應用的起點。對作業系統並沒有特殊要求,在各種裝置上都有良好表現。它有時也被稱為”快速啟動板”(Launchpad)。

  一般用做主導航,常用的配置模式3*3(常說的九宮格布局)2*3、2*2和2*1網格。但也不一定要拘泥於網格,也可以按照不同的優先順序順序,放大或者縮小網格,以突顯出內容的層次感。

  美圖秀秀採用的就是2*3的跳板式導航模式,通過上下、分頁來突出優先順序。

  ASM採用的是不規則網格的跳板式導航,以突出內容的優先順序。

  在跳板式導航和其他導航搭配使用中,一般會被用作次級導航,常見搭配模式:選項卡式+跳板式

  攜程的首頁中就是使用了以選項卡為主導航搭配跳板式導航的模式

  二 :列表式導航

  最常見的主導航模式之一,又可分為分組列表、個人化列表、行內擴充式列表(這個一般用做次級導航)和增強性列表(是在簡單的列表菜單之上增加搜尋、瀏覽或過濾之類的功能後形成的)

  列表菜單很適合用來顯示較長或擁有次級文字內容的標題。

  ios設定中使用的就是分組列表。

  photo sticker中首頁採用了個人化列表的方式

  印象筆記的ios版中使用了列表式導航混合跳板式導航的設計,其中列表式導航中又使用了分組列表和擴充列表。

  Pinterest在搜尋中的次級導航採用的就是增強性列表。

  三 :選項卡式導航

  幾乎大部分的app都採用的是這種導航模式作為主導航。根據作業系統不同,選項卡位置和設計也不相同。ios的選項卡是在底部 ,Android的則是在頂部。

  其他導航模式和選項卡式導航搭配使用時一般都會用做次級導航。

  Polyvore的ios版, 使用的是底部選項卡導航:

  keep的ios也使用的是底部選項卡式導航。

  Flickr的Android版使用的就是標準的Android的選項卡在頂部的設計。

  Forever 21中使用了選項卡式導航搭配圖片輪盤式導航。其中圖片輪盤式導航為次級導航。

  Wanelo中使用的是選項卡式導航搭配選項卡式導航,一般這種搭配模式在app中也非常見。

  Snapette採用的主導航為選項卡式導航搭配下拉式導航。

  Snapette採用的次導航為下拉式,其中下拉式導航又以列表的方式排列。

  The Hunt中使用了主導航為選項卡式導航搭配輪盤式導航的模式。

  RIVER ISLAND中採用了主導航為選項卡式導航搭配陳列館式和抽屜式。

  四 :陳列館式導航

  陳列館式的設計通過在平面上顯示各個內容項來實現導航,主要用來顯示一些文章、菜譜、照片、產品等,可以布局成輪盤、網格或用投影片示範。

  BBC News的首頁導航模式

  淘寶二手中的主導航採用了陳列館式導航,次導航採用的是抽屜式導航。

  淘寶二手中使用的次級導航是抽屜式導航,在抽屜式導航中又採取了跳板式導航2*3的設計。

  五 :抽屜式導航

  起源於Android的一種導航模式,後在ios中也常見到。一般在Android中用做主導航,在ios中往往會搭配其他的主導航模式做次級導航使用。

  印象筆記的Android版就是採用了側抽屜的導航模式。

  Foursquare的ios版採用的側抽屜式導航模式。

  六 儀錶式導航

  儀錶式導航提供了一種度量關鍵效能指標(Key Performance Indicators,KPI)是否達到要求的方法。經過設計以後,每一項量度都可以顯示出額外的資訊。這種主要的導航模式對於商業應用、分析工具以及銷售和市場應用非常有用。

  完美衣櫥的統計中在次級導航中採用了儀錶式導航。

  Mint 和Ego 應用中的儀錶式導航(書中的例子)

  七 隱喻式

  這種導航的特點是用頁面模仿應用的隱喻對象。這種導航主要用於遊戲,但在協助導航 人們組織事物(如日記、書籍等),並對其進行分類的應用中也能看到。

  Candy Crush中的選關採用的就是隱喻式。

  八 超級菜單式導航

  這種導航模式在現在的app設計中使用的比較少,而且一般會用做分類檢索de 次級導航使用。在手機網站的導航設計中比較常見。

  這個app中就採用了超級菜單式導航做為次級導航使用。(不好意思忘記這個app的名稱啦*……(☆_☆))

  九 下拉式導航

  這種導航模式在手機網站中比較常見,在app中做為唯一性的導航不是很常見。

  Iivingsocial中的ios版首頁採用下拉式導航作為唯一的導航。

  總結:

  在未來的趨勢中個人認為是淡化各個平台的差異,盡量通過一套設計來無縫的串連各個應用在不同裝置上的體驗,同時也節省了人力和物力。通過上述的總結也不難發現兩個系統的設計差異在日漸融合縮小。所以在選擇導航時不應該只局限在”標準設計”中,而是應當本著以”內容”為先的思想來考慮。

相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。