為了提升用戶打開產品的頻率、保證產品的日活，不少 App 都會用一些小獎勵來引導用戶進行每日簽到，這時就需要一個展示簽到狀態的組件——簽到組件。

相關閱讀：

一、組件介紹

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

二、使用場景

并非所有 App 都適合使用簽到功能，因為簽到是一種對用戶的強引導，這需要保證 App 本身擁有源源不斷的可供用戶消費的內容。

所以簽到功能更適合出現在內容類 App 中，例如社交、電商類產品中；而不適合出現在功能類 App，例如 todo、筆記類產品中。

三、設計要點

1. 簽到組件的類型

簽到組件大多長相類似，不過細究下來還是略有幾種不同的樣式，我一一說一下。

① 7 日進度條

以一周為顯示周期，以進度條的形式展示簽到的進度狀態。已經簽到過的日期有比較明顯的狀態變化，漸進的獎勵內容一般標注在進度條之外。

② 7 日卡片

同樣以一周為顯示周期，只不過每日以卡片的形式呈現，漸進的獎勵內容標注在每日的卡片中。

③ 月歷

以一月為顯示周期，月歷式的簽到組件和日期選擇器中的月歷幾乎一致，因為顯示的日期較多，所以日期上添加的視覺元素較少。

2. 簽到組件的布局方法

① 7 日進度條的布局

在畫布中置入 7 個節點，節點與節點之間等距排列。我們需要先繪制獎勵數值的圖形，因為這個圖形占用的橫向像素更大，節點需要與這個圖形對齊。所以，先畫出 7 個等距的 32×32pt 的圓形，在圓形中添加獎勵數值。若需要在某些節點處縮小圓形，也以此圓形中心縮放。最后再加上一條貫穿節點的連線，實線虛線皆可。

第二步，再在每個節點的下方添加日期。或者在累計簽到的功能中，可以改為累計天數，同樣是居中對齊。這樣 7 日進度條的布局就基本完成了。

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

② 7 日卡片的布局

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

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

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

當然，也有的 4+3 中下方的三個也使用一樣尺寸的矩形，將兩行居中對齊的形式。

③ 月歷的布局

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

在這個列表中，每個單元內類似 7 日卡片樣式進行信息的填充。

3. 簽到組件的狀態

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

當前：今日或者累計簽到的當前狀態。

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

未簽到：指今日之后的未簽到日期，需要列出每日的獎勵內容。

漏簽：今日之前，漏簽到的狀態，多為一個錯誤符號。

補簽：在某些 App 中，對過去未簽到的日期可進行補簽，那么日期上會出現「補」的字樣。

4. 簽到類型

有幾種不同的簽到類型，簽到的類型會影響日期/天數的文案和排序，但不會影響簽到組件的布局和視覺設計方式。

① 每日簽到

每天設置固定的獎勵內容，簽到只關于當天的獎勵，即沒有既沒有累計關系，也沒有連續關系，斷簽只會影響當天的獎勵。每日簽到的文案大多是「周幾」或「日期」這樣明確的日期。每日簽到可能存在漏簽和補簽的狀態。

② 累計簽到

用戶在某一段統計內簽到總數，達到規定次數即認為簽到成功，可間斷。累計簽到的文案大多以「1 天」、「2 天」這類只有數值沒有序次的文案。同時，字段并不一定累次+1，也可以是累計「1 天」、「3 天」、「5 天」這樣更多的天數。

③ 連續簽到

用戶在一段周期內連續的簽到狀態，每天都可以獲得一定的獎勵內容，不可斷簽。連續簽到大多使用「第 1 天」、「第 2 天」這類有序次關系的文案，連續簽到不可補簽，一旦漏簽即會重制簽到狀態。

5. 不一樣的簽到組件

① 微信讀書

微信讀書獲取紙書幣的簽到組件，狹長的圓角矩形和偏平面化的排版，不同的狀態也有獨特的樣式表現。空間足夠的情況下可以嘗試這樣的做法。

四、樣式拓展

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

結尾

簽到組件的組件就介紹到這里，后續所有有關組件的介紹都會同步更新到我們的知識庫中！

歡迎關注作者的微信公眾號：「超人的電話亭」