UI必學(xué)組件!簽到組件的設(shè)計方式詳解
為了提升用戶打開產(chǎn)品的頻率、保證產(chǎn)品的日活,不少 App 都會用一些小獎勵來引導(dǎo)用戶進(jìn)行每日簽到,這時就需要一個展示簽到狀態(tài)的組件——簽到組件。
一、組件介紹
簽到組件是一種從日歷延伸出來的組件,簽到這一行為本身就是以日期為單元進(jìn)行的,所以簽到組件的一切信息都承載在日期之上。
二、使用場景
并非所有 App 都適合使用簽到功能,因為簽到是一種對用戶的強引導(dǎo),這需要保證 App 本身擁有源源不斷的可供用戶消費的內(nèi)容。
所以簽到功能更適合出現(xiàn)在內(nèi)容類 App 中,例如社交、電商類產(chǎn)品中;而不適合出現(xiàn)在功能類 App,例如 todo、筆記類產(chǎn)品中。
三、設(shè)計要點
1. 簽到組件的類型
簽到組件大多長相類似,不過細(xì)究下來還是略有幾種不同的樣式,我一一說一下。
① 7 日進(jìn)度條
以一周為顯示周期,以進(jìn)度條的形式展示簽到的進(jìn)度狀態(tài)。已經(jīng)簽到過的日期有比較明顯的狀態(tài)變化,漸進(jìn)的獎勵內(nèi)容一般標(biāo)注在進(jìn)度條之外。
② 7 日卡片
同樣以一周為顯示周期,只不過每日以卡片的形式呈現(xiàn),漸進(jìn)的獎勵內(nèi)容標(biāo)注在每日的卡片中。
③ 月歷
以一月為顯示周期,月歷式的簽到組件和日期選擇器中的月歷幾乎一致,因為顯示的日期較多,所以日期上添加的視覺元素較少。
2. 簽到組件的布局方法
① 7 日進(jìn)度條的布局
在畫布中置入 7 個節(jié)點,節(jié)點與節(jié)點之間等距排列。我們需要先繪制獎勵數(shù)值的圖形,因為這個圖形占用的橫向像素更大,節(jié)點需要與這個圖形對齊。所以,先畫出 7 個等距的 32×32pt 的圓形,在圓形中添加獎勵數(shù)值。若需要在某些節(jié)點處縮小圓形,也以此圓形中心縮放。最后再加上一條貫穿節(jié)點的連線,實線虛線皆可。
第二步,再在每個節(jié)點的下方添加日期?;蛘咴诶塾嫼灥降墓δ苤校梢愿臑槔塾嬏鞌?shù),同樣是居中對齊。這樣 7 日進(jìn)度條的布局就基本完成了。
由于可供展示信息的區(qū)域較少,最后可以在另一側(cè)添加一些提示性的文本。
② 7 日卡片的布局
7 日卡片還可以具體分為單行和雙行,單行卡片的布局方法基本與上述進(jìn)度條一致,在內(nèi)容寬度中等距分布 7 個矩形,在矩形中繪制其余元素。
單行 7 日卡片可能寬度較小,有些信息無法塞在卡片中,那么可以放置在卡片之外。
雙行卡片則為 4+3 的形式,第一行等距分布 4 個同尺寸的矩形卡片,在第二行則有 3 個。在這 3 個中左側(cè)兩個與第一行的卡片同尺寸,右側(cè)一個等效于兩個卡片尺寸的集合。雙行卡片空間足夠的情況下,信息大多置于卡片內(nèi)部。
當(dāng)然,也有的 4+3 中下方的三個也使用一樣尺寸的矩形,將兩行居中對齊的形式。
③ 月歷的布局
月歷的布局可以參考日期選擇器的布局方法,它的基底就是一個月份的完整展示,即 7×n 的日期列表。
在這個列表中,每個單元內(nèi)類似 7 日卡片樣式進(jìn)行信息的填充。
3. 簽到組件的狀態(tài)
簽到組件每一日均有幾種不同的狀態(tài),大致可分為以下幾類:
當(dāng)前:今日或者累計簽到的當(dāng)前狀態(tài)。
已簽到:已簽到的日期會變更為勾選,或置灰。
未簽到:指今日之后的未簽到日期,需要列出每日的獎勵內(nèi)容。
漏簽:今日之前,漏簽到的狀態(tài),多為一個錯誤符號。
補簽:在某些 App 中,對過去未簽到的日期可進(jìn)行補簽,那么日期上會出現(xiàn)「補」的字樣。
4. 簽到類型
有幾種不同的簽到類型,簽到的類型會影響日期/天數(shù)的文案和排序,但不會影響簽到組件的布局和視覺設(shè)計方式。
① 每日簽到
每天設(shè)置固定的獎勵內(nèi)容,簽到只關(guān)于當(dāng)天的獎勵,即沒有既沒有累計關(guān)系,也沒有連續(xù)關(guān)系,斷簽只會影響當(dāng)天的獎勵。每日簽到的文案大多是「周幾」或「日期」這樣明確的日期。每日簽到可能存在漏簽和補簽的狀態(tài)。
② 累計簽到
用戶在某一段統(tǒng)計內(nèi)簽到總數(shù),達(dá)到規(guī)定次數(shù)即認(rèn)為簽到成功,可間斷。累計簽到的文案大多以「1 天」、「2 天」這類只有數(shù)值沒有序次的文案。同時,字段并不一定累次+1,也可以是累計「1 天」、「3 天」、「5 天」這樣更多的天數(shù)。
③ 連續(xù)簽到
用戶在一段周期內(nèi)連續(xù)的簽到狀態(tài),每天都可以獲得一定的獎勵內(nèi)容,不可斷簽。連續(xù)簽到大多使用「第 1 天」、「第 2 天」這類有序次關(guān)系的文案,連續(xù)簽到不可補簽,一旦漏簽即會重制簽到狀態(tài)。
5. 不一樣的簽到組件
① 微信讀書
微信讀書獲取紙書幣的簽到組件,狹長的圓角矩形和偏平面化的排版,不同的狀態(tài)也有獨特的樣式表現(xiàn)??臻g足夠的情況下可以嘗試這樣的做法。
四、樣式拓展
這里還額外收集了一些簽到組件的線上案例,也可以作為設(shè)計時的參考:
結(jié)尾
簽到組件的組件就介紹到這里,后續(xù)所有有關(guān)組件的介紹都會同步更新到我們的知識庫中!
作者:超人的電話亭
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)