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

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

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

如下图,这是单个徽章的展示,新得到一个徽章还没有被查看时,名字左边会有小红点提示。印有“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的玲珑阁,人人都是产品经理专栏作家。一枚爱折腾,爱健身的交互设计妹纸。

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

祝给予赞赏的伙伴,2017年发大财!
3人打赏

评论( 6

写下你的想法
  1. 是不愿苟且才不是傲娇

    写的很好啊,支持下

    回复
  2. 产品爱好者,设计爱好者

    视觉设计取舍实在让人纠结,但探索的过程也很有趣。

    回复
    1. 回复

      握爪

  3. dd

    回复
    1. 回复

      行风

    2. 回复

      行风

推荐阅读