為了提升用戶打開產(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)組件的介紹都會同步更新到我們的知識庫中！

作者：超人的電話亭