Apple Watch界面设计规范之UI设计基础(2/2)

六、布局

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

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

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

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

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

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

屏幕尺寸

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

Apple Watch界面设计规范之UI设计基础(2/2)

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

七、色彩与文字

色彩

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

Apple Watch界面设计规范之UI设计基础(2/2)

使用黑色作为应用的背景色。黑色的背景色可以与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界面设计规范之UI设计基础(2/2)

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

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

八、动效

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

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

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

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

九、品牌

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

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

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

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

本文来自Be For Web
英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserE…
译者信息: C7210 – UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/4168/

(0)
TinadminTinadmin
上一篇 2015-03-10 11:13
下一篇 2015-03-10

相关推荐

  • 分身乏术?来学学交互设计的优先级判断与排期协同

    在被密集需求轰炸(需求本身都具备一定合理性,不包括那种应该拒掉不接的需求),同时自己还有一堆想自发驱动去做的事情时,交互设计师该如何进行合理的设计优先级判断,分解需求排期推进呢?来看今天的实战经验!

    2017-05-23
  • 总结|2017年的5个网页设计趋势

    几何图案与全屏背景图结合、灰色的高级用法、色彩叠加……这篇总结的这5个网页设计趋势,其实在年底就初现端倪,所以2017年大面积运用几乎势在必行,想不落人后记得打开阅读哟。

    2017-05-08
  • 交互设计申请竞争白热化,你该如何“杀出重围”?

    只要你想改变自己汉艺陪你死磕到底对于学习交互设计的同学来说,多数同学的作品集项目最终效果是这样的:这样的一个网页,几个app界面的最终效果图在各大设计网站,更是一抓一大把,导致很多同学对于交互设计的认知更多的停留在网页设计或者app设计上,浏览越多案例,思维越被局限。如果一个交互作品集中四五个项目全是这样的“大众脸”,想要从全球大量相似的“竞品”中脱颖而出,吸引到考官注意力,可以说困难重重。本期文章,为了让大家的作品集能够在全球竞争中脱...

    2018-02-03
  • 至纯至简|手机百度8.0设计总结

    8.0是手机百度发展过程中一个重要里程碑,它不仅延续了产品建立以来的要点,打破历史包袱,与时俱进地从体验和产品角度进行了创新,通过全新的整体交互框架与视觉风格,将搜索、语音搜索、FEED流信息获取、多垂类服务等进行了再设计。

    2017-05-12
  • APPLE WATCH 中文手册:通知--有关通知的一些要点

    如果您的 iOS 应用支持本地或远程通知,Apple Watch 也会同步显示这些通知。当某个应用的本地或远程通知抵达用户的 iPhone 后,iOS 将会自行判断显示该通知的设备(iPhone 还是 Apple Watch)。对于发送到 Apple Wa…

    2015-06-15
  • 用户体验设计中最常见的误解

    UX Myths网站收集了很多关于用户体验设计中最常见的误解和解释了为什么他们不适用。现在将这些经验研究整理出来,为各位设计从业者做参考,避免依赖个人的主观经验来做判断。建议你阅读完之后,还是应该结合自身的经验来审视你的设计是否满足用户的需求。

    2017-05-25
  • 百度三端搜索首页之美:精确、精准、精细

    持之以恒的学习是设计的来源,责任感是设计的原则,而灵感是设计的升华。

    2017-05-12
  • 智能产品的交互设计,不做到这样可不行

    我们终将以自然的方式与机器交流。在2012年圣丹斯独立电影节上,影片《机器人与弗兰克》赢得特别奖,该片讲述机器人Robot照顾患有老年痴呆症弗兰克的故事。在2017年AI大热之年,人们能否像电影里的弗兰克那样,以人对人的方式与机器交流,这在人机交互学科里定义为“人机自然交互”。何为自然交互?简而言之就是以日常交流方式与计算机进行交互。何为日常交流方式?就是人们通过语音、肢体、手势、眼神、表情等形式进行交流互动。人机交互正迈上新台阶人机交...

    2018-02-07
  • 2016年最值得关注的16个网页设计趋势

    设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流。作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都…

    2015-12-23
  • 译文 | 记忆设计:怎样设计可被牢记的友好体验

    本篇文章中,我将向大家分享:怎样设计能够为用户留下一个记忆中的正面印象?在以前,锁匠开锁需要花费很多时间开锁,甚至需要将整个门破坏掉,那个时候,顾客通常会很满意的付给锁匠报酬,甚至是优厚的小费;但现在,开锁的设备更加先进了,锁匠开锁花费的时间越来越少,锁匠能够做到在三、四分钟内将锁打开,然而顾客却变得越来越吝啬,锁匠再也收不到优厚的小费了,并且常常被抱怨要价偏高,他们认为锁匠并没有花费太多的功夫就将锁打开了。

    2017-05-19