移動產品設計之ios導航模式

　　導航始終是產品設計的重頭戲，往往產品設計中90%的事情就是在做導航。在iphone中預置了3種可以直接使用的導航模式，平鋪列表、標籤頁、樹狀結構，每種模式都配有不同的工具列和控制項。三種導航模式可以獨立使用也可以混搭，讓你的使用者可以優雅的穿行與你的應用之中。

　　寫在前面：剛開始接觸移動產品設計的時候對著設計指南懵懵懂懂的感知了一下，但是還是不甚寥寥。最近讀《觸動人心》，發現作者對ios的導航模式的總結實在太棒了，於是寫下這篇讀書筆記。

　　導航始終是產品設計的重頭戲，往往產品設計中90%的事情就是在做導航。在iphone中預置了3種可以直接使用的導航模式，平鋪列表、標籤頁、樹狀結構，每種模式都配有不同的工具列和控制項。三種導航模式可以獨立使用也可以混搭，讓你的使用者可以優雅的穿行與你的應用之中。

　　(圖片來源：Tapworthy)

　　平鋪列表

　　這種方式主要用於只有一個主屏的簡單應用。這種方式很適合瀏覽並發現類的應用，因為他的資訊架構簡單到極致，沒有資訊層級也沒有組織圖，就像一疊卡片一樣。主要資訊在卡片的“正面”展示，“反面”就是簡單的設定，向左右滑動即可翻頁，典型應用比如內建的天氣應用。

　　當然，平鋪列表式導航也可以根據你的需要隨意的添加、刪除卡片。從某種意義上講，他的擴充性優於標籤頁式導航，因為標籤頁模式中類目與順序都是固定的。

　　在平鋪列表模式的頁面底部都添加了頁面分頁控制項，其表現為一排小圓點。小圓點的數量代表了平鋪的頁面的數量，而高亮的小點則是另外一種形式的導航，他顯示了當前所在頁面的位置。同時，頁面分頁控制項也是可以操作的，點擊控制項的左半部分或者右半部分或者直接左右滑動可以切換上一個/下一個頁面，不過，頁面分頁控制項每次只能翻一頁，而不是直接跳轉到某一頁去。一般而言，頁面分頁以不超過10個為最優，超過了20個就會溢出螢幕了…。

　　另外，為了更好的表達”卡片堆“的隱喻，最好不要在平鋪模式下設計多個不同的滑動手勢。在觸控螢幕上大家都能在單一方向上進行滾屏，但是2個方向的滾屏需要更好的精度，這種做法有些挑戰人機工程學了。

　　標籤頁

　　在ios上標籤頁一般依附在螢幕的底部，標籤欄將應用功能一一歸類，點擊一個標籤就會跳轉到相應的頁面上，然後該標籤以高亮的形式表明你當前的位置。在標籤頁模式下，每個標籤對應的頁面都可以有自己的介面風格和特定的內容與功能，看起來就像是在運行一個獨立的應用。

　　標籤欄的高度是49像素，每個按鈕都會包含一個文字標籤和表徵圖，按鈕的寬度取決於放置按鈕的數量，標籤欄限制最多可以放5個表徵圖，超過之後會在第5個按鈕的位置出現”更多“的標籤。

　　當然，標籤欄以49像素的高度存在其實佔用了不少的螢幕空間，所以在某些情況下可以適當的去掉標籤欄，典型的就是圖書類應用的全屏閱讀模式。

　　樹狀結構

　　這種模式簡單來說就是將層級資訊分類到一棵倒置的樹枝上。這種導航模式很適合列表，點擊列表中的一項可以看到新的列表，列表可以再進行分拆，直到進入項目的詳情。樹狀結構的一個變形就是表格視圖，也就是我們常說的”9宮格”，這種變形更加的圖形化。

　　當然，根據資訊的不同，樹狀模式中的標籤也可以進行分組。一個樹狀模式可以分為若干的組，每個組可以包含任意數量的行數。

　　3類導航模式的比較

　　導航模式的組合應用

　　平鋪列表、標籤頁、樹狀結構3種導航模式並不是互斥的，完全可以在一個應用裡對他們進行混搭。這種混搭可以協助我們克服單個導航模式的短處。

　　模態視圖

　　我們經常會遇到在某個路徑中滑出一個單屏、進行編輯、查看資訊、操作介面的上的內容的情況發生。這是一種應用行為的特定形態，一般帶有流程的介面變更的情況發生，比如一張頁面臨時取代了整個應用程式的顯示屏，我們稱這種處理方式為“模態視圖”。預設情況下，模式視圖從螢幕底部邊緣滑上來切一半覆蓋了當前整個螢幕，模態視圖完成和程式主功能有關係的獨立任務，尤其適合於主功能介面中欠缺的多級子任務。這種操作會暫時繞開應用的正常操作。

　　模態視圖常常被用來編輯或新增內容，當你需要的時候模態視圖一般從螢幕底部滑出而後遮蓋先前的頁面，當你完成任務後滑出的頁面也會相應的縮回去，然後可以繼續之前的流程。有些控制項和介面元素只在次要任務中被偶爾用到，模態視圖很好的把他們暫時隱藏了，並且當需要的時候出現，有效節約了螢幕空間。

　　模態視圖有點像是導航中的死胡同，為了能夠讓使用者也可以同樣方便的回到正常的流程中去，模態視圖除了正常的操作之外一般還有加上一個“完成”按鈕，或者“取消”按鈕。

　　最後，一個移動產品設計的禮儀問題：

　　當使用者從你應用的一個地方跳轉到另外一個地方再原路返回來的時候，應用應該主動恢複到他上次離開的樣子(千萬不要重新載入，你懂的!)。這玩意學名叫狀態恢複，這種保持不變的禮儀對移動產品的體驗來說相當重要!

　　文章來源：ikent.me/blog/3798 轉載請註明出處連結。