🌟整体框架思维导图

WatchOS视觉篇 - 图1

第一部分：动效

精美、微妙的动效可以传达状态，为用户提供有关其行为的反馈，并丰富视觉体验。

苹果SwiftUI（一种创新、简洁的编程方式），可以处理各种组合、重叠等复杂动效 原链接：https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions

animation.gif

1.设计原则

  • 保持动效的简短 —— 减少用户等待时间，更轻量级、少干扰性的传达信息
  • 创建有目的的动效 —— 根据情景将用户注意力吸引到界面的特定部分，避免为了设计动效而设计（用户可以在无动效的环境下使用app）
  • 让用户可以控制动效 —— 避免在无点击或无控制方式情况下自动播放动效效果

2.watchkit动效

WatchKit（管理界面和如何响应用户的交互的代码）

swiftUI提供了强大且简化的方式设计动画，如果使用苹果的资源代码watchkit来设计动效的视觉效果，可以更改以下属性：位置、背景色、插图、高度、不透明度、强调色、宽度。还可以创建序列帧动效

设计注意点

  • 将动效图像存在watchOS应用程序包里。可减少加载时的延迟
  • 优化序列图像。优化图像（png格式等等，具体看第六部分详细讲解：图像优化）可以减少空间内存，保证加载速度
  • 正向反向动效都使用相同序列图像。可以循环播放，反向播放时，则无需提供一组图像，可以减少内存大小

第二部分：应用程序图标

应用图标-以显示在watch内以及其他情景中。watchOS应用程序图标是圆形，不显示文本
10941641466959_.pic.jpg

1.设计原则

  • 简洁 —— 简洁、独特的图形去表达，克制添加细节，避免小尺寸情况下过于复杂
  • watchOS与ios系统图标保持相似性 —— 与系统图标有相似性，有关联，可以识别一致

  • 有视觉焦点 ——

    2.输出要求

  • 全出血方形图像 —— 参考下面规范链接

  • png格式 —— 2倍、图像深度24位、显示 P3（广色域颜色）、sRGB（彩色）或 Gray Gamma 2.2（灰度）
  • 不使用黑色做图标背景 —— 避免融入背景中
  • 不在图标中使用文字 —— 用图形设计元素去帮助用户识别应用，文字太小不易识别

    apple watch icon尺寸要求规范：https://developer.apple.com/design/human-interface-guidelines/watchos/visual/app-icon/ 各组件（图标、控件等）资源：https://developer.apple.com/design/resources/#watchos-apps

第三部分：音效和视频

当应用程序处于活动状态并在前台运行时，应用程序可以播放短视频和音频剪辑

1.设计原则

  • 音频和视频的简短 —— 如果播放剪辑的视频和音频，保持不超过30秒，可以减少消耗内存空间，也可以避免用户长时间抬腕导致疲劳

  • 用推荐的分辨率大小和各数值，见下表 | 属性 | 价值 | | —- | —- | | 视频编解码器 | H.264 高配置 | | 视频比特率 | 160 kbps，最高 30 fps | | 分辨率（全屏） | 208px × 260px（纵向） | | 分辨率 (16:9) | 320px × 180px（横向） | | 声音的 | 64 kbps HE-AAC |

  • 呈现正在播放的界面 —— 包含：正在播放的信息，可暂停或播放，可调节音量，可调节进度等

    详情见：https://developer.apple.com/documentation/watchkit/storyboard_support/adding_a_now_playing_view

音乐应用程序的“正在播放”屏幕的屏幕截图，显示一首名为“伯克利的春天”的歌曲和一位名为 The LeMoine Quintet 的艺术家。.png
正在播放的界面

  • 创建可自定义进度的播放控件 —— 如果有必要，可以设计可以自定义前后快进进度数量值的控件，比如：设计快进⏩值为30s等
  • 恢复播放时，在上一个结束点继续播放 —— 方便用户可以在上次暂停的地方继续快速播放，而不是重头播放。

2.音频或视频海报

背景：apple watch可以通过旋转数码表冠滚动浏览专辑插图，然后轻点一个播放列表或专辑来播放

  • 可以创建代表视频内容的海报图像。用户就可以根据图像选择是否观看内容
  • 避免创建像控件的海报图像。海报是用来让用户识别内容的，避免用不相关的图像来表达

第四部分：颜色

颜色是赋予活力、提供视觉连续性、传达状态信息、对用户操作提供反馈以及帮助人们可视化数据的方法

watchOS色值 见链接https://developer.apple.com/design/human-interface-guidelines/watchos/visual/color/

设计原则

  • 背景用纯黑 —— 可以与watch id造型边框无缝融合，营造无边屏幕的错觉
  • 避免用颜色作为交互的唯一方式 —— 比如：watch使用圆角矩形作为按钮和列表操作的主要交互方式

  • 用品牌色作为全局强调色 —— 全局强调色可以让程序更具有一致性和使用熟练度。

    选品牌色（即强调色）时，要注意很多色盲人士很难分辨蓝色和橙色，或者红色和绿色；还要注意对比度是否好识别

  • 用户更喜欢有色模式（单色或1-2个主色，有序的）而不是全彩图形的复杂功能 —— watchOS可以让用户自定义组件的颜色，且使用单色

第五部分：图标

Glyphs and images指 —— “字形(Glyphs)和图像(images)：设计过程中一个重要的步骤就是从字符到字形的转换，字符表示信息本身，而字形是它的图形表现形式”所以Glyphs and images代指图标

显示排列成两行的七个 SF 符号的图像。 顶行包含每个符号的填充版本，底行显示相同的符号，每个符号都在大纲版本中。 从左边开始，符号被命名为.svg
watch OS中多使用小而富有表现力的icon，icon（有透明区域、抗锯齿、单色图形）可以使用强调色表示icon，但“避免让颜色作为传递信息的唯一方式，希望用户在icon无色和有色模式时得到相同的信息”

设计原则

第六部分：图像优化

优化图片可以提高应用程序的性能。应该保证图片占内存大小尽量小的同时，保证可以呈现想表达的视觉风格

1.设计原则

  • 使用一张图像资源
  • 使用正确格式的图像 —— 带透明度、有阴影、纹理高光等效果的复杂图像用 PNG 格式；照片用 JPGE ;需要缩放的矢量图形用pdf

  • 当图形不完全是24位图时可以使用8位图 —— 降低位数可以在不降低质量情况下减少文件大小（不适用于照片）

    位图科普：https://www.cnblogs.com/mjjackey/p/bmp.html

  • 可以通过少量压缩优化文件大小 —— 少量压缩不仅不会明显降低图像质量，还能节约更多空间

  • 尽量不包含alpha通道 —— 带透明度（alpha通道）的图像会增加文件大小
  • 图像和图标提供文本标签 —— 当图像和icon下带文本时，可以通过VoiceOver（画外音）读出来帮助视障人士导航操作

2.尺寸参考

第七部分：界面布局

apple watch不同版本型号显示相同的界面布局，需要根据不同尺寸调整布局

apple watch多型号尺寸：https://developer.apple.com/design/human-interface-guidelines/watchos/visual/layout/

1.设计原则

  • 不同屏幕尺寸型号的watch都显示相同的内容 —— 使用相对大小和缩放空间来调整界面
  • 支持屏幕旋转 —— 当用户旋转手腕向朋友展示图像、界面或二维码时，支持反转就显得特别有意义
  • 避免在界面呈现过多信息内容 —— 用户希望及时的查看信息，避免无关紧要的设计，比如：旋转表冠滚动查看信息是次要信息，所以在设计滚动条时尽量克制、不突出、次要信息小尺寸设计

包含 Digital Crown 位置附近滚动条的黑屏屏幕截图。 滚动条左侧的垂直双头箭头表示滚动条上下移动。.png
滚动条克制设计（次要信息）

  • 信息分组 —— 用分割线、间距（负空间）等元素可以将信息分组，让信息显示更加清晰易读

联系人信息屏幕的屏幕截图。 半透明红色的水平条跨越导航栏与联系人姓名和照片之间的屏幕宽度，表示提供良好视觉分离的空间量。 在联系人姓名和照片.png
线分割

  • 组件设计的宽度可以使用整个屏幕的宽度 —— 大卡片、列表组件等宽度可以使用屏幕宽度，因为watch 外观id上屏幕边框有黑色空间，可以自然与屏幕融为一体，形成间距。等宽也可以避免浪费屏幕空间

锻炼应用程序的主要锻炼列表的屏幕截图。 标注指示当前聚焦的锻炼项目跨越可用屏幕区域的整个宽度。.png
与屏幕等宽，屏幕外观有黑色边框自然填充

  • 避免界面中一排并排放两个或三个以上的控件 —— 一排不要放超过3个的带文字的按钮

秒表应用程序混合屏幕的屏幕截图，突出显示以在屏幕底部显示重置和启动按钮。 “重置”按钮为灰色，带有浅灰色文本，“开始”按钮为绿色，带有黑色文.png
一排只能放2个按钮，超过会使点击热区过小

  • 左对齐元素或文本更易于阅读 —— 左对齐的文本更易于阅读，在多行情况下也更易于扫描

邮件消息的屏幕截图。 屏幕左边缘附近的垂直蓝色标注线表示消息内容左对齐。.png
左对齐

2.界面圆角

屏幕具有圆角，设计时钟和应用程序的标题时避免与圆角相切
需要根据设备的最小边距和内容安全区域来定位内容。以避免在屏幕边缘出现半像素的相切情况
10471641279036_.pic.jpg

如上图，系统将内容安全区定义为导航栏下方、屏幕底部圆角上方的区域。为避免相切，列表行、按钮和其他滚动内容应位于内容安全区域内

第八部分：排版

San Francisco (SF) 是所有 Apple 平台上的系统字体；SF Compact 变形体是 watchOS 中的系统字体。这种格式将不同的字体样式组合在一个文件中，并支持样式之间的插值以替换中间字体。通过插值，字体可以适应所有尺寸，同时为每种尺寸设计，以生成精确适应像素大小的结构
10811641365144_.pic.jpg

设计原则

  • 使用内置文本 —— 可以为文本建立清晰的视觉层级结构，同时保持易读性

  • 调整行距提升可读性、节省空间 —— 在高度有限的区域避免行距较近

    Leading: 指相邻文本行间上一个文本行基线和下一文本行基线间的距离 Leading = Line Space + Font Size(即是行距 = 行间距 + 字体大小)

  • 避免使用2种字体样式 —— 使用太多字体样式会使界面显得杂乱无章

  • 首选较大字号以确保易读性 —— 阅读文本需要较大的字号
  • 在实际场景中测试内容易读性 —— 比如：在阳光下看下内容是否易读；除了考虑字号大小以外，还要考虑与背景的对比度
  • 使用字体粗细、大小和颜色突出显示最重要的信息 —— 避免字号在20px以下，较细的字重会显示不清晰
  • 根据需要在界面中调整跟踪值 —— 不同字号时，用不同的跟踪值（比如6px字体用+50跟踪值；7px用+30跟踪值）

watchOS系统跟踪值：https://developer.apple.com/design/human-interface-guidelines/watchos/visual/typography/#tracking-values

跟踪值（可以简单理解为字间距，但与字间距有所区别） 跟踪是字距调整所独有的，因为跟踪会统一调整一系列字符的字母间距。另一方面，字距调整可以单独调整每个字母彼此相邻距离的方式。虽然这两种技术可以同时使用，但它们总体上是不同的 科普：https://www.affde.com/zh-TW/what-is-tracking-in-typography-tracking-in-graphic-design.html

  • 在界面中，不同文本大小用不同字体类型 —— SF Compact Text and Display ，比如19px用Text,20px用Display

    科普：苹果旧金山字体（SF ）的秘密 https://medium.com/@amachino/the-secret-of-san-francisco-fonts-4b5295d9a745 SF Text 的字距及字母的半封闭空间（比如”a”上半部分，不懂专业术语见谅）更大，因其可读性更好，适用于更小的字体；SF Display 则适用于偏大的字体。具体分水岭就是 20pt，即字体小于 20pt 时用 Text，大于等于 20pt 时用 Display 更棒的是由于 SF 属于动态字体，Text 和 Display 两种字体族是系统动态匹配的，也就是说你不用费心去自己手动调节，系统自动根据字体的大小匹配这两种显示模式
    *来源：知乎-拉文破芙

apple font size参考（做手表必看！记住leading=行距）：https://developer.apple.com/design/human-interface-guidelines/watchos/visual/typography/#dynamic-type-sizes