導航設計是App設計開發中很有意思的地方。由於移動設備,尤其是智能手機的屏幕尺寸有限,設計師通常會盡可能多地為主要內容留出屏幕空間。為了在手機屏幕給定的範圍內展示更多的內容,優秀的導航條設計將起到關鍵作用,不同的操作要因地制宜選擇不同的設計方案。
比如網站設計,我們會把導航分為壹級導航,二級導航等等。其實移動應用和網站設計壹樣,也有自己的信息架構。這裏我們主要根據市面上現有的產品將移動應用的導航分為以下兩類:壹級導航模式和二級導航模式。
圖1-2?輔助導航模式
首先來看以下七種主要導航模式:
主導航模式——第壹種:跳板。
跳板導航對操作系統沒有特殊要求,在各種設備上都有不錯的表現。它有時被稱為“發射臺”。跳板導航的特點是登錄界面的菜單選項是進入各種應用的起點。跳板設計在國內市場很有用。如下圖第壹個“百度手機衛士”(圖1-3)主要通過功能顯示菜單選項。這種網格布局明確劃分了各個功能區域,讓用戶快速找到入口,點擊操作。(圖1-4)雲電視,這是壹款免流量的手機電視。相比百度手機衛士,其模塊相對簡單,模塊名稱主要以電視臺區分。比如:央視、衛報、體育甚至海外頻道。美圖秀秀(圖1-5)是比較知名的壹款,其主界面采用了2×3的網格布局,直觀的顯示了常用的功能入口。
什麽是2×3網格布局?
2×3網格布局是壹種布局形式,常見的布局形式有3×3、2×3、2×2、1×2(圖1-6)。但不必拘泥於網格布局,可以根據需求的功能來定義,也可以按比例放大壹些選項,以顯示其重要性。
強大的網絡電臺XiiaLive,UI設計簡潔清新。這個應用程序具有不可忽視的導航功能。設計者采用3X3的網格布局,將六個菜單項排列在屏幕中間,讓每個網格發揮功能作用(圖1-7)。
Tripper是日本當地的導遊應用程序。它使用扁平化的設計圖標,以2×3的網格布局在整個界面中列出應用的功能,讓用戶可以相當輕松地瀏覽應用(圖1-8)。
跳板菜單也可以說是網格菜單,類似於metro UI的堆疊色塊。其優點是簡單而不粗糙,導航清晰明顯,能提高操作效率。但是在設計的時候切記不要亂用顏色,這樣可能會讓用戶不知所措,很累。
ASM采用不規則網格的跳板導航,突出內容的優先級(圖1-9)。
最近的經典遊戲:《別踩白塊》(圖1-10)也是跳板模塊的經典體現。
它以網格區分各種遊戲模式,用戶只用黑白兩色就能清晰理解和操作。如前所述,在網格布局的設計中,不壹定要遵循數倍的網格形式,甚至有些選項可以放大或縮小,以顯示他的功能特點。換句話說,設計者還可以結合他的各種網格形式,使功能之間的邏輯流程更加準確。比如不要把白色方塊裏的每壹個遊戲選項都踩在腳下,點擊二級菜單,以跳板或者列表的形式展示更多的功能選擇。
個性化的跳板導航可以在顯示菜單選項的同時顯示用戶個人資料。通常會提供定制功能,允許用戶更改跳板導航的布局,比如優酷界面。
通過以上案例分析,我們可以梳理出以下幾點:
1.對同等重要的內容項目使用網格布局。
2.對比較重要的內容項目使用不規則布局。
3.根據需要使用個性化和定制選項。
主導航模式-第二種類型:列表菜單類型
其實列表菜單導航和跳板導航是有共同點的。它們的共同點是每個菜單項都是應用程序各種功能的入口點。
但不同的是,列表菜單導航有許多變體,包括個性化列表菜單、具體化分組列表和增強列表。
案例列表分析:
個性化列表模式:在照片貼的首頁采用個性化列表菜單模式。IOS系統設計采用分組列表的菜單風格。
IOS版Evernote結合了列表導航和跳板導航設計。去廚房是為了增強列表導航。什麽是增強型列表導航?即在簡單的列表菜單中加入搜索、瀏覽或過濾等功能而形成。
其實從網站到手機app常用的列表菜單導航,遵循的是自上而下的閱讀習慣,所以用戶使用起來不會覺得很難。
通過列舉四個案例列表,比較列表菜單導航和跳板導航,列表菜單更適合顯示較長或次要文本內容的標題。
主導航模式——第三種:選項卡式。
選項卡式導航在不同的操作系統中有不同的性能和規則。因此,有必要在設計時為不同的操作系統定義標簽的位置。
Ios、webOS和Blackberry系列都將標簽頁放在屏幕底部,以便用戶可以用拇指操作。
標簽頁的導航設計方式壹般是四個導航按鈕,第二個和第三個按鈕操作起來最方便。由於屏幕寬度的限制,列數有限,不超過5列。字數太多顯然不利於用戶切換。從界面布局來看,也降低了體驗友好度。
目前已經有壹些app基於標簽頁衍生出了交互性更好的彈出導航菜單。突出標簽頁上顯示的核心功能的按鈕,方便用戶快速操作。
tab至於低端應用市場,有很多。以下是壹些常見的應用程序:
屏幕底部的水平滾動標簽是壹個非常好的設計,例如Waterlogue應用程序,這是壹個水彩風格的照片處理工具。下面的水平滾動標簽允許用戶選擇各種水彩風格。
Android(安卓)、Symbian(塞班)、Windows都是將標簽頁定位在屏幕上方,模仿的是網址導航模式。
Horner包含壹個可以隱藏的菜單,但它可以從頂部漂亮地出現,這與整個界面內容形成鮮明的對比,因為明亮的顏色和巨大的圖標是相關的。Bettertec設計的氣流計算APP,巧妙地利用了占據頂部的tab頁。
頂部的菜單和底部的意思壹樣。把菜單放在最上面可以遵循自上而下的閱讀習慣,但是也有壹些缺點,就是不適合單手操作。
單手使用者表現為這兩種姿勢(左手使用者則相反)。綠色代表易點擊區域,黃色代表拇指伸出可點擊區域,紅色區域超出單手可點擊範圍。
因此,無論是在導航設計還是移動應用的其他設計上,都要盡可能的考慮用戶的手勢操作習慣,給用戶更好更便捷的體驗。
單手手指滑動區圖片
網易新聞采用了頂部滑動導航的形式,屏幕上方有壹個可滾動的標簽頁:用戶移動標簽頁後可以看到更多的菜單選項。
愛奇藝應用也采用頂部滑動導航模式。但這裏更值得壹提的是,通過設置易識別或標簽化圖標等不同的視覺效果,用戶可以清楚地知道自己選擇了哪個菜單項。
主導航模式——第四種:展廳式
圖庫式設計通常在壹個平面上顯示各種內容項,實現導航。?主要用來展示壹些文章,菜譜,照片,產品等。,可以布置成輪盤賭、格子或幻燈片。
圖庫式導航可以很好的應用於用戶需要經常瀏覽和更新的內容,比如下圖的超級相冊和便箋本。
相冊是我們日常生活中經常用到的壹個功能。使用頻率高,圖片量大,采用展廳形式比較合適。
筆記本並不陌生。下圖中的筆記本可以上下左右拉伸,創造新的收納空間,不同顏色的方形分類視圖可以達到壹種醒目的和諧之美。沒有花哨的功能,主界面上只簡潔地顯示了收納盒的名稱和裏面的物品數量。
最美應用:是每天通過互聯網平臺發送給用戶的賞心悅目的移動互聯網應用。它以幻燈片的形式導航,用戶通過查看每個應用來切換屏幕內容,其下方的進度條會隨著用戶的切換動態改變圖標。
主導航模式——第五種?工具型
儀表導航提供了衡量關鍵性能指標是否滿足要求的方法。
設計後,每次測量都可以顯示額外的信息。這種主導航模式對於商業應用程序、分析工具以及銷售和營銷應用程序非常有用。
蒂米什時間記賬——精致獨特的時間軸記賬:蒂米什時間記賬采用現在非常流行的時間軸形式幫妳整理賬目,簡潔明了,界面精致,方便易用,也滿足了視覺享受的需求。
音樂力量:通過數據查看自己每天的活動狀態。幻燈片有很多功能,妳可以點擊查看。
主導航模式-第六?隱喻形式
隱喻導航的特點是用頁面模仿應用程序的隱喻對象。
這種導航主要用在遊戲中,但也可以在幫助人們整理東西的應用中看到(比如日記、書籍、紅酒等。)並進行分類。
路書筆記,用車牌記錄數據的筆記。它把導航界面菜單做成壹本書,既有書的形式,又隱喻了書的概念。自定義標題,按類別引用。
在找妹子的遊戲中,導航是通過闖關的進度來顯示的,直觀有趣。
主導航模式-7號:超級菜單類型
移動設備上的超級菜單導航類似於網站中使用的超級菜單導航,它在壹個大的覆蓋面板上以定義的格式分組顯示菜單選項。
這種導航方式在目前的app設計中很少使用,壹般作為分類檢索de的二次導航。在手機網站的導航設計中很常見。
超級菜單導航在美團中作為二級導航使用。
以上都是主要的導航模式:然後,案例列表被認為是次要的導航模式。
輔助導航模式:
這裏要註意的是,在導航的設計上,所有的主導航模式都可以作為輔助導航。我們經常可以看到標簽頁下的標簽導航,導航卡下的列表導航,標簽頁下的儀器導航,跳板導航下的展廳導航燈。
副導航模式是否可以作為主導航是不確定的,因為萬物壹體,壹切皆有可能主要是妳使用得當。現在我把這三種導航總結為二次導航,是基於對現有市場產品的分析,不壹定絕對。
輔助導航模式-第八種:?頁面輪盤賭
通過這種導航模式,操作者可以通過“滑動”操作快速瀏覽壹系列離散的頁面。
瘋狂找錢采用的是頁面輪盤式,頁面指示器(iOS中的壹個術語,指用來表示頁數的小圓點)可以顯示導航中的頁數;執行“滑動”操作以顯示下壹頁。
輔助導航模式-9號:圖片輪類型
圖片輪盤導航類似於壹個二維輪盤,更多的是用在需要多張圖片顯示的播放器和應用中。
香蕉相機作為壹款相機應用,功能比較齊全。拍照,加相冊圖片,加文字等都沒有問題。,而且還有很文藝的濾鏡和相框~
圖片輪盤導航可以查看更多香蕉圖標,加幾個到幾個~ ~ ~
輔助導航模式-編號10:擴展列表類型
擴展列表導航通過左/右/上/下屏幕或點擊按鈕顯示更多信息。
在網易新聞、TIMI記賬、自由閱讀的應用設計中,可以通過點擊屏幕左上角的按鈕調出切換項目,有的還可以通過手指向右或向左滑動來完成。所以,當我們覺得菜單占用空間比較大的時候,可以嘗試用這種方式隱藏菜單。需要註意的是,大部分菜單按鈕都設計在左上角或者右上角的顯眼位置。
壹個簡單的滑動動畫就像拉出壹個抽屜,“抽屜導航”這個名字應該就是由此而來。抽屜導航突破了數量的限制,更大程度的釋放了主空間,也因此增加了運營成本。
個人認為,如果能將主要功能項組織成四五項,tab導航的設計可能會更好,否則應該優先考慮抽屜導航。抽屜導航通過垂直排列切換項,解決了切換項過多的問題。但是,這也意味著導航不能與主要內容同時出現在屏幕上。