在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.会议纪要（责任到人）
▲会议记录打样
如何防止项目延期？
01.制定需求分工表
▲需求分工表
02.懂得取舍
项目协作中的沟通技巧
这次改版涉及多条业务线，我们需要同时与9位开发同学协作完成，所以如何与多业务线同学高效、有效的沟通是我们面临的巨大挑战。以下是和开发小哥哥们斗智斗勇后总结出的几点良策。
01.当面沟通（文案记录）
02.以解决问题为目标
在项目进行过程中肯定会出现带有情绪的争辩，比如互相甩锅。这个时候需要以解决问题为目标，减少无意义的争辩。
03.恰到好处的称赞
我们可以借用一些有亲和力的表情包来夸赞一起共事的小伙伴们。
▲日常夸赞
04.直击灵魂的“质问”
设计还原度低的问题是每个设计师都面临的问题。在这次改版项目中前端实现分为iOS和安卓，我们会拿着还原度较好的一方到另一方面前“对比炫耀”，并且还会丢下一句话：“你的良心不会痛嘛”。后续你就会看到令人满意的界面。（亲测有效）
05.美食的诱惑
在经历一周的走查文档洗礼后，开发小哥哥们一定是身心俱疲，所以需要给他们提供继续前进的能源。我不信有谁能拒绝提着大包零食的萌妹提出的优化需求。（终于理解程序员鼓励师这个岗位存在重要性）
06.杀手锏
如果用以上多种方法还不能良好的沟通，那就只能使出杀手锏——来自小黄鸭的威胁。
▲据说开发小哥哥们对小黄鸭有特殊情结
六、展望未来
我们也通过这次升级，对于儿童类产品的设计有了更深层次的理解，后续还会在“让学习成为美好体验"这条道路上继续探索。