作业帮APP13.0-品牌结合需求的全新设计体验

10 月 5, 2020 发表于: 用户体验. 评论

Sponsor

前言：作业帮作为在线教育的引领者，是中国用户规模最大的K12在线教育平台。携手权威机构，致力教育普惠，与联合国、北师大、全国妇联等机构合作，提供优质教育资源服务。其核心是产品和服务品质。作业帮APP13.0在被寄予“让优质教育触手可及”的期许，旨在打造用户喜爱的超级APP。那么我们将走进第一人称角度来看看这个版本究竟是怎么做到的。

一、我们为什么做

1. 丰富学习场景-从工具到 Super APP

作业帮APP的拍照搜题功能是用户最刚性的需求，我们在不断打磨体验细节的同时，持续优化直播课、练习、问答VIP、商城等业务为用户提供更多的学习价值，旨在从单一的工具属性向丰富的学习Super APP转变。

2. 精准定位行为路径-用户分层

本次产品转型主要的业务目标就是，通过学习Super APP搭建，进行用户分层，找到用户在解决当下问题的同时，还有哪些学习诉求，从而提供精准的学习服务，促进用户筛选多次触达，提升教育流量价值，强化学习平台属性，解决用户的更多学习需求。

3. 视觉风格陈旧

从历史版本可以看出，作业帮过往的设计风格比较陈旧，没有体现出教育产品的属性和自身的品牌感，一致性也比较差，不符合当前的设计趋势。基于此，平台设计部推动重新定义视觉风格，以此开始，逐步打磨体验细节。

二、我们怎么做

1. 设计目标的建立

作业帮平台从“学习工具”转型为“学习Super APP”, 对于接收层的用户，能享受到什么样的学习服务？设计在业务环境中起到什么样的作用？

在设计策略方向通过梳理内容层、整理多层级平台诉求、以及寻找用户的价值点、分析接收层角色特质及内容倾向、基于内容层+接收层、确定设计策略、探索设计规则、明确风格调性、匹配用户预期、塑造用户感知。

2. 为用户提供更丰富的学习内容

新首页整体框架通过视觉层面进行净化，保持拍搜核心功能的视觉聚焦外，更多外化学习内容，采用模块化处理，聚焦用户学习价值，降低视觉干扰，提升首页流量转化效能，打造学习Super APP服务基础。

个人中心作为个人管理界面，承载着不同业务、不同用户、不同阶段的内容，所以业务结构清晰，划分明确，让用户快速触达所需项是本次改版的核心点。在本次新版中，重新梳理整合，并确定页面的业务层级结构；分为五块区域：VIP会员区、直播课购课区、基础工具区、商城区、其它。优化并解决旧版业务结构复杂、层级混淆、划分不明确等问题，提升用户各业务侧统一管理及跨业务无障碍操作，增强个人中心氛围，支持运营活动扩展。

2. 视觉容器的升级

对首页、个人中心等重要页面进行了优化调整。将通栏的页面布局改为卡片式，并优化了页边距、卡片模块间距、圆角等，均采用8的倍数增加页面布局的灵活性及韵律感；模块划分更加清晰、提升阅读效率。

三、全新设计语言的建立

1. 视觉关键词定义

结合上文的用户分层、产品定位、业务目标以及用户的使用场景，我们梳理出符合产品定位、业务目标并能达到用户心智预期的五个关键词：品质、活力、信任、专业、包容。

2. 情绪版

基于视觉关键词输出情绪板，通过关键词搜寻符合设计感受的图片，传达出APP给用户的整体直观感受，确定产品调性。

3. 品牌色的重新定义

色彩是品牌给用户的第一印象，产品设计中也承担了一定的功能属性。基于线上APP品牌蓝色与白色搭配时不能达到 WCAG 无障碍设计的AA标准，对比度低，通用性存在使用问题，针对这些问题我们进行了色彩的优化升级。

4. 字体大小&颜色

为了让文字信息排列的层次和权重清晰有序，参考《字体排印风格要素 The Elements of Typographic Style 》字体大小有一定韵律变化如同音阶，结合系统均采用2的倍数为栅格系统，经界面中测试，字号以2为基本进制单位。简化字重保持整体的统一性，限制设计中的字重使用，在Regular/Medium字重中选择，在视觉展现上能够用尽量少的样式去实现设计目的，避免一个页面使用多字重强调视觉重点或对比关系。

5. 图标：品牌升级，个性且统一

根据UI界面改版风格关键词：品质、活力、信任、专业、包容，提取图形风格方向，进行表现层的多角度尝试，最终通过用户、业务、体验三个纬度确定风格特征及具体表现手法，提取共同DNA进行多场景图标验证，打磨细节。

5.1 面性icon · 平台属性图标

基于学习工具基础元素进行设计拆解，利用较高的象征性图像，营造轻松、活泼的学习氛围，进行高效的信息传递。从业务诉求、用户诉求和体验诉求三个纬度进行面性icon的抽象和写实风格尝试，再以平台可拓展属性进行明确定位，最终打造具有业务属性并满足用户场景和体验的图标风格。

5.2 面性icon · 业务属性图标

作业帮商城之前的图标风格过于抽象，图标识别性较差，新版尝试C4D实物立体化设计，加强业务属性，给用户直观的商品展示感受，降低认知，提升体验，增强用户购买欲望。

5.3 线性icon探索-像素至上

确保表达基本图标特征的基础上，设计以简约、友好、趣味性为设计目标，利用图标网格为图形辅助元素，打造一致性设计外观和灵活定位的设计规则，因用户为K12人群，聚集性差，注意力容易被分散，线性图标表达上，基于聚集VS分散，活泼VS冷静为维度进行设计定位，明确聚集、活泼的设计感知。

6. 基础框架模块

拍搜工具图形以作业帮LOGO学习便签纸为设计原型进行结合，突出拍照搜题和口算批改的核心表意。背景图形为学生读书场景，以书为基础元素进行设计提取，表达在线教育的高效、便捷，奠定学习Super APP的教育品牌调性。

底部bar图形将“+、-、x、÷”学习基础元素与业务进行巧妙结合，通过动效在切换时展示，首页“+”代表学习内容的不断获取，直播课“-”代表线上课程进行时，练习“x”代表练习时的对错场景，我的“÷”代表人与人关系的互动。增加学习趣味性的同时，时刻对用户传达学习属性和学习品牌认知。

结合学习内容、练习场景，通过学习属性插画，建立平台与用户互动，塑造用户品牌感知。在情感化插图的绘制上，搭建有份量、有意味的学习场景，增强与用户之间的互动感，更高效的进行信息传递。 组件配色同样从品牌色提取主色和辅色，进一步诠释品牌统一性。将组件整理拆分为人物层、元素层、场景层，这三层的元素可以像堆积木一样，根据业务需要随意组合搭配，提高了组件复用率和灵活性，从而提升了团队的整体效率。