四部分


应用程序——体验中提供详细信息和功能
复杂功能组件—— 一目了然查看
通知——及时、高效显示信息并启动操作
Siri——获取信息、执行任务**

Apple Watch设计原则入门


1.抬起手腕时,及时提供用户所需的内容(功能、任务)
2.快速交互—— 一目了然、快速呈现
3.独立设计应用程序

🌟整体框架思维导图

WatchOS系统篇 - 图1

第一部分:应用程序

文本、图像和控件的设计—— 方便人们可以快速轻松地找到他们需要的信息并执行操作。通过集中、节省空间的界面来简化用户交互
锻炼应用程序主屏幕的屏幕截图,专注于户外跑步目标。.png
一键开启运动
天气应用程序每小时预测库比蒂诺情况的屏幕截图。.png
全面的显示温度
噪音应用程序的屏幕截图,显示了 91 分贝的读数以及长期暴露于这种噪音水平的潜在影响的描述。.png
噪音实时显示

1.响应式

  • watchOS 8 会在佩戴者放下手腕时自动降低显示屏的整体亮度
  • 根据不同情况显示信息比重

    隐藏-敏感信息,保护隐私,如银行余额 显示-重要信息,如锻炼显示心率、配速

  • 通过调暗不重要的内容来突出重要信息

  • 保持交互元素的布局一致

2.app设计原则

Apple Watch 互动简短而集中,方便用户立即查看

  • 避免用非功能性元素充满屏幕显示内容
  • 通过字体、强调色和图像选择来表达品牌标识,创造独特视觉风格,而不是将应用程序设计的过于复杂
  • 黑色背景,避免使用品牌色颜色填充背景,纯黑可减少视觉噪音提升文本易读性



第二部分:功能组件

复杂功能组件—— 表盘上显示信息,方便用户抬起手腕查看;可点击方便一键查看;原则:表盘至少显示一个功能组件,可显示四个或更多个
Infograph Modular 表盘的屏幕截图,显示天气、日历、心率(以图表格式)、呼吸、空气质量和锻炼的并发症。.png
表盘上的复杂功能组件

设计原则

1.创建有用的复杂功能

确保用户可以在表盘上查看的基本内容(比如:运动环、全天天气变化)

  • 牢记信息隐私安全,因表盘上的信息可以对其他人显示
  • 考虑数据信息的更新(比如天气不同时间显示不同温度信息;比如会议前的提醒)
  • 显示方便快捷的复杂功能,不需要显示无意义的信息

2.设计富有表现力的复杂功能

需要注意的设计要点:

  • 图像大小
  • 描边大小(2px以上)
  • png格式
  • 圆角样式
  • SF Compact Rounded字体
  • 色彩图像-颜色表达重要信息、适合的饱和度,有色或无色的图像传递相同的信息

3.支持多系列-复杂功能


第三部分:通知

通知-快速传达信息、需要简洁高效的交互
通知的两个阶段:短通知、长通知
短通知:剪短信息、放下手腕时消失
长通知:可滚动查看的长的详细信息、可提供更丰富的体验和细节

1.短通知

用户短暂一瞥所看的内容
活动应用程序的屏幕截图,显示所有三个环都关闭,并显示目标已实现的文字。.png

  • 简短易懂 - 空间有限,文本信息需简短
  • 考虑隐私 - 考虑谨慎、避免敏感信息

2.长通知

当用户点击短通知后,即可展开长通知,用户可以点击观看或关闭
来自 Lexi Torres 的邀请参加名为 Lets Celebrate 的活动的日历通知的屏幕截图。 除了接受、可能、拒绝和取消按钮之外.png

  • 长通知界面可动态也可静态
  • 可自定义改变内容区域,比如窗框、通知顶部栏样式、关闭按钮,但不可改变整体结构
  • 提供静态接口和可选的动态接口。如:当动态界面不可用时,默认显示静态界面;无网络时等等
  • 长通知的信息要一目了然。将重要信息放顶部,可改变字号、颜色突出重要信息,但依然要保持简洁
  • 丰富样式。可用动画等丰富通知内容
  • 通知栏顶部条条外观-显示启动图标+应用程序名。可自定义颜色或外观。如:模糊半透明处理、重叠图像处理等等
  • 背景颜色。默认情况-18%不透明白色/特殊情况;自定义-如使用品牌色等
  • 通知下最多4个操作按钮
  • 负向操作使用特殊按钮。如:删除用红色表示等等
  • 设计静态界面资源,用于打包进应用程序中

第四部分:Siri

siri可以提供有力的、便捷的方式-语音,让用户与应用程序进行交互。无需打开应用程序即可执行任务
由短语 Hey Siri order coffee 调用的任务的屏幕截图。 我的咖啡应用程序显示一个名为“订购一份双份浓缩咖啡”的任务,然后.png

  • 在表盘上创建快捷方式(siri功能入口),方便用户可轻松执行
  • 保持siri交互简洁,快速而直接
  • 确保用户可以在不离开当前情景的情况下完成操作,比如:无手机时;或者利用airpod;或者开免提