项目背景：

虽然已经有web端的教师后台，但大部分教师用户主要通过移动端使用洋葱数学，所以需要在移动端直接提供相应的教师功能，促进教师的转化，从而通过教师带动学生端的增长和活跃。

一.MVP版首页

1.确定整体UI风格

教师端的第一版，时间本身很紧（需要快速搭建出一个MVP的版本），所以UI风格上主要是和「洋葱数学」之前的风格一致，通过颜色（洋葱数学主品牌色，#1696ea），以及一些图标、插画等去体现品牌感，总的UI以“实用”为主。此外这个版本主要是在微信里使用，所以设想的是不要和微信本身的UI差别过大，这样的设计有利于建立用户的信任感。

2.首页UI

确定好基本风格后，首页UI也有了雏形，这时的UI承袭了「洋葱数学」Web端的班级卡片样式，蓝色背景块，白色按钮。

二.首页迭代  

上线一段时间后，第二个迭代很快也来了，班级卡片上增加了一个“学生管理”的功能按钮，这时原先的UI不再能很好的支撑：

同时也考虑到原先一个卡片套一个按钮的样式有点陈旧和累赘，因此考虑换一种形式去展现，主要从以下两点：

1. 更符合移动端的展现和操作

2. 页面整体更轻快、透气

经过一些尝试，最终采用了打通页面的卡片结构，把两个主要功能置于卡片下方，相比之前点击区域更大，更好操作，并且给主要功能都绘制了图标，辅助展示。

期间，也脱离产品PRD进行了一定发挥，给页面增加了头部概览模块，但考虑到开发成本等因素，并未采用。

三.首页改版成索引页

在这个版本，首页结构变成了3个主要功能的索引页，结构较之前变化比较大，同时页面里的信息很少，因此考虑通过运用一些视觉元素，一方面丰富界面，另一方面辅助教师用户理解功能；同时这个版本的页面开始植入到「洋葱数学」APP内，用户可以直接通过APP的底部导航栏访问，因而也需要考虑到和APP内界面的统一。

确定通过视觉元素来丰富页面的思路后，做了几种不同方案：

a. 延续上个版本，线性图标的方案，为丰富视觉效果，增加了头部小场景插画，营造一种教师办公后台的感觉。

b. 每一个功能都配了一个小插画场景，整体视觉效果比较重，和其他页面风格不够一致

c. 彩色图标方案，通过角度的略微转变，也营造了一种小场景的感觉，同时视觉上也没有过重，整体页面干净，以白色为主，和其他子页面白色为主的风格也更一致，最后选取了此方案。

总结： 

1. 功能性页面，应该先以实用和效率为优先，至少需要做到视觉上的舒适：

给信息分组，划分主次，突出重点；

需要注意页面之间的一致性；

以及适当留白，增进理解；

2. 信息比较少的时候，适当的运用插画和图标，一方面使界面更亲切些，另一方面也会有点睛的效果

3. 版面布局上可以有一定的变化，丰富页面的同时也给页面增加了节奏感

其他： 

做方案的时候，尽量尝试更多可能性，脑子里觉得不太可能的方案，也不妨尝试快速做一下，说不定可以给其他方案提供思路或者和其他方案整合。

谢谢阅读～