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-06-04
  • 交互设计的闭环体验

    交互闭环体验的定义交互设计的闭环体验体现在产品的每个功能的细节上,产品可以看作是一整套交互的集合。一般只涉及一种使用场景的交互,只体现为一种功能,且只完成一件事。比如:修改设置、上传文件、设定闹钟、更改密码、打开家用电器、登录、设置状态消息、收藏等。交互设计的闭环体验主要由4方面构成:触发控件:交互闭环的起始点设计规则:交互闭环所遵循的交互方式信息反馈:用户与产品的互动过程关闭(循环)模式:交互闭环过程的结束(循环)模式交互闭环体验的定...

    2018-02-14
  • 交互设计的未来在哪?

    这是2017年的第13篇文章除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NUI(自然用户界面)代替GUI时交互设计师和…

    2017-08-01
  • 《用户体验可视化指南》视频讲书(5)

    《用户体验可视化指南》书中第2章"绘制基础"的第1部分。服务体验中,避免负面切换波动。从可视化的角度,阐述体验的特点。点击视频观看(大约10分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享这是本章节的开篇,蓉姐在视频中提了2个重点:切换波动。对应到用户企业的互动上,就是各触点上的体验波动。我自己用App最常发生体验波动的地方就是电商App的活动页,本来选东西选的正爽,结果一不小心进到活动页就会蒙圈,完全想不起来刚才发生了什么,...

    2018-04-09
  • 交互设计自查表的建立:思路与项目实例解析

    我习惯从层级的角度由高至低地排查各个交互层面可能存在的问题——首先是信息架构与流程这一最高层级,然后是界面的具体呈现,以及基于界面呈现的交互过程,最后才是以上自查中均未涵括的其他特殊情形。(1)确定当前阶段 → (2)阅读设备、数量、所属项目、请购人员、发起时间等基本信息 → (3)确定自己在本流程中的身份(因为部分场景下,当前用户的身份可能有多种可能性,需要用户再做确认)→ (4)在列表区阅读此前的流程历史,必要时可上下滑动或点击查看附件 → (5)确定当前步骤等待自己完成的是什么任务 → (6)执行该任务。

    2017-05-12
  • 微交互的设计案例与思考(中篇)

    设计师和初级产品经理在面试中不能很好回答APP设计好在哪里,并非是由于平时使用太少,而往往因为缺乏一种视角,即产品是为人而设计的。当我们意识到使用产品的是人,人具有感性层面,就会发现使用”功能强大、信息准确和流程最优“等客观化标准评价的不足。“设计和艺术是不同的,但很多人都没有认识到这一点,设计是为了人而产生的,如果你不明白人,你就不能理解什么是好的设计。”

    2017-05-02
  • 一篇文章读懂用户体验(下)

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。举个栗子:假设我是个潮人,同时我也是个医生,那我就有两个角色。如果给我设计一款音乐播放器,应该给我一款酷炫的,我会喜欢。但当我坐在办公桌边,给病患开药的时候,我电脑的开药软件需要很酷炫吗?我一边摇晃脑袋踩着节奏,看着充满特效的界面开出来的药,你敢吃吗?所以医院的软件需要简洁,保证开药的准确度。(然而需要强烈的视觉表达情绪的设计例外)。

    2017-06-01
  • 5个关键词看小程序和App的UI设计异同

    微信总喜欢在深夜推出一个大新闻,昨晚10点,小程序开放公测的消息一出,我公号的文章都推不出去了,一直显示系统繁忙,那得是多大的流量啊,心里暗想,能分我一点零头就好了,估计是我想多了!

    2017-05-16
  • 从“注意力”的角度谈体验设计如何避免入坑

    作者:挪小辣(用户体验设计师 @UIMax公司)   前段时间UIMAX团队在做“新浪新闻客户端用户画像项目”时,用研人员访谈用户的过程中,发现一个这样的问题:多数用户完全没注意到过页面上的“长按可排序或删除”这段文字…

    交互专题 2023-03-03
  • 【用户体验】“互联网+”如何提升用户体验?

    “你兜售的虽然是产品,但真正能使你获益的却是服务”。为何这样讲?众所周知,顾客就是上帝。在今天,用户体验越来越多的被提及,产品得到了更多的外延及扩展,已经不再局限于产品本身的价值,而有了更多的后续价值和服务的依托。注重交付的每个环节的规范与体验,这让卖点从产品本身逐渐渗透到整个产品的生命周期中,用户对品牌的认识也开始从产品蔓延到店面、店员、交易流程是否顺畅、售后服务是否及时到位等诸多层面。换句话说,产品是基础,而优质的服务可以帮助企业赢...

    2018-03-03