最近做的一个小需求，没想到多年ui经验，依然会被小小的标签摁在地上摩擦，因此觉得有必要做下总结。
这是一个中老年人在线学习的课表，目前线上页面效果如图，这个课表因为是中老年人使用，所以很简单，就是按照时间正序排列一天的课节。
目前主要科目是书画，课程类型分为体验课和系统课(系统课不同阶段分成入门课、系统课、进阶课），业务方反馈用户在浏览这个课表时，分不清是体验课还是系统课，也区分不出科目。
一开始设计时，其实也考虑过科目多的情况。当时就想着最好是在封面上打上小小的标签，但考虑到目前只有国画和书法，觉得封面其实已经可以一眼看出来了，而且标签会破坏封面完整性和美感，所以没加。
需求很明确了，就是让用户（主要是中老年人）看得出是什么科目，什么课程类型。
那就需要加两类标签，加在封面上肯定是不合适的，毕竟覆盖的越多，越影响封面的整体效果展示。
先看第一稿:
我希望用户一扫就能区分出是什么科目，什么课程，所以标签使用不同的颜色区分，希望用户可以通过文字和颜色辨别，单纯的这样考虑是没什么问题，但是实际落到页面上的效果却惨不忍睹：
1. 这个页面的主色是橙色，本身主要占比就挺大；
2. 封面色彩也很有可能比较丰富；
3. 这个标签我又使用了3种颜色，整体看上去就很乱、杂、点很多，用户没法聚焦内容。
好，问题很清楚了，随后改了第二稿：
第二稿，考虑到用户既然已经可以通过封面识别科目了，那科目标签就不必那么抢眼了，科目标签去色，课程类目标签依然使用颜色，体验课用绿色，系统课使用蓝色（也是没啥依据的凭感觉用色了，哭，果然一个不小心老毛病就会犯啊）
急匆匆给业务方看，讲课的老师瞅了一眼说，这个标签还是不明显啊！
？这么明显了，还不明显？什么原因？于是拿出线上课程列表给他看，问他是不是标签的大小稍微小了一点，是不是要这么大的？果不其然，老师说是的，你这个课表的标签太小了，中老年人看不清楚的，而且这个颜色闪光…
啊~顿时恍然大悟，立刻就想到适老化设计：
界面设计上可以使用老年人喜爱的中性色，避免颜色纯度、明度过高造成对眼睛的刺激；可以使用对比强烈的互补色突出重要元素的信息内容和功能位置。
但由于晶状体变黄变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力比对红、绿色鉴别能力下降更明显，所以界面上的重要元素要避免使用蓝色。
最后调整第三稿：
1. 标签全部去色，并且加大，文字大小由原来的26px改成28px ，这个大小对中老年人老师还是相对好识别的。
2. 页面色彩降噪，这个页面优先级最高的是正在直播的课节，其次是即将开播和直播结束。
每一种状态，用户都有不同的行动点：
a. 正在直播的需要快速点击进入直播间；
b. 即将开播需要做课前预习，了解本课需要准备什么用材，本课知识要点、重点等；
c. 直播结束，通过用户调研我们知道用户因直播时间冲突、直播跟着画不完、画不好等原因，回看频次还是很高的。
所以最终我调整了按钮样式，由原来的线性改成面性，颜色上会削弱，按钮样式也更统一，也不用担心用户不知道能点。
3. 由原来简单的时间正序排序改成优先展示正在直播>即将直播>直播结束。
（别问我，为什么一开始不这么设计呢?）
总结：
以上就是这次加小标签的需求设计，没想到早就不是设计新手的我，依然还是会掉进小标签的坑啊！
整体回顾：
1、需要考虑产品“学习”的属性，页面不宜有过多颜色干扰，减少用色让用户聚焦内容本身；
2、需要考虑中老年人的用户特质，人性化设计：用色避免采用对中老年人不友好的颜色；加大文字大小；行动按钮易识别，方便点击；排序更符合使用习惯等。（因战略问题，产品并没有完全适老化设计，只是适当为中老年人考虑些）
没有最好，只有更好。这个页面依然还有优化的空间，你如果有建议，欢迎交流哈~
网友评论