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

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


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

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

如下图,这是单个徽章的展示,新得到一个徽章还没有被查看时,名字左边会有小红点提示。印有“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

相关推荐

  • Axure遇见大数据

    本期介绍数据可视化工具:Echarts工具地址:http://echarts.baidu.com/examples/Echarts图表适用于哪些大数据可视化场景体重分析访问来源分析下载统计指标分析公交线路分析Echarts图表可满足哪些实际需求和交互效果满足需求:支持对图表标题修改支持对图表数据进行修改支持对图表数据进行可视化调整支持代码的获取支持图表的高清原图下载基础交互:点击主题色块,切换主题配色点击色块,可打开或关闭开关数据展示项...

    2018-04-06
  • 淘宝UED:如何高效输出移动APP产品原型

    如何高效输出移动app产品原型? 清晰的产品思路,顺畅的协同合作,齐备的素材元素,真实的体验感受…保证过程的高效,更要保证有效的成果。下面我们将分三步走,来完成高效输出移动app产品原型。 一、输出以界面为单…

    2015-07-10
  • 【笔记】服务设计方法及手机操作系统设计

    2017年7月9日,UXRen深圳分舵在ThoughtWorks大型培训教室主办了《手机系统设计、服务设计和可视化思维,这次全都有!》的分享活动,本文基于下面2位嘉宾的主题分享整理而成:   嘉宾1:庞博(ThoughtWorks用户体验…

    交互专题 2023-03-03
  • 讯飞输入法 Smartisan 定制版功能交互一览

    #交互学堂# #讯飞输入法# #smartisanOS# 基于 Smartisan OS 的设计语言深度定制了讯飞输入法,界面简洁优雅,还能保留讯飞输入法用户的使用习惯, 识别准确率高达 97% 的讯飞语音,让输入更高效 点击下载   讯飞输入…

    2016-10-31
  • 【UI交互设计】首月结课作业展示

    花瓣美素是全国最大的版权素材平台,本文章内学生作品图片,未经允许,严禁抄袭和转载。花瓣网丨花瓣美素教学中心,承担天津市大学软件学院数字媒体专业UI交互设计方向120人的教实训任务,在刚刚过去的第一个月里,通过同学们和教师团队的不断努力,专业核心课程《图形图像基础》和《用户体验设计》等两门课程教学任务圆满完成。《图形图像基础》是UI交互设计专业的专业必修课。通过企业教师的认真指导和对该课程的学习,同学们对UI交互有了进一步的了解,在企业教...

    2018-04-17
  • 用户体验设计师如何构建设计知识体系

    -全文共2469个字,阅读时间大约3~6分钟-开 篇这几天在看一位腾讯大师的产品思维,今天是重复第二遍,她所讲的产品观中的微观、中观、宏观、用户增长的峰值、终值、点线面体思维等等,这一系列课程让我茅塞顿开。当下的确是一个很好的时代—体验经济时代,英雄不论出处,不谈产品的背后是何方神圣,一切都是用户说了算,一个产品准确找到用户痛点,只要用户喜欢,有足够的用户价值,就能转化一定的商业价值。最近处于风头浪尖的两家公司—某团与某滴,互相做起了对...

    2018-04-06
  • Axure新品AxShare App现已发布,快来下载!

    今天阿西收到axure官方的邮件: We're launching the AxShare App 意味着 axure终于朝着APP方向有了实质性的进展,大家今后的作品可以通过这款APP进行预览演示了。可以是Axure不上之前的短板,下面就看这个APP的体…

    2015-05-23
  • 设计师要懂心理学の视而不见

    著名的“数传球视频”,先做个小测试:你能数出来,白队一共传了几次球吗? 这个视频是“无意视盲”和“变化视盲”典型的例子,揭示一个现象:用户经常对重大变化视而不见。 眼动跟踪技术可以跟踪记录人眼观察的方向,确…

    交互设计 2014-11-20
  • [自译]企业UX案例研究:在紧张期限内提高可用性

    在四个月的时间里,LiquidPlanner塑造了一个新的dashboard模板功能,这让用户印象深刻,并且有很高的使用率和很好的商业效益。

    2016-08-24
  • 如何进行可用性启发式评估

    经验分类: 经验/观点 / 自译外文 原作者: Armen Ghazarian 用户体验只有在渗透入从创意到开发测试等产品开发的各个阶段时才能发挥最佳效果。当通常来说事情没这么简单,用户体验专家需要反复对已经完成的产品进行…

    2014-10-30