移動端常見十大交互范式
文章跟大家簡單的介紹了一下移動端常見的十大交互樣式,一起來看看~
一、什么是交互范式
交互范式:一組被可重復(fù)使用、被用戶熟知、蘊(yùn)含設(shè)計經(jīng)驗的界面交互模式。
通俗點說,就像是一組組的模板,我們在使用模板時,需要考慮到報告的主題、聽眾。同樣,交互范式在使用時也需要考慮到產(chǎn)品的定位、運營能力、用戶群等。今天我就來簡單介紹下移動端常見的十大交互范式。
二、常用的十大交互范式
范式一:抽屜式
特點:
隱藏內(nèi)容,需要時展開;
- 抽屜欄一般從頂部,底部,兩側(cè)拉出(側(cè)邊欄);
- 抽屜展示一般是具體內(nèi)容,彈框一般是完成設(shè)置或任務(wù);
- 抽屜隱喻在交互體驗上更加自然,和原界面融合較好。
適用于:
- 常見于瀏覽器、瀏覽性產(chǎn)品(閱讀、資訊);
- 高級操作、隱藏較深(專家用戶的快捷鍵);
- 動效果控制時間在0.2s左右;
- 抽屜并不是高頻的操作,主流體驗在當(dāng)前界面上面。
舉例:
抽屜式比較適合瀏覽型的產(chǎn)品,比如早期的知乎(80%閱讀、20%的切換),后來知乎變成了tab式結(jié)構(gòu),因為知乎由問答式產(chǎn)品逐漸變成一個平臺,內(nèi)容比較多、信息展示量增加。
范式二:下拉式
特點:
- 通常伴隨動作;
- 是早期谷歌平臺的設(shè)計規(guī)范;
- 可以節(jié)省界面。
適用于:非高頻操作、快捷操作。
舉例:
范式三:列表式(重要)
特點:?
- 最常用的布局之一,簡單、用戶接受度高;
- 閱讀習(xí)慣—手機(jī)屏幕一般豎屏顯示,文字橫屏顯示,豎排列表可包含較多信息;
- 列表長度可以沒有限制,通過上下滑動可以查看更多內(nèi)容;
- 豎排列表在視覺上整齊美觀,用戶接受度很高;
- 常用于并列元素的展示,包括目錄、分類、內(nèi)容等。
適用于:
- 應(yīng)用廣泛;
- 不受限制(做國際化產(chǎn)品時經(jīng)常用到)。
舉例:
新聞類列表,一般有左圖右文和左文右圖兩種,具體的選擇根據(jù)產(chǎn)品、運營決定,不同產(chǎn)品線側(cè)重點不同,圖片在里面起到的作用也不同。
范式四:宮格式
特點:
- 九宮格是非常經(jīng)典的設(shè)計,展示形式簡單,用戶接受度很廣;
- 當(dāng)元素數(shù)量固定不變?yōu)?、9、12、16時,則適合采用九宮格;
- 雖然它有時候給人設(shè)計老套的感覺,不過它的一些變體目前比較流行,比如METRO風(fēng)格,一行兩格的設(shè)計等。
適用于:
- 偏平臺級、內(nèi)容量比較大的產(chǎn)品,比如支付寶;
- 功能非常多,但并不能確定哪些是重要哪些是次要,比如360安全衛(wèi)士;
- 跟開發(fā)模式有一定關(guān)系:宮格導(dǎo)航—一個入口一個團(tuán)隊,比如:美圖秀秀、淘寶首頁(導(dǎo)流)。
舉例:
范式五:Tab式
特點:
- 受屏幕寬度限制可顯示的數(shù)量較少;
- 采用Tab可以減少界面跳轉(zhuǎn)的層級,減少用戶的點擊次數(shù),提高效率;
- 可以將并列的信息通過橫向或豎向Tab來表現(xiàn);
- 有時可通過左右滑動查看更多內(nèi)容,需要用戶主動探索;
- 當(dāng)功能之間聯(lián)系密切,用戶需要頻繁在各功能之間進(jìn)行切換時,Tab布局是首選。
適用于:
- 功能和功能間關(guān)系密切、需要頻繁切換;
- 體量比較大的產(chǎn)品。
Tab結(jié)構(gòu)的變形:
- 舵式導(dǎo)航:快捷操作切換(高頻且重要);
- 豎向的tab(應(yīng)用的局限性更大,常見于Pad端—pad端空間大)比如閱讀類產(chǎn)品:豎向tab+滾動,占面積的問題;
- 文件夾結(jié)構(gòu)—占用空間多;
- Tab套tab— 在平臺上更常見(對視覺設(shè)計師要求更高,必須清晰表達(dá)在哪個tab下的哪個子集)。
舉例:
范式六:卡片式
特點:
- 樣式豐富、承載量大;
- 通常伴隨大圖;
- 應(yīng)用時需要考慮多種因素 :圖片信息是否重要(例如:Airbnb—圖片信息非常重要,音樂類產(chǎn)品圖片起渲染);運營能力(一天可以運營十篇還是一百篇,并且是否可以保證轉(zhuǎn)化);內(nèi)容是PGC還是UGC(UGC要求質(zhì)量);卡片大小(圖片信息的重要程度,同時匹配圖片質(zhì)量);一屏展示幾張圖(圖片展示的越大,形成轉(zhuǎn)化的可能性越大),用戶習(xí)慣對于資訊類,一般刷3-5屏,所以要保證這個范圍內(nèi)有不同的信息。
- 卡片式變形:瀑布流。
舉例:
在這里我們可以想一下,為什么小紅書用瀑布流而沒有用卡片式?
原因在于:
- UGC(用戶上傳的圖片)定寬不定高,什么樣的圖片都可以適配在瀑布流里面,比較整齊;對用戶來說,自由度比較大 ——瀑布流適應(yīng)UGC;
- 瀑布流特別像女性在逛街,符合女性逛街的心態(tài);
- 效率高、運營能力高
范式七:彈窗式
特點:
- 彈框是很常見的一種布局設(shè)計;
- 在需要的時候才彈出,以節(jié)省屏幕空間;
- 可在原有界面上進(jìn)行操作,不必跳出界面,彈出框在安卓系統(tǒng)上的使用很普遍,比菜單、單選框、多選框等,在IOS系統(tǒng)上使用相對少些;
- 非毀滅性操作盡量不使用彈框,例如:低電、病毒、刪除、支付、出錯等。
舉例:
范式八:輪播
特點: ?
- 相互內(nèi)容之間是邏輯平衡的關(guān)系;
- 內(nèi)容切換、可以左右滑動。
適用于:手機(jī)桌面上(相同體系進(jìn)行左右切換)。
變形:coverflow
舉例:
范式九:主題結(jié)構(gòu)
特點:主題內(nèi)容,獨立于與其他范式,根據(jù)產(chǎn)品特點進(jìn)行創(chuàng)意發(fā)揮。
適用于:
- 常見于功能簡單的小工具(比如日歷、計算機(jī),游戲等);
- 個性化的小眾APP,手機(jī)桌面等等。
舉例:
范式十:組合
特點:
- 混合式,適用于平臺級的產(chǎn)品;
- 會增加用戶的認(rèn)知負(fù)擔(dān)。
舉例:淘寶首頁
思考:淘寶的首頁布局就是是頂部搜索框(非常重要)+banner輪播(精準(zhǔn)推送的廣告、形成變現(xiàn))+宮格(給阿里系產(chǎn)品進(jìn)行導(dǎo)流)+卡片+底部tab。
本文由 @純色 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
我的微信號:cisiyuan2014