项目概况
岗位 交互设计实习
工具 Figma
时间 5个月
实习公司 小米
实习部门 可穿戴产品
产品发布 Q1 2022
Intern Project | 2021
Fitness Watch
UX/UI Design
*项目介绍
以下是我在小米实习期间产出的交互方案。主要负责小米可穿戴产品S1智能手表，在用户体验上的升级优化。
通过分析用户画像，日常需求，竞品调研，A/B测试等方法，深挖用户使用场景，与产品经理配合完善UX/UI设计方案。
* 这个项目体现了我 “追求细节”、“注重用户感官体验”、以及“灵活拆解需求“ 的工作能力 *
Xiaomi Watch S1 model released in Q1 2022.
It's a smart fitness watch containing 30+ Apps. It helps user to maintain a healthy lifestyle while keeping track on user's fitness data and work out tendency.
*小米智能手表S1已发布，它拥有30多个生活类App，旨在帮助用户维持良好的健康作息和生活习惯。
My Goal
I'm responsible to refine some of the user flow and interface of Apps and list out possible improvements in the UX system.
我参与了交互体验和视觉界面的优化升级。
在App内容上，我们梳理了包括
1. 健康类App的页面表现形式，2. 运动类App的分层架构设计，3. 小工具App的竞品分析对比，4. 设置类App的交互路径优化等。
在系统设计上，我们设想
1. 打通多端平台的交互方式和视觉风格，2. 通过更新多语言页面规则扩充包容性，3. 建立属于小米可穿戴产品的按键和图标规范，4. 探索更多手表软硬件之间的交互协同等。
How did I approach the task
01 | Competitor Research
02 | Analyze Existing Functions
03 | Layout Potential Changes
04 | Wireframes & Prototypes
05 | AB Testing & User Testing
06 | Multi-team Collaboration
*我的工作内容包括
01. 竞对研究; 02. 现有功能盘点分析; 03. 页面布局升级; 04. 原型图绘制；05. AB 测试和用户测试；06. 多团队协作
Task 01
Health App
Interface Revision
One of my major task was to revise the Health Apps.
In this task, I examine the previous model and aimed to enhance formating & layouts and user interaction. Apps that I revised include Heart Rate, Stress Level, Breathe, and Cycle Tracking.
我的主要任务之一是升级手表上搭载的健康App系列。我参与修改的App包括心率、压力水平、呼吸、和女性健康。
Competitor Research
在此任务中，我做了大量的竞对研究，分析华为、苹果、Fitbit、Garmin等品牌在健康App中的页面设计和交互逻辑。
在完成竞对研究后，我总结了目前版本存在的问题
1. 图表不合理，重要信息比如峰值不清晰，不易于用户理解。
2. 页面规则不一致，文案标题和结果数据混淆，圆形表盘切掉边角数据，用户无法快速浏览。
3. 文案僵硬不人性化，用户无法感受到正向反馈和智能互动。
4. 时间精度太粗，且时间和健康数值没有单位，容易误导用户质疑数据准确度。
Mockup Comparison
The previous user interaction of Health Apps are designed for square screens, though Xiaomi S1 model is in round shape. The new version was designed just for round screen, with central axisymettric design and clean hierarchy of text.
01. 解决页面规则不一致的问题
此前，小米手表一直模仿苹果做页面文字左对齐的设计，但这与硬件本身的圆形表盘相悖。
在小组讨论时，我首先提出要遵循中心对称的页面设计原则，后来发布的新品也都采纳了这个建议。
中心对称能保证用户在滚动浏览时，所看到的标题内容不被圆形的边角截掉，从而优化视觉体验。
Formating & Layout
Interface Refine
接下来，我们对字体颜色，信息分类形式，图标位置，二级页面入口，等细节进行规范优化。
新版本拥有更清晰的视觉传达体系，让用户能够更直观地理解层级区别，捕获重要数据和标题文字。
Central Axisymmetric System
Important Info Emphasized
Clean & Unified Format
Vertical Scrolling Navigation
02. 解决图表不合理和时间精度的问题
我们和研发团队配合，在数据可视化上进行更新迭代。
我提出提高图表精度，细化时间轴，让用户更好地理解健康数据的峰值和变化趋势。
Interaction with Digital Crown
Numbers Take At One Glance
Visualized Curve and Climax
Improved Graph Accuracy
Wireframes
这是我尝试设计的 心率App 优化方案第一版初稿。
可以看到数据图表中的时间精度调整，重要数据标亮。下方卡片模版更加规范，标题和数据进行字体大小和颜色的有效区分。
易于用户在面积较小的圆形屏幕上识别重要信息，顺利配合其由上而下的阅读模式。
这是小米官网发布的S1 Pro的 心率App 升级，
我的迭代建议和设计理念也出现在最终的产品上。
可以看到团队采纳的建议有：
1. 图表精度提升，峰值数据标亮
2. 时间轴细化，区分时间和数值单位表现形式
3. 中心轴对称格式，贴合圆表设计
4. 标题主次关系突出，弱化部分文字内容
Task 02
Hardware UX
Experiment
When optimizing the Women’s Health App, I tried to better integrate the watch crown into the interactive experience.
Previously, the menstrual calendar was static without any dynamic interaction. During user research, we found that some female users demand a function to check their period prediction for a specific day. This will greatly affect her travel, exercise, or pregnancy plans.
在优化 女性健康App 时，我试图 01. 将硬件表冠更好地融入交互体验，02. 使文案表达更准确，更人性化。
此前，小米和华为手表端的经期日历都是静止的，用户只能看到以平铺日历形式呈现的的周期信息，不能进行任何动态交互。苹果的侧重点在于记录当日经期，而不是查看之后一段时间的经期预测。大部分智能手表并没有重视这项功能，但其实这款功能对女性用户很重要，经期预测将影响到她们的出行、运动、手术、用药、或者备孕计划。
To solve this problem, I designed the period calendar in a circular cycle view, where users can view the period forecast for any day in the next 30 days by rotating the crown. This update assures the user to obtain richer and more necessary information than the initial design.
为了解决这个问题，我将经期日历设计成一个圆形周期视图，用户可以通过旋转表冠查看未来30天的经期预测。代表日期的定位豆会随着表冠的转动而顺时针滑动，屏幕中央的预测信息也会随之改变。这样在同一个页面内，用户通过转动表冠就能获取比原本更丰富更需要的信息。
左侧是团队设计的经期预测的初稿，意图效仿苹果的页面排版。但我觉得这样的优化不利于用户使用。
我们应该探索更多有趣的交互方式，让用户拥有更好的感官体验。
同时，我认为文案表达应该更加准确。原先的文案表达会直接将预测的月经第一天写为“月经第一天”，但这并不尊重女性用户的真实生活情况。文案应该更为人性化，通过智能途径关怀我们的每一位用户。
比较遗憾的是，小米出于技术限制和预算考虑没能够实现这个想法。
但值得一提的是，在我提出这个初步方案半年后，华为手表上线了相似的功能。
Task 03 | OS System
Other Enhancements for Better User Experience
In the process of using the watch model, I made a list which includes interaction details that can be optimized at this stage, and the multi-terminal platform interactions that can be completed in the future. Below are some of the examples.
除了健康App，我们还希望能为用户带来更加人性化的关怀，帮助用户建立更有效的生活节奏，把控愉悦的生活态度。
在使用手表模型的过程中，我们配合产品经理列了一个走查清单，里面包括使用中我们认为有优化空间的手表页面交互方式，和未来可以完成的多端平台交互。我提出的部分设想也成功被采用在后续产品中。
1. 帮助用户有效区分相似信息
比如在运动界面，变换 <当前时间> 的位置，让它和定位豆共享同一空间， 有效区分 <当前时间> 和 <运动时长>。
2. 用户能得到正向反馈
在用户开启一项设置的时候，收到 “xx模式已开启” 或 “xx设备已连接” 的正向回复
3. 更具有包容性的语言系统
我发现原先的页面布局规则对多语言的使用并不友好，词语会被从中间斩断，太长的标题和文字也不能完整显示。我设想通过定义页面内换行、滚动等规则，容纳更多语言系统。
4. 支持多端互联 + 分享运动数据
用户可以将运动记录同步到其他产品端上。
比如，当用户在手表端点击完成运动时，手机端也会弹出提醒，引导用户查看和分享更完整的运动报告。
5. 让用户对阅读时长有心理预期
在手表端增加侧边分屏滚轴，让用户对页面的长度和切换顺序有心理预期。
最终产品采纳了 <运动记录多端联动> 的提案，让用户能够在多端同时监测运动状态。
最终产品也采纳了 <侧边分屏滚轴方案>，使用户对页面长度，屏幕分割，切换顺序等有一定心理预期。
6. 设定健康数据阈值，增加预警机制
比如，当用户所在的地点超过设定的海拔高度时，预警联动血氧App启动，并友善提醒用户监测身体状况。
最终产品上线了 <血氧预警机制>，在血氧低于特定数值时及时预警，保障用户生命安全
7. 多端联动提醒，提高生活效率
比如，当手表在某一时间弹出常用App，手机端也将同步反馈。
比如在进入地铁时自动弹出支付宝交通二维码，或在起床后打开天气或音乐，并在手机端做联动提醒。
最产品推出了 <联动交互方案>，将弹窗配对、勿扰模式、消息通知等在双端同步复刻。
8. 增加更多的数据表现形式
善用圆形表盘的形状和面积，比如百分比，或者饼图。
最终产品汲取了 <动态百分比> 视觉效果，将身体成分数据通过更灵活的视图展示。
我们规划了很多诸如此类的人性化关怀设计，
按App功能分为主框架、运动、健康、设置、小工具等，为优化产品提出更多思路。
Final Product
Xiaomi Watch S1 and S1 Pro has launched in 2022.
Please check the below link if you're interested in the final product.
小米手表S1 和 S1Pro 于2022年发布，以下是官网链接。
尽管由于技术限制，还有很多设想没能实现，但我很开心能看到部分提议最终运用在新产品的迭代中 ;)
Watch S1
Watch S1 Pro
其他项目
