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

相关推荐

  • 《用户体验要素》

    大多数人都体验过网购,这种经历几乎每一次都是一样的:你到达网站,寻找你想买的东西,然后下单(提供你的住址和电话号码),然后网站将物品快递到你的手中。这个清晰、有条不紊的体验,都是由一系列完整的决策(大大小小的决策)组成的:网站看起来是什么样、它如何运转、它能让你做什么。这些决策彼此依赖,告知并影响用户体验的各个方面。如果我们去掉这些体验的外壳,就可以理解这些决策是如何做出来了。作者给出了一套用户体验设计的科学方法,借用此方法,我们可以对...

    微信热点 2018-04-12
  • 搞定老板第一步!如何准确描述自己的设计?

    @姑娘贩子 (手机淘宝设计师):如何准确描述自己的设计,这个问题困扰了我很久。这篇文章希望通过回溯淘小铺2.1项目的整个设计过程,从另一个角度,尝试解答这个问题。 这篇文章原本的标题是“小铺2.1用户分层引导…

    2015-11-24
  • 设计师们全都疯了!出Ps的Adobe公司又出新神器!

    图文来源:新设技 这次Microsoft 与 Adobe 强强联手退出了神器一样的应用,让现场设计师为之疯狂~~,不多说了,看视频吧... 设计师们,这到底是什么节奏啊~~?你们都懂的... 随著 Microsoft CEO Satya Nadella 近日…

    2014-10-12
  • 【用户体验.春节特辑】我的记事(总第265期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第265期“我的记事”——家庭、个人故事随时记录,方便存储。直接点击主页面“我的记事”按钮,即可进入“我的记事”页面,随时随地添加、修改、记录个人及家庭资料和故事。同时点击方框内加号键,可以添加照片,点击完成上传。上传后可根据提示选“分享”键转发至微信、朋友圈、微博、QQ好友、QQ空间;选“删除”键进行删除记事内容;选...

    2018-02-16
  • 交互设计 | 面向“交互领域”的能力转型

    点击上方“蓝色字体”,即可关注公众号文章来源:http://www.zcool.com.cn/article/ZNjM3MDAw.html(  站酷  )文章作者:千夜Ryan_Vision( 授权发布 )立足于交互设计及用户体验的角度谈一谈我的观点,希望对你有帮助。版权声明版权属于原作者,其内容归原作者所有如需转载请联系原创作者往期回顾APP UI结构-用户引导&提示UI设计师们还不重视闪屏设计?设计师的职场习惯如何让你的设计更精致-...

    2018-03-28
  • 当交互设计师承担视觉设计

    有人说,工科背景出身的交互设计师 跟视觉出身的交互设计 是的区别之一是,前者设计的东西会不够有美感,也就是很Low。虽然逻辑架构,特别是做大型管理系统的时候,可以很快把信息和功能模块归类,但是视觉知识和审美积淀,对我们这种工科生来说, 却是天生的Bug。

    2017-05-28
  • 如何做让老年人也能方便使用的网站【UXRen译#176】

    作者:保罗•克瑞斯顿(Paul Crichton)  |  翻译:阿陌,校审:天蛙   英国有近三分之一的人口都超过50岁。 他们在2015年的网络消费额就达到了14.45万亿英镑。 他们中76%的人会每周至少一次进行网上购物。 50岁以上…

    交互专题 2023-03-03
  • 掌握这六步,每个人都可以是体验分析专家

    随着体验经济的到来,体验成为商业的驱动力。那么当我们进入一个行业、拿到一个产品,如何从体验角度去分析和判断进而从体验角度进行驱动?莫急!! 本文简单总结作者多年奋战在体验第一线的理论和实战经验,送给大家一套清晰简便的分析方法。

    2017-05-25
  • UI设计师扔掉PS,使用Axure是怎样一种体验?

    ——我的生活将再不会像从前那样……所以,Axure……这真的仅仅只是一个做原型的工具吗?UI设计师可以完全放弃其他工具,仅仅靠Axure完成所有工作吗?这个程序有什么优缺点呢?下面我将试着回答这些问题。最近我开始放弃Adobe Photoshop转向Axure,然后发现了它除了原型制作以外的潜能,也许我的生活将有大不同。如果有时候你不得不打开PS查看位图细节,你就会知道它到底有多慢。近年来PS功能越来越丰富,当我使用了另一个看起来明显简...

    2018-04-17
  • 使用Axure制作出信息化风格的精美简历(提供模板源文件下载)

    最近又到了每年“金三银四”的求职旺季,相信这段时间很多同行朋友们也正在找工作。在求职的过程中简历是非常重要的一块敲门砖,设计精美的简历能帮助你获得更多引起招聘人员注意的机会。如果我们能花点时间从设计感方面来包装一下自己的简历,这样既能体现自己的求职态度,又能展示出自己的专业细节,相信能让大家的简历增色不少,所以今天这篇分享我将教大家如何使用Axure制作出信息化风格的精美简历。从正式分享之前我需要先说明为何要使用Axure来设计简历,而...

    2018-03-24