watch和$watch
随着Apple最新，最闪亮的产品Apple Watch（err， WATCH ）即将面世，许多设计师都渴望从库比蒂诺（Cupertino）出来。 有一些与设备交互的新方法。 诸如Apple的强制触摸菜单和数字表冠 ，以及您可能已经熟悉的许多UI元素，例如按钮，文本样式和开关，天哪！
在探索Apple Watch上的UI元素之前，让我们首先介绍一些在设计此新设备时应牢记的基本知识。 在撰写本文时，Apple Watch尚未发布，因此，如果您有任何提示，评论或更正， 请在Twitter或评论中让我知道 。
身体依恋
首先，Apple Watch物理连接到用户。 请注意这种连接以及与用户界面交互时如何使用户感到。
您认为Apple使用Apple Watch的意图是如何使其用户的情绪激动？ 如果这则广告与苹果的内容策略保持一致，那么它所传达的情感就是幸福，兴奋，敬畏和惊奇，同时通过使用不同的表带，颜色和表盘来传达一种个性化的感觉。 您如何通过手表应用程序的设计传达同样的感受？ 手表连接到用户的事实如何改变用户对应用程序设计的感觉？
把事情简单化
Apple Watch不如您的新智能手机强大。 在为网络和移动设备设计时，有时我会在较小的图片上使用漂亮的图片而感到内gui。 在Apple Watch的情况下，我们被提醒保持尽可能轻巧，因为这些额外的千字节确实会有所作为。
网络上最糟糕的设备（低端手机）与最酷的新技术（智能手表）具有相似的规格。 永远为所有人设计。
—托德·帕克（@toddmparker） 2015年3月19日
用户不希望缓慢而缓慢的体验。 使用较大的图像和动画不仅会导致不良的用户体验，而且还可能在需要将其提交给Apple时拒绝您的应用程序。
任何通过大量动画批准应用程序的iOS #applewatch开发者-我的使用率很高并且担心被拒绝https://t.co/5tmnBY3Qm4
— Henry Ton（@archtrainer） 2015年4月3日
问问自己，“我的动画真的有必要吗？” 如果动画引起延迟，则无论其增强质量如何，都是不好的。 请记住，您正在为邮票大小的计算机建造东西，并且还必须无线传输手机中的数据。 那里存在瓶颈。
假设您正在建立一个90年代初的网站，该网站需要通过14.4k调制解调器将其信息传输给具有386处理器和2mb内存的计算机上的用户。 在那种情况下，您不会使用自定义字体，动画和大型JavaScript库吗？ 保持轻巧。 建立速度并尊重用户的时间。 抵制眼花乱的冲动。 保持互动有意义。 不要使用不必要的动画。 喝很多的水。 善待他人并尊重他人。 听你妈妈的话
“如果您在数分钟内即可测量与iOS应用程序的互动，则可以预期与秒表的WatchKit应用互动。 因此，保持互动简短 并且界面简单。” – Apple Watch人机界面指南
颜色和版式
颜色和版式的使用对于应用程序的商标很重要，但是要记住一些重要的注意事项。
颜色
“色彩有助于为您的应用程序提供视觉连续性和品牌形象。” – Apple Watch人机界面指南
- 使用黑色作为背景。 它将与屏幕的物理边框融合在一起，并保持没有屏幕边缘的错觉。 请勿使用明亮的背景。
- 为文本使用高对比度的颜色。 请记住，手表长时间不使用，用户需要能够快速，轻松地阅读您的内容。
- 注意色盲。
版式
一定要使用自定义字体，但是要注意，系统字体被设计为可以在此新设备上正常工作。
“首先，文本必须清晰易读。 如果用户看不到您应用程序中的文字，那么版式的精美程度就没关系了。” – Apple Watch人机界面指南
系统字体（ San Francisco ）的优点包括：
- 压缩字符占用的水平空间较少。
- 大尺寸时，它们的间距更松散，并且字形Kong较大。
- 字体变小时，标点符号会成比例地变大。
文字样式
文本样式是字体预期用途的语义描述。 例如标题， <body>等。您可能熟悉<h1> <h2> <body>等类似HTML。 如果使用内置的文本样式，则将获得免费的动态类型支持，该支持会自动响应用户的可访问性首选项。 如果使用自定义字体，则必须做一些工作才能采用该功能。
空间
显然，Apple Watch比智能手机还小。 所有可用空间都需要智能地使用，以使您的用户所进行的交互尽可能地令人愉悦。 保持按钮较大，以便轻松与它们进行交互。 考虑将强制触摸菜单用于其他选项的方法。 抵制在应用程序中显示徽标的诱惑，还有其他方法可以通过有意义且与环境相关的颜色和图像来为应用程序打上烙印。
“ Apple Watch上的空间非常宝贵，每次出现徽标都会占用用户想要看到的内容的空间。” – Apple Watch人机界面指南
Apple Watch的边缘周围有一个边框，可为您的设计增加物理填充。 因此，您无需在屏幕边缘添加边距。
使用Xcode开发时，乍一看似乎有些奇怪，因为您不会在边缘看到这种填充，但是请记住以下几点：
屏幕尺寸
应用程序在两种尺寸（ 38毫米和42毫米 ）的Apple Watch上都显示相同的界面，因此，通过使用相对单位，您可以允许您的项目增加和缩小以填充两种尺寸的可用空间。 屏幕始终处于纵向模式：高度大于宽度。
| 装置尺寸 | 宽度（以像素为单位） | 高度（以像素为单位） |
|---|---|---|
| 38毫米 | 272 | 340 |
| 42毫米 | 312 | 390 |
导航
在WatchKit应用中，您将遇到两种完全不同的导航模式：
分层的
“分层”是一种导航模式，其中涉及垂直滚动列表，以允许用户对每个屏幕进行选择（通过点击），直到他们到达所需的目的地。
基于页面
“基于页面”是一种水平滚动导航样式，它通过手表屏幕底部的一系列点来指示当前页面。
您不能将这两个系统合并到同一个应用程序中，但是无论导航类型如何，都可以显示“模式表”。
模态表
您可以将模式表视为一张卡片，为用户提供一种完成任务的方式。 模式表包含一个或多个屏幕，这些屏幕以基于页面的布局显示。 两者之间的唯一区别是在基于页面的界面底部添加了点指示符。
不要在模式表中添加关闭按钮，因为默认情况下屏幕左上方有一个按钮。 它始终是白色的，尽管您可以将文本从“ 关闭”更改为“ 取消”，或通过其他操作添加更多含义。 用户还可以通过从屏幕左侧滑动来关闭模式表。
您在模态表上添加的任何按钮都应执行其设计的操作并关闭模态表，因此用户不必执行此额外步骤。 苹果公司建议您不要在最初的界面中添加第二个模式界面，否则您可能会在提交应用程序时被拒绝。 如果Apple警告某些事情，通常最好听一下，除非您有充分的理由不这样做。
互动互动
用户在未来的世代中可能有更多与您的应用进行交互的方式（例如多点触摸和新手势），但是目前，这是唯一的方式。
- 单击 -用于诸如按下按钮和进行选择之类的事情。
- 受限手势 -垂直滑动可浏览层级屏幕，水平滑动可浏览基于页面的屏幕，水平边缘滑动可返回上一屏幕。 除了在页面之间或在垂直表中导航之外，无法进行刷卡工作。
- 强制触摸 -在表盘上用力按以访问与当前屏幕相关的菜单。
- Digital Crown-手表侧面的滚轮可在您的应用中使用，仅允许垂直滚动。
扫视
Apple将Glance界面描述为“用户从您的应用程序查看重要信息的一种补充方式”。 想一想您可能需要在一个屏幕上快速找到的信息，例如时间。 您的应用程序是否包含用户希望经常查看的信息？ 考虑建立一个“一览”来显示该信息。
概览是通过一系列用于屏幕上半部分和下半部分的预定义模板构建的。 一目了然，用户无法滚动，当用户轻按一眼时，会将应用打开到适当的屏幕。 扫视是可选的，不是必需的。
组是应用程序中对象的容器，您可以认为它们有点像html中的div。 组具有默认的填充，您可以根据需要更改或删除。 它们没有默认外观，但是具有用于设置位置，角半径，大小，边距和背景的属性。 您可以将组设置为水平或垂直布局项目，也可以将组嵌套在其他组中以创建更复杂的布局。
以下是扫视屏幕的一些上部和下部组模板：
通知事项
通知以两种不同的方式显示给用户：短视和长视。
简短通知
这些告诉用户哪个应用程序正在通知他们并给出标题。 如果用户快速放下手腕或不轻按，则该通知将被取消。 用户不必手动与通知交互即可将其删除。 简短通知的设计基于模板，并且包含应用程序图标，应用程序名称和标题字符串。 标题字符串应尽可能短且有意义。
长时通知
这些提供有关通知的更多详细信息，并且在外观上更具可自定义性。 所有应用程序的基本结构都相同，并在顶部包括一个框格，该框格显示应用程序的图标和名称，您的应用程序的自定义内容，最多四个操作按钮，最后在底部显示一个关闭按钮。
UI元素
牢记这些基本知识后，让我们探索Apple Watch用户界面的不同元素。
“在设计应用程序的图形元素时，请记住，每个自定义元素都应该看起来不错并且可以单独很好地运行，但是它也应该看起来像它属于应用程序中的其他元素一样，无论它们是自定义元素还是标准元素。” – Apple Watch人机界面指南
动画制作
必须从iPhone传输动态动画，这必然会导致延迟。 手表应用可能由于严重依赖动画而被拒绝，因此只能将它们用于传达状态并向用户提供反馈。 不建议随意使用动画（即使动画是一个栩栩如生的跳舞婴儿）。 使用一系列静态图像将预渲染的动画存储在WatchKit应用程序捆绑包中，以便可以将动画快速呈现给用户，而不是从手机上传输。
纽扣
对于并排放置的按钮，请使用图标而不是文本，并且彼此之间不得有超过三个的按钮（Apple表示在一种情况下请勿使用超过两个的按钮，而在另一种情况下请勿使用多个按钮。三。）
这听起来似乎很明显，但是请记住，“观看”屏幕很小，因此请保持尽可能大的按钮-不要让用户难以点击按钮。 按钮可以为背景设置图像或颜色，也可以为文本设置不同的颜色。 它们可以包含标签或组对象，并且具有圆角（默认的圆角半径为6点）。
强制触摸菜单
强制触摸菜单显示当前屏幕的可选上下文菜单（如果已设置），最多可以执行四个操作。 它将根据其添加到菜单的顺序从上至下，从左至右显示操作。 他们不滚动。
菜单操作（按钮）需要图像和标签。 图像应为艺术线条，并具有透明背景的单色。 根据Apple的说法，请使用适合设备尺寸和图标复杂性的线宽，介于4像素到9像素之间。
记住强制触摸上下文菜单，因为这是与设备交互的一种新颖而令人兴奋的方式。 与其在界面上添加其他按钮，不如考虑使用强制触摸上下文菜单。
图示
图标是png圆圈。 您可以将它们创建为索引颜色，以节省空间，24位和无透明度。 手表主屏幕上的图标上没有文字。
下载此Apple Watch图标模板以在您自己的项目中使用。
Apple Watch上的WatchKit应用程序的图标大小：
| 资产 | 38毫米手表（以像素为单位） | 42mm手表（以像素为单位） |
|---|---|---|
| 通知中心图标 | 48 x 48 | 55 x 55 |
| 长期通知图标 | 80 x 80 | 88 x 88 |
| 主屏幕图标 | 80 x 80 | 80 x 80 |
| 短视图标 | 172 x 172 | 196 x 196 |
供iPhone上的Apple Watch应用使用的图标大小：
| 资产 | @ 2x | @ 3x |
|---|---|---|
| 应用程式图示 | 58 x 58 | 87 x 87 |
图片
所有屏幕尺寸均使用一张图像。 速度和效率至关重要，因此请尽可能压缩图像。 尝试将具有索引颜色的png保存在纯黑色背景而不是透明背景上。 将所有图像资产创建为@ 2x资源； 无需创建非视网膜图像。
使用tinypng ， pngout和pngcrush之类的工具压缩您的png。 对于Mac用户， ImageOptim是一个很棒的免费实用程序。
地图
地图是位置的静态屏幕截图，并且不是交互式的。 轻触地图可将用户带到地图应用程序。
标签
标签是“静态文本字符串”的一种奇特的表达方式。 尽管它可以通过编程方式进行更新并且可以跨越多行，但它不允许直接的用户交互。
分隔器
分隔符是一个简单但有价值的UI元素：用于分隔内容的一行。
滑杆
滑块使用户可以通过点击左右图像来进行调整。 如果不提供图像，则默认值为加号（+）和减号（-）
开关
开关使您的用户可以指定两个选项之一。 开启或关闭，是或否，等等。从风格上讲，iOS上您会很熟悉它们，并且它们始终包含标签。
桌子
表格将数据行显示在单列中，用户可以在其中垂直滚动。 保持表格小于20行，因为超过20行很难滚动。 如果您有20行以上，则可以给用户选择加载更多行的选项。 表根据其包含的行数动态调整大小。 结果，表格忽略了按组对它们施加的任何高度限制。 Apple建议您不要将表格嵌入组中。
结论
Apple Watch是一个令人兴奋的新平台，随着设计师和开发人员使用它并建立惊人的新体验，它将继续发展。 与用户连接并可以收集心率和其他信息的设备所涉及的想法将继续发展。 如果您有关于如何最好地使用这些系统并与这些系统创建有趣的新交互的新想法，请告诉我们！
翻译自: https://webdesign.tutsplus.com/articles/designing-for-the-watch--cms-23818
watch和$watch
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
