作业帮APP13.0-全新体验设计升级

作为中国用户规模最大的K12在线教育平台,致力于用科技手段助力教育普惠,解决教育领域“痛点”,产品和服务品质是核心。本次全链路体验升级,寄予了我们“让优质教育触手可及”的期许,希望能以更好的体验设计打造这款学生用户喜爱的超级APP。

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

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

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

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

3.视觉风格陈旧

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

1.设计目标的建立

作业帮平台从“学习工具”转型为“学习Super APP”, 对于接收层的用户,能享受到什么样的学习服务?设计在业务环境中起到什么样的作用?在设计策略方向通过梳理内容层,整理多层级平台诉求,以及寻找用户的价值点,分析接收层角色特质及内容倾向,基于内容层+接收层,确定设计策略,探索设计规则,明确风格调性,匹配用户预期,塑造用户感知。

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

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

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

3.视觉容器的升级

对首页、个人中心等重要页面进行了优化调整。将通栏的页面布局改为卡片式,并优化了页边距、卡片模块间距、圆角等,均采用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”代表练习时的对错场景,我的“÷”代表人与人关系的互动。增加学习趣味性的同时,时刻对用户传达学习属性和学习品牌认知。


结合学习内容、练习场景,通过学习属性插画,建立平台与用户互动,塑造用户品牌感知。在情感化插图的绘制上,搭建有份量、有意味的学习场景,增强与用户之间的互动感,更高效的进行信息传递。

组件配色同样从品牌色提取主色和辅色,进一步诠释品牌统一性。将组件整理拆分为人物层、元素层、场景层,这三层的元素可以像堆积木一样,根据业务需要随意组合搭配,提高了组件复用率和灵活性,从而提升了团队的整体效率。




以上便是此次结合业务,从“学习工具”到“学习Super APP”整体体验升级的阶段性记录。在过程中设计侧紧贴业务目标,随时配合业务调整进行设计探索和尝试,并从中寻求设计的突破点,助力业务达成共同目标,为用户提供更高效、更有教育品质的学习服务平台,后续仍需结合数据和用户反馈持续打磨。

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发