作者介绍：

石头是一个非常踏实的设计师，愿意静下心来做最最基础的事情，即使自己已经有了一些的沉淀，但还是愿意不断磨练基础，我是很佩服这样的人。

小伙也很年轻，刚毕业一年多，今年从杭州到深圳发展，线下见过两次了，给人的感觉就是踏实、有悟性。

不过也有个缺点，就是晚上动不动就熬到4点多，哈哈，还是要注意身体。

好了，废话不多说，我们今天看看他的总结和作品吧，看看毕业一年多的同学设计总结输出能到什么样子！


正文开始：

最近工作时，接到一个在项目讨论区模块下新增的评价卡片需求，需要5个表达用户态度的图标。要求比较宽泛，只强调了“要醒目”、“视觉重量一定要大”。于是根据这几个“简单”的需求点做了一版效果，个人感觉还ok，风格偏向光感、可爱。

但后来因与产品整体调性匹配度较低，给到反馈“太游戏化”，所以被筛掉了。不过在方案执行中，使我对配色和形体的理解有了更深的认识，来看看这个pass掉的方案吧。

设计背景

在原先的基金板块版本中，全是列表式排列和数字呈现，冷冰冰的红绿数字会让用户感觉到强烈的“距离感”。为了增加情感化融合，同时让用户在个人基金涨跌变动时能有一个“情绪发泄出口”，于是提出在持仓详情的头部新增评价卡片区域，以此增加与用户的情感互动。

需求分析

需求里虽然提到需要“视觉重量大”、“醒目”，但作为具体的风格参考肯定是不够的。视觉重量大表示该板块在页面下的层次属于靠前，醒目代表在色彩选取上可以稍微自由点（针对此项目）

但这些笼统的要求下，都是为了刺激用户点击欲望的目的，那么在风格选取上尽量就不要选用线性图标了。面型图标视觉重量大、语意明确等特点在功能上会更适合这个场景。

而在众多面型风格里，质感图标的画面表现力无疑是很强的，加上光感配色会十分具有点击欲，因此本次需求在风格上选用质感+面型图标来表现，配色上选用高饱和度色彩+光感类型。

初稿试错

刚接到需求时没有过多交流，交互稿里共有5个态度，分别为有点心动、还需观察、表现不错、再加把劲、黄牌警告。

上手时，想法比较简单，觉得这几个语义都比较常规，于是花了半小时便出了个初稿草图：

可以看出想法很单纯，还需观察就放个放大镜+眼睛，再加把劲就往里添把火。可以说组词动作完成挺快的，做完后也觉得语义表达没什么大问题，但是很快便得到反馈：

经过沟通，目前最大的问题是“勾不起用户的情绪波动”。这5个态度不仅是想作为文字的辅助说明功能，更多的是希望能够表达出用户针对该基金形势所表现的情绪波动，要让用户感觉到共情，以此来达到成为“用户情绪发泄出口”的目的，引起用户点击欲望

这下回头再看，确实会发现草图的语义深度有点单薄，就像“还需观察”，就只是一个眼睛代表“观察”这个点，但用户为什么没有直接购入，是什么心理导致了用户的观望态度，是没有深入思考的，这就导致图形看上去“好像没有错，但也说不出啥好”的结果。

融入情绪

1.有点心动

找到了问题所在，那么就顺着正确的方向思考

第一个态度是有点心动，表达的意义挺好理解的。这只基金目前的涨幅率打动了我，我已经产生买入的“冲动”，随时可能买入。理解到了这个，在表达时就不会出现什么错，没有什么比一个大爱心更能表达“心动”了，于是我就来了俩：


但光有爱心，感觉形式上还是没有新意，太多地方都使用了爱心这个图形，比如点赞、收藏、关注…单个爱心能够表达的意义太过广泛

于是开始思考，什么东西能够最贴切的传达出“心动”的情绪呢？什么表示心脏的跳动，心电图呗

心电图无论是视觉特征还是语义理解都是大家熟悉的，这根十分具有代表性的线可以提炼出来

其次在颜色上，因为未持仓的用户也能够点击前2个图标，所以在表示心动的红色的基础上，还可以加入表达神秘感的紫色，以此来增加未持仓用户对该基金的期待感

综上，再调整下细节：

2.还需观察

还需观察想表达的情绪波动较之心动偏向平淡，表示这只基金涨幅率可能不是太高，还没有到完全打动我的地步，但这只基金近段时间一直保持平稳增长，我还需要更多的观察时间来决定我是否买入

若按照字面意思，观察当然需要用眼睛，所以眼睛、放大镜这类事物是比较常见的类型，但是用的多了就会略显常规。同时这类比较直白的事物较难让用户感受到情绪波动，如何在有代入感的同时还能表达出趣味性呢？这就可以日常生活中获取灵感。比如我们平常有一个全民关注的大事件，我们在观察、观望的时候，会是什么状态呢？

对于时刻保持吃瓜第一线的“互联网农民工”们，吃瓜这个词已经太熟了，因为它是我们每个人的日常写照，很好的表达了那种“我先看看”、“凑凑热闹”的感觉

相较于有点心动带来的“冲动”，还需观察更多的是想表达用户“冷静”的一面，所以在颜色上使用代表冷静的蓝色作为基调。结合以上几个想法，做出来代表“吃瓜”的 还需观察：

完成后，又感觉圆脸有点太笼统了，这儿可以加入吉祥物的品牌基因，再优化下：

3.表现不错

表现不错很明显是5个态度中情绪最亢奋的，也是持仓用户对自己的基金满意度最高的情绪

那么用什么体现呢？提起表现不错，我就想到上学时近期表现优异得到夸赞和奖状，以及看到自己喜爱的球队获得联赛冠军时，站在领奖台上拿着奖杯香槟庆祝的场景。

而当表现不错时，我们最直接会联想到的无非就是奖励了，比赛第一的荣誉证书，奥运夺冠的鲜花、奖杯，都是对取得成就时的正向反馈，所以可以用颁发奖杯这个形式来表达持仓者的满意度。

颜色上当然得用金光闪闪的金色了，不管在现实里还是游戏中，获得成就、得到奖励时都是金色烫字、金色奖牌、金色光芒…于是做了第一版：

得到菜心大哥的反馈：

一针见血，回头发现奖杯的主体原本应是圆柱体，而做出来的效果反而像是一块带有厚度的卡片。

那么是什么导致了这样的情况呢？最重要的点就是没有处理好素描原理中的明暗交界线：

明暗交界线是物体体现体积感最重要的东西，它强调了物体体积的转折，那么奖杯作为一个类圆柱体物体，它的明暗面应该是怎样划分的呢？

像这样先明确的分出结构，之后再将各个块面给到合适的高斯模糊值，那么物体的体积感就不会出现问题了：

关于光感的体积感打造，有几点心得想分享给没有接触过这块图形的朋友：

1.高光和反光层，可以往物体侧面延展一段距离，这样会形成一段柔和的轮廓光，在深色背景下感知会尤其明显：

2.同色系渐变下，暗部色相稍稍改变，会很好的增强画面层次，比如上方暗部就是在黄色基础上加入了红；

3.反光的颜色不要偏向暗部，可以偏向亮部色相或者环境色；

4.觉得层次不够时，一个块面可以分为多层，比如这的反光便多添加了一层反光2压边，层次上会显得更自然和真实：

当然一切技巧都是要落地于场景，很多细节都是可以跟随场景变动，遵循素描原理多练练，很快就能掌握了。

4.再加把劲

这个态度想表达的是该基金近日表现欠佳，但是我还是很相信它，并会继续支持它

我们想表达的除了涨幅率“欠佳”这个点之外，更多是用户对于这只基金的“鼓励感”要大于对它表现欠佳的“斥责感”

鼓励好说，在我们加油打气、呐喊助威的时候，做得最多的一个动作就是

颜色上，因为国内习惯用绿色表达“跌”的概念，为表现“欠佳”这一点而用了绿色为主基调，但若太绿的话，又会让用户心理产生不好的心理感受，于是在绿色的基础上打上黄色的光，来表现鼓励的温暖一面：

5.鸣哨警告

最后一个态度是表示基金跌的太狠了，用户心情是很差的情况，于是对它作出提醒和警告，但又不能太过负面不留余地。原本是用黄牌警告来表达这个语义的，结合了球场上对非恶意犯规的警告和提醒，但是仍然有继续努力的机会

但由于自己太菜，感觉黄牌在视觉上不是很好表达质感，卡牌能够增添细节的地方不多，于是就和产品进行了友好的交流（battle），看能否找到其他能表达这些含义的事物。之后从黄牌的场景中延展，发现哨子也能很好的表达“警告却仍留存机会”的意义，而且黄牌只能出示两次，鸣哨在次数上的限制就稍宽，于是将黄牌警告调整为了鸣哨警告，辅以黄牌的元素，最后一个图标也顺利完成：


至此，该方案所有图标差不多完成了：

以上便是这次分享的所有内容了，都是关于在做这个方案时的一些思考。字数较多，也感谢你看到这，希望能够有些许帮助，谢谢大家！

本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：菜心设计铺！