廖婉生的必買購物清單

文章跟大家簡單的介紹了一下移動端常見的十大交互樣式，一起來看看~

一、什么是交互范式

交互范式：一組被可重復使用、被用戶熟知、蘊含設計經驗的界面交互模式。

通俗點說，就像是一組組的模板，我們在使用模板時，需要考慮到報告的主題、聽眾。同樣，交互范式在使用時也需要考慮到產品的定位、運營能力、用戶群等。今天我就來簡單介紹下移動端常見的十大交互范式。

二、常用的十大交互范式

范式一：抽屜式

特點：

隱藏內容，需要時展開;

1. 抽屜欄一般從頂部，底部，兩側拉出（側邊欄）；
2. 抽屜展示一般是具體內容，彈框一般是完成設置或任務；
3. 抽屜隱喻在交互體驗上更加自然，和原界面融合較好。

適用于：

1. 常見于瀏覽器、瀏覽性產品（閱讀、資訊）;
2. 高級操作、隱藏較深（專家用戶的快捷鍵）;
3. 動效果控制時間在0.2s左右;
4. 抽屜并不是高頻的操作，主流體驗在當前界面上面。

舉例：

抽屜式比較適合瀏覽型的產品，比如早期的知乎（80%閱讀、20%的切換），后來知乎變成了tab式結構，因為知乎由問答式產品逐漸變成一個平臺，內容比較多、信息展示量增加。

范式二：下拉式

特點：

1. 通常伴隨動作；
2. 是早期谷歌平臺的設計規范；
3. 可以節省界面。

適用于：非高頻操作、快捷操作。

舉例：

范式三：列表式（重要）

特點： 

1. 最常用的布局之一，簡單、用戶接受度高；
2. 閱讀習慣—手機屏幕一般豎屏顯示，文字橫屏顯示，豎排列表可包含較多信息；
3. 列表長度可以沒有限制，通過上下滑動可以查看更多內容；
4. 豎排列表在視覺上整齊美觀，用戶接受度很高；
5. 常用于并列元素的展示，包括目錄、分類、內容等。

適用于：

1. 應用廣泛；
2. 不受限制（做國際化產品時經常用到）。

舉例：

新聞類列表，一般有左圖右文和左文右圖兩種，具體的選擇根據產品、運營決定，不同產品線側重點不同，圖片在里面起到的作用也不同。

范式四：宮格式

特點：

1. 九宮格是非常經典的設計，展示形式簡單，用戶接受度很廣；
2. 當元素數量固定不變為8、9、12、16時，則適合采用九宮格；
3. 雖然它有時候給人設計老套的感覺，不過它的一些變體目前比較流行，比如METRO風格，一行兩格的設計等。

適用于：

1. 偏平臺級、內容量比較大的產品，比如支付寶；
2. 功能非常多，但并不能確定哪些是重要哪些是次要，比如360安全衛士；
3. 跟開發模式有一定關系：宮格導航—一個入口一個團隊，比如：美圖秀秀、淘寶首頁（導流）。

舉例：

范式五：Tab式

特點：

1. 受屏幕寬度限制可顯示的數量較少；
2. 采用Tab可以減少界面跳轉的層級，減少用戶的點擊次數，提高效率；
3. 可以將并列的信息通過橫向或豎向Tab來表現；
4. 有時可通過左右滑動查看更多內容，需要用戶主動探索；
5. 當功能之間聯系密切，用戶需要頻繁在各功能之間進行切換時，Tab布局是首選。

適用于：

1. 功能和功能間關系密切、需要頻繁切換；
2. 體量比較大的產品。

Tab結構的變形：

1. 舵式導航：快捷操作切換（高頻且重要）；
2. 豎向的tab（應用的局限性更大，常見于Pad端—pad端空間大）比如閱讀類產品：豎向tab+滾動，占面積的問題；
3. 文件夾結構—占用空間多；
4. Tab套tab— 在平臺上更常見（對視覺設計師要求更高，必須清晰表達在哪個tab下的哪個子集）。

舉例：

范式六：卡片式

特點：

1. 樣式豐富、承載量大；
2. 通常伴隨大圖；
3. 應用時需要考慮多種因素 ：圖片信息是否重要（例如：Airbnb—圖片信息非常重要，音樂類產品圖片起渲染）；運營能力（一天可以運營十篇還是一百篇，并且是否可以保證轉化）；內容是PGC還是UGC（UGC要求質量）；卡片大小（圖片信息的重要程度，同時匹配圖片質量）；一屏展示幾張圖（圖片展示的越大，形成轉化的可能性越大），用戶習慣對于資訊類，一般刷3-5屏，所以要保證這個范圍內有不同的信息。
4. 卡片式變形：瀑布流。

舉例：

在這里我們可以想一下，為什么小紅書用瀑布流而沒有用卡片式？

原因在于：

1. UGC（用戶上傳的圖片）定寬不定高，什么樣的圖片都可以適配在瀑布流里面，比較整齊；對用戶來說，自由度比較大 ——瀑布流適應UGC；
2. 瀑布流特別像女性在逛街，符合女性逛街的心態；
3. 效率高、運營能力高

范式七：彈窗式

特點：

1. 彈框是很常見的一種布局設計；
2. 在需要的時候才彈出，以節省屏幕空間；
3. 可在原有界面上進行操作，不必跳出界面，彈出框在安卓系統上的使用很普遍，比菜單、單選框、多選框等，在IOS系統上使用相對少些；
4. 非毀滅性操作盡量不使用彈框，例如：低電、病毒、刪除、支付、出錯等。

舉例：

范式八：輪播

特點：  

1. 相互內容之間是邏輯平衡的關系；
2. 內容切換、可以左右滑動。

適用于：手機桌面上（相同體系進行左右切換）。

變形：coverflow

舉例：

范式九：主題結構

特點：主題內容，獨立于與其他范式，根據產品特點進行創意發揮。

適用于：

1. 常見于功能簡單的小工具（比如日歷、計算機，游戲等）；
2. 個性化的小眾APP，手機桌面等等。

舉例：

范式十：組合

特點：

1. 混合式，適用于平臺級的產品；
2. 會增加用戶的認知負擔。

舉例：淘寶首頁

思考：淘寶的首頁布局就是是頂部搜索框（非常重要）+banner輪播（精準推送的廣告、形成變現）+宮格（給阿里系產品進行導流）+卡片+底部tab。

本文由 @純色 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

收藏已收藏 | {{ postmeta.bookmark }}點贊已贊 | {{ postmeta.postlike }}