如何做好簽到功能設計？用實戰案例幫你掌握！

簽到的存在不僅可以增加用戶的黏性，也是激活用戶參與度的關鍵因素之一。簽到按鈕在 UI 設計場景中，算是較為常見的一個類型，一個好的簽到按鈕不僅可以提高用戶的關注度，也能激發用戶的點擊欲。

這就是給你的一個關于簽到設計的小需求：

這個小需求看起來很常見，交互設計也許給你的是簽到兩個字，也有可能幫你畫了一個外框。總歸它是顯得很普通的，是不是沒有一點設計感呢？那我們如何去增加設計感，還要有自己的特色，做出一個差異化的簽到按鈕呢？

讓我們帶著這個問題，和黑馬哥一起卷起袖子開干吧！

簽到功能交互設計分析：

一、簽到設計的類型

在開始案例實戰之前得先梳理一下關于簽到設計的類型，方便我們挑選出最適合當前產品的風格。

1. 純文字形式

純文字形式屬于最為簡單的樣式，有直接文字展示、文字帶下滑線、文字加箭頭等，這個形式不是很建議，缺少設計感和用戶關注度。

2. 按鈕形式

為了提高簽到的點擊屬性，通常以按鈕的形式設計較為穩妥，也就是我們說的簽到按鈕。按鈕通常是帶圓角的和全圓角形式，也分為線性外框、面性外框、質感外框等。想要設計得比較突出，通常會在按鈕的質感上面進行視覺表現，增加光影質感和紋理圖形等裝飾。比如：極光風（彌散光）、流體漸變、圖形紋理等都是不錯的方向。

3. 文字加圖標形式

在簽到按鈕的基礎上，進行進一步強化就會配合圖標或者圖形進行視覺感增強。圖標設計的角度出發發揮性也比較大，便于設計師做出更多方案。圖形的角度可以是 IP 形象的結合，不僅可以提高情感化設計，也能做出差異化的設計方案。

4. 微動效的形式

微動效相較于靜態表達來說，自然是要更為突出一些，簽到按鈕動態形式也是較為常見的存在。如果想要突出簽到設計，微動效的表達是不會讓你失望的。

5. 特殊造型形式

常規的形式依然離不開按鈕的表達，為了打破常規形成差異化的設計，在簽到按鈕造型上面也是可以進一步深思的。在能夠體現出點擊屬性的前提下，我們可以結合產品屬性和業務特征，探索出符合屬性范圍的造型，也能使得簽到設計更有特色。

小結

當我們梳理了一些常見的簽到設計類型之后，就可以結合需求選擇比較貼合的形式。當然，也可以創造出不一樣的設計，下面就和黑馬哥一起來演示一下吧！

二、簽到按鈕設計實戰

需求：為一個充電樁產品設計簽到按鈕，需要體現出產品的服務屬性，也要能變得更有特色。

UI 設計師拿到這個需求都會覺得：這個也太簡單了。于是就會快速的做出幾個樣式，雖然毫無設計感可言，但是老板喜歡就可以啦！不過，如果老板不喜歡呢，有沒有思考過如何留有后手。

1. 分析總結

無論需求的大小，個人都會先進行一些簡單的分析和總結。要知道別人做出來都是啥樣式，然后再總結這些設計都有什么方法論。也就是本文開篇總結的一樣，雖然很簡短，但是總結有助于讓自己更有把握。

2. 梳理關鍵詞

關鍵詞梳理可以打開我們的思路，雖然只是一個按鈕，但是我們也可以通過關鍵詞發散出更有意思的設計表達。比如充電樁這個產品我們可以梳理出哪些關鍵詞呢？

3. 繪制草圖

如果根據關鍵詞都去進行電腦繪制比較耗費時間，先進行一些初步的草圖有助于靈感的快速表現。

4. 確定思路

通過草圖我們可以發散思維，選擇出幾個具有代表性的方案進行電腦繪制。這里黑馬哥選擇了電池這個表達作為示意，不僅可以體現充電的概念，也能體現出設計差異。

5. 繪制初步造型

只要思路確定了，繪制起來就比較快啦！快速把電池的造型繪制出來，然后再結合按鈕的特征進行微調，以滿足“簽到”文案在造型輪廓中的布局。

6. 初步配色

確定造型后進行了初步的配色，利用大色塊把整體的配色關系體現出來，這里也要思考動態表達的色彩關系。

7. 質感深入

很多設計師都只是進行簡單的層級表達，缺少質感深入的技巧。我們要通過色彩變化體現出造型的結構特征，也要通過光影處理把電池的質感強化出來。

8. 字體處理

大部分情況下對于 UI 設計師來說都會選擇一些常規的系統級字體，不過這里作為一個按鈕來說我們在字體的選擇上面可以突破。這里我選擇了阿里媽媽數黑體作為簽到的字體，然后也進行了一些質感處理，貼合電池按鈕的設計表達。

9. 最終效果

通過對字體和電池造型的繪制，完成了這個不一樣的簽到按鈕。我們再將按鈕放到界面場景中看一下，最后結合界面的背景做一下投影等處理，這個關于簽到按鈕的小需求就搞定啦！

小作業

以上的靜態方案算是完成了，這里也給大家布置一些發散的小作業。

1. 如果要做動態表達，你會如何做？
2. 如果這里要體現簽到送禮，不改變當前設計基礎的前提下，你會從哪些方面入手？

歡迎大家進行思考，嘗試去完成這個小作業，大家有什么新的想法也可以微信黑馬哥進行交流。

三、小結

通過一個關于簽到按鈕的小需求和大家進行了一些設計交流，設計的思考帶有一定的主觀性，我們在自己的需求中還需結合實際的情況做出調整。需求不分大小，每一個從自己手中出去的設計方案，我們都要盡力做到最完美，體現出自己的職業態度和設計能力。

本文觀點僅作為個人經驗表達，如果覺得不錯我們互相進步，如有不足歡迎大家留言補充。

歡迎關注作者的微信公眾號：「黑馬家族」