作业帮 | 百分运动app的诞生之设计体验探索

可在下方链接中关注原账号原文链接：https://mp.weixin.qq.com/s/6xJ3G-oy2MhtxtW0LimZyg工具流量设计团队 作业帮UXC 2022-10-26 12:12 发表于北京前言随着体育在义务教育阶段的权重加大，越来越多的学生开始重视体育锻炼。在新时代的运动场…

前言
随着体育在义务教育阶段的权重加大，越来越多的学生开始重视体育锻炼。在新时代的运动场景下，怎样满足用户科学且快乐的运动是我们要思考的，需要探索全新的运动新体验，将好玩和好用充分结合，发掘新的运动方式和创新的交互体验，刷新用户对体育锻炼的认知。设计师从用户的视角剖析运动需求的本质，满足用户不同阶段的诉求，本文将带你了解设计师怎样对学生运动场景探索与尝试的过程中发挥自己的价值。

产品定位及目标用户群体
百分运动是一款全新的运动产品，以体测为切入点，逐步扩展其他体测项目和体感运动游戏，打造一款激励学生体育锻炼的产品，让用户科学的运动起来，结合前沿的AI识别计数，捕捉用户的运动轨迹，实时计数计时，及时纠正指导，帮助用户提升身体素质并获得更好的体育成绩。

目标地域为1-3线城市、城镇区域；目标用户为K12青少年体育培训班/训练队的学员、家长和教练。

专业可靠的内容服务
专业的一级运动员和从教多年的体育教研老师，对运动内容、训练计划进行科学、专业、准确的拆解和教学；让学生准确、高效的练对练好。

一、品牌设计

品牌搭建目标
从各个维度出发，给用户传达浑然一体的品牌感受，运用专业有效的交互体验、视觉体验、情感体验，帮助用户养成体育锻炼习惯。因此，我们从品牌识别和功能传达层面进行渗透，并形成系统的品牌延伸。

情绪版
此产品的用户主要是K12的青少年学生，我们希望以专业的功能和有趣的体验为用户提供服务支持；结合产品的运动属性，品牌要传达活力满满，动感拼搏的精神。最终确定了百分运动的四个核心关键词：包容、品质、活力、智能

设计语言基因提炼
我们找了大量的运动海报，从中发现具有运动属性的一些共性，颜色上多用橙色、绿色高饱和的颜色，体现运动的积极向上，多用粗线条、倾斜的一些设计传递力量感和运动感。

品牌配色
为了传达活力、品质等产品特点，选用高饱和度橙红、黄绿为主色，并尝试结合深灰色体现力量感。

品牌logo
百分运动的产品名字直观体现了运动的最优结果——100分，这是用户的理想目标。顾名思义，logo的图形设计直观诠释了产品名称，用100分结合跳绳这一主要的运动项目，完成图形创意。自由甩动的绳子、醒目的橙色使logo看起来放松且富有运动感。

品牌字体
品牌字体延续了运动属性，通过对笔画概括精炼的整合加工，文字右下适当做了倒角丰富了细节感知，使字形在韧性干练中又透出些许柔性美感。

二、基础功能体验

首页交互框架结构搭建
在设计探索期，对首页价值设计、信息组合设计进行多方向探索。整体透传运动体测认知，强化1分钟跳绳，让用户快速触达体验产品Aha时刻，形成价值认同，根据不同年级展示不同的体测项目，让用户线上线下达到统一的认知，对百分运动产品信任感。

根据情绪版的关键词提炼字、色、版、质、形的具体设计语言，结合提炼的设计语言基因应用到页面中：

1、版式：活力·专业
针对我们的用户群体特征，整个页面布局留白较多，让内容更聚焦，快速找到目标，浏览更顺畅，页面使用倾斜的一些设计元素，强调品牌传达，让页面更有动感和活力，圆角也比较大，给学生用户传递亲和力的感觉。

2、文字：力量感
通过倾斜、粗体传递运动的活力和力量感

3、颜色：丰富多彩
除了主色调橙色之外，辅助色的配色想给用户呈现一种轻松活力的视觉感受，结合运动，加深用户对百分运动性格的记忆，在配色使用上提升颜色的明度，采用低纯度，高明度的色彩进行使用。

UI页面汇总

趣味运动
结合AI精准的识别技术，计算到用户的摸球个数，通过闯关的玩法激励用户去运动，将游戏和运动相结合，摸球运动提升用户的反应能力，锻炼眼手协调和爆发能力。

三、情感化设计

为什么要设计插画人物？
孩子初来到这个世界，更愿意所见即所得的认识事物，而不是抽象的理解和感知。用有趣可爱的插画人物可以通俗易懂的展示运动项目，可以帮助低幼儿童快速建立产品功能认知。
插画人物目前主要用于端内运动入口封面，主要用途是动作图解，我们选择了能够表达丰富肢体语言的且低成本的轻描线扁平插画风格。

人物五官
上挑的浓眉可以体现出自信、奋斗的决心；大眼睛黑眼球用高光点缀看起来精神抖擞；简化的鼻子和嘴巴体现小巧可爱。五官整体塑造传达了体育运动自信阳光的精神，着重打磨了眼睛和眉毛的细节，为后续运营活动的应用中拓展丰富的情感场景做好铺垫。

服装造型
我们从电商平台调研了海量时下流行的小低年龄段儿童服装，提取其中的款式细节，适当应用到插画人物的服装设计中，使产品在儿童用户使用过程中与之产生共鸣。

人物形体
作为一款运动类工具APP，我们希望能把最专业的动作和形体清晰易懂的展示给用户，所以插画人物的躯干四肢还原了与真实儿童人物相同的肌肉形体特征和躯体动作，使其动作达到真人模特的示范目的，避免插画刻意的抽象变形对用户造成干扰。

趣味道具
应用市场图和APP下载页的设计加入了贴纸道具，配合人物的出场可以增加场景互动性和趣味性。

总结
目前百分运动已经初步完成0～1搭建，以上是百分运动的阶段总结。在竞争激烈的众多同质化运动App中，以独特的内容价值定位和品牌设定，为用户提供更优质的内容与服务体验。设计团队将继续细化拆解业务目标，制定紧密的设计目标和设计策略，配合业务进行设计探索和尝试，设计赋能业务，助力业务达成目标，让用户快乐运动茁壮成长。未来道阻且长，前方浩瀚星光。

感谢各位的观看。