起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識一篇文讀懂交互設計（移動導航篇）
第一部分：導航
在移動端，導航是APP最重要的區別。根據不同的內容，選擇不同的導航方式。
按照使用頻率的排序，有以下幾類！
Tab導航
Tab 導航分上下兩種。是最常用的導航形式。
很多iOS應用，采用這種導航。比如：istegrame（安卓和IOS都是Tab，舉例用安卓）,微博，微信，iOS很多原生應用也采用這種方式，比如撥號，時鐘，APP store，一般的瀏覽器等。
在iOS上，Tab點擊切換，不能滑動切換。因為iOS系統把頁面滑動留給了單條item的滑動操作，或者頁面返回。但是有些導航本身可以滑動，比如新聞類客戶端的導航。
在android,Tab可以點擊切換，也可以滑動切換，有些導航本身可以滑動。在頁面頂部的Tab，有可以活動的樣式，就是有部分Tab隱藏在頁面外面，滑動后出現。比如豌豆莢的界面。
關于數目，頁面底部的Tab一般位置固定，最多五個。再多就不好操作了。Tab本身可以滑動的界面，Tab數量可以多一些。
優勢：所有的入口都可以看見，容易尋找。
劣勢：總會占據屏幕下方的一條欄目，在瀏覽信息的時候，會阻擋內容。Tab的數目有限，5個已經是極限。
適用的場景：導航條目不多，使用頻率相差不太大的應用。
抽屜導航（漢堡導航）Navigation Drawer
這種導航在社交的應用中最常見，比如Facebook，path，之前的Google+，購物類的應用入亞馬遜，知乎客戶端等，在iOS和Android平臺上都 比較常見?，F在漢堡菜單里， 抽屜導航在其二級頁面可隱藏也可以不隱藏，一直出現。
適用的場景：
- 分支類目超過3個，這種導航多少都能裝的下
- 某一類目的層級較深， 比如Facebook的news feed ，
- 用戶使用時，某一類要頻繁訪問，使用頻率明顯超過其他
優勢：可以容納多個分支類目，隱藏多余的類目，使當前頁面簡潔
劣勢:
- 有部分類目，當前頁面不可見，需要用戶尋找，增加了認知成本。
- 類目之間的切換成本較高。
九宮格導航
最典型的就是美圖類應用，如美圖秀秀，百度魔拍，在二級目錄用九宮格，如旅游類應用，如攜程，去哪兒，支付寶等。這種導航模式現在用越來越少了，在首頁只有導航而沒有實際的內容，和以內容為主的趨勢相悖。
適用的場景：
- 這種導航適用于幾個功能沒有交叉的應用。
- 功能較多，較分散。
優勢：類目清晰，容納很多類目無壓力。
劣勢: 首屏沒有內容，只有入口。
list模式
首頁是一條條的item，item有單文字的，也有圖文結合的。比如說：一般的設置頁面。
適用的場景：
- 以很多內容為主的應用，比如設置。
- 以一條條內容為主的，通常和其他導航一起使用，比如知乎日報，新聞APP。
優勢：內容突出
劣勢: 不適合層級較深的應用
復合導航
現在，應用大多有復雜的多項功能，導航也適應這種情況，復合使用。
典型的就是新版QQ的導航，底部Tab和抽屜導航共用，抽屜部分放置不常用的個人各項信息，主體的應用采用底部Tab導航模式。
支付包的客戶端，大框架采用底部Tab的模式，Tab支付寶項，采用九宮格式的模塊設計，放置了很多功能模塊，入口非常清晰。
和支付寶類似的，還有一些旅游類應用，去哪兒，攜程等。
三種導航共存，比如美團的客戶端，底部Tab做大框架導航，團購的類目中，有九宮格式的入口，也有list模式展示比較詳細的信息。
最后，每一種導航都有自己使用的范圍，看了很多應用的設計，沒必要只局限于一種導航模式。根據每一種應用要呈現和表達的內容選擇。
在每一個模塊選用合適的呈現方式。
第二部分：安卓和ios的區別
iOS和Android的區別，想了很久，也沒想出特別多，這兩個系統有些東西越來越通用（設計上來說），尤其是Android上，可以實現所有的效果，當然有些看上去iOS很像。長得和iOS很像的Android應用很多，好多大牌也這么做，比如說現在的QQAndroid5.1.1。這樣只需要一套設計，出一套資源就OK了，比較高效節約。兩個平臺的使用體驗比較統一，但我還是喜歡有各系統設計本來特色的設計，安卓感覺的應用，wp感覺的應用。
做一款純粹的Android應用，真是讓人興奮的一件事情。
區別，在這兩種系統的原生應用里就能發現。Android 一直在尋找合適的設計語言，最新的material design，和以前相比，又是一個大轉變。iOS相對比較穩定。
這里的區別，聚焦在界面設計中，不涉及底層的內容（是你不懂寫不出來吧）區別，這些的區別也不絕對。
導航方式
iOS的Tab放在頁面底部，不能通過滑動來切換，只能點擊。也有放在上面的，也不能滑動，但有些Tab本身可以滑動，比如天貓的。還有新聞類的應用。
Android一般放在頁面頂端，可以通過滑動頁面來切換Tab，當然Tab可以點擊切換，Tab多的話，Tab本身也可以滑動。比如豌豆莢，百度貼吧 ，QQ。總之，Android啥都可以有。（其他導航方式，見上一篇）
單條item的操作
iOS單條item的操作有兩種，點擊和滑動，點擊一般進入一個新的頁面，滑動會出現對這條item的一些常用操作，如微信里滑動一條對話， 會出現標記未讀和刪除。
Android中，單條item的操作也有兩種，點擊和長按，點擊一般進入一個新的頁面。長按進入一個編輯模式，可以在里面進行批量和其他一個 操作，比如刪除，頂置等等。比如小米的短信頁面；長按也可以彈出情境操作欄dialog，進行操作，比如Android版的微信。
例外的是，Android里面也可以有單條item的滑動，如新版QQ，這種比較少見。安卓L的短信，可以滑動進行歸檔。大Android啥都可以有。
關于排版
iOS喜歡在居中排布。
Android喜歡左對齊，感覺左對齊更安卓。
實體鍵
iOS只有一個實體鍵（音量，電源不算哈），home鍵，這個鍵有這么幾個功能：
- 按一次，回到桌面。
- 雙擊，出現多任務界面
- iOS8里面，輕觸兩下Home鍵，調出單手模式
- 指紋解鎖
Android有四個實體鍵（現在很多被屏幕上的虛擬鍵代替，但功效是一樣的）4.4一下的分別是back鍵，home鍵，menu鍵，和搜索鍵。4.4及以上，是back鍵，home鍵，多任務鍵。安卓原生是這樣，經過優化的Android就不一定了，比如魅族的smart bar，根據當前頁面情景變化，不過蠻好用。
Android的back鍵，在大部分情況下，和頁面上的返回功效一樣。不過，Android的back鍵可以在應用件切換，還可以返回主屏幕。這個iOS里面的鍵不能在應用間直接切換。
動效
兩者的動效似乎差別不大，iOS有的，安卓都有。iOS實現的通常更加流暢，卡頓較少。
兩者都強調模擬現實世界的動畫效果，比如物體運動有一定的加速度，動畫的結束和開始速度小，中間速度大。
谷歌最新推出的material design，變化比較大，但這種設計風格還沒有大面積使用。這種設計風格，最突出的特點就是有一個懸浮按鈕。這個懸浮按鈕，代表了這個頁面的主要操作，位置可以在頁面上部，也可以在下部分。這次的動效也是亮點，動畫實時實地的反饋用戶的操作，動畫在用戶的點擊出開始觸發。又很多類似漣漪的效果。
這種按鈕的動效變化，概念稿多，好像還沒有實際的案例。（馬上就有啦…正在做）
浮窗
安卓里可以看到各種浮窗，流量，清理內存等等。iOS暫時還不支持這樣的浮窗。越獄的貌似可以。
這兩個平臺，只有想不到，幾乎沒有不可以實現。
安卓更加開放，可自定義的東西也更多，做花樣的話，安卓的限制更少。
第三部分:移動端的搜索
幾乎每個移動端的應用都有搜索按鈕，小小總結一下。
移動端的應用，幾乎每個都有搜索，就想著歸納下各種移動端的搜索。
用白板歸納一下是這樣子的~
從上面的歸納可以看出：
搜索有三個狀態
1 搜索按鈕，出現的搜索條
2 點擊搜索后，跳頁直接彈出鍵盤
- 返回/取消
- 搜索歷史
- 搜索熱詞
- 搜索分類
3 輸入內容后
- 實時搜索/搜索按鈕
- 全刪按鈕
- 返回/取消
實時搜索現在用的越來越多，很少有需要點擊搜索的了。就像改版了的百度一樣。
第四部分:交互文檔的三個階段
寫交互文檔的一些心得體會：
1 自己完稿——重要的功能 和其表達方式！
- 功能架構——用思維導圖畫出來
- 頁面布局——把所有頁面都列出來
- 順細節——所有的步驟都要有，越詳細越好
2 小組討論，過了幾輪后，然后又確定了一輪。
- 新問題，新需求，方向跑偏了的需求理解
- 細節加強，更好的表現方式
- 從開始第一次打開用的時候，易用性的一系列設計
- 開始考慮文案，特別是首次使用為空的引導
3 當3的時候，文檔告一段落，設計開發已經開始。但是此時，在后期仍有問題出現，比如一個功能修改，要有一些細節再加強！
- 及時跟進開發結果（這次跟進不夠及時）
- 這時候還會遇到很多問題。在以上環節頁面都是靜態的，有很大部分靠想象。這時候會遇到實際操作中更多的問題。及時修改，始終堅持有用的功能，易用的操作，及時的反饋，看得懂的流程。
- 總結
寫文檔的目的：
1 梳理功能，交互細節給相關開發人員查看，清楚簡潔，便于查看。
2 專業性，交互的輸出文檔
作者：王帆
本文來源：UI中國
- 目前還沒評論，等你發揮！
