Apple Watch界面设计规范(21) – 菜单图标

uidec他(她)的空间>>4年前来源:UI中国

人气1065

情境中的都是基于模板创建的,其中的图形样式是由alpha通道的形状决定的。图片文件中的颜色信息会被忽略。

的背景画布比图标当中的实际内容要大。图形四周的多余空间可以确保图标边缘与形状内容之间的框架足够清晰。

对于不同规格的Apple Watch,菜单图标的画布尺寸及图标内容尺寸见下表:

Apple Watch界面设计规范(21) - 菜单图标

在设计图标的形象时,针对不同的设备规格以及图标本身的复杂程度,所使用的线形宽度也有所不同。为了确保基本的辨识度,线宽不得低于4像素。具体规则见下图:

Apple Watch界面设计规范(21) - 菜单图标

对于菜单图标,推荐使用PNG格式。避免使用经过交错处理的PNG文件。

 

本文来自 Be For Web

英文原文:https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/MenuImages.html#//apple_ref/doc/uid/TP40014992-CH18-SW1

译文地址:http://beforweb.com/node/622

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(20) – 图标与图片尺寸

uidec他(她)的空间>>4年前来源:UI中国

人气0

每个应用都需要漂亮而独特的应用,使用户容易记住,便于辨识。在系统主屏当中,用户只能通过来识别应用,所以你的图标一定要易于记忆,与iOS版本的图标相似,并且要表达出应用的功能。

Apple Watch界面设计规范(20) - 图标与图片尺寸

图标尺寸

-----------------------------------------------------------------------------------

系统首屏的图标均是圆形。下表列出了不同的直径规格及用途。将你的图标按照下列规格设计为全出血的矩形,系统会自动添加圆形遮罩。

Apple Watch界面设计规范(20) - 图标与图片尺寸

所有的图形资源都是@2x规格。Apple Watch不需要非@2x的图形。

对于所有的图片和图标来说,PNG格式都是最为推荐的。避免使用经过交错处理的PNG图片。

图标和图片的标准色深(bit depth)为24位 - 其中红、绿、蓝色各占用8位。你可以使用带有8位alpha通道的图形,但并非必要。你也可以使用带有索引色的PNG图片,以节省图片文件的存储空间。

首屏图标

-----------------------------------------------------------------------------------

Apple Watch的系统首屏是非常独特的,同时也会让你觉得似曾相识。首屏中的应用图标与iOS当中的类似,只是不附带文字标题。如此小的尺寸下,图标也必须能够清楚的让用户识别出它们代表着哪些应用。Watch应用在功能上与其iOS版本具有相似性,它们的图标在视觉上也要有一定的一致性。不过,由于Watch应用对于其iOS版本来说扮演着补充或控制器的角色,所以在图标设计上也可能需要有相应的调整。

为了获取最佳效果,可以向专业的平面设计师寻求帮助。经验丰富的平面设计师可以帮助你定义一套整体的视觉风格,并运用到应用当中的所有图标及图形元素上。

使用通用的表现手法,便于用户识别和理解。一般情况下,要比避免使用次要的或是不具代表性的形象属性。例如,对于邮件应用的图标来说,要使用约定俗成的信封样式,而非邮箱、邮递员的包裹或邮政局标志等形象。

保持简洁。特别要避免在应用图标当中运用太多不同的图形。找到某种能够捕捉到应用核心概念的图形元素,将该元素以简洁独特的形式在图标中展现出来。添加细节时要谨慎。如果图标中的内容或形状过于复杂,那么图标在小尺寸下将变得一团模糊,令人难以辨识。

基于应用的核心概念创造一种抽象的表达方式。通常,将现实中的概念以艺术化抽象化的形式表现出来会更好,因为这种方式可以使你希望用户注意到的某方面主题得到加强。

与iOS版应用图标保持相似。保持外观上的相似性可以使用户在认知上建立起更强的关联。

为不同规格的Apple Watch创建不同尺寸的应用图标。这可以使图标在每种尺寸的屏幕上都表现出最佳效果。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(19) - 菜单》

下一章:《Apple Watch界面设计规范(21) - 菜单图标》

本文来自 Be For Web

英文原文:https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/IconandImageSizes.html#//apple_ref/doc/uid/TP40014992-CH16-SW1

译文地址:http://beforweb.com/node/621

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(19) – 菜单

uidec他(她)的空间>>4年前来源:UI中国

人气0

在Apple Watch上使用按压手势可以唤出与当前相关的。那些与当前界面内容相关的功能可以默认收起到情境当中,平时无需占用界面空间。

Apple Watch界面设计规范(19)  - 菜单

情境菜单可以显示一到四个操作按钮。按钮会按照程序定义的顺序自上至下、自左向右的呈现。菜单本身不具有层级化的结构,不可滚动。无论在界面设计阶段还是编程阶段,你都可以对菜单进行定义。

情境菜单中的操作只作用于当前屏幕。每个界面都可以有各自的菜单,或是根本不需要菜单。某些类型的操作不宜通过情境菜单来实现,例如只会作用于滚动界面可视区域的或是只会作用于当前选中条目的任务。

情境菜单中的每个操作按钮都要有图标和标签。图标要使用系统风格的线形图标配以标准的圆形背景。标签可以包含一到两行文字。

情境菜单的使用是非强制性的。只有当前界面的内容需要相关操作时,才有必要引入情境菜单。如果没有定义情境菜单,那么在用户按压屏幕之后,系统会提供恰当的动效进行反馈。

关于怎样为菜单创建图标,可以参考Menu Images。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(18) - 日期与计时器》

下一章:《Apple Watch界面设计规范(20) - 图标与图片尺寸》

本文来自 Be For Web

英文原文:https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Menus.html#//apple_ref/doc/uid/TP40014992-CH14-SW1

译文地址:http://beforweb.com/node/620

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(18) – 日期与计时器

uidec他(她)的空间>>4年前来源:UI中国

人气0

控件是Apple Watch上的一种特定的(label),用来显示与时间相关的信息。

日期(Date Labels)

----------------------------------------------------------------------------------------

日期标签具有以下特性:

  • 可以显示日期、时间,或是将二者组合显示
  • 通过设置,能够以不同的格式、日历形式和时区来显示日期与时间信息
  • 无需通过WatchKit更新

当你需要显示当前日期和时间信息时,可以使用日期对象。

计时器标签(Timer Labels)

----------------------------------------------------------------------------------------

Apple Watch界面设计规范(18) - 日期与计时器

计时器标签具有以下特性:

  • 向指定的时间倒计时,或是从指定的时间开始计时
  • 通过设置,能够以不同的格式显示当前的计时
  • 无需通过WatchKit更新

始终使用计时器标签来实现精确的计时或倒计时需求。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(17) - 地图》

下一章:《Apple Watch界面设计规范(19) - 菜单》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/DatesandTimers.html#//apple_ref/doc/uid/TP40014992-CH32-SW1

译文地址:http://beforweb.com/node/619

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(16) – 滑块

uidec他(她)的空间>>4年前来源:UI中国

人气0

用户可以通过在一组互相分离的数值当中进行调整。点击左右两侧的图标即可调整数值。

Apple Watch界面设计规范(16) - 滑块

滑块具有以下特性:

  • 由一条横向滑轨及其左右两侧的图标按钮组成
  • 通过一组不相连的或是连续的进度条来表示当前所选值
  • 增量和减量都是预先在程序中设置好的
  • 不需要向用户展示具体的数值

通过自定义图标使滑块的意义更明确。如果不使用自定义图标,系统将默认使用加减号作为按钮。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(15) - 开关》

下一章:《Apple Watch界面设计规范(17) - 地图》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Sliders.html#//apple_ref/doc/uid/TP40014992-CH30-SW1

译文地址:http://beforweb.com/node/616

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

Apple Watch界面设计规范(17) – 地图

uidec他(她)的空间>>4年前来源:UI中国

人气0

可以向用户传达地理位置信息。你可以在应用中通过来展示终点或POI(point-of-interest)位置。你的应用所展示的地图是静态截图,不具有交互性;点击该地图会打开Apple Watch的地图应用。

将地图的显示范围设置成包含相关地理位置的最小区域。地图的显示范围是通过WatchKit程序化设置的。要选定一个能包含所有POI信息的最小区域。

不要使地图对象的尺寸超过内容可视区域。地图对象的尺寸要匹配Apple Watch的屏幕规格,使用户无需额外滚屏就可以看到整个地图。

使用注释来高亮标注地图上的特定位置。注释是显示在地图上的图标,用来标注特定的地点或是用于唤出相关信息。每屏不能显示超过5个注释。

地图对象默认支持显示绿、红、紫三种颜色的图钉。使用绿色图钉标注起点位置,红色图钉标注重点位置,紫色图标注POI位置。

Apple Watch界面设计规范(17) - 地图

你可以使用自定义图片作为注释图标。图片底边缘指向目标区域。

Apple Watch界面设计规范(17) - 地图

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(16) - 滑块》

下一章:《Apple Watch界面设计规范(18) - 日期与计时器》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Maps.html#//apple_ref/doc/uid/TP40014992-CH26-SW1

译文地址:http://beforweb.com/node/618

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(15) – 开关

uidec他(她)的空间>>4年前来源:UI中国

人气0

切换控件用来呈现两个互斥的选项或状态。

Apple Watch界面设计规范(15)  - 开关

切换控件具有以下特性:

  • 用于指示一个元素的二元状态
  • 要始终搭配标签使用

使用切换控件为用户提供一种在两个互斥选项当中做出选择的方式,例如“是”与“否”,“开”与“关”。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(14)- 按钮》

下一章:《Apple Watch界面设计规范(16)- 滑块》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Switches.html#//apple_ref/doc/uid/TP40014992-CH29-SW1

译文地址:http://beforweb.com/node/615

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

Apple Watch界面设计规范(8) – 动效

uidec他(她)的空间>>4年前来源:UI中国

人气0

漂亮而精妙的遍布于Apple Watch当中,将更具吸引力和动感的体验带给用户。恰当的能够:

  • 传达状态信息,提供反馈
  • 以可视化的方式让用户看到操作结果

使用静态图片序列来创建预生成动效。预先录制动效并储存在Watch应用包当中,使其在被调用时可以更迅速的呈现给用户。预先录制的动效帧率更高,效果更平滑。而在应用运行过程中通过WatchKit动态创建的动效则会带来延迟。

播放控制只对图片和分组对象(group object)有效。多数界面对象会以无限循环的方式展示动画图片序列。要使动画停止,或是只播放动画中的特定片段,你需要使用图片对象或分组对象。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(7) - 色彩与文字》

下一章:《Apple Watch界面设计规范(9) - 品牌》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Animation.html#//apple_ref/doc/uid/TP40014992-CH7-SW1

译文地址:http://beforweb.com/node/608

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(9) – 品牌

uidec他(她)的空间>>4年前来源:UI中国

人气0

成功的塑造不仅在于向当中放置与相关的图形资源。优秀的应该将品牌形象与独特的界面外观及操作感整合起来,带给用户愉悦而印象深刻的体验。

你可以通过很多方式来塑造应用的品牌认知,例如图标、色彩、定制化按钮、定制化字体和文案等等。当你为应用设计图形元素的时候,不仅要使它们各自表现良好,同时还要使它们看上去彼此协调与统一,无论对于定制化元素还是系统标准控件来说都是如此。

将品牌元素优雅平滑的融入当中。人们用你的产品是为了完成任务或得到消遣,他们不希望自己像是在被迫看广告一样。为了打造更平滑的体验,你要尽量潜移默化的通过自体、色彩和图形元素向用户传达品牌信息。

不要在应用内或Glance当中显示logo。Apple Watch上的显示空间寸土寸金,logo图形中的每一个元素都在占用用户希望看到的实际内容的空间。此外,在Watch应用当中展示logo并不能达到在网页上那样的效果:用户在浏览传统网页时,一开始很可能并不了解当前页面所属网站或品牌;而人们在移动设备上打开某应用时通常都是依靠应用图标和logo来定位的,你无需再在应用内部展示。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(8) - 动效》

下一章:《Apple Watch界面设计规范(10) - 标签(Labels)》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Branding.html#//apple_ref/doc/uid/TP40014992-CH8-SW1

译文地址:http://beforweb.com/node/609

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

Apple Watch界面设计规范(10) – 标签(Labels)

uidec他(她)的空间>>4年前来源:UI中国

人气0

用来显示静态文字。

Apple Watch界面设计规范(10) - 标签(Labels)

具有以下特性:

  • 可以显示任意数量的静态文字
  • 不支持用户交互
  • 可以由程序来更新内容
  • 可以包括多行文字

标签是应用当中最常用的界面元素之一。你可以使用标签向用户展示文字信息。标签最适用于呈现相对少量的文本内容。

要确保标签的清晰可读。使用高对比度的字色,通过动态字体功能确保用户看到的标签字号是合理的。推荐使用系统内置的字体,它们可以使文字在Apple Watch上呈现出最佳的可读性。如果你选择使用自定义字体,一定不要为了追求花哨的字形与配色而牺牲文本的清晰度。更多相关信息请参考色彩与文字。

尽可能使用系统内置的字体风格。内置的字体风格是专门针对在Apple Watch上实现高可读性和易用性而设计的。

Apple Watch界面设计规范(10) - 标签(Labels)

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(9) - 品牌》

下一章:《Apple Watch界面设计规范(11)  - 图片》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Labels.html#//apple_ref/doc/uid/TP40014992-CH31-SW1

译文地址:http://beforweb.com/node/610

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(11) – 图片

uidec他(她)的空间>>4年前来源:UI中国

人气0

图片对象可以显示单张图片或由一组图片构成的动画。

Apple Watch界面设计规范(11) - 图片

图片对象具有以下特性:

  • 对象自身不呈现任何内容,只作为图片容器
  • 不支持用户交互
  • 可以为动画提供播放控制功能,包括开始和停止播放

确保图片尺寸适用于不同规格的Apple Watch。不要为了适配不同的屏幕规格而对图片进行拉伸或压缩。要对应着每种屏幕规格提供尺寸最为精确的图片素材。

所有的图片资源都是@2x。不存在非Retina屏幕的情况。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(10) - 标签(Labels)》

下一章:《Apple Watch界面设计规范(12) - 分组(Groups)》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Images.html#//apple_ref/doc/uid/TP40014992-CH25-SW1

译文地址:http://beforweb.com/node/611

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

Apple Watch界面设计规范(12)- 分组(Groups)

uidec他(她)的空间>>4年前来源:UI中国

人气0

是一种用来布局内容的重要工具。对于其他界面来说,它扮演着容器的角色。分组本身不包含任何默认的内容,但是你可以为其设置背景色或背景图片。分组还具有一些例如位置、尺寸、边距等与界面布局相关的属性。

分组对象具有以下特性:

  • 可以横向或纵向布局
  • 可以容纳一个或多个其他类型的界面元素
  • 可以通过属性来设定边距和分组当中的元素间距
  • 可以设置背景图片或背景色
  • 可以设置容器背景的圆角半径

分组的主要作用是在Xcode当中对界面元素进行布局。但是,由于具有背景色和背景图片的属性,所以你也可以将其作为一种显性的视觉元素来使用。

通过在分组中嵌套分组来打造复杂的布局。你也许需要通过这种方式将一组元素组向排列,同时将另一组元素横向排列。此外,你也可能需要通过嵌套分组来利用外层容器的外边距或内间距属性去实现特定的设计需求。

为不同规格的Apple Watch创建不同尺寸的背景图片。不要为了适配不同的屏幕规格而对图片进行拉伸或压缩。要对应着每种屏幕规格提供尺寸最为精确的图片素材。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(11) - 图片》

下一章:《Apple Watch界面设计规范(13)- 列表(Tables)》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Groups.html#//apple_ref/doc/uid/TP40014992-CH23-SW1

译文地址:http://beforweb.com/node/612

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(13) – 列表(Tables)

uidec他(她)的空间>>4年前来源:UI中国

人气0

会以单列的形式分行呈现数据。要使用来呈现那些会动态变化的数据

Apple Watch界面设计规范(13) - 列表(Tables)

列表对象具有以下特性:

  • 支持多行内容展示
  • 可滚动
  • 可以设置背景色或背景图片

你需要在设计阶段规划好列表行中的内容布局。所有的布局都需要提前设计好。实际运行时,你可以通过程序选择使用哪种的列表行。

列表行的使用方式要具有持续性。你可能会创建多种列表行模式来展示不同类型的数据。在使用过程中,对列表行类型的选择要遵守持续性原则。

不要将不同类型的列表行混杂在一起显示。显示内容时,要保持列表形式的一致性。不同的列表section当中可以使用各自的列表行类型。保持列表行形式的统一,可以使内容的显示规格保持一致,更易浏览。

对每次显示的列表行数进行控制。超过20行的列表会使浏览操作变得困难。可以只取相关性最强的一部分内容默认显示,同时为用户提供加载更多列表行的选项。

不要在分组(Groups)当中嵌套列表。列表对象会根据数据行数的不同而动态伸缩,所以会忽略掉分组容器当中所设置的高度限定。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(12)- 分组(Groups)》

下一章:《Apple Watch界面设计规范(14)- 按钮》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Tables.html#//apple_ref/doc/uid/TP40014992-CH24-SW1

译文地址:http://beforweb.com/node/613

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(14)- 按钮

uidec他(她)的空间>>4年前来源:UI中国

人气0

可以执行由应用定义的功能行为。

Apple Watch界面设计规范(14)- 按钮

按钮具有以下特性:

  • 可以设置背景
  • 拥有圆角
  • 其中可以包含标签(label)或分组对象(group object)

你可以在程序中设置按钮的背景色或背景图片。

按钮宽度要充满全屏。强烈推荐将按钮设计为全屏宽度。如果必须在一行内使用超过一个文字按钮,那么最多只能放置两个。

保持按钮高度一致。如果界面当中有多个按钮,请保持它们的高度一致。

按钮的圆角样式可以将其与其他类型的界面元素区分开来。标准的圆角半径是6像素。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(13) - 列表(Tables)》

下一章:《Apple Watch界面设计规范(15) - 开关》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Buttons.html#//apple_ref/doc/uid/TP40014992-CH28-SW1

译文地址:http://beforweb.com/node/614

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

Apple Watch界面设计规范(6) – 布局

uidec他(她)的空间>>4年前来源:UI中国

人气0

并排放置的数量要控制好。当并排放置时,使用图标来代替标题文案。一行不要放置3个以上,否则按钮的尺寸将会太小,很难被点到。

完整利用左右两个边缘之间的全部空间。Apple Watch的边缘斜面会在内容周围制造出可视的边距,所以你不需要再在内容与边缘之间添加留白了。不过要注意,硬件设备上的边缘斜面是无法在iOS模拟器当中呈现的。

使用相对位置来布局界面元素。同一套界面可能会在不同规格的Apple Watch上显示,所以使用相对位置来布局元素能令其根据需要而伸缩,使屏幕空间得到更合理的利用。

布局时优先使用左对齐。界面中的元素应该按照自上而下、自左向右的顺序排布。将元素以界面左边缘进行左对齐可以确保有足够的扩展空间来完整的展示内容。

文字按钮要使用全屏宽度。要将显示标题文字的按钮设计为全屏宽度,以确保标题文字能完整呈现。

通过情境菜单来呈现次级操作。不要将全部的功能按钮都放在界面当中默认展示出来,那些低频操作可以收到情境菜单当中。

屏幕尺寸

----------------------------------------------------------------------------------------------------

应用界面所呈现的内容在不同规格的Apple Watch当中应该保持一致。在设计布局时,要使界面元素可以自如的伸缩,以便充分利用不同规格的屏幕空间。

Apple Watch界面设计规范(6) - 布局

如果需要,可以为不同规格的屏幕提供不同的图形资源。如果一套图形素材在两种规格的屏幕中效果都不错,那么就使用这一套;否则可以提供两种不同尺寸的图形资源。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(5) - 模态表单》

下一章:《Apple Watch界面设计规范(7) - 色彩与文字》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Layout.html#//apple_ref/doc/uid/TP40014992-CH22-SW1

译文地址:http://beforweb.com/node/605

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(7) – 色彩与文字

uidec他(她)的空间>>4年前来源:UI中国

人气0

色彩

-------------------------------------------------------------------------------------

通过对色彩的运用,你可以在当中构建视觉一致性及品牌认知。

Apple Watch界面设计规范(7) - 色彩与文字

使用黑色作为。黑色的背景色可以与Watch的边缘斜边无缝的融合起来,给人一种无边框的错觉。避免在界面中使用明亮的颜色作为背景色。

使用应用当中的色来呈现品牌或状态信息。每个应用都要定义一种色。系统会将界面左上角以及通知界面中的标题渲染为你所设置的关键色,以突出应用名称和其他一些关键信息。关键色也应该成为你应用当中的品牌认知要素之一。

为文字内容使用高对比度的颜色。高对比度的颜色可以使文字更加易读。

避免通过色彩来暗示交互性。可以适当的使用关键色作为品牌识别元素,但是不要单纯依靠色彩来暗示按钮或其他控件的交互性。

考虑到色盲用户。多数色盲患者难以区分红色与绿色。要测试你的应用,确保没有任何一个环节是单纯依靠红绿两种颜色来区分状态或数值的(一些图片编辑类软件会自带相关工具,帮你验证界面配色是否对色盲友好)。

色彩是具有沟通性的,但效果未必如你所愿。每个人对色彩的感知都有所差异;不同的文化当中,色彩的含义也可能大相径庭。花些时间去研究一下你所使用的颜色对于国外的或是不同文化当中的用户来说会产生怎样的认知。要尽可能的确保应用当中的色彩能传达出恰当的信息。

文字

-------------------------------------------------------------------------------------

最首要的,文字必须清晰易读。如果用户根本无法阅读应用中的文字,那么再精美的排版都没有意义。

系统默认字体是特别针对在Apple Watch上实现良好易读性而设计的。在较大的字号下,字符会轻微收缩,使横向空间的占用量更少。而字号较小时,字符的分布则会变得更加松散,而且诸如“a”和“e”这些字母的字腔会变大,使其在用户难以专注聚焦的情况下仍能保持较高的可读性。此外,字号较小时,标点符号也会适度增大。随着字号的改变,Apple Watch会动态的切换字体显示方式,从而始终保持文字内容的清晰易读。

你的应用应该始终采用动态字体(Dynamic Type)。使用动态字体有以下几点好处:

  • 针对不同的字号自动调整字符间距(letter spacing)和行高(line height)。
  • 可以根据文字区块的语义来指定不同的文字风格,例如Body、Footnote或Headline等。
  • 文字可以根据用户在字号设置当中所做的调整而进行响应。

注意

如果在应用当中使用自定义字体,你仍然可以使文字根据系统当中的字号设置进行缩放。这种情况下,你的应用本身将负责使文字根据用户在系统中的设置而进行相应的调整。

如果你使用系统内置字体,那么你的应用本身已经包含对动态字体的支持了。如果使用自定义字体,那么你需要做些额外的工作来支持这项功能。要了解怎样使用文字风格并确保你的应用在用户调整系统字号时进行相应,可以参考Text Programming Guide for iOS当中的Text Styles

尽可能使用系统内置字体。系统内置字体可以自动支持动态字体功能,并且是专门针对Apple Watch的特性进行设计的。

Apple Watch界面设计规范(7) - 色彩与文字

尽可能在应用全局使用同一种字体。你可以出于展示品牌的目的而使用额外的字体,但一定要保持最少的使用量。多种字体混杂在一起将使你的应用看上去非常碎片化,给人一种不严谨的印象。你可以使用UIFont文字风格API根据不同区块的语义对字体风格进行定义。

当你手动为系统字体指定字号时,点(point)的大小将决定着使用哪种字号。你可以为19点或更小的文字选择San Francisco Text字体,为20点或更大的文字选择San Francisco Display字体。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(6) - 布局》

下一章:《Apple Watch界面设计规范(8) - 动效》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/ColorandTypography.html#//apple_ref/doc/uid/TP40014992-CH9-SW1

译文地址:http://beforweb.com/node/606

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(5) – 模态表单

uidec他(她)的空间>>4年前来源:UI中国

人气0

有利也有弊。可以临时性的阻断用户与应用其他部分的互动,使他们不受干扰的完成任务、获取信息,或是在由按压手势唤出的情境菜单中完成选项流程。

要使应用中的模态体验保持在最少的程度。通常,只在这些情况下考虑使用模态表单:

  • 获取用户的注意力在当前环节是至关重要的。
  • 某个独立的任务必须被完成,或是被显性的放弃,否则用户数据将处于模棱两可的状态。

模态通常由单一构成,或者也可以由一系列基于页面式导航的界面构成。呈现方式上唯一的区别就在于底部是否有页码指示符。

Apple Watch界面设计规范(5) - 模态表单

模态界面的左上角用来放置关闭按钮。当用户点击该按钮时(或从屏幕左边缘向右轻扫),系统会将模态界面关闭掉,不再有相关的后续操作。关闭按钮的呈现是强制性的,不过你可以定制其标题。你也不需要在内容当中另外添加关闭按钮了。关闭按钮的典型标题有“关闭”和“取消”,字色始终保持白色。

如果任务当中需要“接受”操作,你还需要在模态界面当中添加接受按钮。请使用标准的接受按钮。点击该按钮后,模态界面同样会被关闭,然后后续行为得到执行。

保持模态任务的简练。不要在初始的模态界面中再次显示一个新的模态界面。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(4) - 通知》

下一章:《Apple Watch界面设计规范(6) - 布局》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/ModalContexts.html#//apple_ref/doc/uid/TP40014992-CH6-SW1

译文地址:http://beforweb.com/node/600

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(2) – 应用解析

uidec他(她)的空间>>4年前来源:UI中国

人气0

Apple Watch必须配合用户的iPhone才可以运行你的应用。

界面风格

------------------------------------------------------------------------------------

Watch应用支持两种方式:

   

这种方式与iOS的导航风格相吻合,最适用于拥有化信息结构的应用。在层级式导航的应用当中,用户在每屏当中只能做出一个选择,直到他们到达目标位置。要继续导航到其他地方,用户需要折返一部份或是全部的层级来做出不同的选择。

对于交互流程较为复杂的应用来说,层级式导航比扁平化的、基于页面的导航机制更加适用。

Apple Watch界面设计规范(2) - 应用解析

页面式  

基于页面的界面形式允许用户通过横向轻扫的手势在不同的内容页之间进行导航。这种模式最适用于那些数据模型简单、且不同页面之间不存在直接数据关联的应用。界面底部的圆点指示符可以让用户了解目前所处的位置。要尽可能将页面总数控制在很小的范围内,使导航保持简便快捷。

Apple Watch界面设计规范(2) - 应用解析

你不能将以上两种导航方式组合起来使用。在设计阶段,必须从两者当中选择一种最适于你的应用内容的方式,并以此为基础进行设计。

无论使用哪种导航方式,你的应用都可以模态化的呈现内容。模态化界面可以使用户不受干扰的完成任务或获取信息,但是相应的,他们将暂时无法与应用当中的其他部分进行互动。更多相关信息请参考模态表单。

交互方式

------------------------------------------------------------------------------------

基于行为的事件

轻点(单击)是用户与应用进行互动的主要方式。列表行、按钮、切换等控件都是通过轻点来进行操作的。这些事件接下来会被传递到WatchKit扩展的代码当中。

手势

你不能在应用中添加任何定制化的手势。系统已经代你制定了标准的手势行为:

  1. 通过纵向轻扫使当前界面滚动。
  2. 通过横向轻扫在基于页面导航的界面之间前后查看。
  3. 从屏幕左边缘向右轻扫,可以返回父级界面。
  4. 轻点选项控件或其他交互元素。轻点事件会由系统处理并传递到WatchKit扩展的相关行为方法当中。

Apple Watch不支持多指手势,例如捏合等。

按压(Force Touch)

如此小屏只能容纳为数不多的界面控件,因此苹果带来了一种全新的交互方式:按压。正如可以感知到普通的轻点,Watch的Retina屏幕同样可以灵敏的感知到按压。按压用来唤出与当前界面相关的情境化菜单(如果有)。你可以在应用中使用这种菜单来展示与当前内容相关的各种操作选项。更多相关信息请参考菜单。

数码表冠(The Digital Crown)

可以精准滚动的实体控件,使浏览长页面等任务变得更加轻松,而且屏幕不会被手指遮挡。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(1) - 为Apple Watch而设计》

下一章:《Apple Watch界面设计规范(3) - Glance》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/WatchOSAppAnatomy.html#//apple_ref/doc/uid/TP40014992-CH4-SW1

译文地址:http://beforweb.com/node/597

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(3) – Glance

uidec他(她)的空间>>4年前来源:UI中国

人气0

Glance是Apple Watch的一种快捷视图功能,它能将应用的重要信息提取出来,并以简明的形式呈现。理想情况下,Glance具有适时性和情境关联性。成组的Glance(s)汇总了用户最为关注的应用当中的重要信息。Glance采用的是拉取机制,而非推送。所以,与推送提示有所不同,是否通过Glance访问信息是由佩戴者自己决定的。

Apple Watch界面设计规范(3) - Glance

Glance具有以下几方面的特性:

  • 基于  Glance界面的上下两部分有各自独立的模板。你可以在Xcode当中挑选合适的模板,并按照相应的规格设计你的内容。
  • 不可滚动  所有信息都要集中呈现在一屏当中。
  • 只读        轻点Glance界面当中的任何地方都会打开相应的应用。
  • 非强制     不是所有的应用都需要Glance视图,用户可以自主选择在Glance(s)中显示哪些应用的信息。

Glance界面的底部区域是预留给点状页码指示符的。

根据用户当前所处情境来配置Glance的信息。滞后的或是不相关的信息会使Glance失去价值。通过时间和地点信息来传达相关性。

Glance可以与其对应的应用建立深度关联。利用Handoff功能,Glance可以在用户轻点的时候,向与其对应的应用传递当前视图中显示的信息;应用启动之后,便可以根据这些信息来呈现不同的界面或是在已有界面当中进行相应的配置调整。

Glance必须向用户提供有用的信息。不要只是为了给你的应用增加一个启动入口而提供Glance视图。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(2) - 应用解析》

下一章:《Apple Watch界面设计规范(4) - 通知》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Glances.html#//apple_ref/doc/uid/TP40014992-CH21-SW1

译文地址:http://beforweb.com/node/598

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(4) – 通知

uidec他(她)的空间>>4年前来源:UI中国

人气0

作为快速、轻量的互动功能,Apple Watch上的由两部分组成:Short Look与Long Look。当有本地或远程需要呈现给用户时,Short Look会首先出现。Short Look当中包含着最少量的必要信息 - 这也是出于隐私方面的考虑。如果佩戴者放低手腕,Short Look便会消失。如果佩戴者保持手腕姿势,或是在Short Look的界面上轻点,那么Long Look视图便会呈现。它会提供更加详细的信息及更多的功能,而且只能由佩戴者主动关闭。

要注意向用户发送通知的频率。用户有可能将频繁发送的通知视为干扰,并在Apple Watch上禁止你的应用发送通知。一定要确保通知信息与用户期望具有相关性。

Short Look通知

-----------------------------------------------------------------------------------------------------

Short Look可以让用户了解到哪个应用接收到了通知消息,并且只会向用户呈现简要信息。Short Look的界面是基于固定模板的,其中包含应用的名称和图标,以及通知的标题。系统会将应用名称渲染成该应用自身的关键色。

Apple Watch界面设计规范(4) - 通知

保持通知标题的简短、易聚焦。可供展示通知标题的空间很小,所以要尽量保持言简意赅。标题无需展现通知信息当中的详情,只进行大致的示意即可。

可定制的Long Look通知

-----------------------------------------------------------------------------------------------------

Long Look会显示通知信息当中的更多详情。系统为Long Look提供了一套默认外观,但是你的应用可以对其进行定制,例如展示定制化的图形元素或品牌信息。所有应用的Long Look在结构上都是一致的。系统提供了一套标准的头部框,其中包括应用图标及名称。底部则是关闭按钮及若干应用自身定制的按钮。头部和底部之间就是你的定制化内容所显示的区域。

Apple Watch界面设计规范(4) - 通知

应用内容可以被头部框所覆盖,也可以与其下边缘相接。对于照片和其他图形类的内容,你可以让它们默认被头部框覆盖。而对于以文字内容为主的通知信息,则要在Xcode当中选中“Offset Notification Content”,使内容从头部框下边缘以下开始显示。

Apple Watch界面设计规范(4) - 通知

对于定制化的Long Look界面,应用必须提供一套静态界面,在某些时候也可能需要提供动态界面。相比于静态界面,动态界面具有更灵活的可配置性,但两者本质上都是使用你的图形与品牌元素来展示相同内容的通知信息。如果动态界面对你来说不可行,那么静态方式可以作为替代。

Long Look通知当中最多可以显示4个自定义按钮。Apple Watch可以利用iOS应用当中的交互式通知功能在Long Look中显示相关的操作按钮。这些按钮会根据通知信息的类型而自动显示出来。

关闭按钮会始终呈现在Long Look通知的底部。该按钮位于4个自定义按钮下方。

更多关于静态、动态界面及按钮配置的信息,可以参考WatchKit编程指南。

专题目录:《Apple Watch界面设计规范》

上一章:《Apple Watch界面设计规范(3) - Glance》

下一章:《Apple Watch界面设计规范(5) - 模态表单》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Notifications.html#//apple_ref/doc/uid/TP40014992-CH20-SW1

译文地址:http://beforweb.com/node/599

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     

Apple Watch界面设计规范(1) – 为Apple Watch而设计

uidec他(她)的空间>>4年前来源:UI中国

人气0

Apple Watch界面设计规范(1) - 为Apple Watch而设计

Apple Watch体现着如下几个方面的主题思想:

个人

Apple Watch是面向穿戴而设计的,所以其UI需要与者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digital Touch来“传心跳”或“传画” - 这些全新的沟通方式是极具个人色彩的。加速感应器和心率传感器可以日复一日的向佩戴者提供其运动行为方面的个人数据。苹果推出的其他任何设备都不曾与用户建立起如此紧密的关联。在你为Apple Watch设计应用的时候,时刻留意这种个人化的关联是非常重要的。

整体

Apple Watch旨在使硬件与软件的边界更加模糊。数码表冠是经过精心打造的实体控件,帮助用户在软件当中进行精巧的导航操作。Taptic Engine可以与提示信息或界面操作结合起来,为用户提供微妙的触觉反馈。Force Touch - 一种可以由硬件感知按压力度的触摸方式 - 为软件的情境化控制方式带来了一个全新的维度。即便是Retina显示屏的物理边缘也被考虑了进来 - 隐性的边缘渲染方式允许你打造出“边到边”的全屏UI设计。上乘的应用设计方案需要贯彻这种软、硬件一体的体验原则。

轻量

Apple Watch应用在设计上要注重快速、轻量的交互流程,并充分利用屏幕显示空间及其位于手腕位置的这一重要特性。出于隐私和可用性方面的考虑,界面当中信息的获取和移除方式都应该是非常快捷的。举个例子,Apple Watch上的Short Look信息提示方式的设计原则,就是首先以最小化的方式提供少量提示信息,如果用户持续关注,再为其展示更全面的信息。Glance则是通过一种易访问的、可通过轻扫手势操作的界面形式将应用内部的信息呈现出来。为Apple Watch设计应用时,要遵从于佩戴者使用该设备时的体验情境,例如短暂而高频次的交互会话,以及狭小的屏幕显示空间等等。

Watch应用是对iOS应用的补充,而非替代品。如果说我们能以“分钟”来度量iOS应用的人机会话时间,那么对于Watch应用来说则需以“秒”计。交互流程必须简短快捷,界面必须简单易懂。

专题目录:《Apple Watch界面设计规范》

下一章:《Apple Watch界面设计规范(2) - 应用解析》

本文来自 Be For Web

英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/index.html

译文地址:http://beforweb.com/node/595

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

     
TA的上传
  • 红色风格企业后台管理系统界面设计
  • 4张后台管理系统界面UI
  • 几张系统管理登录页设计
  • 国家电网管理系统后台界面
  • 简约大气后台登录页
  • 员工考勤系统后台界面
  • 飞哥网站
  • 一起海带APP设计
  • 扁平风格手机主题UI
  • 25个优秀UI图标ICON设计作品
查看全部

只有登录之后才可以评论,请点击进行登录

全部评论: 0

登录

忘记密码

如果您尚未注册,请选择以下方式登录

Q Q 登 录 微 博 登 录
已有账号?快去登录>>

注册