签到的何做好签存在不仅可以增加用户的黏性，也是到功激活用户参与度的关键因素之一 。签到按钮在 UI 设计场景中 ，计用算是实战较为常见的一个类型，一个好的案例签到按钮不仅可以提高用户的关注度
 ，也能激发用户的帮掌点击欲。

这就是何做好签给你的一个关于签到设计的小需求：

这个小需求看起来很常见
，到功交互设计也许给你的计用是签到两个字 
，也有可能帮你画了一个外框。实战总归它是案例显得很普通的 ，是帮掌不是没有一点设计感呢？那我们如何去增加设计感，还要有自己的何做好签特色 ，做出一个差异化的到功签到按钮呢 ？

让我们带着这个问题，和黑马哥一起卷起袖子开干吧 ！计用

签到功能交互设计分析：

一、签到设计的类型

在开始案例实战之前得先梳理一下关于签到设计的类型，方便我们挑选出最适合当前产品的风格。

1. 纯文字形式

纯文字形式属于最为简单的样式
，有直接文字展示 、文字带下滑线
、文字加箭头等 ，这个形式不是很建议，缺少设计感和用户关注度 。

2. 按钮形式

为了提高签到的点击属性 ，通常以按钮的形式设计较为稳妥，也就是我们说的签到按钮 。按钮通常是带圆角的和全圆角形式，也分为线性外框、面性外框 、质感外框等。想要设计得比较突出 ，通常会在按钮的质感上面进行视觉表现 ，增加光影质感和纹理图形等装饰。比如：极光风（弥散光）
、流体渐变、图形纹理等都是不错的方向。

3. 文字加图标形式

在签到按钮的基础上，进行进一步强化就会配合图标或者图形进行视觉感增强。图标设计的角度出发发挥性也比较大，便于设计师做出更多方案。图形的角度可以是 IP 形象的结合 ，不仅可以提高情感化设计 ，也能做出差异化的设计方案。

4. 微动效的形式

微动效相较于静态表达来说 ，自然是要更为突出一些，签到按钮动态形式也是较为常见的存在
。如果想要突出签到设计，微动效的表达是不会让你失望的。

5. 特殊造型形式

常规的形式依然离不开按钮的表达，为了打破常规形成差异化的设计，在签到按钮造型上面也是可以进一步深思的 。在能够体现出点击属性的前提下，我们可以结合产品属性和业务特征
，探索出符合属性范围的造型 ，也能使得签到设计更有特色。

小结

当我们梳理了一些常见的签到设计类型之后，就可以结合需求选择比较贴合的形式。当然，也可以创造出不一样的设计，下面就和黑马哥一起来演示一下吧！

二 、签到按钮设计实战

需求 ：为一个充电桩产品设计签到按钮，需要体现出产品的服务属性，也要能变得更有特色。

UI 设计师拿到这个需求都会觉得 ：这个也太简单了 。于是就会快速的做出几个样式，虽然毫无设计感可言
，但是老板喜欢就可以啦
 ！不过，如果老板不喜欢呢，有没有思考过如何留有后手。

1. 分析总结

无论需求的大小，个人都会先进行一些简单的分析和总结。要知道别人做出来都是啥样式
，然后再总结这些设计都有什么方法论 。也就是本文开篇总结的一样，虽然很简短 ，但是总结有助于让自己更有把握。

2. 梳理关键词

关键词梳理可以打开我们的思路
，虽然只是一个按钮，但是我们也可以通过关键词发散出更有意思的设计表达。比如充电桩这个产品我们可以梳理出哪些关键词呢？

3. 绘制草图

如果根据关键词都去进行电脑绘制比较耗费时间，先进行一些初步的草图有助于灵感的快速表现
。

4. 确定思路

通过草图我们可以发散思维，选择出几个具有代表性的方案进行电脑绘制 。这里黑马哥选择了电池这个表达作为示意，不仅可以体现充电的概念 ，也能体现出设计差异。

5. 绘制初步造型

只要思路确定了 ，绘制起来就比较快啦！快速把电池的造型绘制出来
，然后再结合按钮的特征进行微调，以满足"签到"文案在造型轮廓中的布局 。

6. 初步配色

确定造型后进行了初步的配色，利用大色块把整体的配色关系体现出来
，这里也要思考动态表达的色彩关系。

7. 质感深入

很多设计师都只是进行简单的层级表达，缺少质感深入的技巧。我们要通过色彩变化体现出造型的结构特征，也要通过光影处理把电池的质感强化出来。

8. 字体处理

大部分情况下对于 UI 设计师来说都会选择一些常规的系统级字体，不过这里作为一个按钮来说我们在字体的选择上面可以突破。这里我选择了阿里妈妈数黑体作为签到的字体，然后也进行了一些质感处理 ，贴合电池按钮的设计表达
 。

9. 最终效果

通过对字体和电池造型的绘制，完成了这个不一样的签到按钮。我们再将按钮放到界面场景中看一下
，最后结合界面的背景做一下投影等处理，这个关于签到按钮的小需求就搞定啦
！

小作业

以上的静态方案算是完成了，这里也给大家布置一些发散的小作业
。

1. 如果要做动态表达，你会如何做 ？
2. 如果这里要体现签到送礼 ，不改变当前设计基础的前提下，你会从哪些方面入手 ？

欢迎大家进行思考，尝试去完成这个小作业 ，大家有什么新的想法也可以微信黑马哥进行交流
。

三、小结

通过一个关于签到按钮的小需求和大家进行了一些设计交流，设计的思考带有一定的主观性  ，我们在自己的需求中还需结合实际的情况做出调整 。需求不分大小，每一个从自己手中出去的设计方案
，我们都要尽力做到最完美  ，体现出自己的职业态度和设计能力 。

本文观点仅作为个人经验表达，如果觉得不错我们互相进步，如有不足欢迎大家留言补充 。

作者 ：黑马家族