一、輪播設(shè)計法
輪播設(shè)計指的是元素通過自動或主動輪播內(nèi)容的方式來拓展屏幕空間的設(shè)計方法。- 從切換方式可以分為：自動輪播、手動輪播、二者結(jié)合。
- 從切換方向可以分為：上下輪播、左右輪播。
- 在有限的空間展示更多內(nèi)容（例如文字輪播）
- 輪播動效更吸引眼球（如中獎號碼輪播等）
- 對內(nèi)容包容性強，圖片、文字、圖標(biāo)等均可以使用
1. 輪播的設(shè)計模式
下圖從兩個維度進(jìn)行設(shè)計模式盤點：左右輪播和上下輪播。
2. 輪播交互方式
從輪播的切換方式上，輪播分為自動輪播和手動輪播。 1）自動輪播 自動輪播需注意輪播時間和速度的參數(shù)，過快難以看清信息，過慢用戶沒有耐心等待。 自動輪播分為兩類：左右輪播和上下輪播。 a. 左右輪播 左右輪播分為“按頁輪播”和“滾動輪播”。 二者的區(qū)別在于“按頁輪播”以一張卡片或者一頁為單位切換，而“滾動輪播”則按順序滾動播放。 滾動輪播和按頁輪播的區(qū)別↓↓
- 卡片靠近屏幕邊緣時，注意避免熱區(qū)和手機返回手勢沖突
- 輪播最好循環(huán)切換，而非單向切換，若單向切換則切換到最后一張就無法再切換，使用起來不夠流暢，二來當(dāng)用戶嘗試?yán)^續(xù)切換時非常容易和手機自帶返回手勢沖突（親測）
3. 輪播的視覺展現(xiàn)
指示器：卡片式切換一般會輔助指示器 運營活動入口：可嘗試異形圖片，更加個性有趣 文字輪播：重要文字可特殊處理，如加粗、換顏色等
二、折疊設(shè)計法
折疊設(shè)計法指的是通過折疊內(nèi)容的方法來節(jié)省頁面空間的設(shè)計方式。 優(yōu)勢：- 擴(kuò)展性強：相比前三種設(shè)計方式，折疊設(shè)計法能容納更多的內(nèi)容
- 微動效：折疊設(shè)計法能容納較多的微動效，增強趣味感
- 曝光較弱：需要用戶主動去發(fā)現(xiàn)
- 可點擊區(qū)域?。赫郫B設(shè)計可能存在點擊區(qū)域不夠大的情況，用戶操作困難
1. 折疊的設(shè)計模式
1）卡片折疊 以卡片為主的設(shè)計形式，直播產(chǎn)品中常應(yīng)用于側(cè)邊折疊和小卡片折疊。
2. 折疊設(shè)計的視覺展現(xiàn)
盡量有明確的展開/收起圖標(biāo)，實際點擊熱區(qū)可以大于圖標(biāo)的視覺大?。ū热缧〖t書點擊文字也可以展開折疊） 圖標(biāo)造型：上下折疊、向上折疊、向下折疊等不同方向可以考慮使用對應(yīng)的圖標(biāo)，且圖標(biāo)表意需明確
三、tab設(shè)計法
tab設(shè)計法是非常常見的一種設(shè)計方式，針對整個頁面做tab切換的設(shè)計方法我就不多做介紹，下面主要介紹幾種小范圍的tab設(shè)計，比如彈窗里加tab，或者卡片里面加tab。 優(yōu)勢：- 簡單易懂，tab作為一種相當(dāng)成熟的設(shè)計方式，用戶幾乎一看就懂
- 擴(kuò)展性強，可添加多個tab，容納更多內(nèi)容
- 需用戶主動切換，除了第一tab其它tab內(nèi)容曝光度低
- tab數(shù)量超過一屏后，屏幕外的tab點擊率低
1. tab設(shè)計模式
本文探討的tab設(shè)計不包含整頁tab，所以tab設(shè)計模式主要有兩種：彈窗內(nèi)tab和卡片內(nèi)tab。 交互手勢： 1）彈窗內(nèi)tab 彈窗內(nèi)tab即是在彈窗里面添加tab的設(shè)計方式，而展現(xiàn)形式也有兩種：頂部tab和底部tab。
2. tab設(shè)計法的視覺展現(xiàn)
選中/未選：使用字重、文字顏色、下劃線、背景樣式來做區(qū)分 側(cè)邊tab樣式對比可以更強烈一些 tab可以輔助分割線做內(nèi)容區(qū)分
四、開拓二樓
「二樓」簡介APP「二樓」起源于淘寶2016年推出的“淘寶二樓”產(chǎn)品，每晚6點，可以從淘寶app首頁向上滑動進(jìn)入二樓，早上7點二樓就會消失，后來各大APP紛紛效仿，淘寶也算是發(fā)明了一種新的移動端交互方式。 優(yōu)勢：- 空間大：只要打開二樓就相當(dāng)于打開一個新頁面
- 新穎：交互新鮮有趣，能給人耳目一新的感覺
1. 「二樓」設(shè)計模式
觸發(fā)二樓：- 頁面位于首屏，下滑頁面，設(shè)定一個滑動距離 a
- 滑動距離 ＜ a 時松手，不觸發(fā)或僅觸發(fā)刷新
- 滑動距離 ≥ a 時松手或繼續(xù)下滑，進(jìn)入二樓
- 方式一：點擊左上角/右上角返回
- 方式二：點擊底部返回按鈕
- 方式三：向上滑動底部熱區(qū)
聲明：本文由網(wǎng)站用戶香香發(fā)表，超夢電商平臺僅提供信息存儲服務(wù)，版權(quán)歸原作者所有。若發(fā)現(xiàn)本站文章存在版權(quán)問題，如發(fā)現(xiàn)文章、圖片等侵權(quán)行為，請聯(lián)系我們刪除。
