當前位置:編程學習大全網 - 源碼下載 - 移動應用UI設計——導航設計

移動應用UI設計——導航設計

年正如精良的設計壹樣,優秀的導航也大象無形。不管是瀏覽好友信息,還是租賃汽車,完美的導航設計能讓用戶根據直覺使用應用程序,也能讓用戶非常容易地完成所有任務。

導航的設計是 App 設計發展過程中很值得玩味的地方,由於移動設備特別是智能手機的屏幕尺寸有限,設計者們通常會將屏幕空間盡量留給主體內容,為了在手機屏幕給定的範圍內展示出更多內容,優秀的導航欄設計將起到關鍵性作用,對於不同的操作也當因地制宜地選則不同的設計方案。

如網站設計中,我們會把導航分為壹級導航、二級導航等等,其實移動應用和網站設計壹樣,也具有自己的信息架構。這裏我們主要依據市場上面已有的產品對移動應用導航大體分為以下兩類:主要導航模式與次級導航模式。

圖1-2? 次級導航模式

首先看看以下7種主要導航模式:

主要導航模式—— 第壹種:跳板式

跳板式導航對操作系統並沒有特殊要求,在各種設備上都有良好表現。它有時也被稱為“快速啟動板”(Launchpad)。跳板式導航的特征是,登錄界面中的菜單選項就是進入各個應用的起點。在國內市場上跳板式設計應用很用,如下圖的第壹個“百度手機衛士”(圖1-3)它主要通過功能來展示菜單選項,這種網格布局清晰的把各個功能區域進行劃分,能讓用戶快速找到入口並點擊操作。(圖1-4)的雲圖TV,它是壹個免流量的手機電視,他的模塊相對百度手機衛士來說較簡單,主要通過電視臺來區分模塊名稱。比如:中央電視臺CCTV、衛士、體育甚至海外頻道等等。而美圖秀秀(圖1-5),更是我們比較熟知的壹種,它的主界面用2X3的網格布局把常用的功能入口都直觀的表現在上面。

什麽是2X3的網格布局了?

2X3網格布局是壹種布局形式,常見的布局形式有:3X3、2X3、2X2、1X2(圖1-6)。但不壹定非拘泥於網格布局,根據需求的功能來定義,可以成比例放大某些選項,以彰顯其重要性。

XiiaLive,壹款功能無比強大的網絡電臺,兼具簡潔而清新的 UI 設計。這款應用具有不容忽視的導航,設計師用3X3的網格布局把菜單的6個菜單項目布局在屏幕中間,使每個格子都扮演著功能性的作用(圖1-7)。

Tripper是壹款日本的本地導遊應用,他用扁平的設計圖標把應用的功能用2X3的網格布局羅列在整個界面中,使得用戶能夠相當輕松順手地瀏覽這款APP(圖1-8).

跳板式菜單也可以說是網格式菜單,它類似於metro UI的堆砌色塊,優點簡約而不簡陋,導航清晰、明顯,並能提高操作效率。但設計時切記不分青紅皂白的去使用色彩哦,這可能會讓用戶不知所措和產生疲倦感。

ASM采用的是不規則網格的跳板式導航,以突出內容的優先級(圖1-9)。

最近經典的遊戲:“別踩白塊兒”(圖1-10)也是跳板式模塊的經典體現。

它把各種遊戲模式用網格區分開,僅用黑白兩色就能清晰的讓用戶理解並操作。正如前面所說,在網格布局的設計中,不壹定必須遵循幾乘幾的網格形式,甚至可以成比例的放大或者縮小某些選項,用以彰顯他的功能特色,舉壹反三,設計師還可以合並他的多種網格形式,使得功能之間的邏輯流程更準確。比如別踩白塊兒中的每個遊戲選項,點擊的二級菜單也用跳板式或者列表式展現了更多的功能選擇。

個性化的跳板式導航可在顯示菜單選項的同時顯示用戶個人資料。通常會提供自定義功能,允許用戶改變跳板導航的布局,如優酷界面。

通過以上的案列分析,我們可以整理如下幾點:

1.為同等重要的內容項使用網格布局。

2.為相比之下更為重要的內容項使用不規則布局。

3.視情況使用個性化設置和自定義選項。

主要導航模式——第二種:列表菜單式

列表菜單式導航與跳板式導航其實是有***同點的,他們的***同點在於,每個菜單項都是進入應用各項功能的入口點。

但是不同點在於列表菜單式導航有很多種變化形式,包括個性化列表菜單,體現分組列表和增強列表等。

案列分析:

個性化列表的方式:在photo sticker中首頁就采用了個性化列表菜單的方式。而IOS系統設計則采用了分組列表菜單式。

印象筆記的IOS版本它把列表式導航與跳板式導航設計相結合。下廚房即是增強列表導航,何為增強列表導航呢?即就是在簡單的列表菜單之上增加搜索、瀏覽或過濾之類的功能後形成的。

其實列表菜單式導航,這個從網站到手機APP上都很常用的,遵循由上至下的閱讀習慣方式,所以使用起來用戶不會覺得困難。

通過例舉的四個案列,以及列表菜單式導航與跳板式導航的對比,列表菜單,更適合用來顯示較長或擁有次級文字內容的標題。

主要導航模式——第三種:選項卡式

選項卡式導航,在不同的操作系統有不同的表現和規則。所以在設計時需要為不同的操作系統專門定義選項卡的位置。

Ios、webOS和Blackberry(黑莓)系列都把選項卡放在了屏幕底端,這樣用戶就可以用拇指進行操作。

選項卡的導航設計方式,壹般為四個導航按鈕最為普遍,最方便操作的是第二和第三個按。受制於屏幕寬度的限制,其欄目的個數是有限的,不能超過5個。過多的話明顯不利於用戶的切換。從界面布局來看,也降低體驗友好度。

目前也有部分APP在選項卡的基礎上,衍生出了壹種交互比較好的彈出導航菜單。突出選項卡上展示的那些核心功能的按鈕,方便用戶快捷操作。

選項卡至於低端的應用市場上面有很多,這裏列舉幾個比較常見的APP:

屏幕底部水平滾動的選項卡是個非常不錯的設計,如的Waterlogue應用,它是壹款水彩風格照片處理工具,下面的水平翻動選項卡可以讓用戶選擇多種水彩風格

Android(安卓)、Symbian(塞班)和Windows系統都把選項卡定位在屏幕頂端,它模仿了網址導航模式。

Horner包含了可隱藏菜單,不過它能很妙地從頂部出現,由於明亮的顏色和有關聯性的巨大圖標,它與整個界面內容形成了鮮明對比。Bettertec設計的氣流計算APP,巧妙地運用了占據頂部的標簽頁。

頂部菜單和底部意義差不多,把菜單放在頂部,可以遵循從上至下的閱讀習慣,但也有缺點,即不適用與單手操作。

單手操作用戶是所示的這兩種姿勢(左手用戶相反)。綠色代表容易點擊區域,黃色為拇指伸展可到點擊區域,紅色區域超出單手可點擊範圍。

所以不管是在導航設計中,還是在移動應用的其它設計中,我們應該盡可能的考慮用戶的手勢操作習慣,給用戶更好更便捷的體驗。

單手操作手指滑動區域圖片

網易新聞則采用了頂部可滑動的導航形式,屏幕頂端可滾動的選項卡:用戶移動選項卡後能看到更多的菜單選項。

愛奇藝應用同樣也采用了頂部滑動導航的模式。但是這裏更值得壹提的是,為已選擇的菜單項設置使用易於識別或帶有標簽的圖標等不同的視覺效果,用戶就能清晰的知道自己選擇了哪壹項。

主要導航模式——第四種:陳列館式

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

陳列館式導航能夠很好地應用與用戶需要經常瀏覽,頻繁更新的內容,如下圖的超級相冊和便簽本。

相冊是我們在日常生活中時常運用到的壹個功能,使用頻率高,圖片數量多,所以采用陳列館的形式是再合適不過了。

而便簽本也不陌生,下圖中的便簽本可以上下左右拉伸不斷創建新的收納空間,壹個個方方正正的分類視圖,顏色各異卻能達到壹種養眼的和諧美。沒有花哨的功能,主界面上只簡潔地顯示收納盒名稱與其中的項目數量。

最美應用:是壹款通過互聯網平臺,每天為用戶發送壹款賞心悅目的移動互聯網應用。它通過類似幻燈片的形式來導航,用戶通過查看每個應用來劃屏切換屏幕內容,而它下面的進度條也會互動性的跟隨著用戶的切換而進行圖標的動態變化。

主要導航模式——第5種? 儀表式

儀表式導航提供了壹種度量關鍵績效指標是否達到要求的方法。

過設計以後,每壹項量度都可以顯示出額外的信息。這種主要的導航模式對於商業應用、分析工具以及銷售和市場應用非常有用。

Timi時光記賬—精美獨特的時間軸記賬:Timi 時光記賬采用了時下非常流行的時光軸的形式,幫妳整理賬目,簡潔明了,界面精美,在方便好用的同時,還滿足了視覺享受的需求~。

樂動力:通過數據來查看自己每天活動狀態。下滑還有很多功能,都可以點擊查看。

主要導航模式——第6種? 隱喻式

隱喻式導航的特點是用頁面模仿應用的隱喻對象。

這種導航主要用於遊戲,但在幫助人們組織事物(如日記、書籍、紅酒等),並對其進行分類的應用中也能看到。

途書筆記,用牌照記錄數據的筆記。它把導航界面菜單做成了壹本壹本的書,有壹本書的形式,隱喻的表達了書的概念。自定義標題,分類進行查閱。

找妳妹的遊戲中,導航就用闖關的進度來顯示,直觀且具有趣味性。

主要導航模式——第7種:超級菜單式

移動設備上的超級菜單式導航與網站所用的超級菜單導航類似,它在壹個較大的覆蓋面板上分組顯示已定義好格式的菜單選項。

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

美團中就采用了超級菜單式導航做為次級導航使用。

以上均是主要導航模式:那麽接下來針對次級導航模式進行案列賞析。

次要導航模式:

這裏我們值得註意的是在導航的設計中,所有的主要導航模式都可以用作次級導航。我們經常能夠看到選項卡下再用選項卡導航、導航卡下用列表導航、選項卡下采用儀表式導航、跳板式導航下采用陳列館式導航燈情況。

而次級導航模式是否可以用作主導航,答案不是確定的,因為事物都是貫穿融合的,主要妳運用得當,壹切均有可能。現在我把這三種歸納為次級導航是針對現有市場產品進行分析得出,並不壹定是絕對。

次級導航模式——第8種:?頁面輪盤式。

通過這種導航模式,操作者可利用“滑動”操作快速瀏覽壹系列離散的頁面。

瘋狂來找錢就采用頁面輪盤式,頁面指示器(iOS中的術語,指用來表示頁面數量的小點)可以顯示出導航中的頁面數量;執行“滑動”操作可以顯示下壹頁。

次級導航模式——第9種:圖片輪盤式

圖片輪盤式導航類似於壹個二維輪盤,圖片輪盤式導航更多的應用於播放器和需要多圖片展示應用中。

香蕉相機,作為壹個相機應用,該有的功能相對還是挺齊全的。拍照、添加相冊圖片、添加文字等等,都木有問題,還有很文藝的濾鏡和相框~

圖片輪盤式導航可以查看更多的香蕉圖標,相加幾個來幾個~~~~

次級導航模式——第10種:擴展列表式

擴展列表式導航通過左/右/上/下拉屏幕或者點擊按鍵顯示更多的信息。

在網易新聞,TIMI記賬和暢讀等應用設計當中,通過點擊屏幕左上角的按鈕喚出切換項,有些也可以通過向右或者向左,滑動手指來完成。所以當我們覺得菜單比較占用位置的時候,可以嘗試用這種方式來隱藏菜單,需要註意的是設計展開菜單按鈕大部設計在左或右上角這些顯眼的位置。

壹個簡單的滑動動畫,就像拉出壹個抽屜,「抽屜式導航」這個名稱應該就是來源於此。抽屜式導航突破了數量的限制,更大程度上釋放了主體空間,也因此提高了操作成本。

此處就個人意見,如果能將主要功能項組織在 4 到 5 項,選項卡導航的設計方式可能會更好,否則,就應該優先考慮抽屜式導航了。抽屜式導航通過縱向排列切換項解決了具有過多的切換項這壹問題。不過這也意味著導航不能和主體內容同時出現在屏幕上

  • 上一篇:星雲大師語錄[愛情與愛欲]
  • 下一篇:山西有哪些作軟件開發的公司?多多益善
  • copyright 2024編程學習大全網