墨刀双十一 会员低至3.7折 限时加赠 15000 AI积分 立即前往 arrow
墨刀智能穿戴界面设计

墨刀 · 智能手表与手环原型

智能穿戴界面设计

让每次抬腕,
都有清楚的下一步。

把智能手表、手环和配套 App 的想法,做成可点击、可讨论的原型。用墨刀安排小屏布局、复用组件、连接交互,让腕上操作与手机端体验一起成形。

浏览器内设计 · 链接分享评审 · 从空白画布或模板开始

智能手表户外跑步界面与运动保存结果
从跑步中的信息,到结束后的反馈,把体验连成一条线。
01 小屏布局02 组件与状态03 可点击原型04 团队评审

先看任务,再画界面

小屏幕,值得更明确的取舍。

智能穿戴界面设计,是把信息、操作和反馈组织到腕上的有限空间里。它通常需要短时间读懂、少量操作完成;手机上合适的一整页内容,不宜直接缩小后搬到手表上。

01 / 运动记录

跑步时,先看此刻。

运动中突出距离、时长与暂停;结束后再展示摘要。历史趋势、路线详情留到手机端,避免在跑动时翻找长列表。

02 / 日常提醒

一次提醒,一件事情。

说明发生了什么,给出查看、稍后提醒或关闭的明确选择。重要信息不用只靠颜色表达,处理后也要有清楚反馈。

03 / 设备与手机

腕上轻操作,手机看详情。

手表完成快速查看与确认,配套 App 承担设置、记录和详细说明。先分清设备各自的任务,再设计连接与返回。

智能手表 UI 设计

同一条信息,
在不同屏形里重新安排。

先确定目标设备的屏幕形状、尺寸和显示区域,再搭建页面。在墨刀中分别制作圆屏、方屏或窄屏方案;切换屏形时重新检查排布,避免把整张界面等比例压缩。

圆形表盘、方形表盘与窄屏手环的运动信息布局
相同的距离与时长,在圆形、方形和窄屏中采用不同的信息排布。

圆形表盘:检查弧形边缘

主指标保持易读,操作位置按目标平台规范安排。用长标题和最大位数检查圆弧区域,避免文本或按钮被意外裁切。

方形表盘:按任务分组

主指标、辅助信息和操作各有位置。留出圆角与系统区域;一页优先完成一个任务,详情通过后续页面展开。

窄屏手环:减少并列

数字与单位纵向组织,弱化次要信息。列表逐项呈现,重要操作保留易辨认的文字或符号,不靠拥挤小图标猜用途。

触控区域、字体和安全区需按目标设备的平台规范与实机表现确定,不把某一设备的尺寸直接当作所有穿戴产品的标准。

让交互可以体验

开始、暂停、结束,
每一步都有去处。

以户外跑步为例,原型需要表达完整过程:开始后显示运动指标,暂停时保留进度,继续时回到运动中,结束后给出保存反馈。比起几张孤立的界面,这样的方案更容易讨论。

  1. 确定主操作运动中把“暂停”放在容易找到的位置,不和“结束”挤在一起。
  2. 安排返回与恢复暂停后能继续,也能结束;误触高风险操作时,按项目需要增加确认。
  3. 补齐不顺利的情况未保存、同步失败或连接中断时,说明当前记录在哪里,以及用户接下来能做什么。

户外跑步

0.00
公里

准备好后,开始这一程

点击“开始跑步”,体验从运动到保存的完整过程。

交互演示采用固定样例记录,便于比较各状态的信息与操作。

穿戴界面中的运动指标、指南针、天气与状态组件
保留可复用的指标、图标与页面样式,再按项目任务组合。

在墨刀中搭建穿戴原型

把小屏细节,
变成可复用的设计。

先用文本、图形、图标和组件搭建布局,再为页面连接交互。在墨刀原型中逐步补齐内容、状态与操作,让团队看到完整的使用路径。

  • 画布与内容按设备尺寸建立页面,先放主指标、单位和核心操作,再补辅助信息。
  • 组件与样式统一指标、按钮、提醒卡片和列表的样式,用复用组件保持多页一致。
  • 连线与预览设置页面跳转、弹窗及状态变化,预览时沿主任务检查开始、返回和退出。
搭建我的第一张穿戴界面

手表与配套 App

断开连接之后,
体验也要接得上。

手表显示“运动已保存”,不等于手机已经收到记录。把设备端和手机端放进同一份原型,分别说明保存、传输与查看详情,让团队理解它们之间的关系。

  • 设备端保留结果已保存但未同步时展示“等待同步”,不要让用户误以为运动记录丢失。
  • 手机端说明进度连接中、同步中和失败状态分别表达;失败时提供重试,不用空白页结束体验。
  • 成功后可以确认同步完成后可查看记录时间与摘要,避免只出现一个很快消失的提示。

墨刀用于设计与演示这些界面状态;蓝牙连接、传感器采集、离线存储与真实同步,需要由研发结合设备能力实现和测试。

手表运动记录已保存等待同步,手机等待连接并提供重新连接入口
原型分别交代“设备已保存”和“手机尚未收到”,再设计连接与重试。

从原型走向团队交付

评审的不只是画面,
还有操作后的变化。

把同一份穿戴原型分享给产品、设计和研发,在具体页面讨论问题。交付时把页面、状态与实现要求对应起来,避免只留下一组无法还原操作过程的截图。

01 / 预览

按任务走完一次

从开始运动到结束保存,检查每次点击后的页面与返回位置;长数字、长标题和没有数据时也要能读懂。

02 / 评论

把意见留在页面上

在对应位置讨论文字、层级和操作。按项目设置分享访问范围,让不同参与者围绕同一份方案沟通。

03 / 交接

让界面与规则对得上

结合开发标注、切图和交互说明交付尺寸、状态与资源。表冠、实体按键、震动与系统权限另列实现要求,并在真机复核。

从已有结构开始

挑一个合适的穿戴模板,
继续设计你的版本。

先看设备类型与任务,再决定复用哪些页面。以下为素材广场的用户作品,使用权益与购买条件以各模板详情页为准。

带着清楚的需求开始

你的穿戴产品,
准备先解决哪件事?

选一个场景,整理第一版页面与状态。需求可以复制给团队,也可以带入墨刀 AI,继续探索界面和交互方向。

先明确目标设备与关键任务,再补充视觉细节。手环场景可选择窄屏;配套 App 会同时整理腕端与手机端页面。

智能穿戴原型需求

随选择实时调整
项目:晨跑记录|运动手表
目标设备:方形表盘。
核心任务:开始跑步、查看运动指标、暂停与继续、结束后查看保存结果。
页面范围:运动开始页、运动中、暂停页、保存摘要、等待同步、手机记录页。
布局:突出距离、时长和主操作;按目标设备设置显示区域。
交互:暂停保留进度,继续回到运动中,结束后展示保存反馈;同步失败提供重试。
交付:可预览的界面原型与交互说明,使用样例数据,不接入真实硬件。

AI 任务按账号可用额度与积分方案使用,查看定价与权益。

常见问题

开始之前,
你可能想了解。

墨刀适合设计智能手表和手环界面吗?

适合用来设计页面布局、组件样式和可点击交互原型,也能把穿戴设备与配套 App 放在同一份方案中评审。请按目标设备建立合适的画布,并在交付后结合系统规范与真机测试调整细节。

圆形手表和方形手表,可以直接使用同一套页面吗?

可以复用信息结构、配色和组件规则,但布局需要重新检查。圆屏应核对弧形区域的裁切和平台控件布局;方屏要考虑圆角与系统占位;窄屏手环通常需要减少并列内容。不要仅缩放整页来完成适配。

原型可以真实读取心率、定位或连接蓝牙吗?

本页介绍的是界面与交互原型设计。可以用样例数据表达指标、连接与同步状态,但这不等于真实传感器采集或蓝牙通信。相关硬件、权限、数据准确性与功耗需要研发实现并进行设备测试。

能把旧 Axure 穿戴项目直接变成墨刀原生组件吗?

不要把 Axure HTML 托管理解为 .rp 文件无损转换。需要保留原项目演示时,可使用Axure 托管分享 HTML 内容;如果希望在墨刀中重新编辑组件和交互,应先确认可用素材与迁移范围,必要时重建页面和逻辑。

不会写代码,怎样开始第一版穿戴原型?

先选择一个具体任务,例如“开始跑步并保存记录”,用空白画布或模板搭建关键页面,再连接操作与反馈。也可以把上方整理的需求带入墨刀 AI 探索初稿,之后继续修改。完成原型不等于已生成可安装到手表的原生应用。

继续完成你的设计

把界面、交互与手机端接起来。

交互原型

从点击后的变化,到状态和返回路径,继续完善完整体验。

了解交互设计

从一次抬腕开始

把你的穿戴想法,
做成可以体验的原型。

安排好每一屏,也连接好每一步。