张佳瑶 · UI/UX DESIGNER
HELLOI’MZhang Jiayao
ABOUT ME
让不同尺寸的设备，
都有完整体验
我主要从事智能硬件界面设计，负责手表 OS、配套 App、表盘及设备动效。工作从需求和操作流程开始，延伸到视觉设计、文件交付与开发走查。
工作方式 HOW I WORK
- 01需求梳理Requirement
- 02交互方案Interaction
- 03视觉交付Visual
- 04开发走查Walkthrough
- 05上线迭代Iteration
核心数据 BY THE NUMBERS
- 智能手表 OS
- 配套 App
- 设计系统
- AI 辅助设计
- 动效与三维
CASE STUDIES
精选项目
01 / HONOR 600 SERIES
荣耀 600 系列「魔法小耀屏」
荣耀旗下从 0 到 1 打造的智能穿戴配件，由副屏硬件与手机 App 共同构成。我作为核心 UI 设计师，主导副屏端与 App 端设计，推动项目从概念到落地上市。
项目已上线。本案例展示内容取自公司已公开发布的资料，仅用于说明本人承担的设计工作。
我的职责与贡献
设备端交互设计
围绕圆形副屏的显示区域与操作方式，梳理手势入口、功能菜单及模式切换逻辑，完成六种主要显示模式的界面设计。
App 端流程设计
负责设备连接、首页信息架构与内容上传流程设计，梳理内容选择、编辑、预览至同步显示的跨端操作路径。
视觉规范与内容表达
整理 HONOR Sans CN 字体层级与界面色彩规范；围绕图片、视频、每日心情及个性文字等场景，设计相应的编辑与展示界面。
01 / 核心挑战
466 × 466
圆形小屏交互
针对 466 × 466 圆形显示区域，梳理信息层级与手势路径，明确控制中心、显示模式和功能菜单的入口关系。
01
02
03
02 / 设备端
设备端功能与显示模式
针对圆形副屏的显示特征与手势操作方式，构建设备端交互层级，涵盖主屏、控制中心、功能菜单及六种显示模式。
核心功能
将高频工具聚合在同一入口，减少层级，让用户在小屏上快速找到所需功能。
六种显示模式
点击两侧切换 · 点击中央查看大图
副屏助手 App
围绕设备连接与内容同步，梳理 App 首页入口及关键操作流程。以图片上传为例呈现内容处理与同步步骤，并重点展示每日心情的内容选择与设备端呈现。
01 品牌识别与启动
用简洁、亲和的图形建立产品记忆，并以启动页的蓝色笑脸和轻盈留白延续品牌情绪。
用一个笑脸，把工具属性转化为轻松、友好的产品感受。
- 眼睛圆角矩形呼应图片、视频、文字等多样内容。
- 笑容主曲线传递内容轮播的流动感与愉悦感。
- 连接尾部蓝色渐变暗示 App 与副屏之间的连接通道。
02 首次使用引导
用三步展示产品能做什么：自拍取景、个性化内容，以及副屏上的趣味玩法；最后以明确的「开始」按钮进入首页。
03 首页信息架构
首页把设备、模式、内容入口和核心拍摄操作放在一个视野内，缩短从打开 App 到开始使用的路径。
设备状态
顶部展示副屏形象与蓝牙设备入口，帮助用户确认当前连接对象。
模式选择
静态图、轮播图、每日心情、视频模式、视频轮播、个性文字横向呈现，快速切换内容类型。
任务快捷入口
图片、视频、每日心情、个性文字等常用任务以卡片分组，降低功能查找成本。
相机主操作
底部相机按钮居中显示，方便直接拍摄；首页与「我的」分别用于功能浏览和个人管理。
04 跨端配对 · App 与设备同步协作
App 发起搜索或扫码连接，副屏接收并确认配对请求，两端同时反馈连接进度。每一步都说明当前状态和下一步操作。
发现设备，选择连接方式
App 搜索附近设备，也保留扫码入口；设备端展示配对二维码。
设备授权，App 提示确认
设备端显示配对请求，App 同步说明需要在副屏上确认，避免连接对象不明确。
两端进入配对状态
App 与副屏同步反馈连接进度，让用户明确知道配对正在进行。
05 内容抵达副屏
App 支持上传图片、视频、每日心情与个性文字。图片上传依次经过选图、圆形裁切、传输和结果确认。
图片传输视频传输每日心情个性文字
01 / IMAGE TRANSFER
图片传输 · 从选图到副屏显示
选择照片后调整圆形构图，确认上传；进度与成功反馈让跨端传输清晰可见。
06 每日心情 · 把情绪戴在身边
从不同角色主题中挑选喜欢的表情，把当下的状态变成副屏上的轻松表达。
02 / DAILY MOOD
挑一只工作猫，表达此刻的状态
工作猫包含问候、鼓励、忙碌和疲惫等工作日状态。用户选择表情后先查看圆屏预览，再确认上传。
WORK CAT · EMOTION SET
工作猫表情全集
36 款表情选择
点击两侧切换 · 点击中央查看大图
04 / 视觉规范
字体与色彩规范
界面采用 HONOR Sans CN，通过字号和字重区分标题、正文与辅助信息。副屏使用深色背景突出展示内容，App 使用浅色背景和蓝色操作按钮。
Typography
AaAa
- Regular
- Medium
- SemiBold
- Bold
16HONOR Sans CN · 正文
24HONOR Sans CN · 标题
Color Palette
01屏幕底色
#00000002卡片灰
#33333303交互蓝
≈ #498BFF04功能橙
≈ #F5621905页面背景
#F2F3F606内容表面
#FFFFFF07主要文字
≈ #17171708主操作
≈ #1F6BFF设计全景
从设备端视觉资产，到 App 端交互流程，快速回顾项目的设计范围。
已上线并持续迭代
02 / WATCH OS ECOSYSTEM
智能手表 OS + 配套 App + 表盘生态
ECOSYSTEM OVERVIEW
- 角色
- 主导
- 平台
- 手表端 + App
- 数据
- 15+ 核心模块
500+ 款表盘
负责手表 OS 与配套 App 的界面设计，并参与表盘及动效制作。主要工作包括功能布局、操作流程、视觉规范、切图交付与开发走查。
小屏交互与多端一致性
手表需要在有限的屏幕内显示关键数据，并留出足够的操作空间。较复杂的设置和历史数据查看放在 App 中完成，两端使用一致的功能名称与状态提示。
主要功能
手表端提供健康记录、运动训练与日常工具；配套 App 用于设备设置、数据查看及表盘管理。
手表 OS 核心模块
核心界面采用黑色背景，数值、图表与主要操作优先显示。功能色用于区分健康、运动和日常工具，圆角卡片统一内容分组方式。
以当前位置为中心显示地图，定位与搜索操作放在底部。
用三色圆环区分活动指标，突出当天的完成情况。
突出当前日期与记录状态，将主要记录操作放在下方。
列表显示已设置的闹钟，底部“＋”提供新增入口。
按月排列日期，使用强调色标记当前日期。
城市、当地时间与日出日落信息按主次显示。
用图表与颜色区分睡眠阶段，明细按顺序列出。
运动图标与名称位于中心，开始操作突出显示。
城市与当前温度优先显示，天气状态及温度范围作为补充。
当前测量值使用大字号，历史记录与时间放在下方。
呼吸入口以卡片显示练习时长，名称与时长放在同一区域。
方向与方位信息集中呈现，方便在小屏中快速查看。
配套 App
App 主要用于设备设置、健康记录查看和表盘管理。黑色背景延续手表端风格，玻璃质感卡片区分图表、数据与操作区域。
01 首页
查看完整首页 ↗首页按设备、表盘、设置和功能卡片分区。设备信息位于顶部，设置使用列表，健康记录和内容上传使用独立卡片。
设备信息与表盘入口
设备卡片展示型号、电量、版本与连接信息，提供升级和解除绑定入口。已使用的表盘紧随其后，方便确认当前设备及外观设置。
设置列表与功能卡片
提醒、勿扰和消息推送等功能集中为列表，图标与名称共同区分入口。列表下方用卡片显示经期、天气和健康摘要。
内容上传与底部导航
音乐、照片等内容保留独立入口。底部导航区分“我的手表”、健康与其他工具，当前栏目使用浅色背景标记。
02 健康数据
- 日期选择顶部显示一周日期，选中日期以白色胶囊突出。
- 数据查看先显示图表，再以独立卡片呈现关键数值。
- 项目切换底部功能卡片配合左右箭头切换健康项目。
03 表盘管理
图库用于选择表盘，自定义页面用于调整外观与信息内容。预览保持在设置区域上方，方便对照修改结果。
表盘图库
- 自定义表盘置于顶部，附带预览与主题说明。
- 不同壁纸以横向预览分组，便于比较外观。
自定义设置
- 添加背景与颜色选择用于调整表盘外观。
- 文字颜色、时间位置、上方及下方功能分别设置。
- “保存”放在右上角，作为修改后的确认操作。
表盘设计库
累计完成 500+ 款表盘，包含数字、指针、机械和图形主题，并适配方形、圆形及不同分辨率的屏幕。
500+
让时间，有不同的表达。
动效设计
呼吸动画提示吸气与呼气节奏，语音加载和排水动画显示功能正在运行。运动图标用简短的循环动作区分训练类型。
交互动效与运动图标 3 个动效 · 10 个运动图标
智能手表设计系统
以 410 × 502 px 画布整理字体、色彩与间距，交互控件参考 Apple Watch 的组件形式。
410 × 502方形画布基准APPLE WATCH · PINGFANG SC
01 / FOUNDATION
色彩系统
COLOR PALETTE品牌主色
主色
#0A84FF暗色
#0060DF亮色
#64D2FF语义色
成功
#30D158警告
#FFD60A错误
#FF453A信息
#0A84FF背景与文字
主背景
#000000次级背景
#1C1C1E卡片背景
#2C2C2E主要文字
#F5F5F7次要文字
#AEAEB2禁用文字
#63636602 / FOUNDATION
字体系统
PingFang SC文字说明
标题 · Title
18 pt · Semibold · 24 pt 行高文字说明
小标题 · Headline
16 pt · Semibold · 22 pt 行高文字说明
正文 · Body
16 pt · Regular · 22 pt 行高文字说明
辅助文字 · Caption
14 pt · Regular · 20 pt 行高四个层级使用相同文字，便于比较字号与字重；辅助文字用于时间、状态等次要信息。
03 / FOUNDATION
间距与栅格
410 × 502 CANVAS安全内容区
表冠避让基础间距8 pt
内容内边距16 pt
边缘处理安全区避让
以 8 pt 为基础单位；内容保持 16 pt 内边距，并避开圆角与表冠区域。
04 / COMPONENT MODULE
手表 OS 组件
围绕单手触控与快速确认组织操作。
按钮
BUTTONS主操作突出显示；备选与破坏性操作降低视觉权重。
开关与选择器
STATEFUL CONTROL关闭
开启
1516:3017
开关放在列表语境中；日期与时间等连续值使用滚轮选择。
已上线，持续迭代
15+核心模块
500+款表盘上线
90%+核心页面还原度
项目已上线，后续配合开发检查界面还原，并跟进功能与内容更新。
WATCH FACE ECOSYSTEM
表盘设计
500+ 款表盘 · 方圆 / 多分辨率 · 静态 / 动态
累计完成 500+ 款表盘设计，涵盖数字、指针、机械与图形主题。
时间显示是表盘的主要信息。日期、电量、天气等内容按主题调整位置与数量，同时检查方形和圆形屏幕的边缘裁切。
- 500+ 款
- 方圆适配
- 静态动态
- 组件化
表盘墙总览
部分表盘作品，包含不同的时间布局、配色与背景主题。
TIME, IN EVERY FORM
每一面，都有自己的时间。
浏览全部表盘 ↗
圆形表盘
7 款设计围绕圆心安排指针、刻度与信息区，文字和数字避开屏幕边缘。
方形表盘
7 款设计 · 410 × 502利用上下区域安排时间与数据，在四角保留间距，避免内容被圆角裁切。
机械动态表盘 · 设计与交付
以齿轮和金属结构为主题，将指针时间、数字时间、日期、电量与天气分区安排。齿轮作为动态背景，文字与图标保留独立显示层。
绘制与分层
先在 Figma 完成表盘布局，分别整理底图、上层边框、齿轮、指针与信息图层。时间保持清晰，装饰元素避开主要读数区域。
制作齿轮动效
将齿轮元素单独导出并导入 AE，设置旋转与循环。齿轮与底图、边框分开，便于调整动作，同时保持与设计稿一致的位置和尺寸。
资源与数据分开交付
动效文件连同静态切图、指针和信息资源一并交付。时间、日期、电量及天气由开发分别接入数据，避免把实时信息固定在动画中。
交付文件拆分
- 静态结构
- 底图、上层边框
- 动态资源
- 齿轮动效、齿轮动效文件夹
- 时间显示
- 时间数字、指针
- 日期显示
- 日历数字、日期数字、星期、月份
- 状态信息
- 电量数字、电量图标、天气图标
- 效果核对
- 完整表盘示例图
按静态结构、动画与实时信息分层，开发可以分别控制播放和数据更新，也便于后续替换图标、数字或背景。
表盘信息与适配
时间保持最高识别度，日期、健康、天气和电量作为补充信息。适配时分别调整字号、位置和间距，保留主题特征，并检查数字与图标在不同屏幕上的显示。
- 时间与日期
- 健康数据
- 天气与电量
交付与协作
按设备分辨率整理切图、动效与预览图，向开发说明各资源的位置和显示关系。开发接入后，对照设计稿检查时间、数据、图标及动画表现。
MOTION & CHARACTER
动态视觉
开机动画 · 小屏交互动效 · 动态 Emoji · IP 设计
让像素动起来，让硬件有性格。
- 4 组开机动画
- 5+ 类小屏动效
- 40+ 动态表情
- 3 组 IP
开机动画
完成 4 组开机动画，根据设备分辨率调整画面尺寸，并按开发要求输出播放文件。
小屏交互动效
呼吸动画提示操作节奏，语音加载与排水动画反馈运行状态。画面集中在屏幕中心，使用短循环适配设备端播放。
动态 Emoji
2D 表情 36
3D 表情 12
工作猫采用 2D 表现，社畜马采用 3D 表现。通过表情、动作与短句表达问候、鼓励和疲惫等日常状态，用于设备端的每日心情。
IP 设计
2D IP
工作猫
以办公室日常为主题，用夸张表情和简短文案表现工作中的不同状态。
3D IP
社畜马
以立体角色配合谐音短句，制作问候、祝福与职场主题的动态表情。
E-PET
柯基阿福
围绕进食、休息与玩耍设计动作，作为设备端电子宠物的互动内容。
柯基阿福 · 互动动作
柯基阿福包含待机、进食、休息和玩耍等动作。同一角色保持一致的造型与尺寸，便于在不同互动状态之间切换。
交付与协作
使用 After Effects 制作动效，按设备尺寸和播放要求输出文件。交付包含 PNG 序列图、MP4、AVI、GIF，并向开发说明播放顺序与循环方式。
- PNG 序列图
- MP4
- AVI
- GIF
CONTACT