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

這就是給你的一個關(guān)于簽到設(shè)計的小需求：

這個小需求看起來很常見，交互設(shè)計也許給你的是簽到兩個字，也有可能幫你畫了一個外框?？倸w它是顯得很普通的，是不是沒有一點(diǎn)設(shè)計感呢？那我們?nèi)绾稳ピ黾釉O(shè)計感，還要有自己的特色，做出一個差異化的簽到按鈕呢？

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

簽到功能交互設(shè)計分析：

一、簽到設(shè)計的類型

在開始案例實戰(zhàn)之前得先梳理一下關(guān)于簽到設(shè)計的類型，方便我們挑選出最適合當(dāng)前產(chǎn)品的風(fēng)格。

1. 純文字形式

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

2. 按鈕形式

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

3. 文字加圖標(biāo)形式

在簽到按鈕的基礎(chǔ)上，進(jìn)行進(jìn)一步強(qiáng)化就會配合圖標(biāo)或者圖形進(jìn)行視覺感增強(qiáng)。圖標(biāo)設(shè)計的角度出發(fā)發(fā)揮性也比較大，便于設(shè)計師做出更多方案。圖形的角度可以是 IP 形象的結(jié)合，不僅可以提高情感化設(shè)計，也能做出差異化的設(shè)計方案。

4. 微動效的形式

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

5. 特殊造型形式

常規(guī)的形式依然離不開按鈕的表達(dá)，為了打破常規(guī)形成差異化的設(shè)計，在簽到按鈕造型上面也是可以進(jìn)一步深思的。在能夠體現(xiàn)出點(diǎn)擊屬性的前提下，我們可以結(jié)合產(chǎn)品屬性和業(yè)務(wù)特征，探索出符合屬性范圍的造型，也能使得簽到設(shè)計更有特色。

小結(jié)

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

二、簽到按鈕設(shè)計實戰(zhàn)

需求：為一個充電樁產(chǎn)品設(shè)計簽到按鈕，需要體現(xiàn)出產(chǎn)品的服務(wù)屬性，也要能變得更有特色。

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

1. 分析總結(jié)

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

2. 梳理關(guān)鍵詞

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

3. 繪制草圖

如果根據(jù)關(guān)鍵詞都去進(jìn)行電腦繪制比較耗費(fèi)時間，先進(jìn)行一些初步的草圖有助于靈感的快速表現(xiàn)。

4. 確定思路

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

5. 繪制初步造型

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

6. 初步配色

確定造型后進(jìn)行了初步的配色，利用大色塊把整體的配色關(guān)系體現(xiàn)出來，這里也要思考動態(tài)表達(dá)的色彩關(guān)系。

7. 質(zhì)感深入

很多設(shè)計師都只是進(jìn)行簡單的層級表達(dá)，缺少質(zhì)感深入的技巧。我們要通過色彩變化體現(xiàn)出造型的結(jié)構(gòu)特征，也要通過光影處理把電池的質(zhì)感強(qiáng)化出來。

8. 字體處理

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

9. 最終效果

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

小作業(yè)

以上的靜態(tài)方案算是完成了，這里也給大家布置一些發(fā)散的小作業(yè)。

1. 如果要做動態(tài)表達(dá)，你會如何做？
2. 如果這里要體現(xiàn)簽到送禮，不改變當(dāng)前設(shè)計基礎(chǔ)的前提下，你會從哪些方面入手？

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

三、小結(jié)

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

本文觀點(diǎn)僅作為個人經(jīng)驗表達(dá)，如果覺得不錯我們互相進(jìn)步，如有不足歡迎大家留言補(bǔ)充。

作者：黑馬家族