【ui】轻轻课堂“再设计”复盘与思考

写在前面：

如今是流量为王的商业时代，智能手机的普及让移动端设计变得炙手可热。

随之而来的是对于桌面端应用的“冷遇”，似乎一夜之间打入了“冷宫”，设计师对于桌面端应用关注度也变得少之又少。事实上，桌面端依然有着庞大的用户人群，也有着自己“说话”方式。

所以我认为：“产品设计没有边界，设计师只有沉浸到每个像素中去才能做出更出色的设计。”

一.项目介绍

2018年是在线教育行业爆发式增长的一年，“互联网+教育”为推动优质教育资源均衡化发展提供了新的可能。轻轻家教站在时代的风口，整合了自身的资源和优势，制定了all in在线的方针策略。【轻轻课堂】就是在这样的大环境下孕育而生。

【轻轻课堂】是一款服务于老师与学生之间的在线授课工具，分为学生端和老师端（框架梳理见下）。项目从0到1经历10个版本的迭代之后，在2.0.0版本的契机下我主动提出进行一次“再设计”。

二.定义问题，制定设计目标

解决问题的第一步是发现问题。我用了三个方法全方位的去深挖。

在小步快跑、快速迭代的产品研发理念下，业务需求和功能模块的反复叠加对产品就像一座无形的大山。设计师时常陷入无法把需求做深做透的窘境，所以合理梳理需求也成为了设计师必备技能（和分类垃圾异曲同工...）

经过以上流程，产品暴露出了以下“八宗罪”：

视觉（见下图）：

色彩：沉重，单一。大面积深灰、分割线太深容易让用户产生“窒息感”。

按钮：尖锐，直角的按钮缺乏亲和力与行业属性不符。

图标：混乱，图标尺寸、描边不统一、不成规范。

视觉风格与windows主流风格不统一（例如：弹窗等）。

交互（见下图）：

用户痛点：选择切换日期功能发现性差，使用不方便。

功能叠加，框架拓展性不足。

交互行为与windows人机规范不统一。

技术：

用户痛点：教室页面网络设备有卡顿，上课体验不流畅--反馈给技术团队跟进优化。

是不是挺“压抑”的？所以这次我决定为轻轻课堂“减负”，同时提炼明确了“再设计”的关键词：

【思考】差异化设计，首先要明确“为谁设计？”

数据显示，上课学生以小学居多，所以学生端“情感化”“上课互动性”成为了重要的一环。但对于老师则需要提供更专业的服务。

三.探索设计方案

第一次尝试：

如何为孩子、老师“减负”呢？我进行了以下优化：

1. 按钮、浮层从直角变成大圆角--感官不再“尖锐”。

2.图标样式统一--让视觉更规范。

3.以白色为主色调，轻轻绿为辅助色。去掉大面积的深灰--整体视觉更“轻”。

4.减少不必要的分割线--减少“噪音”。

5.日期在课程列表页露出（以周的维度展示）--方便老师高效选择、查看课程。

经过一周，第一版方案完成。与产品经理的评审后得到一致认可（尽然还有掌声...WTF），一切进展很顺利。

再深挖，还可以更“彻底”一点：

视觉上的确清爽了不少，但结果过于容易反而会引起了我的警惕。我隐隐地感觉这次“再设计”还只是停留在表现层（分层渐进法），只完成“好看”而没有达到“好用”，而“好用”才是产品的核心价值。其次，我把视觉稿投放在windows电脑上，发现过于惨白，似乎缺少了一点“力气”。辗转难眠了几晚后（瞎说的），我决定再深挖一点，还可以更“彻底”一点。

第二次尝试（plus版）：

在第一版的基础上，这次我打算更深入一点：

1.从痛点出发设计：展示月视图，老师、学生查看课程更方便。

之前的用户访谈中，有不少老师和助教向我们反馈“选择切换日期功能发现性差，不方便。”

虽然在新的一版中有意识的把日期露出，但仅仅是周的维度。是不是最好的解决方案？

1.看看“同行”们是怎么做的：在体验“掌门一对一”、“直播云”、“翼欧教育”等竞品后，我发现他们提供月视图给到老师或者学生选择时间。

2.通过“四个象限法则”，我发现选择课程对家长和老师都属于“既紧急又重要”的事情，优先级很高。月比周可以选择的空间更大，更利于用户快速的查看。

3.业务层面上，我们很多学生和老师都是从“直播云”过来的，延用他的操作方式也能降低了用户的学习成本。

所以，月视图的展示方式是很有必要的。

2.学生端科目图标化，学生选择更直观。

第一：从用户角度进入场景，学生希望能迅速找到他想要找寻的课程，科目成为一个重要的维度能帮助学生快速的定位。

第二：从设计角度出发，科目图标化能使得界面更“活泼”，与学生端气质相符合。

问：老师端为何不科目图标化呢？

答：考虑到老师授课科目单一，比如语文老师一般不会再去授课数学或其他科目，所以科目图标化没有必要。

3.差异化设计：学生、老师定义不同色彩，“色胆”更大。

【思考】从用户角度出发：设计师使用的苹果电脑显示器色泽光亮、饱和度、分辨率高。而家用的windows分辨率普遍偏低。导致的问题是在苹果电脑上看着好好的，到了实际的windows电脑上则偏色、暗沉、发灰。这是一件棘手的事情，他们之间必须找到一个平衡点。

首先，主色系的选用相对比较简单，延用了轻轻APP中学生端【绿】、老师端【蓝】，但是在饱和度上我有意识的提高(见下图)。其次；在渐变色上使用更大胆一点。采用大色块、高饱和度，高纯度的色彩。一切都是为了保障在windows电脑上的完美呈现。

4.扁而不平，层级更明显。

在对比参考了Google 的MD、苹果的IOS、微软的FDS后，我认为MD的视觉风格更适合【轻轻课堂】。

【思考】主要操作按钮（上下渐变、微微鼓起）点击感更强，与文案、图标更好的拉开了层次感。在桌面端的设计中，我并不主张全部的“扁平”的设计方式（FDS的设计过于超前导致用户并不习惯）。

5.图标样式统一规范。

问：为什么图标使用直角，而按钮使用大圆角？

答：考虑到大部分windows分辨率较低且图标的尺寸较小（16X16、24X24）。直角导出的效果比圆角（有虚边）更精致。所以图标都采用了直角设计。

6.微交互、情感化设计，点赞等增强了产品的趣味性。

7.遵循windows用户习惯，设计更合理。

我仔细体验了windows的桌面端应用发现在弹窗的设计上与苹果IOS的交互方式完全不同。

1.windows：正向操作在左侧（例如确定），负向操作在右（例如取消），与IOS相反。

2.windows：弹窗一般不使用黑色蒙板，与移动端不同。

最终稿：

四.前端评审-上线和反馈

视觉方案的确定后，对于设计师而言工作才刚刚开始。

前端视觉评审-切图与标注-UAT审核与跟进修改-上线后用户反馈和数据追踪，这一系列步骤形成了设计的闭环。

遇到的问题与解决方案：

1.版本周期短，开发资源紧缺。

解决方案：拆分任务、排定优先级、分批上线-协调产品、开发部门给到更多的支持，尽量保证主要功能和优化按时上线。

2.圆角实现有难度且工作量较大。（针对于客户端）

解决方案：沟通-找到对应的开发负责人讨论如何保障实现设计稿中的效果。最终由我切图完 成，减轻开发人员的负担。

3.设计师切图工作量巨大。(像素化的切图)

解决方案：沟通-把冗余重复的按钮、文案切图由开发(客户端)转为代码实现，大大降级设计人力的成本。

上线后的反馈：

五.总结与反思

“在产品设计中，好用、好看之间，好用永远都是第一位的。我们的原则是“保证好用，努力好看”

--参与感（小米）

这也是我的设计准则。

何不点个赞呢？谢谢侬。