文章跟大家簡(jiǎn)單的介紹了一下移動(dòng)端常見(jiàn)的十大交互樣式，一起來(lái)看看~

一、什么是交互范式

交互范式：一組被可重復(fù)使用、被用戶(hù)熟知、蘊(yùn)含設(shè)計(jì)經(jīng)驗(yàn)的界面交互模式。

通俗點(diǎn)說(shuō)，就像是一組組的模板，我們?cè)谑褂媚０鍟r(shí)，需要考慮到報(bào)告的主題、聽(tīng)眾。同樣，交互范式在使用時(shí)也需要考慮到產(chǎn)品的定位、運(yùn)營(yíng)能力、用戶(hù)群等。今天我就來(lái)簡(jiǎn)單介紹下移動(dòng)端常見(jiàn)的十大交互范式。

二、常用的十大交互范式

范式一：抽屜式

特點(diǎn)：

隱藏內(nèi)容，需要時(shí)展開(kāi);

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

適用于：

1. 常見(jiàn)于瀏覽器、瀏覽性產(chǎn)品（閱讀、資訊）;
2. 高級(jí)操作、隱藏較深（專(zhuān)家用戶(hù)的快捷鍵）;
3. 動(dòng)效果控制時(shí)間在0.2s左右;
4. 抽屜并不是高頻的操作，主流體驗(yàn)在當(dāng)前界面上面。

舉例：

抽屜式比較適合瀏覽型的產(chǎn)品，比如早期的知乎（80%閱讀、20%的切換），后來(lái)知乎變成了tab式結(jié)構(gòu)，因?yàn)橹跤蓡?wèn)答式產(chǎn)品逐漸變成一個(gè)平臺(tái)，內(nèi)容比較多、信息展示量增加。

范式二：下拉式

特點(diǎn)：

1. 通常伴隨動(dòng)作；
2. 是早期谷歌平臺(tái)的設(shè)計(jì)規(guī)范；
3. 可以節(jié)省界面。

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

舉例：

范式三：列表式（重要）

特點(diǎn)：?

1. 最常用的布局之一，簡(jiǎn)單、用戶(hù)接受度高；
2. 閱讀習(xí)慣—手機(jī)屏幕一般豎屏顯示，文字橫屏顯示，豎排列表可包含較多信息；
3. 列表長(zhǎng)度可以沒(méi)有限制，通過(guò)上下滑動(dòng)可以查看更多內(nèi)容；
4. 豎排列表在視覺(jué)上整齊美觀，用戶(hù)接受度很高；
5. 常用于并列元素的展示，包括目錄、分類(lèi)、內(nèi)容等。

適用于：

1. 應(yīng)用廣泛；
2. 不受限制（做國(guó)際化產(chǎn)品時(shí)經(jīng)常用到）。

舉例：

新聞?lì)惲斜?，一般有左圖右文和左文右圖兩種，具體的選擇根據(jù)產(chǎn)品、運(yùn)營(yíng)決定，不同產(chǎn)品線(xiàn)側(cè)重點(diǎn)不同，圖片在里面起到的作用也不同。

范式四：宮格式

特點(diǎn)：

1. 九宮格是非常經(jīng)典的設(shè)計(jì)，展示形式簡(jiǎn)單，用戶(hù)接受度很廣；
2. 當(dāng)元素?cái)?shù)量固定不變?yōu)?、9、12、16時(shí)，則適合采用九宮格；
3. 雖然它有時(shí)候給人設(shè)計(jì)老套的感覺(jué)，不過(guò)它的一些變體目前比較流行，比如METRO風(fēng)格，一行兩格的設(shè)計(jì)等。

適用于：

1. 偏平臺(tái)級(jí)、內(nèi)容量比較大的產(chǎn)品，比如支付寶；
2. 功能非常多，但并不能確定哪些是重要哪些是次要，比如360安全衛(wèi)士；
3. 跟開(kāi)發(fā)模式有一定關(guān)系：宮格導(dǎo)航—一個(gè)入口一個(gè)團(tuán)隊(duì)，比如：美圖秀秀、淘寶首頁(yè)（導(dǎo)流）。

舉例：

范式五：Tab式

特點(diǎn)：

1. 受屏幕寬度限制可顯示的數(shù)量較少；
2. 采用Tab可以減少界面跳轉(zhuǎn)的層級(jí)，減少用戶(hù)的點(diǎn)擊次數(shù)，提高效率；
3. 可以將并列的信息通過(guò)橫向或豎向Tab來(lái)表現(xiàn)；
4. 有時(shí)可通過(guò)左右滑動(dòng)查看更多內(nèi)容，需要用戶(hù)主動(dòng)探索；
5. 當(dāng)功能之間聯(lián)系密切，用戶(hù)需要頻繁在各功能之間進(jìn)行切換時(shí)，Tab布局是首選。

適用于：

1. 功能和功能間關(guān)系密切、需要頻繁切換；
2. 體量比較大的產(chǎn)品。

Tab結(jié)構(gòu)的變形：

1. 舵式導(dǎo)航：快捷操作切換（高頻且重要）；
2. 豎向的tab（應(yīng)用的局限性更大，常見(jiàn)于Pad端—pad端空間大）比如閱讀類(lèi)產(chǎn)品：豎向tab+滾動(dòng)，占面積的問(wèn)題；
3. 文件夾結(jié)構(gòu)—占用空間多；
4. Tab套tab— 在平臺(tái)上更常見(jiàn)（對(duì)視覺(jué)設(shè)計(jì)師要求更高，必須清晰表達(dá)在哪個(gè)tab下的哪個(gè)子集）。

舉例：

范式六：卡片式

特點(diǎn)：

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

舉例：

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

原因在于：

1. UGC（用戶(hù)上傳的圖片）定寬不定高，什么樣的圖片都可以適配在瀑布流里面，比較整齊；對(duì)用戶(hù)來(lái)說(shuō)，自由度比較大 ——瀑布流適應(yīng)UGC；
2. 瀑布流特別像女性在逛街，符合女性逛街的心態(tài)；
3. 效率高、運(yùn)營(yíng)能力高

范式七：彈窗式

特點(diǎn)：

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

舉例：

范式八：輪播

特點(diǎn)： ?

1. 相互內(nèi)容之間是邏輯平衡的關(guān)系；
2. 內(nèi)容切換、可以左右滑動(dòng)。

適用于：手機(jī)桌面上（相同體系進(jìn)行左右切換）。

變形：coverflow

舉例：

范式九：主題結(jié)構(gòu)

特點(diǎn)：主題內(nèi)容，獨(dú)立于與其他范式，根據(jù)產(chǎn)品特點(diǎn)進(jìn)行創(chuàng)意發(fā)揮。

適用于：

1. 常見(jiàn)于功能簡(jiǎn)單的小工具（比如日歷、計(jì)算機(jī)，游戲等）；
2. 個(gè)性化的小眾APP，手機(jī)桌面等等。

舉例：

范式十：組合

特點(diǎn)：

1. 混合式，適用于平臺(tái)級(jí)的產(chǎn)品；
2. 會(huì)增加用戶(hù)的認(rèn)知負(fù)擔(dān)。

舉例：淘寶首頁(yè)

思考：淘寶的首頁(yè)布局就是是頂部搜索框（非常重要）+banner輪播（精準(zhǔn)推送的廣告、形成變現(xiàn)）+宮格（給阿里系產(chǎn)品進(jìn)行導(dǎo)流）+卡片+底部tab。

本文由 @純色 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議