APPLE WATCH人机交互指南之UI元素设计

   1、标签

  标签呈现静态文本。


  标签:

  - 呈现任意数量的静态文本

  - 不允许直接的用户交互

  - 可以通过程序升级

  - 可以跨越多行

  标签是你应用中最常见的元素。使用标签向用户呈现简短的消息。标签最适合呈现相对少量的文字。

  让你的标签清晰易读

  对你的标签文字使用高对比的颜色,并使用动态类型(Dynamic Type)确保标签文字的大小适合用户。

  Apple Watch内置的系统字体提供了最佳可读性,我们推荐使用它。如果你选择使用用户字体,不要使用花体字母或者艳丽的色彩。(关于在app中使用文字的指导,包含使用动态类型的信息,参见[颜色和字体],后续将发布译文,稍等呦。

  尽可能使用内置样式

  内置样式的设计可读性很好,而且易于使用。


  2、图像

  图像对象展示单张静态图像或多张动态图像。


  图像对象:

  - 自身没有外观;它只呈现图像

  - 不支持用户交互

  - 提供程序来控制动画开始/停止

  为图像设置合适的大小以适用于每款Apple Watch的显示尺寸。

  不要试图为不同屏幕尺寸拉伸或压缩图像。保证图像资源的像素尺寸对其底层设备是正确的。

  将所有图像资源设为@2x。

  没有必要建立非Retina图像。

  3、群组

  群组是将内容正确布置在你界面中的重要工具。群组像是其他对象的容器。群组自身没有默认外观,不过用户可以自定义背景颜色或图像。群组还拥有定义位置、尺寸、边距及其他布局相关的属性。

  群组:

  - 可以将元件水平或垂直排列

  - 包含一个或多个其他界面元素

  - 有定义边距及群组元素之间间距的属性

  - 可以将图像或纯色设为背景

  - 可以为其背景或内容设置圆角半径

  群组是你在Xcode中实现设计的主要工具。然而,鉴于群组可以拥有自己的背景颜色或图像的这一事实,你也可以将其用为视觉元素。

  不要在群组中放置群组以创建复杂布局

  你可以将某些内容水平布置,而另一些垂直布置。你也可以嵌套群组以利用外层群组的边距或间距。

  为不同的Apple Watch实际显示尺寸建立不同的背景图像

  不要试图为不同屏幕尺寸拉伸或压缩图像。保证图像资源的像素尺寸对其底层设备是正确的。

  4、表格

  表格在单一列中分行展现数据。使用表格呈现会动态改变的内容。


  表格对象:

  - 支持多行类型

  - 是可滚动的

  - 可以拥有背景颜色或图像

  你要在设计的时候为你的表格行类型定义布局。所有行都要预先设计。在运行时,你可以选择你实际想要使用的行类型。

  使用一致的行类型

  你可以创建不同的行类型来实现你的内容、头部、页脚。在使用那些行的时候保持一致。

  避免将明显不同类的内容混在行内

  当呈现内容时,使用一致的行类型呈现内容。只有在需要做分节符或组织内容行时使用其他行类型。为内容使用相同的行类型可以确保行尺寸一致,并易于导航。

  限制同时呈现的表格的行数

  超过20行内容的表格会变得不好滚动。只呈现直接相关行的子集,并为用户提供加载更多行的选项。

  不要在群组中嵌入表格

  表格会根据其包含的行数动态调整大小。因此,表格忽视所有群组对它们的高度限制。

  5、按钮

  按钮执行一个应用定义操作。


  按钮

  - 有可自定义的背景

  - 有圆角

  - 可以包含标签或群组对象

  按钮的背景就是所谓的盘(Platter)。你可以在运行时改变按钮盘中定义的颜色或图像。

  创建跨越屏幕宽度的按钮

  强烈推荐使用全宽按钮。如果你必须在水平方向放置超过一个按钮,要把按钮数量限制为两个。

  尽可能尝试匹配按钮高度

  如果你在屏幕上有多个按钮,为所有按钮使用相同高度。

  按钮有圆角,以便和其他元素区别开

  按钮的标准圆角半径为6点。

  6、切换

  切换提供了两个互斥的选择或状态。


  切换

  - 表示一个项的二元状态

  - 永远包含一个标签

  使用切换为用户提供二选一的方式,比如yes/no或者on/off。

  7、滑块

  滑块允许用户在一系列不连续值的范围内调整值。用户通过轻击滑块条两侧的图像改变其值。


  滑块

  - 包含一个水平条,两边各有一个图像用于操作滑块值

  - 可以以一系列离散条或一个连续条显示当前值

  - 总是以预定量增加或减少

  - 不对用户显示当前数值

  使用自定义图像令滑块更易于理解

  如果你不提供自定义图像,系统会显示加号和减号。

  8、地图

  地图向用户展现某个地理目标的信息。使用地图展示目的地或感兴趣的地点。地图是静态快照,并无法在应用中产生交互。轻击地图会让用户转移到地图应用。

  将地图区域设为包含周围相关地点的最小区域

  地图区域在显示之前,通过你的WatchKit插件设置。选择的区域应该包含所有需要的地点,但同时也要足够小,便于用户使用。

  不创建超过可用内容区域大小的地图对象

  地图大小应该适用于当前Apple Watch屏幕,用户应该可以不通过滚动条而看到整个地图。

  使用标注在地图上高亮地点

  标注是显示在地图上方的图像,用于标记地点或者呼出信息。不要同时展示超过五个标注。

  地图提供内建的绿色、红色和紫色图钉。使用绿色图钉标记起点,红色图钉标记重点,紫色图钉标记感兴趣的地点。


  你还可以使用自定义图像定义标注。图像会如下放置,其下边缘位于目标坐标。


  9、日期和时间

  日期和事件对象是用于在Apple Watch上显示时间相关值的专用标签。


  日期标签:

  - 显示日期、时间或同时显示二者

  - 可以使用多种格式显示日期及时间,日历和时区

  - 无需通过WatchKit插件更新

  当你想要展示当前日期或时间时使用日期对象。

  时钟标签:

  - 倒计时到指定时间或从指定时间计时

  - 可以使用多种格式设置显示计时值

  - 无需通过WatchKit插件更新

  务必使用时钟标签来实现精确倒计时或计时

  10、菜单

  在Apple Watch的Retina屏上用力点击的手势可以呼出当前屏幕的上下文菜单。菜单包含当前屏幕的相关操作,而无需占据你界面的空间。


  菜单展示一到四个操作

  操作按照它们的添加顺序展示,从左上角到右下角排列。菜单没有分级无法滚动。你可以在设计的时候或有计划地定义菜单操作。

  菜单操作应用于当前屏幕

  每个屏幕可以拥有其自己的菜单或者根本没有菜单。操作并不适合于对滚动界面的当前画面或当前选中项的任务。

  每个操作都需要有有一张图和一个标签字符串

  菜单图像是系统风格的线条图案,应用于标准背景上。标签字符串必须适合一到两行。

  菜单是可选的

  只有在当前屏幕有相关操作的时候才包含菜单。在没有菜单可展示的时候,系统会显示一个合适的动画。

  关于创建菜单中所使用的图标信息,参见[菜单图像],译文稍等呦,我们会尽快完成的。 ^_^

时间: 2024-12-09 04:51:58

APPLE WATCH人机交互指南之UI元素设计的相关文章

APPLE WATCH人机交互指南之UI设计基础

  千呼万唤始出来!随着Apple Watch开卖的日子临近,我们终于等来了Apple Watch的官方文档(HIG)!发布会的时候,许多用户都对水果神教的智能手表的设计表示怀疑,为什么要这么设计?答案就隐藏在官方的这份设计指南当中. 1.为Apple Watch设计 重要提示:这是一份针对API或技术的初步文档.苹果公司所提供的这些信息,可以帮您规划文中所述的苹果公司的技术和编程接口.这些信息可能随时会被修改,根据这份文档所设计的软件和界面应通过最终版本的操作系统和软件的测试.最新版本的文档可

怎样合理的设计和使用UI元素的辅助说明文字

文章描述:怎样通过UI辅助说明文字有效的提升用户体验. 周日宅在家,睡到自然醒,晒晒太阳吃吃喝喝做做内容再玩点老游戏,一天圆满的很. 今次译文的主要话题,是怎样合理的设计和使用UI元素的辅助说明文字.姿态上侧重于拿传统的网站页面说事儿,但从理论上讲同样适用于移动应用方面. 本文的原作者Connie Malamed,著有Visual Language For Designers一书,貌似国内还没有做过引进.她的博客中有不少关于视觉设计方面的优秀文章值得阅读学习.接下来我们进入正文. 用户在网站中的

IOS当4种UI元素的可用性问题及优化建议

  这周又是一篇来自Nielsen Norman Group的文章.供参考吧,这种文章背后的思维模式甚至是精神才是最该汲取的,内容本身反而是其次;这样的东西看的越多,实践当中具有代表性的产品案例经历的越多,你越会发现,设计这种事,在很多时候,无明无暗,无是无非,有的只是特定的产品.特定的资源.特定的情境.特定的用户群体,以及所有这些因素混杂在一起之后摆在面前的需要不断权衡.争取或妥协的各种可能性.下面进入正文. 那些大的软件公司,譬如Apple.微软.Google等等,通常会为第三方app设计师

关于APPLE WATCH官方提到的10个设计小技巧

  今天这篇是国外某位亲历WWDC 2015的设计师写的,他把官网视频里提到的小技巧都提炼成图文分享出来,特别实用,推荐学习 >>> 欢迎关注译者微信号:设计译言唷. 对于设计者来说,Apple Watch 是一个全新的玩意.与网页.桌面客户端和移动应用的设计相比,Apple Watch 的设计引入了许多新的限制,但同时也带来了无穷的可能性. 最近我去了趟旧金山,参加了苹果的 WWDC,并学习了如何为 Apple Watch 设计应用.我很乐意与大家分享这些小技巧,来帮助各位做出更棒的产

web设计师:20套非常前端的UI元素库

网页制作Webjx文章简介:网页设计师的盛宴:UI界面设计资源大全. 每个 Web 设计师都在 UI 设计上费尽了心血,即使这样,资源的匮乏,视野的狭窄,也常常让他们的呕心沥血之作并不为人看好,事实上,UI 设计并不需要闭门造车,很多 UI 元素是通用的.本文收集了 20 套非常前端的 UI 元素库,它们多数是可以后期修改的 PSD 或 SVG 版. Modern Web UI Set (.psd) 这套 UI 库包括了从按钮,到渐变,到文字各种 UI 元素,非常整齐地存放在不同目录下,由于是

QQ欢乐斗地主UI界面设计分享

Hello,大家好,我是无线新人设计师echo,第一次做项目分享心情鸡冻的hold不住.出炉不久尚未烤熟经验尚浅欢迎拍砖. Symbian的夕阳时代,无线手机休闲游戏却依托着越来越强大平台.大展拳脚的设计为我们带来了许多意想不到的创意和惊喜,字里行间都透露着设计师的细致与智慧. 欢乐斗地主作为一款年代比较久远的产品,是我们休闲游戏线的核心,也是是用户规模最大的产品之一.从2004年12月发布首款斗地主游戏到现在的多 个平台多款游戏,内容不断丰富,形式不断改进,用户不断增加.尽管目前手机游戏和平台

PhotoShop立体质感砖块UI图标设计步骤制作教程

教大用PhotoShop打造立体质感砖块UI图标效果,UI即User Interface(用户界面)的简称.UI设计则是指对软件的人机交互.操作逻辑. 界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适.简单.自由.充分体现软件的定位和特点. 效果图: 教程制作步骤如下: 相关教程: PhotoShop绘制一个太极图图标教程 PS制作一把质感金属锁具图标教程 AI和PS绘制齿轮图标 PS制作经典质感拉丝钟表UI图标设计教程 分类: PS鼠绘教程 ps图标制作教

应该知道的UI动态设计规则

  这篇文章中,我主要阐述了UI动效设计中需要注意的问题以及原因,而不是教授制作UI动效额技巧.随着大家对于这一领域的关注(很大程度上是源自iOS的UI设计),我们发现UI动效设计同其他的UI设计分支一样,同样具备完整性和明确的目的性.伴随拟物化设计风潮(Skeuomorphism,也就是苹果所提出的拟物化设计风格,强调的是模拟现实生活中物品的纹理,是广泛意义上拟物化的子集.值得注意的是,"苹果式扁平化设计"并非广泛意义上的设计范式,而是带有限定的特定风格,仅为广泛意义上扁平化设计的一

19个免费的UI界面设计工具及资源

原文:http://www.oschina.net/news/16602/19-free-ui-design-tools-toolkits-and-resources-for-designers 开源中国社区刚发布了一篇<21个免费的UI界面设计工具.资源及网站>,介绍了免费的Web UI.移动UI.线框工具等.作为该文章的续篇,本文再介绍19个免费UI设计工具及资源,目的同样是帮助你通过发现新的.完美的工具来学习新的技能. 列表如下: DHTMLX DHTMLX 是一个JavaScript库