加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

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

发布时间:2017-06-27 17:40:51 所属栏目:运营 来源:woshipm
导读:在做方案的时候,时常会听到这样的话,“这个地方应该更明显一点”。今天,阁主将拿出自己设计的一个徽章注释来进行说明。 如下图,这是单个徽章的展示,新得到一个徽章还没有被查看时,名字左边会有小红点提示。印有“PB”字样的小icon是今天的主角,表述

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

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

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

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

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读