幾種典型的 iOS 應用界面的交互框架各自的優缺點是什麼？

12-16

1. 以 Path、Facebook 為代表的「左側隱藏菜單抽屜式」；
2. 以 Instagram、微信、微博等為代表的「底部標籤式」；
3. 以 Vine 為代表的「頂欄下拉菜單式」；

以上幾種交互框架各自的優點和缺陷是什麼？應用如何根據需要選擇合適的交互框架？

標籤式 / Tab Menu

優點：
1、清楚當前所在的入口位置
2、輕鬆在各入口間頻繁跳轉且不會迷失方向
3、直接展現最重要入口的內容信息

缺點：

功能入口過多時，該模式顯得笨重不實用

————————————————————————————————————————————

跳板式 / Springborad

優點：
1、清晰展現各入口
2、容易記住各入口位置，方便快速找到

缺點：
1、無法在多入口間靈活跳轉，不適合多任務操作
2、容易形成更深的路徑
3、不能直接展現入口內容

4、不能顯示太多入口次級內容

————————————————————————————————————————————

列表式 / List Menu

優點：
1、層次展示清晰
2、可展示內容較長的標題
3、可展示標題的次級內容

缺點：
1、同級內容過多時，用戶瀏覽容易產生疲勞
2、排版靈活性不是很高

3、只能通過排列順序、顏色來區分各入口重要程度

————————————————————————————————————————————

旋轉木馬 / Carousel

優點：
1、單頁面內容整體性強
2、線性的瀏覽方式有順暢感、方向感

缺點：
1、不適合展示過多頁面
2、不能跳躍性地查看間隔的頁面，只能按順序查看相鄰的頁面

3、由於各頁面內容結構相似，容易忽略後面的內容

————————————————————————————————————————————

抽屜式 / Drawer

優點：
1、兼容多種模式
2、擴展性好

缺點：
1、隱藏框架中其他入口
2、對入口交互的功能可見性（affordance）要求高

3、對排版要求高

————————————————————————————————————————————

點聚式 / Plus

優點：
1、靈活
2、展示方式有趣
3、使界面更開闊

缺點：
1、隱藏框架中其他入口

2、對入口交互的功能可見性（affordance）要求高

————————————————————————————————————————————

陳列館式 / Gallery

優點：
1、直觀展現各項內容
2、方便瀏覽經常更新的內容

缺點：
1、不適合展現頂層入口框架
2、容易形成界面內容過多，顯得雜亂

3、設計效果容易呆板

————————————————————————————————————————————

瀑布式 / Waterfall

優點：
1、瀏覽時產生流暢體驗

缺點：
1、缺乏對整體內容的體積感，容易發生空間位置迷失

2、瀏覽一段時間後，容易產生疲勞感

--------------------------------------------------------------------------------------------------------------------------------------------
對於以上內容，
《移動UI設計模式》 by Theresa Neil
《移動設計》 by 傅小貞、胡甲超、鄭元攏

感謝這兩本書的面世

iOS7的HIG里總結了三類導航方式：
1. 樹形信息結構（hierarchical）
2. 扁平結構（flat）
3. 內容或體驗驅動結構（content- or experience-driven）

樹形結構，通過在每一層的選擇逐級深入抵達目標層，同樣退出也需要逐級回溯，通過導航欄（navigation bar）實現層級之間的導航。例如iOS的「設置」和「郵件」應用就是這種結構。

扁平結構，可以從一個主類別快速訪問其他副類別，因為所有類別都會呈現出來，一般使用標籤欄(tab bar)來實現導航。例如iOS的「音樂」和「AppStore」就是這種結構

內容或體驗驅動，這種情況下，導航也被設計為內容和體驗的一部分，例如大部分遊戲類應用

大部分iOS應用的導航方式都是基於樹形和扁平結構混合而成的。

至於android，youtube上有名的ADiA（Android Design in Action）最近有一期是專門講Drawer這種導航形式的，順帶把其他導航方式也梳理了一下，可以直接拿來看：

android4.0時期三種常見導航：
1. 宮格（Six-pack，鋒客上翻譯成腹肌式，形象！）,
2. 下拉菜單（Spinner）
3. 固定標籤（Fixed tabs）

宮格：相比另外兩種只能起到分類導航的作用，無法同時展示內容，比較適合在分類較多，相互之間沒有聯繫，並且每一類層級又很淺的應用上使用。例如360這種聚合工具類應用。

下拉菜單：分類的展示會弱一些，尤其是隱藏起來的分類比較難被關注，但是數量上沒有限制，可以很多，比較適合注重內容展示，分類是「一個流程很長的核心+大量流程短小的附屬」性質分類，例如大部分刷feed的社交應用。

固定標籤：類似iPhone的標籤欄，平衡內容和分類的展示，適合有5個以內的核心類別，每個類別的使用率都很高的應用，例子不用列舉的了，大部分應用都適用。

當然，還有一種是Android4.3之後正式加入官方規範的：抽屜（Drawer）

看官方的解釋：

Drawer更像是下拉的變種，但相對下拉，Drawer展示的信息更多更豐富，甚至可以將1級2級分類都放上去，這樣只要拉出抽屜就可以快速達到某個1級類目下的2級分類。

所以個人理解，Drawer更適合分類多，層級深，深層級之間有跳轉需求，對導航的靈活性要求很大的應用，google的各應用（例如G+，youtube，Gmail），都天然適合這種導航方式，應該也是google偏愛Drawer的原因吧……

關於iOS的導航說明來自：
iOS Human Interface Guidelines: Navigation
關於Drawer的信息來自：
? Android Design 趨勢——Navigation Drawer 鋒客網
Android Design Navigation Drawer

移動應用交互框架（導航模式）目前主要分為9種

1.1-選項卡式：

選項卡式的導航在很多機型里都有不同的體現，這裡只列舉IOS和Android作為案例；優點：這是一種常見的導航，倘若應用要用戶在不同分頁里頻繁切換，就用這類導航缺點：是會佔用一定高度的空間。Android的這個形式看上去很熟悉，因為模仿了網頁導航模式，是PC端遺留的產物。這種方式不利於大屏手機單手切換操作

案例：IOS - App Store，Faebook , 微信

案例：Android - 主題商店和應用商店

看出IOS與Android的區別了么？

1.2-舵式導航：

本書里沒有介紹，自行添加的。舵式導航應該屬於標籤卡式導航的一種延伸。中間的標籤作為重要且操作頻繁的入口，一般都用圖形或顏色凸顯出來

案例：微博，Path，Instagram

1.3-列表菜單式 ：

這種導航有很多種變化形式，包括個性化列表菜單，分組列表，和增強列表（Enhanced List）等。增強列表是在簡單的列表菜單之上增加搜索、瀏覽或過濾之類的功能後形成的。列表菜單合適顯示較長或擁有次級文字的標題

案例：小米手環，VPN，iPhone手機系統設置

1.4-跳板導航 :

跳板式導航對操作系統並沒有特殊要求，在各種設備上都有良好表現。有時也被稱為「快速啟動板」（Launchpad）。跳板式導航的特徵是，登錄界面中的菜單選項就是進入各個應用的起點

案例：支付寶，愛奇藝

可進行位置上自定義，看案例中的橙色與藍色的分布就是自定義的結果。對比一下自己的手機看看

1.5-陳列式：

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

案例：廚房的故事，Dribbbler,Pinterest

1.6-儀錶式：

儀錶式提供關於一種度量KPI（關鍵績效指標）是否達到要求的方法。主要應用：商業應用，分析工具，銷售，和市場應用

案列：AT，Overiew

1.7-隱喻式：

用頁面模仿應用的隱喻對象。主要用於遊戲，同時在幫助人們組織事物（如日記、書籍、紅酒等），對其進行分類的應用中也會用到。隨著扁平化的流行，隱喻這種偏向擬物的設計漸漸成為過往，鎚子的手機應該會有很多案例

案列：印象筆記，DailyCost

1.8-超級菜單：

在選擇導航模式之前，先確定信息架構。如果導航對象只有少數內容，就可以使用選項卡之類的導航模式

案列：RipCurl

1.9-抽屜式 :

抽屜導航特點是菜單隱藏在當前頁面之後，只要點擊入口就能將它拉出來，此類導航好處是節省頁面展示空間，有利於用戶注意力在當前頁面聚集，可以應用在不需要頻繁切換內容的應用上，以對設置、內容進行隱藏。此類導航設計務必提供菜單畫出的過渡動畫

案例：知乎，亞馬遜

感謝閱讀:馬贊贊 (●—●)

這裡的交互框架，也可以理解為應用的基本導航模式，是應用信息架構直觀的視覺和交互表現，導航的作用主要有兩個：1. 讓用戶清晰地了解應用的功能和內容組織2. 讓用戶更快更好的完成操作任務和信息查找。
1.Path和facebook的「左側隱藏菜單抽屜式」，一般也稱為抽屜式導航（Navigation Drawer）是現在非常流行的一種導航模式。
其優點：
1）不佔用寶貴的屏幕空間，讓用戶首先能聚焦於內容
2）導航的菜單項目不受數量限制，應用的所有信息組織入口都可以加入到抽屜導航中
3）擴展性強，配置靈活，應用中一些常用的快捷操作功能和低層級界面入口也能直接放置進抽屜導航中
缺點：
1）容易與應用內的其他交互模式衝突，比如側滑手勢操作
2）大部分操作項目均為隱藏狀態，用戶需要一定記憶成本

適用場景：用戶在使用過程中需要不斷在導航選項間進行切換操作；需要頻繁的從低層級頁面向高層級頁面跳轉；導航選項較多；層級結構較深。

2.「底部標籤式」
優點：
1）用戶可在所有頂級頁面中一覽應用主要的內容與功能結構
2）用戶點擊一次即可訪問到應用所有的主要功能
3）告知用戶主要功能和當前所在的導航位置。
缺點：
1）選項標籤的顯示數量有限
2）佔用一定的屏幕空間

適用場景：應用的主要功能項目較少，導航菜單項數量為3-5個；各導航菜單項之間內容/功能有顯著差異；用戶在各個導航選項之間需要進行頻繁的切換操作。

3.「頂欄下拉菜單式」
優點：
1）用戶通過菜單按鈕可快速預覽應用的基本內容與功能結構；
2）下拉菜單在大多數時間為隱藏狀態，節省了屏幕空間，同時也讓用戶更加專註於應用內容本身
3）讓用戶能夠盡量少的切換視圖以實現導航。
缺點：
1）與抽屜導航類似，其大部分操作項目均為隱藏狀態，用戶需要一定記憶成本
2）下拉菜單的顯示數量有限

使用場景：應用的信息層級較簡單；需要將多個菜單項整合進一個按鈕中以達到精簡導航的目的；響應式web在移動端的表現，以保持移動端與web端的一致體驗。

首先，在討論交互設計框架前，我們需要考慮到兩點：一是輸出終端，即在什麼設備（device）上使用，二是由於設備的不同，用戶的使用姿勢（posture）是否有所不同。

輸出終端

這裡討論的是iOS系統應用界面，它包括iPhone等mobile device，也包括以及iPad等tablet device。儘管mobile與tablet設備的界面都有各自的guideline，一般情況下，為保持設計的一致性，從而避免用戶出現使用誤解，因此mobile interface與tablet interface不會有太大的區別，且tablet interface在用戶的使用姿勢上比mobile interface更具有隨意性。因此，我們主要以mobile device為中心討論iOS應用界面。

圖片來源：https://www.pinterest.co.uk/pin/574490496204327533/

使用姿勢

首先，我們從物理角度分析不同的交互框架。

從圖中可以看出，絕大多數的用戶更傾向於單手操作手機。這在一定程度上局限了操作範圍，由於根據不同的手機尺寸大小以及用戶的手掌大小，界面上有些地方屬於較困難操作區域。

圖片來源：https://www.uxmatters.com/mt/archives/2013/02/images/HoldPhones_Figure-1.png

從這張圖片可以看出，在用戶單手使用手機的過程中，綠色區域屬於舒適並且簡單觸碰區域，黃色屬於觸碰困難區域。

圖片來源：https://www.formisimo.com/blog/wp-content/uploads/2014/12/large_smartphones-554x388.png

下面我們分別對上述三種交互框架逐一進行分析：

1. 底部標籤式

這一交互框架的優點是使用方便，用戶可以使單手操作，輕鬆觸摸到此區域的功能鍵，並且不需要繁瑣的操作指南。而與之相對，由於這一交互框架中，菜單內的功能選項通常不多，普遍是4到5個功能項，最多只能容納6個，因此設計師需要謹慎考慮在這一區域內功能選項，通常此框架內的交互功能應當是用戶使用頻率較高（frequently used）且為基本使用功能（fundamental of the application）

圖片來源：https://tctechcrunch2011.files.wordpress.com/2014/05/hamburgersandbasements-tabbars.png?w=608h=320

2. 左側隱藏菜單抽屜式

這一區域相對來說也比較容易單手操作，並且相較於底部標籤式交互框架，這一菜單可以附加更多的功能性。但需要注意的是，由於左側隱藏菜單為垂直排序框架，用戶在無形中會按照從上到下的傳統閱讀習慣，因此設計師需要更多考慮到菜單功能排序（make order）的主次順序（priority）以及各個功能排序之間的邏輯關係。

圖片來源：https://s-media-cache-ak0.pinimg.com/736x/66/e9/fc/66e9fcf9c2ed997db06f1bb1374e1c43--design-menu-app-design.jpg

提到主次邏輯關係，下面舉一個簡單的例子。

下圖中菜單里的功能選項排列為：

個人信息
收件箱
標星文件
未讀文件
發件箱
垃圾桶

圖片來源：http://www.beautifulinterfaces.com/ew/data/items/163.jpg

這樣有邏輯的排列可以提高APP本身的可用性，同時幫助用戶更清楚地了解整個APP的的結構。但如果上圖中的菜單排序為：

退出登錄
未讀文件
垃圾桶
個人信息
標星文件
收件箱
發件箱

則會造成使用者用戶體驗反饋效果不佳，使用戶在使用時感到困惑，就像打開一本書時看到目錄上寫的是：

Chapter 8
Chapter 1
Chapter 3
Chapter 9

3. 頂欄下拉菜單式

這一區域是一個比較容易被忽略的地方，一方面是因為這一區域很難在單手操作時，使用一個拇指去觸碰，使用性不高。另一方面，從閱讀的角度來說，這一區域通常充當標題的功能。這一區域的菜單，相當於一本書的標籤或索引，它將一本書區分為不同章節，方便讀者查閱信息，從而更加易於理解，這也是為什麼現在很多設計師選擇這一交互框架的原因。

圖片來源：https://i.pinimg.com/736x/0e/ae/72/0eae72f8a57f3e1b03c35d3ad5cb979b--vine-mobile-ui.jpg

綜上，這三種典型的iOS應用界面的交互框架有利有弊，在設計過程中需要結合產品本身的需求來進行選擇。產品內容決定了產品的功能性，而功能框架的構建決定了產品的使用性。

以上望有幫助，歡迎交流

———————————————————

歡迎關注我的個人官方微信（kang-shishi）

如有藝術留學、院校、專業、作品集方面的問題，可私信康石石諮詢

如果不同頁面的內容重要性或者展示的頻度差不多，那絕對還是老套的tabs最靠譜。雖然操作效率不是最高，視覺不是最好，但各種信息得以均衡呈現，用戶不會迷路，出錯概率低。

如果跟facebook、path一樣，有一個絕對重要性的feed頁，其他都是輔助的，或者重要性明顯不如該頁面，那採用隱式的菜單更合適，給重要頁面最大程度的曝光，減少次要信息的干擾，讓用戶在儘可能多停留在重要頁面上。

tabs可以優化成，在滾動瀏覽過程中導航隱藏，停止或逆向滑動時再顯示。這樣兼顧了導航和展示面積最大化。不過如果內容不是特別多，還是不隱藏更簡單明確。

問題當中的第一條已經發生改變，Facebook的應用已經切換回到底部Tab的導航方式。
所以我們要討論的是如下3種iOS的界面導航方式。
1. Tab式; 2. Sidebar/Menu的側邊菜單; 3. 類似Vine這樣的頂部菜單的方式

1. Tab式
這個是iOS當中最常見的一種頂級導航方式，優點是所有的功能一目了然，在進入第一個界面的時候即可對程序的幾乎全部功能有所了解。而且由於底部靠近拇指，操作起來更加方便。
按照iOS的HIG(Human Interface Guideline), 底部Tab最多使用5個，這樣的限制可以幫助產品設計者抵制向app當中塞入過多功能的慾望。當一個app當中有很多功能的時候，可能大部分都不會被用戶使用到，或者某一部分的功能可以獨立出來成為另一個app. (參見Facebook和Facebook Messenger) 個人的建議是，當開發一個新的app的時候，建議從Tab方式的導航做起，專註app的主要功能。
還可以通過自定義Tab項目的方式，在有限的空間內，讓用戶自主選擇常用的功能。參見Tweetbot 3

2. Sidebar 側邊菜單的方式
這種方式適合有較多功能的應用(真的需要有的話)。因為側邊菜單可以上下滑動，可以放更多的項目。在iOS上，觸髮菜單的方式一般是左上角的按鈕，左上角是iOS的「熱區」，也是比較方便的。而且由於改種側邊菜單在Android上也非常流行，比較適合在iOS和Android上提供相同的用戶體驗(多少人的夢想啊！) 不過這種菜單在iOS和Android上的實現略有不同。
a. 在Android上稱為Drawer, 滑動的時候頂部Banner維持不懂，從屏幕外面滑動進來一個菜單，蓋住部分或者全部的內容；在iOS上，通常是界面整體向右移動。
b. 在Android上配合向右滑動的手勢，有效解決Android屏幕較大，無法觸及左上角的問題；在iOS上，因為跟iOS 7的右滑後退的默認手勢衝突，故一般不建議採用手勢喚出菜單

這種菜單的缺點是，由於菜單較長，底部的一些功能會不常用到；據說這也是Facebook又換回Tab方式導航的原因

3. Vine 這樣頂部下拉的導航方式
一般情況下，從頂部下拉的菜單是用來對內容進行篩選，而不是進行功能的切換。我更願意理解為這是因為Vine的功能比較單一，所以對它來說沒有所謂的功能導航。下拉菜單更像是一種快捷鍵。因為功能不多，採用側邊菜單也沒有什麼必要。而採用固定的Tab導航對於這樣的內容為主的應用又顯得過於占空間。另外一種做法是像Fancy那樣設計自動隱藏的Tab。（雖然頻繁消失出現顯得不夠優雅）
總的來說，我個人不覺得這樣的導航方式有什麼特殊的設計或者可以借鑒的地方。

個人觀點，謝絕抬杠。

蘋果給的底部標籤就非常好.4個-5個頻道, 偽多任務,切換方便靈活. 我認同這個.
手機應用尤其不能做得太複雜. 大多數用戶只想使用應用是某一個功能.而弄那麼多複雜的導航和特效,反而降低了應用的靈活性

1、左側隱藏菜單式：感覺比較適合功能較多，信息結構較複雜的產品，且可擴展性較好。
但據了解，該種交互其實不太適合面向國內女性用戶的產品，大多反映不會用。
2、底部標籤欄適合功能較少。且功能的等級主次之分較明顯，如微博的timeline是最主要則可做默認首頁，缺點是占空間，但個人最喜歡這種簡單的交互模式
3、適合單一內容瀏覽型，下拉瀏覽很爽

1、抽屜式，可以將用戶的注意力聚焦在主信息流的瀏覽上，適合不用頻繁切換「子產品模塊」的產品，且擴展性比較好，可以適應各種層級的導航；至於缺點就是「隱藏」咯，不過這也是其優點，所以合適的才是最好的；
2、底部標籤式，正好與抽屜式相反，需要經常切換子產品場景，而且可以給用戶以對全局以及當前位置的明確感知，當然獨佔屏幕底部空間是傷，不過現在也有做成會隨著滑動隱藏/顯示的設計，避免了佔位；
3、頂部菜單，由於擴展性有限，一般都是同級的內容切換/篩選之類的功能，以此作為產品的主導航的話，一般這樣的產品應該結構比較簡單吧；

鍋內優秀的交互設計、ui設計微信訂閱號，掃描二維碼關注