今天这个需求是直播间 pk 后,主播胜利与失败的两个状态设计,过程经历了很多次修改,现在来分享一下自己的感受。

  • 状态还是需要有一些设计感的
  • 结构不能乱画,要有基本逻辑在
  • 颜色层级一定要分明
  • 根据情绪设计形象
  • 根据情绪选择色系
状态还是需要有一些设计感的

其实最开始我有点天真了,以为这种状态直接画个圈圈,写个胜、败两个字,然后做下颜色区分就完事了:

两个图标改了13版,我是如何逐步优化的?

但这根本行不通,看起来像是未完成的交互稿,一点设计感都没有。

于是我开始思考如何增加设计感了。

结构不能乱画,要有基本逻辑在

如何增加设计感?

其实无非就是给这个状态增加细节呗,/ G i尤其是这个胜利的状态,我想到麦穗、翅膀等元素,最后选用了翅膀的元素,绘制了一个样例如下:

两个图标改了13版,我是如何逐步优化的?

但被说到这个结构是乱画的,哈哈,一下戳到了我的痛点,确实是胡t h * r ` G乱画的,各种圆圈没什么逻辑。

于是后来仔细思考了一下,把圆圈分为三层:

  • 一层底托
  • 一层中间层放主形象
  • 一层修饰层放在最外面

效果如下:

两个图标改了13版,我是如何逐步优化的?

然后最中间放主形象,两边5 + W i放翅膀,顶部放] % ` )皇冠,最终效果如下:

两个图标改了13版,我是如何逐步优化的?

这样整体看起来结构就是清晰的。

我们可以看下结构清晰和不清晰的对比:

两个图标改了13版,我是如何逐步优化的?

后面因为整体调性需要可爱一点,所以把翅膀改成了比较圆润的造型:

两个图标改了13版,我是如何逐步优化的?

效果还算不错。

颜色层级一定要分明

2 8 * G实这个点是我经常和大家强调的,但有时候确实是当局者迷,自己也容易犯这样的错,比如最开始的那个效果,很明显中间暗部和周边亮部没有拉开层次:

两个图标改了13版,我是如何逐步优化的?

所以在后面的取色上,会把中间暗部做的很深,形成鲜明对比:

两个图标改了13版,我是如何逐步优化的?

这样层次才会更加明显,不然就会糊在一起。

根据情绪设计形象

最开始本来想用圆形来做失败的T N ?状态,但是后来发现有点太惨淡了,于是想着还是加点细节吧,怎么加呢?

这时候是需求方那边给的一点灵感,说失败不就是很颓的样子,就拿把翅m h |膀下沉和胜利形成反差不就可以了,我感觉说的挺有道理,于是就尝试做了下:

两个图标改了13版,我是如何逐步优化的?

确实还可以。

根据情绪选择色系

本来想着胜利用紫色、失败用蓝绿色:

两个图标改了13版,我是如何逐步优化的?

但是发现蓝绿色多少还是会有k ) 0点分散“胜利”的注意力,于是x : H就在思考,失败是表达一种负向的情绪,那是不是可以用灰一点的颜i t 9 r色?

于是尝试了几个不一样的灰度:

两个图标改了13版,我是如何逐步优化的?

最后选择最后最后那个几乎接近灰色的版本,干脆一点,对比强烈一点。

我们看下最终效果:

两个图标改了13版,我是如何逐步优化的?

再看下过程稿吧:

两个图标改了13版,我是如何逐步优化的?

调整了很对次,过程还是挺值得记录的,回头一看,很有成就感!

总结

以上就是这个小需求过程中总结的一些知识点,后面还会加入一些微动效,增加氛围感。

希望可以给大家一点灵感和启发。

欢迎关注作者的微信公众号:「菜心设计铺」

两个图标改了13版,我是如何逐步优化的?

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注