• 以指代步
社交账号登录
  • 首页
  • 博客
  • 模板
  • 源码
  • 壁纸
  • 视频
  • 软件
  • 文库
  • 学习
  • 创作中心
  • 关于我们
  • 招兵买马
  • 联系我们
  • 法律申明
  • 合作招商
  • 注册
  • 粉丝
  • 关注
  • 创作
  • 如何做好签到功能设计?用实战案例帮你掌握!

  • 表哥 2023-02-08 06:14:05 收藏
  • 文章标签: 按钮 形式 需求
  • 签到的存在不仅可以增加用户的黏性,也是激活用户参与度的关键因素之一。签到按钮在 UI 设计场景中,算是较为常见的一个类型,一个好的签到按钮不仅可以提高用户的关注度,也能激发用户的点击欲。

    这就是给你的一个关于签到设计的小需求:

    如何做好签到功能设计?用实战案例帮你掌握!

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

    让我们带着这个问题,和黑马哥一起卷起袖子开干吧!

    签到功能交互设计分析:

    签到功能该怎么设计?从12个方面详细解析!

    本文是关于签到功能的视觉汇总分析。

    阅读文章 >

    一、签到设计的类型

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

    1. 纯文字形式

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

    如何做好签到功能设计?用实战案例帮你掌握!

    2. 按钮形式

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

    如何做好签到功能设计?用实战案例帮你掌握!

    3. 文字加图标形式

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

    如何做好签到功能设计?用实战案例帮你掌握!

    4. 微动效的形式

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

    如何做好签到功能设计?用实战案例帮你掌握!

    5. 特殊造型形式

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

    如何做好签到功能设计?用实战案例帮你掌握!

    小结

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

    二、签到按钮设计实战

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

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

    1. 分析总结

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

    如何做好签到功能设计?用实战案例帮你掌握!

    2. 梳理关键词

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

    如何做好签到功能设计?用实战案例帮你掌握!

    3. 绘制草图

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

    4. 确定思路

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

    如何做好签到功能设计?用实战案例帮你掌握!

    5. 绘制初步造型

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

    如何做好签到功能设计?用实战案例帮你掌握!

    6. 初步配色

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

    如何做好签到功能设计?用实战案例帮你掌握!

    7. 质感深入

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

    如何做好签到功能设计?用实战案例帮你掌握!

    8. 字体处理

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

    如何做好签到功能设计?用实战案例帮你掌握!

    9. 最终效果

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

    如何做好签到功能设计?用实战案例帮你掌握!

    小作业

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

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

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

    三、小结

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

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

    欢迎关注作者的微信公众号:「黑马家族」

    如何做好签到功能设计?用实战案例帮你掌握!

    本篇来源:优设网

    原文地址:https://www.uisdc.com/sign-in-function-design

    评论
    Artlist模板 广告