工作多年,依然会掉进「界面小标签」的坑

最近做的一个小需求,没想到多年ui经验,依然会被小小的标签摁在地上摩擦,因此觉得有必要做下总结。

这是一个中老年人在线学习的课表,目前线上页面效果如图,这个课表因为是中老年人使用,所以很简单,就是按照时间正序排列一天的课节。

目前主要科目是书画,课程类型分为体验课和系统课(系统课不同阶段分成入门课、系统课、进阶课),业务方反馈用户在浏览这个课表时,分不清是体验课还是系统课,也区分不出科目。

一开始设计时,其实也考虑过科目多的情况。当时就想着最好是在封面上打上小小的标签,但考虑到目前只有国画和书法,觉得封面其实已经可以一眼看出来了,而且标签会破坏封面完整性和美感,所以没加。

需求很明确了,就是让用户(主要是中老年人)看得出是什么科目,什么课程类型。

那就需要加两类标签,加在封面上肯定是不合适的,毕竟覆盖的越多,越影响封面的整体效果展示。

先看第一稿:

我希望用户一扫就能区分出是什么科目,什么课程,所以标签使用不同的颜色区分,希望用户可以通过文字和颜色辨别,单纯的这样考虑是没什么问题,但是实际落到页面上的效果却惨不忍睹:

1. 这个页面的主色是橙色,本身主要占比就挺大;

2. 封面色彩也很有可能比较丰富;

3. 这个标签我又使用了3种颜色,整体看上去就很乱、杂、点很多,用户没法聚焦内容。

好,问题很清楚了,随后改了第二稿:

第二稿,考虑到用户既然已经可以通过封面识别科目了,那科目标签就不必那么抢眼了,科目标签去色,课程类目标签依然使用颜色,体验课用绿色,系统课使用蓝色(也是没啥依据的凭感觉用色了,哭,果然一个不小心老毛病就会犯啊)

急匆匆给业务方看,讲课的老师瞅了一眼说,这个标签还是不明显啊!

?这么明显了,还不明显?什么原因?于是拿出线上课程列表给他看,问他是不是标签的大小稍微小了一点,是不是要这么大的?果不其然,老师说是的,你这个课表的标签太小了,中老年人看不清楚的,而且这个颜色闪光…

啊~顿时恍然大悟,立刻就想到适老化设计:

界面设计上可以使用老年人喜爱的中性色,避免颜色纯度、明度过高造成对眼睛的刺激;可以使用对比强烈的互补色突出重要元素的信息内容和功能位置。

但由于晶状体变黄变浑浊,会选择性的吸收蓝光,从而导致老年人对蓝色的鉴别能力比对红、绿色鉴别能力下降更明显,所以界面上的重要元素要避免使用蓝色。

最后调整第三稿:

1. 标签全部去色,并且加大,文字大小由原来的26px改成28px ,这个大小对中老年人老师还是相对好识别的。

2. 页面色彩降噪,这个页面优先级最高的是正在直播的课节,其次是即将开播和直播结束。

每一种状态,用户都有不同的行动点:

a. 正在直播的需要快速点击进入直播间;

b. 即将开播需要做课前预习,了解本课需要准备什么用材,本课知识要点、重点等;

c. 直播结束,通过用户调研我们知道用户因直播时间冲突、直播跟着画不完、画不好等原因,回看频次还是很高的。

所以最终我调整了按钮样式,由原来的线性改成面性,颜色上会削弱,按钮样式也更统一,也不用担心用户不知道能点。

3. 由原来简单的时间正序排序改成优先展示正在直播>即将直播>直播结束。

(别问我,为什么一开始不这么设计呢?)

总结:

以上就是这次加小标签的需求设计,没想到早就不是设计新手的我,依然还是会掉进小标签的坑啊!

整体回顾:

1、需要考虑产品“学习”的属性,页面不宜有过多颜色干扰,减少用色让用户聚焦内容本身;

2、需要考虑中老年人的用户特质,人性化设计:用色避免采用对中老年人不友好的颜色;加大文字大小;行动按钮易识别,方便点击;排序更符合使用习惯等。(因战略问题,产品并没有完全适老化设计,只是适当为中老年人考虑些)

没有最好,只有更好。这个页面依然还有优化的空间,你如果有建议,欢迎交流哈~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,589评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,615评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,933评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,976评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,999评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,775评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,474评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,359评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,854评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,007评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,146评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,826评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,484评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,029评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,153评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,420评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,107评论 2 356

推荐阅读更多精彩内容

  • 小猿搜题APP产品分析报告 1.产品结构图 2.产品功能流程图 2.1搜题功能流程图 2.2购买直播课流程图 2....
    A牧马人谯阅读 835评论 0 0
  • 1. 产品概述 产品名称:抖音短视频 产品版本:10.5.0 体验环境:MIUI11.0.2 体验时间:2020....
    想做产品的小羊阅读 2,855评论 0 4
  • 这一篇拖拉得比较久了,因为最近发现,放弃自己当个废鸡好舒服啊。 广场舞可以说是风靡在全国的老中青三代中,尤其是中老...
    大大大漂亮阅读 4,888评论 0 2
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,536评论 28 53
  • 信任包括信任自己和信任他人 很多时候,很多事情,失败、遗憾、错过,源于不自信,不信任他人 觉得自己做不成,别人做不...
    吴氵晃阅读 6,190评论 4 8