為了提升用戶打開(kāi)產(chǎn)品的頻率、保證產(chǎn)品的日活，不少 App 都會(huì)用一些小獎(jiǎng)勵(lì)來(lái)引導(dǎo)用戶進(jìn)行每日簽到，這時(shí)就需要一個(gè)展示簽到狀態(tài)的組件——簽到組件。

一、組件介紹

簽到組件是一種從日歷延伸出來(lái)的組件，簽到這一行為本身就是以日期為單元進(jìn)行的，所以簽到組件的一切信息都承載在日期之上。

二、使用場(chǎng)景

并非所有 App 都適合使用簽到功能，因?yàn)楹灥绞且环N對(duì)用戶的強(qiáng)引導(dǎo)，這需要保證 App 本身?yè)碛性丛床粩嗟目晒┯脩粝M(fèi)的內(nèi)容。

所以簽到功能更適合出現(xiàn)在內(nèi)容類 App 中，例如社交、電商類產(chǎn)品中；而不適合出現(xiàn)在功能類 App，例如 todo、筆記類產(chǎn)品中。

三、設(shè)計(jì)要點(diǎn)

1. 簽到組件的類型

簽到組件大多長(zhǎng)相類似，不過(guò)細(xì)究下來(lái)還是略有幾種不同的樣式，我一一說(shuō)一下。

① 7 日進(jìn)度條

以一周為顯示周期，以進(jìn)度條的形式展示簽到的進(jìn)度狀態(tài)。已經(jīng)簽到過(guò)的日期有比較明顯的狀態(tài)變化，漸進(jìn)的獎(jiǎng)勵(lì)內(nèi)容一般標(biāo)注在進(jìn)度條之外。

② 7 日卡片

同樣以一周為顯示周期，只不過(guò)每日以卡片的形式呈現(xiàn)，漸進(jìn)的獎(jiǎng)勵(lì)內(nèi)容標(biāo)注在每日的卡片中。

③ 月歷

以一月為顯示周期，月歷式的簽到組件和日期選擇器中的月歷幾乎一致，因?yàn)轱@示的日期較多，所以日期上添加的視覺(jué)元素較少。

2. 簽到組件的布局方法

① 7 日進(jìn)度條的布局

在畫布中置入 7 個(gè)節(jié)點(diǎn)，節(jié)點(diǎn)與節(jié)點(diǎn)之間等距排列。我們需要先繪制獎(jiǎng)勵(lì)數(shù)值的圖形，因?yàn)檫@個(gè)圖形占用的橫向像素更大，節(jié)點(diǎn)需要與這個(gè)圖形對(duì)齊。所以，先畫出 7 個(gè)等距的 32×32pt 的圓形，在圓形中添加獎(jiǎng)勵(lì)數(shù)值。若需要在某些節(jié)點(diǎn)處縮小圓形，也以此圓形中心縮放。最后再加上一條貫穿節(jié)點(diǎn)的連線，實(shí)線虛線皆可。

第二步，再在每個(gè)節(jié)點(diǎn)的下方添加日期?；蛘咴诶塾?jì)簽到的功能中，可以改為累計(jì)天數(shù)，同樣是居中對(duì)齊。這樣 7 日進(jìn)度條的布局就基本完成了。

由于可供展示信息的區(qū)域較少，最后可以在另一側(cè)添加一些提示性的文本。

② 7 日卡片的布局

7 日卡片還可以具體分為單行和雙行，單行卡片的布局方法基本與上述進(jìn)度條一致，在內(nèi)容寬度中等距分布 7 個(gè)矩形，在矩形中繪制其余元素。

單行 7 日卡片可能寬度較小，有些信息無(wú)法塞在卡片中，那么可以放置在卡片之外。

雙行卡片則為 4+3 的形式，第一行等距分布 4 個(gè)同尺寸的矩形卡片，在第二行則有 3 個(gè)。在這 3 個(gè)中左側(cè)兩個(gè)與第一行的卡片同尺寸，右側(cè)一個(gè)等效于兩個(gè)卡片尺寸的集合。雙行卡片空間足夠的情況下，信息大多置于卡片內(nèi)部。

當(dāng)然，也有的 4+3 中下方的三個(gè)也使用一樣尺寸的矩形，將兩行居中對(duì)齊的形式。

③ 月歷的布局

月歷的布局可以參考日期選擇器的布局方法，它的基底就是一個(gè)月份的完整展示，即 7×n 的日期列表。

在這個(gè)列表中，每個(gè)單元內(nèi)類似 7 日卡片樣式進(jìn)行信息的填充。

3. 簽到組件的狀態(tài)

簽到組件每一日均有幾種不同的狀態(tài)，大致可分為以下幾類：

當(dāng)前：今日或者累計(jì)簽到的當(dāng)前狀態(tài)。

已簽到：已簽到的日期會(huì)變更為勾選，或置灰。

未簽到：指今日之后的未簽到日期，需要列出每日的獎(jiǎng)勵(lì)內(nèi)容。

漏簽：今日之前，漏簽到的狀態(tài)，多為一個(gè)錯(cuò)誤符號(hào)。

補(bǔ)簽：在某些 App 中，對(duì)過(guò)去未簽到的日期可進(jìn)行補(bǔ)簽，那么日期上會(huì)出現(xiàn)「補(bǔ)」的字樣。

4. 簽到類型

有幾種不同的簽到類型，簽到的類型會(huì)影響日期/天數(shù)的文案和排序，但不會(huì)影響簽到組件的布局和視覺(jué)設(shè)計(jì)方式。

① 每日簽到

每天設(shè)置固定的獎(jiǎng)勵(lì)內(nèi)容，簽到只關(guān)于當(dāng)天的獎(jiǎng)勵(lì)，即沒(méi)有既沒(méi)有累計(jì)關(guān)系，也沒(méi)有連續(xù)關(guān)系，斷簽只會(huì)影響當(dāng)天的獎(jiǎng)勵(lì)。每日簽到的文案大多是「周幾」或「日期」這樣明確的日期。每日簽到可能存在漏簽和補(bǔ)簽的狀態(tài)。

② 累計(jì)簽到

用戶在某一段統(tǒng)計(jì)內(nèi)簽到總數(shù)，達(dá)到規(guī)定次數(shù)即認(rèn)為簽到成功，可間斷。累計(jì)簽到的文案大多以「1 天」、「2 天」這類只有數(shù)值沒(méi)有序次的文案。同時(shí)，字段并不一定累次+1，也可以是累計(jì)「1 天」、「3 天」、「5 天」這樣更多的天數(shù)。

③ 連續(xù)簽到

用戶在一段周期內(nèi)連續(xù)的簽到狀態(tài)，每天都可以獲得一定的獎(jiǎng)勵(lì)內(nèi)容，不可斷簽。連續(xù)簽到大多使用「第 1 天」、「第 2 天」這類有序次關(guān)系的文案，連續(xù)簽到不可補(bǔ)簽，一旦漏簽即會(huì)重制簽到狀態(tài)。

5. 不一樣的簽到組件

① 微信讀書(shū)

微信讀書(shū)獲取紙書(shū)幣的簽到組件，狹長(zhǎng)的圓角矩形和偏平面化的排版，不同的狀態(tài)也有獨(dú)特的樣式表現(xiàn)?？臻g足夠的情況下可以嘗試這樣的做法。

四、樣式拓展

這里還額外收集了一些簽到組件的線上案例，也可以作為設(shè)計(jì)時(shí)的參考：

結(jié)尾

簽到組件的組件就介紹到這里，后續(xù)所有有關(guān)組件的介紹都會(huì)同步更新到我們的知識(shí)庫(kù)中！

作者：超人的電話亭