UIUX 

AKso健身小程序

2022 客户需要一款健身约私教课的C2C同城LBS服务小程序，有私教约课发布课程、购物社交、体重记录等几大功能。
在客户提供不完整样稿的情况下，独立完成产品原型和高保真设计，面向新一代年轻人的审美，构建设计系统、视觉交互及组件库规范。

重新设计导航栏，
明确基于同城LBS的产品核心

在原型基础上加入定位系统，同时找私教约课和购物商城是本产品最主要功能，在导航栏设置入口方便用户高频操作。
教练列表应该是教练信息的展示，经过内容梳理，在列表中加入了约课单价和社交属性的内容，以便用户直观了解教练。

组织信息，定义筛选内容

以用户利益最相关的教练信息来组织筛选内容，第一栏为排序规则包含地理、价格、社交信息，第二栏为教练的个人信息，第三栏为教练发布的课程信息。

围绕核心功能定义搜索

教练和商品分类呈现搜索结果更加清晰和聚焦。

围绕核心功能进行整合和定义

私教约课和购物商城是本产品最主要功能，都涉及到地理位置。需求方通过当前定位查找该定位附近的教练，供给方通过设置营业定位来匹配用户的筛选。同时用户购物也需要收货地址的设置，把它们整合在一起，便于用户记忆和查找。

贴合当下年轻人审美需求

整体视觉设计风格贴合当下年轻人审美需求，清新简洁明确。

定义用户角色

C2C平台涉及到用户角色的定义，一端用户是需求端，一端用户是供给端，在该小程序里我们定义两者角色不是从注册就需要进行角色选择，而是都以需求端的视角进入小程序，即是每一个用户都是自由人身份，可以在任何时候点击【我的】页的【成为教练】，认证后转换成教练角色，认证后会有认证标识以示区别。

在我的课程，需求端是查看已约课程以及编辑约课，供给端是编辑课程及约课。在个人主页只有供给端有个人主页，包含个人信息、社交信息、课程内容及评论四部分。供给端访问自己的个人主页可以发布和编辑课程，需求端访问个人主页可以进行关注和获取微信联系方式。

定义用户角色

点击个人主页的课程进入详情，需求端可以预定课程，供给端可以编辑约课。
把约课日程分三种状态：空白、不可约、已约。空白代表还没有任何设置。不可约代表供给端锁定了该时间段为不可约，已约代表需求端已约课程。
在空白时段，供给端可以锁定时间为不可约，需求端可以预约；在不可约时段，供给端可以取消锁定，在已约时段，供给端可以取消约课，并能看到全部已约人的头像，需求端只能看到自己头像，需求端只能约课，要取消需要通过供给端取消。

贴合当下年轻人审美需求

整体视觉设计风格贴合当下年轻人审美需求，清新简洁明确。

B端组件表单

表单基于布局栅格系统一行4列。初始尺寸为Col-6宽。

B端组件日期选择器和日历

表单基于布局栅格系统一行4列。初始尺寸为Col-6宽。

B端组件表格

表格单位格的基础网格为50px，初始尺寸为150px，一行8列。根据实际内容和列数需求，调整单位格的长度，尺寸以50px递增递减。已有业务已设置好单位格的长度。

移动端六栅格系统 | 网页端二十四栅格系统

网格使用 8 为基本单位。每一个组件都应该遵循始终对齐网格系统的标准且每个空间和尺寸都需要为8的倍数，包括Icon、字体行高、Padding、Margin等。常用Padding、Margin数字为4、8、16、20、24、32。

前台系统采用375做为初始尺寸。右图 n 为 8px，在375px尺寸下Margin和Padding为2n，在360px尺寸下Margin为1n，Padding为2n。Col-1等于44px。

后台系统采用1440做为初始尺寸。下图 n 为 8px，在1440px尺寸下Margin为2n，Padding为3n，内容区1200px，Col-1约等于35px。在1336px尺寸下，Margin为2n，Padding为3n，内容区1096px，Col-1约等于30px。在1280px尺寸下，Margin为2n，Padding为2n，内容区1056px，Col-1约等于28px。

System

Primary主色代表产品主题核心色彩，Neutral/Foundation中性色代表文字、背景、状态用色，Secondary辅色为功能语义色。Gray-9 #272F44=Black=Text-Primary。Text-Secondary＝Gray-5 #ADB9C8。

下一项目

Contact

aimechan223@gmail.com
aime321
浙ICP备2022022732号-1