引言
在6月24日这天，我们的改版项目终于上线了。其实这不是第一次推动改版项目，之前都因为种种原因让项目被扼杀在摇篮里。虽然没有成功上线，但是从之前的飞机稿中都积累了很多好的设计点和方向，给我们这次的改版提供了丰富的数据和实践支撑。
▲改版历史
所以这次的改版并不是一蹴而就，而是经过长时间的探索和多次验证的结果。肩负着几波设计师的期望，我们立志这次“学生端改版死活也要上”。
▲消息列表中的一个神秘组织
接下来我会让大家了解我们本次改版的设计思路，还有在项目协作过程中与开发小哥哥们的“爱恨情仇”。
一、项目背景
随着公司业务上的改变，我们的目标用户群体从主低龄（1-3年级）逐渐往小、初、高过渡，在收集到的用户反馈中高年级（4年级及以上）学生普遍认为现在的界面太过低幼。为了权衡不同年龄段用户的视觉体验，我们需要对现有的界面做一次调整。
同时随着业务线不断的扩充，原有的首页框架已不能承载现有的产品定位和新的使命。所以无论是从业务层还是视觉层上来说，本次的升级都势在必行。
二、历史问题梳理
▲现有问题展示
空间利用率低
1.原有首页的功能框架和布局拓展性较弱，无法满足不断扩充的业务需求。
2.个人中心页面中，头部不重要的内容占比较高，下方重要功能在首屏区域曝光较少，阅读效率较低。
统一性低
1.首页中的作业卡片信息及色彩混乱，语文学科主色调与色彩情绪相违背。
2.一起小学线上的APP历经几代设计师更迭，视觉统一性较差。例如：titlebar样式就已经不少于六种。
品牌性弱
1.线上界面里的品牌IP形象（塔克家族）有多种类型，不利于品牌的识别和记忆。引起品牌认知混乱。
2.随着新的IP形象托比兔的诞生，各端进行恰当的植入，提升品牌一致性，帮助IP更快的传播和认知。
与设计趋势脱节
原App界面整体风格偏低龄且稍显繁复，与现在的产品定位不太契合。拟物的设计风格成本较高，不利于设计后续拓展。
三、设计目标
对于小学阶段的孩子来说，太多的吸引点会分散他们的注意力，为了孩子把注意力更多地停留在内容上，设计上需要做减法。但孩子们天性中的好奇心加强了他们对趣味性产品的热爱，所以这次改版的设计目标是：降低学生视觉负担，围绕内容进行体验升级。在去低龄化的同时，依然要保留趣味性。
▲设计目标
四、对应设计策略梳理
根据对历史问题的梳理和设计目标的明确，我们希望能够先在尽量保持现有用户使用习惯的前提下，进行一系列的设计探索和尝试。
优化信息布局
01.首页的信息布局重组
?灵活的模块化组合式布局：通过模块化叠堆组合的布局方式对首页信息框架进行了重新搭建，让页面内容布局更灵活，以此来满足不断扩充的业务需求。
?“破形”式卡片设计：选用了卡片式设计方式展现作业信息。随着ios11/12的发展，卡片式的设计表达已经成为一种默认的趋势。以块状形式整合内容，让内容更规整化。但是为了让卡片模块层级更明显，采用了“破形”式设计手法增大主元素的视觉冲击力，同时给卡片增强了弥散投影来区分不同纬度内容，这样可以降低获取信息的视觉压力，提高阅读效率和愉悦感。
▲首页框架展示
02.个人中心信息布局重组
?精简界面信息：对头部信息进行了删减，并对剩余信息进行了重新布局，从占用页面1/2缩减到1/5。同时采用了更大的间距留白以保证头饰的展示。
?增强对比：对于孩子来说，头像和头饰是非常具有吸引力的，同时这两样元素相对比较花哨，所以整体背景采用了白色作为底色，以此突出重要的信息。
?内容识别性：对于孩子来说图标的识别性要大于文字，所以列表信息的部分我们都加入了彩色icon，从而提高操作效率。
▲布局优化前后对比
提高界面统一性
01.色彩情绪
我们调整了语文学科的用色。语文是中华文化的传承，红色是中国传统文化中最具代表性的色彩。之前紫色缺少了一定的文化氛围。
▲语文作业样式对比
02.统一又灵活的title
我们根据不同的页面属性，定制了两种titlebar样式规范。
通过梳理发现之前有不少于六种的样式，而且老师、学生、家长三端中有部分页面是互相调用的。多种titlebar样式会导致页面违和感较强，前端同学在实现过程中也需要写多种样式，设计效率和开发效率都比较低。
所以我们根据深色背景和浅色背景设计了两套样式，方便不同场景的调用。
▲Title规范
新品牌IP基因的融入
在作业卡片、插图、loading、特殊状态页中我们融入了新IP元素-托比兔。随着全新IP“托比兔”的诞生，学生端也要植入“托比兔”形象来帮助新IP更快的传播。
我们希望托比的使用可以有效的向用户传递感受、表达感情。例如在作业卡片中，把学科元素和托比兔结合，又添加了一些微动效。我们想用这种趣味化的呈现形式，降低学生的压力感。
▲IP在界面中的运用
化繁为简
01.拟物到扁平
我们把界面统一成了扁平的设计风格。随着iOS11的发展趋势，我们可以清晰的看到，扁平化设计可以使得用户操作起来更加简洁、高效和舒适，帮助用户减轻认知负担，降低寻找信息时的脑力消耗，这也与我们重内容的设计目标相契合。而拟物风格除了视觉上稍显低龄和繁复，同时设计成本也相对较高，也不利于后续拓展。
▲新旧风格对比
02.丰富有依据的色彩
每个科目都有自己的性格和气质，对于每个学科该选择哪种色相和色调，我们通过色彩情绪和情绪板两种设计方法进行了探索和尝试
?情绪板：通过情绪板可以看出，缤纷明亮的色调有健康、积极、开放等属性，常用于儿童相关的主题。“儿童对颜色的感觉会先于其他审美感觉的发展，其他的都不会像鲜明丰富的色彩一样，会引起他们强烈的情绪”。
▲色彩情绪板
03.圆润有趣的图标
?图标视觉层次：面形(强)线面结合(中)线性(弱)，在金刚区的选择上我们采用了视觉层次强烈的面形图标
▲金刚区icon
?有安全感的图标：在保证图标识别性的同时，我们尽量让它们看起来圆润、饱满。通过情绪板能够判断出儿童产品的色调倾向，其实同时也可以看出，儿童产品的边角往往是圆润的，给孩子们安全稳定的舒适的感觉。
▲功能icon
▲线性icon
04.文字
?字体：基于儿童产品安全、可爱的设计原则，我们选择了方正兰亭圆体，这款字体中宫放松、字母圆润饱满，起笔、收笔和折笔处呈圆形，弧度优美，非常贴合我们的产品特性
▲字体展示
?字号：为了保护孩子的视力，我们拉大了字体大小的梯度，提升了文字的清楚度和可读性
▲字体对比演示
趣味化的延续
在作业卡片和底部tab栏中都加入了微动效。旧版本拟物风格在趣味化的视觉体现上是很到位的，也受到了孩子们的一度好评，所以我们在进行新版本的改版时我们遵循了为儿童设计的趣味性原则，保留了界面的趣味性。
▲作业卡片动效演示
▲底部Tabbar动效演示
五、项目推进过程中的一点心得
这次的改版是一个设计反推的项目，需要设计同学作为中心去协调产品、开发、测试童鞋们一起顺利完成项目，所以对我们来说也是一个非常大的挑战。出现问题并不可怕，运用一些合理的方式和方法就可以帮助我们顺利解决问题。我梳理出了以下几个对项目推进有帮助的小技巧供大家参考。
如何高效开会？
01.会前排雷式沟通
在需求沟通会议前和相关开发同学进行一次排雷式沟通，让开发同学提前了解我们要做的需求，获得他们的支持。这样可以有效避免在会议上被怼的现象。也可以有效的节约会议时间（大家的时间都很宝贵）。
02.会议纪要（责任到人）
会议纪要的每一条后面加上相关责任人，一是为了防止会议后的遗忘，二是为了提高协作效率，我们只用重点