设计案例｜在做方案时，“更明显点”这句话怎么破

在做方案的时候，时常会听到这样的话，“这个地方应该更明显一点”。今天，阁主将拿出自己设计的一个徽章注释来进行说明。

如下图，这是单个徽章的展示，新得到一个徽章还没有被查看时，名字左边会有小红点提示。印有“PB”字样的小icon是今天的主角，表述的是那一行小字是表示“个人最好成绩”的展现，是动态的数据。

而最初设计时，PB是用小型的徽章样式进行展示的，与大的徽章有些重复，并且用线性的图案，所以会收到PM“更明显点”的方案反馈。遇到这样的状况应该怎样分析呢？

先分析话中话的含义

表面上是在说小的icon需要更显眼一点，其实是在说，从企业的角度出发这一串的信息比较重要，需要更突出一点，在不影响美观的前提下，让用户更留意一些这里，引导用户去采取一些行动。

听完话之后先不要忙着去行动，而是静下心来，分析一下这话到底要表达什么意思。将咱们所做的事情放到更长一点的时间维度上去进行思考。

从信息逻辑的角度去进行分析

1. 传达什么内容

比方说上方小的“PB”icon，所提示的是后方一串小字的作用。可能普通用户不太理解，看不出来这是什么意思，可针对的是运动爱好者，特别是golf的运动爱好者而设计，PB的缩写是行业内的约定俗成，所以在内容传达上不会有所歧义。

2. 需要起到什么作用

PB的小icon是为了吸引用户的视线。对用户来说，可以有也可以没有，但从企业的角度来讲，企业需要通过突出这个信息，告诉用户自己曾经做了多大的成就，给予用户一种挑战自己的动力，让用户更有意愿去使用APP。所以它应该起到引导用户去关注信息的作用，那么在做方案的时候就需要让用户不那么费力就可以注意到。

3. 该元素与页面上其他元素之间的关系

还需要注意的一点就是，将所需要分析的元素放在整个方案中，去一起考虑。图中组成一个单元体的元素有：徽章图、徽章名、提示小红点、PB小icon、个人最佳成绩的数据。而提示小红点在徽章图被点击查看后就会消失，有时候会出现有时候不会出现。而徽章图系统设计了五种不同的色彩，也就是说如果作为列表呈现的时候色彩会很多。徽章名字有长有短，可能是一排也可能是两排，不过设定了最长为两排。
那么PB的定位就是，常驻元素并且需要搭配多彩色进行呈现。这些分析到UI层面都会有用。

UI层面表现

到了UI层面，改进可以有几条思路，首先将形状规整尝试色块的表达，成为圆形或者矩形，考虑到图中有小红点，再多个圆形出来就累赘了，所以用矩形来搭配，数据区的信息更加整洁，大面积的同色区有助于信息突出。如下图：

接着可以尝试拉开对比，采用浅色底深色字或者深色底浅色字的表现形式，彩色和无彩色都可以进行尝试。如下尝试

最后检查与页面上其他元素是否保持统一，因为考虑到APP其他的地方所有红色点都是表示未读状态，所以保持这样的信息传达不变。而又考虑到徽章图颜色种类比较多，整个页面会比较乱，那么在数据区就尽量减少多色的表达，用无彩方案去表达，否则画面会“闪瞎偶的gou眼”。

最终方案如下图：

设计是一个理性和感性交替进行权衡，顾全大局的过程，其中锻炼的是设计师的信息收集、表达、总结、逻辑思考等等的能力，倒不觉得累和苦，反而觉得能学设计是一种幸运~

阁主一直在琢磨怎样写出更好的文章，带给大家更多的思考。如果真正写工作的分析过程会有点枯燥，大家在阅读的时候会感觉有点累，如果大伙有好的建议可以在留言区进行留言。

专栏作家

Sophiallg，微信公众号：Sophia的玲珑阁，人人都是产品经理专栏作家。一枚爱折腾，爱健身的交互设计妹纸。

本文原创发布于人人都是产品经理，未经许可，禁止转载。