第一部分：導航

在移動端，導航是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中國