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

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


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

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

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

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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21807/

(0)
CatherineCatherine
上一篇 2017-04-29 12:28
下一篇 2017-04-29 14:44

相关推荐

  • 与潘通CEO对话:合理的色彩运用,才能设计吸引人的产品包装

    年度流行色从何而来?潘通如何决定每年的流行色?你知道小黄人的颜色是潘通挑选的吗?以上问题在这篇对话中一一为你揭秘。“基于 Pantone 公司的核心业务,色卡销售,色彩咨询,以及色彩授权,中国目前是 Pantone 继美国后的全球第二大市场。按照中国的国际化趋势,不久后就有可能超越美国成为 Pantone 在全球的第一大市场。尤其,中国市场目前愈发突显了对设计的追求和重视。”Color defines our world. ——  Laurie Pressman  Vice-President of the Pantone Color Institute“For me it has always been such a calm color. Grey is like your favorite T- Shirt.” —— Jason Wu

    2017-05-11
  • APPLE WATCH 中文手册:通知--有关通知的一些要点

    如果您的 iOS 应用支持本地或远程通知,Apple Watch 也会同步显示这些通知。当某个应用的本地或远程通知抵达用户的 iPhone 后,iOS 将会自行判断显示该通知的设备(iPhone 还是 Apple Watch)。对于发送到 Apple Wa…

    2015-06-15
  • UCD,以用户为中心的设计

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。任何项目都从一个idea开始,你走在路上,蹲在马桶上;吃着饭,看着电视,灵光一闪,觉得大致可以做一个什么东西来实现世界的爱与和平,这就是一个愿景的诞生;来源无法归纳,却是后面折腾的开始。
    然后就是“分析研究”,分析市场,分析技术,分析用户,一边分析一边验证愿景;顺利通过这个环节,得到的就是设计需求。需求的来源多元,组成亦是多元。需求得到,就要进行梳理,以确定下来;这就是“需求过滤”或者“需求定义”。
    接下来就是把需求转化成对应的功能和数据,这是产品的骨骼血肉,功能数据要满足需求。比如需求是解渴,对应的功能就能是可乐或者矿泉水,但不能是热干面。从这个环节起,产品从抽象变具体。
    功能数据有了,长什么样?我们要把它们设计出来。设计分成“概念设计”和“细节设计”两个阶段,设计又分为“交互设计”和“视觉设计”两条线,所以就有了“概念交互和视觉设计”及“细节交互和视觉设计”。
    设计过程中需要进行“测试验证”,验证的结果用来迭代设计,所以大家看到有个双箭头。设计好了,提交研发。在这个阶段,我们做“研发支持”,也就是传达设计需求给研发,并且做研发过程中针对突发情况进行及时的设计修改;比如某个提示的补漏之类的。
    最后是“设计验收”。一般来讲,刚研发出来的版本多少有些变形有些不符合设计需求,所以我们要验收。列出结果清单,打回去重新调整。调整到什么程度才可以,要看具体到项目周期和策略。举个例子:我们筛选好约好被试(测试用户),分配给他们分析产品和分析任务,比如对比京东和淘宝的支付流程,让他们回去好好体验一个礼拜,让用户熟悉产品以心里产生评价。然后回到我们实验室,再走一遍,这一遍是被观察。然后就是访谈,询问他们的各种维度的评价,比如对于收货地址选择方式的偏好,最后我们统计归纳。这就是让用户来帮我们分析。“其实你什么都没有做错,错在你太老了。我们最早看到Snapchat,外国13-18岁小孩在用,我们高管用了觉得好傻好无聊,看不到价值,只投了一点,后来涨得很快。这个公司我们副总去过,就是海边一个玻璃房,很小的公司,感觉一个石头就把他们击破了。当时只有2000万美金,我们没进去,现在远远超过我们想象,百亿美金。

    2017-05-31
  • BAT名师访谈,阿里交互设计专家的成长之路

    编者按:优设访谈第四期!今天这位设计师也是老朋友了,作为网易电子商务部UED团队的创建者,阿里现任交互设计专家,以及业内人士鼎力推荐的《破茧成蝶:用户体验设计师的成长之路》联合出版人,@刘津legene 老师的…

    2015-11-19
  • 经验总结|品牌视觉改版要如何开始做?

    一个成功的视觉改版是靠30%的探索流程+70%设计师水平。探索品牌感觉 → 发现提取关键词 → 寻找对应素材创建情绪板 → 指导设计发现提取关键词(我们自己) → 寻找对应素材创建情绪板 → 探索品牌感觉(让用户)→ 指导设计请问您觉得目前我们产品的视觉风格怎么样?

    2017-05-03
  • 移动端下拉菜单交互

    通常在PC上常出现的下拉菜单,在移动端上都是用什么交互来实现的?将最近项目里碰到的情况总结一下。 1. 层级设计,以iOS为代表 iOS系统日历 是目前最常见的一种做法,外露设置名称和默认设置项,将全部设置内容放…

    2016-03-22
  • 应届生在简历中如何描述自己的交互设计项目经验?

    应届生和社招的项目展示核心区别在于,应届生的项目大多数是虚拟的、小型的,或者失败的。大部分可能是校园网站项目,公众号运营,轻量化 App 等,用户数量不会太多、很少或基本不盈利。描述、呈现自己项目经历的前…

    2015-10-14
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21
  • 交互——浅谈“什么是好的社交产品?”

               最近密集参加了几场和社交有关的活动,引发了一些思考。就如同大部分投资人认为的一样,社交领域是一个进入门槛很低的领域,似乎任何人都可以进来试试。其实这句话的背后,有3个深层次的意义: 1. 投社…

    2015-04-05
  • PM的利器——流程图基础

    一、什么是流程图?流程(flow):一系列的逻辑关系(因果关系、时间先后、必要条件、输入输出),在特定的情境下满足特定用户的特定需要的总结。固化、变化。图(chart):形式表现;图形化、可视化;传播性、优化迭代性;二、为什么要画流程图?流程图:角色、流转、规则、顺序、输入、输出;流程图三、流程图有哪些?(1)设计草图:角色、任务、逻辑、输入输出(2)线框图、交互原型图:内容、布局、权重、交互手绘线框图sketch线框图(3)视觉图、U...

    2018-04-08