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

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

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

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

　　(圖片來源：Tapworthy)

　　平鋪列表

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

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

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

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

　　標簽頁

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

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

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

　　樹狀結構

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

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

　　3類導航模式的比較

　　導航模式的組合應用

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

　　模態視圖

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

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

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

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

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

　　文章來源：ikent.me/blog/3798 轉載請注明出處鏈接。