三分鐘帶你解析ios三種導航模式


@:Ios代碼庫定義了三種可在應用中直接使用的導航模型:平鋪頁面、標簽欄、樹形結構。這三種模型覆蓋了絕大多數的App應用需求,也立刻被用戶所熟悉。但是你知道為什么微信的「發現」頁面設計為樹形結構模式?為什么Iphone內置的「天氣」應用使用平鋪頁面模式而不是標簽欄?接下來,讓我們一起對比分析三種導航模型的應用優缺點與差異,從而了解如何正確設計使用導航模型。

 

一、導航模型綱要

首先我想簡單介紹一下三種導航模式:

1. 平鋪頁面

平鋪頁面就像一疊卡片,頁面通過滑動切換,通常視覺精美,沒有滾屏。這種導航方式主要適用于只有一個主屏的簡單應用。、

 

2. 標簽欄

標簽欄是我們最常見的導航模式,這類導航的最大優勢就是讓應用的主要功能一目了然。我們根據應用的功能類型和信息類型進行標簽分類,每個標簽對應的頁面應該有自己獨特的功能和內容。

 

3. 樹形結構

樹形結構就是將層級信息分類到一顆倒置的樹的樹枝上,展示起來就像是流程圖(類似家譜) 。對于組織大量信息內容,同時又能讓每個內容觸手可及,樹形結構是一個高效的方法。

 

 

 二、說明與舉例

1. 平鋪結構

平鋪頁面模式中的所有頁面都沒有按類型分組,而是全部摞成一疊,挨個切換,就像平鋪著的頁面。這種方式適合于瀏覽并發現的方式,瀏覽查看同類型不同內容的頁面。最典型的代表就是Iphone內置的「天氣」應用,每個頁面的結構一致,但內容根據所屬城市而變。

 

孿生兄弟-頁面分頁控件

 

頁面分頁控件就是如圖所示的一排小點,它的存在,提醒了我們正在瀏覽的是一系列平鋪頁面,也讓我們在瀏覽系列頁面時能保持方向感 。該控件有一個很大的優勢是:占用極少的界面空間。

同時,頁面分頁控件也是可操作的,但我們只能點擊控件的左半部或右半部,滑到頁面的上一屏或下一屏。我們無法直接從第一屏跳轉到最后一屏,只能挨個翻閱。這也要求我們在使用這類模型時,要控制好頁面數量,一般不超過10個為宜。

所以這也凸顯出平鋪頁面模型的弊端:無法直接跳轉到特定頁面,這一弊端使其并不適用于功能或結構相差懸殊的應用。

 

平鋪頁面優缺點

【優點】

  • 很適合于內容少而精,操作少,只需隨意瀏覽的頁面

  • 適用于同類型不同內容的頁面,需要自定義內容和數量的頁面

  • 易于使用,只需要左右滑動手勢即可

  • 頁面分頁控件占用空間

 

【缺點】

  • 只能挨個翻閱,無法立即跳轉到非相鄰頁面

  • 頁面數量不宜過多,一般不超過10個為宜

  • 不適合滾屏(手勢操作相撞),對長文本不利

 

標簽欄

標簽欄最大的優勢就是能夠將應用的主要功能明確的羅列出來,讓應用變得干凈整潔的同時易于操作,我們可以直接跳到特定頁面去完成特定操作。每個標簽Icon對應的頁面設計都大相徑庭,為的是適應當前的功能和需求。

標簽欄上標簽設計的重要性不言而喻,它可以直接體現出一個App應用的產品定位與調性,且其提供的功能選項必須要貼合用戶普遍的需求和心智模型。

比如社交類應用中,QQ用戶人群更面向更年輕的一代,所以它的標簽欄Icon風格更具趣味青春感,符合QQ「樂在溝通,歡樂無限」的產品定位。而微信的用戶人群更廣,標簽欄Icon采用常見通用的樣式,最大可能降低用戶的學習成本。再比如電商類應用-網易嚴選,標簽功能分類簡單清晰,設計風格上文藝簡潔,能很明顯的體現出嚴選和其他電商平臺不太一樣的系列化、冷淡風的獨特風格,符合嚴選高品質,精致生活的價值主張。

 

標簽欄限定了最多5個按鈕,這個限制也是希望我們能削減應用提供的主要功能,讓用戶能夠記住并理解應用結構,讓結構可控。

 

標簽欄優缺點

優點

  • 將應用的主要功能明確的羅列出來,并告知當前所處位置

  • 可自由跳轉在應用所用的主要功能之間,操作簡單

 

缺點

  • 一般最多只能顯示5個標簽

  • 標簽欄會占用不算小的頁面空間

 

平鋪頁面vs標簽欄

平鋪頁面類的應用不只是形式上類似于一疊卡片,我們甚至可以根據需要隨意添加、移除卡片。這種頁面結構類似但頁面數量會變化的情況下,平鋪頁面要優于標簽欄。而在標簽頁的模型中,導航項目分類和順序都是不變的,適合頁面內容多樣,頁面數量少而固定的應用。

 

 2. 樹形結構

 樹形結構就是將層級信息分類到一顆倒置的樹的樹枝上,展示起來就像是流程圖(類似家譜) 。

幾個世紀前,文職人員就開始使用一種有效的文件與文件夾整理方式:找到檔案柜-選擇抽屜-打開抽屜-選取文件夾-抽取文檔。Ios樹形結構就是借鑒了這種整理方式的隱喻,將龐大的信息內容分類到類別,子類別、子子類別、子子子類別……中去,整理好層層嵌套的信息內容。

Iphone「設置」的導航模式就是樹形結構的典型案例:

 

目前我們最常見的樹形結構例子就是表格視圖,如上圖。這也是簡單的列表,點擊列表項目可以深入到下一層中去。當然還有更加圖形化的方式可以展示樹形列表,如下圖「支付寶」首頁,用圖標的方式來展示它的眾多功能:

無論何種形式,樹形導航模式都有類似的優點:占用很少的界面空間,操作簡單。

 

樹形結構優缺點

優點

  • 非常適用于管理大量的分類項目

  • 組織方式垂直簡單,易于操作理解

  • 占用很少的界面空間

 

缺點

  • 主功能只用在最頂層頁面才會被顯示出來。且若頁面層級較多,無法直接返回最頂層頁面

  • 次級頁面內容需要用戶主動挖掘,不直接不顯性。用戶往往只對核心內容有印象

 

3. 組合使用導航模型

大多情況下,我們都在一個應用中混合使用不同的導航模型,用一個模型來組織應用的主要功能,用另一個模型作為子導航來組織次要頁面。

混搭導航可以幫助我們克服單個導航的缺點。我們常見的一個組合方式是,使用標簽欄導航來組織應用的主要功能,然后在標簽欄內頁使用樹形導航。樹形導航一個很大的缺點就是不能從一個功能快速的切換到另一個功能,而混搭標簽欄導航的方式可以有效的彌補這個缺點。

比如「支付寶」用標簽欄導航來組織它的主要功能,在「我的」頁面中使用了基于列表的樹形導航來充當子導航。點擊子導航中的「螞蟻財富」功能,我們可以看到子子導航中又采用了標簽欄導航。這樣的混搭導航不但可以最大限度的利用界面空間,又可以縮短用戶的行為路徑,且易于操作理解。

 

總結

除了以上三種標準導航方式,我們當然也可以定義自己的組織方式。但是,使用標準導航方式和控件會讓用戶盡快熟悉和習慣我們的應用,同樣也能幫助我們融入其他應用。

也許我們都很熟悉這三種導航模式:平鋪頁面,標簽欄,樹形結構,但只有正確理解并思考每種導航模式的優缺點,我們才能更好的組織App的結構,讓應用自己說話,創造更好的用戶體驗。

希望這篇文章可以幫助大家用更開闊的思維思考App中常見的一些標準設計模式?!氨曜肌鋇?,往往是最值得深入解剖的。

來源:學UI網

上一篇: Apple官方如何命名圖層?(Controls篇)

下一篇: 一起制作Alphabear圖標[AI教程]

分享到: 更多
安徽时时开奖号码 两人炸金花技巧规律 时时彩杂六规则 3d试机号杀码走势图 彩经网大乐透走势图 三公玩法及规则 赛车稳赚不亏的注码法 阿拉德之怒mg版官网 河北快三技巧规律 pt老虎机娱乐网站官方 亚盘投注app 二八杠棋牌最新安卓版下载 时时彩免费计划软件手机版 重庆时时彩可以作弊吗 博远棋牌 重庆时时彩代理注册