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

相关推荐

  • APP设计:那些打动人心的设计点(4)

    你好,这是2017年的第12篇文章。自从写了这个系列,每天除了吃饭睡觉工作,其余的时间都在用各种APP,观察各种产品。在同质化越来越严重的今天,这些产品的微交互,是用户喜欢或讨厌一个产品的重要原因,不容被忽视。

    2017-05-04
  • 交互设计师的60日计划之第九天

    今天参与了用户访谈,啊不,是旁听了用户访谈,躲在小黑屋里观察用户的表情动作,听他的描述,挺有趣。 20150805 用户和我们预想的完全不同前两天有讲过准备了访谈前的一些问题和任务提供给用研同学,今天真的见到…

    交互专题 2015-08-20
  • 交互设计:谈谈那些极具争议的设计方法

    作者:中大yzh全文共 2556 字,阅读需要 6 分钟———— / BEGIN / ————交互设计是一门有关设计学、用户心理学、图形学和计算机理论的综合型新兴领域,由于其及其复杂的学科交叉性,以及在不同的情景下,对同一类组件的要求经常会有所不同,导致目前在该领域内有时会出现一些看似正确其实极富争议的设计方法。在这里,我们就讨论一下这些具有争议的设计方法。争议方法1:在线填表时应该标注“可选填”的填表项在线填表时,需要在表格上面注明“...

    2018-02-01
  • 美的苏宁智能+计划解读:供给侧改革用户体验升级

    丁道师ID:dingdaoshi123资深互联网观察家,长期致力于中国互联网产业和企业研究。苏宁与美的空调宣布联合共建用户研究实验室,通过云服务、大数据等技术基础,让用户全方位的参与到美的产品研发、交互、营销等环节中来,未来美的、用户、渠道商共同携手,构建一个可循环的新消费升级商业体系。随着一股实力派冷空气登场,2016年的初冬比以往更冷一些。这几日,北方多地现初雪,大风吹、降温猛。伴随着天气的转凉,围绕“智能空调”为核心的“寒冬保卫战...

    2018-03-10
  • 用户体验是家电实体店独享红利

    不可盲目自信,也不能过度自卑。对于众多的家电实体店来说,满足用户的体验、持续带来新的用户体验,是应对一切外来不利因素挑战和冲击的最大筹码,也是生存的底线。蔓欣||撰稿现在,主题乐园正成为现在人们选择度假的方式,在春节旅游大报告中,上海迪士尼赫然位于“最热门景点”第四,而其他像常州中华恐龙园、顺德长鹿农庄、上海长风海洋世界、武汉欢乐谷等也是今年春节期间最热门的主题公园。尽管,现在基本上所有的购物、娱乐和消费,都可以在线上解决。但是,更多的...

    2018-03-09
  • iOS 9 GUI PSD源文件下载&iOS 9 GUI Sketch 格式下载 (iPhone)

    iOS的9 GUI(iPhone) 在iOS中9的公开发行中GUI元素的Photoshop和Sketch模板。 [button type="success" text="PSD 格式下载" url="https://s3-us-west-1.amazonaws.com/facebookdesignresources/Facebook-iOS-9-Pho…

    2015-11-12
  • 污力传感器——当飞机杯都有了交互体验

    污力传感器入门枕边人这是一个高科技枕头,包含一个指环和一个内置在枕头里的扬声器。当用户带上指环设备将获取用户的心跳。通过智能手机应用控制从而将信号传送到对方枕头内的扬声器中,用户靠到枕头上就仿佛实时听到爱侣的心跳!该枕头还会微微发光哦,是不是更加温馨甜蜜。污力传感器进阶Kissenger它是一款可以将远在千里之外恋人的亲吻传送到面前的装置,是不是听上去晕乎乎的?请收看以下视频:硅胶唇下嵌有高精度力传感器,用以测量吻时嘴唇不同部位的动力,...

    2018-01-30
  • 为什么产品与交互你都要懂?

    今天老大给交互设计师和部分视觉设计师上了一堂产品经理的培训课,从实际的项目需求出发,十分受益匪浅,确实有些事情值得去考虑。 老大先抛出了一个问题(据说的某厂的一道面试题):一辆卡车载着货物过桥洞,货物…

    2016-02-29
  • 论数字媒体交互设计的未来

    “交互设计”这一概念如今风靡全球,对于它的研究 与实践受到企业、院校等机构越来越多的关注。现如今交互设计正在呈现出一种放射状成长态势,这使得交互设计没有绝对的定理,都是在共同交流,探索中前进。国内交互设计优秀案例分析在信息全球化的时代,无论是国际还是国内市场,大多数设计机构都在言必称交互,“交互设计师”、“用户体验设计师”已经成为炙手可热的职位。我国也涌现出一批优秀的交互设计师们,其设计出的作品均获得了国内外的一致好评。例如,中央美术学...

    2018-03-03
  • 超好看APP交互设计~

    设计APP,不是简单的把界面绘制好,漂亮的色彩搭配、可爱、卡通或者扁平化的图标设计等等。如今的移动APP界面设计,更要追求有趣与实用的完美结合。今天,小编分享来自印度的设计师Joney vino的超好看APP交互设计作品。第一款是APP交互设计是关于免费试驾APP的选车界面与整个选车的流程。整个过程就是把选车类型、日期、人数等功能元素在流畅的界面转换场景当中完成。追求一气呵成。很不错的免费试驾体验。第二个APP交互设计当中的有趣、创意与...

    2018-03-03