打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
译言网 | iOS人机界面指南(一):iOS7设计风格

iOS7设计风格

iOS7设计主旨中最重要的3条:

  • 陪衬。UI的作用是为帮助用户理解内容并产生互动,而非抢夺用户注意力。

  • 清晰。文本在各种字体大小下都要是可读的,图标准确而清晰地传达含义,装饰性元素精妙且恰到好处,并且重视功能效用以激发设计灵感。

  • 纵深感。画面层次感和逼真的动画效果展现出活力,提升用户愉悦感和理解力。


无论是重新设计或创建全新的应用,请参考Apple重塑其内置应用的方式:

  • 首先,剥开UI的外衣,露出app的核心功能,

  • 接下来,应用iOS7的设计主旨,使其贯穿于新的UI和用户体验设计当中。小心地补充细节,添加修饰,避免过分设计。

  • 从头到尾请准备好,挑战前人,保持质疑,并且因为专注于内容和功能,让设计决策手到擒来。


陪衬

尽管干净利落、美观漂亮的UI以及流畅的动画效果是iOS7的体验亮点,但用户内容才是体验核心。

这里介绍一些方法,确保设计以功能为主,UI让位于用户内容。

全屏设计。内容扩充至整个屏幕。天气应用是极佳的例子:当地实时的天气景像全屏呈现,非常漂亮,且关键信息突出,并留出了足够的空间来显示每小时的动态数据。


谨慎地拟物化。

UI元素会因为浮雕,渐变,和阴影变得过重、抢眼,以致于同内容发生竞争,抢夺用户注意力。应更多地考虑内容,让UI扮演一个辅助的角色。


可透光的半透明UI元素。半透明的元素,诸如控制中心,既提供了上下文,帮助用户看到更多内容,并且能瞬间唤出。iOS7的半透明元素仅能模糊其背后的内容--呈现出毛玻璃的效果--,但对其覆盖范围以外的内容则不起作用。


清晰

清晰,得以确保内容至上。下面有一些具体的方法, 能让重要的内容和功能清楚地显示并易于交互。

大量留白。留白让重要的内容和功能更容易被注意和理解。留白还能营造出平静宁和的气氛,让app看起来重点突出,充满效率。


善用色彩,简化设计。主色-比如备忘录应用中的黄色- 高亮了重点部分,巧妙地点出交互性。它统一了app的视觉主题。内置的app使用了系统自带的纯正干净的色系,无论是在深色或浅色背景,每一处色彩都表现良好。


使用系统字体,确保可读性。iOS7系统字体自动调整了字符间距和行高,使文本易于阅读,并且在每种字号下均表现良好。无论对于系统自带的或定制的字体而言,采用Dynamic字体,确保了app在不同字体大小下都适配良好。


无边框的按钮。iOS7的所有导航条按钮都是无框的。在内容区域,无边框按钮通过上下文,颜色,和祈使句标题暗示可交互性。按钮用一条细边框,或者背景色,使其同周围分隔开来。


利用纵深

iOS7的内容经常显示在某个明显区域,反映出层级关系和位置,这有助于用户理解屏幕对象相互间的关系。

半透明、浮于屏幕桌面之上的文件夹,将包含其中的内容同周围区分开来。


提醒事项app采用层叠式设计,如图所示。当用户处理某个事项时,其他事项被折叠起来放置于屏幕底部。


为制造纵深感,日历app加强了在年月和日之间切换时的动画效果。在下面的年视图中,“今日”在日历中一目了然,这也便于用户执行其他任务。


当用户选中某月,年视图被立即放大,转为显示月视图。今日标记仍是高亮其上,而年份则出现在了导航条中回退按钮的位置上,这样用户就清楚地知道眼前的是什么界面,从哪 里跳转而来,又该如何回到原先的界面中去。


同样的变换发生当在选中某一天时:月视图被一分为二,当前周被推挤到了屏幕上部,下面部分则出现了选择当日的小时视图。借助以上种种动画效果,日历应用巩固了年,月, 日之间的层次关系。


解构iOS App
 

几乎所有的iOS应用都会使用由UIKit框架定义的UI组件。了解这些基础UI组件的名称,扮演的角色,以及各自的作用,有助于在设计app UI界面时做出成熟的决定。

 

UIKit包提供的UI元素主要分为4大类:

  • 横条(Bars)。横条包含上下文信息和控件。借助上下文,用户可以知道从哪而来,控件则帮助导航和提供初始化操作。
  • 内容视图(Content Views)。内容视图包含内容信息,并提供滚动,插入,删除,元素重排等操作。
  • 控件(Controls)。控件提供操作,或显示信息。
  • 弹窗(Temporary Views)。弹窗简明扼要地向用户提供重要信息,或提供额外的选择和功能。

除了定义UI元素,UIKit还定义了功能性的对象,包括手势识别,绘图,打印支持等。 

 

从程序角度而言,UI元素是一种视图(view),原因是它继承了UIView类。视图不仅能够在屏幕上进行自我绘制,还能监听到点击事件。控件(如按钮和滑动条),内容视图(如列表和表格),弹窗(如警告框和操作列表等)都是视图。
 

为了管理一定数量,或不同层级的视图,典型的做法是使用视图控制器(view controller)。视图控件器可协调这些视图的显示,完成交互背后的功能实现,并且能对屏幕移植进行管理。以“设置”应用为例,即使用了导航控制器来显示不同层级的视图。 

下面例子告诉我们,视图和视图控制器是如何通过相互配合在iOS应用程序中呈现 UI的。


尽管开发者考虑的是视图和视图控制器,用户期望体验到的却是一个个屏幕界面。从这个角度上讲,屏幕(screen)通常是指app中的某个可视化状态或模态。

注意:iOS应用包含窗体。但不同于电脑程序中的视窗,iOS窗体没有可见的部分,并且不能移动。多数iOS应用只有一个窗体;那些支持外接显示的app可以拥有多个窗体。

 

《iOS人机界面指南》采用“屏幕(Screen)”的说法,是因为这样通俗易懂。作为一名开发者,你可能还在其它地方看到过“屏幕”一词,指的则是UIScreen对象,其作用是访问外部显示屏。





开始与结束

快速开始

我们常说,用户评价一款app不过1,2分钟时间。只要能在这段极短的时间内呈现出最有用的内容,你就能够激发出用户兴趣,打造极佳的用户体验。

重点:

不要让用户在安装完app后重启设备。重新启动不但耗费时间,而且会让你的app看上去既不可靠,又难以使用。

如果app有着内存利用或其它方面的问题,并且只能是刚完成系统启动方能运行的,那就需要着手解决这个问题。开发此类app的指导建议,请参见《iOS App编程指南》,“有效利用内存”。


尽可能地,避免显示多余的屏幕界面或其它启动欢迎界面。最好是让用户立刻就用上app。




避免让用户去完成设置。而是应该,

  • ·专注于满足80%用户的需求。只有这样,多数用户才不用再去设置,因为app已经按照用户期望设置好。如确实存在小部分用户才需要的功能,-或是多数用户只需用到一次的功能,不去管它。
  • ·从其它途径获取尽可能多的信息。如果能利用内置应用或者设备中设置的信息,那就设法通过系统查询获取;不要让用户重复输入。
  • ·对于确实需要用户提供的,也要让用户在app里面输入。然后立即保存信息(比如放进app的设置中)。这样,用户就不会因为切换应用而失去马上体验app的机会。如果稍后需要修改配置信息,也方便随时在设置中进行修改。


尽量将登录延后。让用户无需登录即可浏览app并能使用部分功能,是最好的做法。比如,苹果商店允许用户在决定要购买商品时才登录。用户对那些需强制登录才能使用的app通常会无情地抛弃。

在必要登录时,简洁,友好地向用户解释原因,以及将带给用户的好处。


慎用启动介绍(新手指引)(在登录后向用户介绍功能和如何使用)。考虑新手指引之前,先努力设计好app,让所有功能和任务都是直观并且容易发现的。新手指引替代不了好的app设计。如果你仍然坚持新手指引有必要,遵循以下建议能够帮助你创建简洁、有效的用户体验,而不妨碍到用户。

  • 只向用户提供开始时所需的信息。体验好的新手指引能够让用户知道第一步该做什么,或简要地向用户展示一些用他们感兴趣的功能。如果在用户摸索app之前即提供过多信息,就会给用户造成不要地记忆负担,而这些须用户记住的帮助细节在当时又不是马上就用上的,而且还可能传递出app难以使用的信号。对确实需要额外帮助信息的功能,仅在用户用到该功能时才提供。
  • 通过动画和交互吸引用户,让用户边用边学。吝啬地使用文本,除非能增强用户体验;否则别指望用户能阅读长篇大论。举例来说,如果能用动画教会用户如何操作,就不要用文字描述。在做复杂任务的操作指引时,可使用覆盖视图(点击可消失),即当用户执行具体某一步操作之前,进行简要描述。避免直接显示app截屏,原因除了不可交互之外,还会被误认为app UI。
  • 让新手指引能够被轻松地忽略或跳过。用户在看过一遍新手指引后,可能不想再看第二遍;其他人或许连看都不想看。请记住用户的选择,避免用户每次打开app都必须再看一遍。


App评分不宜过早。要求用户过早地对app进行评分,会引起用户的厌烦,并且可能导致有用建议收集数量的减少。为了能让用户充分地考虑意见,在要求用户评分之前,应给与他们充足的时间来形成自己看法。具体来说,在用户访问至少一定数量的屏幕界面或执行至少一定数量的任务之前,你可能都需要耐心等待。


屏幕启动方向与设备默认的持握方向通常一致。因此,iPhone应纵向启动屏幕;iPad则与当前的持握方向一致。如果app只能横版运行,那就一直都是横版运行,必要时用户旋转设备。

注意:让仅能横版运行的app同时支持两种形式的横握方向是最好的选择-两种横握形式分别是指当设备横握时Home键在右侧或左侧。如果设备已经横置,横版app的启动方向应符合设备的方向,除非有更好的理由选择不这么做。否则的话,让Home键在右测。(了解更多关于适配不同设备持向,请参见“响应设备持向的改变”(第61页))



启动图片跟app首屏界面能尽量相似。App启动时iOS会展示一张启动图片-给用户的感觉是app很快,并留给app足够的时间加载内容。了解如何创建启动图片,请参见“启动图片”(第215页)。

可能的话,避免让用户在第一次启动app时阅读某段声明或终端用户许可协议。替代的方法是,让App商店代为发布,这样用户在下载app之前就能够阅读。如果必须要在app内提供这些内容,请将其与UI完美融合,并平衡商业需求和用户体验。

再次启动app时,恢复至原有状态,这样用户就能从离开的地方迅速开始。不应为了让用户回到之前的位置,而要求其强行记住所操作过的步骤。了解更多关于有效保存和恢复app状态的方法,请参见“状态保持和恢复”。


准备好随时结束

iOS app没有关闭或退出按钮。当用户切换新的app,返回主屏幕,或者将设备置于休眠模式时,就意味着结束了当前app的使用。

当用户从你的app切走时,iOS多任务机制会将当前app置于后台运行,并显示新的app UI,为应对这种情况,你的app需要做:

  •   应及时、频繁地保存用户数据。之所以要这样做,是因为app在后台可能随时被结束。
  •   在处于最佳细节层面的节点终止应用时,保存当前状态。这种方式可以保证用户在切换回应用时不致丢失数据。比如app显示滚动数据列表,则保存当前滚动的位置。了解更多关于有效保存和恢复app状态的方式,请参见“状态的保存和恢复”。


当用户在前端运行一个app时,可能需要另一些app在后台同时运行。例如,用户可能想在使用to do应用的同时收听音乐。了解如何正确优雅地使用多任务,请参见“多任务”(第95页)。

不要让app以程序地方式自动退出。用户会倾向于将此解释成程序崩溃。如果某些原因导致app没有以预期方式运行,请在界面上描述情况,并解释该如何处理。下面有2种好方式:

假如app的所有功能都失效,显示页面来描述状况,并给出修复建议。这种方式提供了信息反馈,并使用户确信app不存在错误。此外这将用户放在了控制面,让他们自己决定是要采取纠正措施并继续使用,或是切换到其他应用。




假如只是部分功能失效,当用户试着使用这个功能时,显示某个界面或警告框。此外,用户应能继续使用其他功能。如果决定采用警告框,确保用户在尝试使用该失效功能时才予以显示。





布局

布局不仅涉及UI元素的外观,还包含更多。通过布局可展示出最重要的界面内容,用户的选择,和内容之间的关系。根据不同的设备和持握方向,布局方式也将不同。

通过给每个交互元素足够的空间,为用户与内容和控件间的交互提供便利。点击控件的点击目标范围大小约为44*44点(Point)。




通过提升重要内容或功能,使得用户容易专注于主任务。一些好的方式,将重要信息放在屏幕界面的上半部分,以及左半部分(根据关注度从左往右,从上往下递减的规律)。




利用可视化的权重和平衡,凸显屏幕元素之间的相对重要性。大元素夺人眼球,并且比小元素看上去更重要。大元素也更容易点击,特别对于经常在受干扰环境中使用的,比如电话和时钟功能,大的元素让这些功能特别好用。



利用对齐。对齐让app看上去整洁而工整,并且为用户滚动满屏的信息时提供了聚焦点。布局让不同信息组块揭示出相互间的关系,并能让特定信息更容易查找。

确保用户在默认的字体大小下理解主要内容。比如,用户不必通过水平滑动屏幕来查看重要的文本信息,或者通过缩放来查看图像。

准备好可能字体大小的改变。用户期望在设置中修改不同字体大小后,多数应用都能适应显示。为了能适应某些字体改变,你可能需要调整布局;更多关于app文本显示的内容,请参见“文本应该永远可读”。

尽量避免UI外观不一致。一般而言,有类似功能的元素应该看上去相似。对于注意到的不同点,人们经常会假设这里面必有原因,并且会花时间搞清楚。




导航

用户通常不会注意到app中的导航除非是当自己迷失时。导航是为app使用目的而存在着,而不是单独作为导航而存在。

目前存在3种主流的导航类型,每一种都适用于特定的app框架:

  •   层级式
  •   扁平式
  •   内容或体验驱动式

在层级式app中,用户导航的方式是通过在每一个屏幕界面做出选择,直至达到最终界面。为了去到另一个界面,用户必须得回撤,或者在起始点重新开始并再次选择。设置和邮件应用是层级式导航很好的例子。



在扁平式app中,用户能从一个主类别直接进入到另一个主类别目录下,原因是所有的主类别都可以在主界面被访问。音乐和应用市场是这种导航结构很好的例子。




在信息架构为内容或体验驱动的app中,导航同样也是内容或体验,这不足为奇。比如,用户通过翻页进行书本内的“导航”;在游戏里面,导航通常是体验的重要部分。



某些时候,还可以使用一种以上的导航类型。比如,在扁平式导航的一个分类目录中的项目最好处于同一层级。

永远要让用户清楚其处在app中所处的位置,以及如何去到下一个界面。不管导航类型是否符合app的结构,最重要的是浏览内容的路径是逻辑的,可预测的,容易跟踪的。

UIKit定义了一些标准UI元素,很容易用在层级式和扁平式的导航类型中,此外还有一些元素,出现在例如阅读类或多媒体类应用中,帮助用户做以内容为中心的导航。游戏类等其他app提供的以用户体验为主的导航类型,一般来讲依赖于定制的元素和行为。

导航条提供了一种简单的方式来进行层级数据间的切换操作。导航条标题显示了用户当前的位置;借助后退按钮可以很快回到上一层界面。了解更多内容,请参见“导航条”。

通过标签条来显示对等的内容或功能分类。标签表非常适合扁平化的信息架构,而标签位置的固定不变能够让用户无需考虑眼下所在位置即可完成随意在分类间切换。了解更多内容,请参见“标签条”。

当每个app界面代表一个相同类型的项目或页面的独立实例时,请使用页面控件。页面控件用来显示多少界面或界面项目是可用的,以及当前显示的是什么项目。举个例子,天气应用中使用页面控件来显示当前有多少地区天气被打开。了解更多内容,请参见“页面控件”。

通常最好为每个界面提供一条路径。如果某个屏幕界面,用户需要在多个场景下查看,可以考虑使用一个临时视图,例如模态视图,动作列表,或提醒框。了解更多,请查“模态视图,动作列表,或提醒框”

UIKit也提供如下相关的控件:

  •   细分控件(Segemented Control)。细分控件能够提供内容的不同分类方式;并且不需要导航到新的屏幕界面。
  •   工具条(Toolbar):工具条看上去非常像导航条或标签条,但不用作导航。工具条提供对屏幕内容的操作。




交互和反馈


用户知道标准手势

用户使用手势-例如点击,拖动和捏-来同app和设备进行交互。手势帮助用户同设备建立起亲密的个人联系,并强化了直接操纵屏幕物体的感觉。通常用户期望手势的使用方式在所有app中都是一致的。

点击:点击或选中某个控件或物体。



拖动:滚动,移动从一边移到另一边。拖动物体。



翻:快速滑动


 

划:用一根手指退回上一页,在分栏视图(平板)打开隐藏的边侧栏,或滑出掩藏的删除按钮。



双击:放大内容或图像。恢复原样(已放大)



捏:捏开放大;捏拢恢复原样。



长按:在可编辑或可选择的文本上长按,可调出放大的视图来定位光标。



摇晃:激发撤销/重做操作。

作为已知的标准手势的补充,iOS还定义了一些手势来调用系统的操作,例如调出控制中心、通知中心。这些操作手势的使用无关app。



标准手势应规范使用。除非是游戏app,重新定义标准手势的使用方式可能会混淆用户,并且让app难以使用。

创建自定义手势应避免所执行的操作已在标准手势中定义。用户已经习惯了标准手势,不希望再学习另一种手势执行的却是同样的操作。

当提供复杂的手势操作作为快速完成任务的快捷方式时,请不要作为唯一的方式。尽可能地,提供用户一种简单、直接的方式来执行操作,即使这意味着多出的一次或两次点击。简单的手势操作让用户将注意力放在体验和内容上,而非交互方式。

一般地,避免定义新的手势,除非你的app是游戏。在游戏或其它沉浸式的app中,自定义手势可作为体验的有趣部分。但是在帮助用户解决重要事情的app中,最好还是采用标准手势,这样用户就用不着花时间去发现这些手势或记住它们。

对于iPad,可考虑采用多点手势。iPad的大屏幕为自定义的多点手势提供了很大的操作区域,甚至可以多人同时手势操作。尽管复杂的手势并不提倡,它们却着实能丰富app的体验,特别是对于长时间玩游戏或进行编辑工作的用户来说。牢记非标准的手势因难以发现而尽可能少使用,如果要用,请将其作为执行操作的唯一方式。


交互性触发元素

为体现可交互性,内置的app使用了大量的线索,包括颜色,位置,上下文提示,以及有明确含义的图标和标签。用户几乎不需要额外的装饰来告诉他们屏幕中的元素具有交互性,或者表明是干什么的。

主色传递出一种强烈的可交互的视觉信号,在没有大量用色的app中尤其突出。

在通讯录中,蓝色标记出元素的可交互性,并带给app统一和可识别的视觉主题。




回退按钮采用了一些线索来暗示其可交互性和功用:作为导航,它包含了一个回退箭头和上一页面的文字描述,当然它采用了主色。



图标或标题用清楚的祈使短语来引导用户点击。比如,在地图应用中的标题“添加书签”,“到这里的路线”,清楚地描述出用户能够执行的操作。结合主色的使用,带有行动指示的标题让按钮边框和其他装饰元素显得多余。



在内容区域,只在必要的时候才为按钮加上边框或背景。横条,操作列表,提醒框中的按钮无需边框,因为用户知道在这些地方出现的绝大多数元素都具备交互性。而在内容区域,按钮可能需要边框或背景来与内容产生区别。比如,音乐,时钟,照片和应用商店在一些特殊的地方使用了带边框的按钮。

照片应用用边框来区分“创建新的流”按钮和其上方的解释性文字。


时钟应用在秒表和计时器中利用按钮边框来凸显“开始计时”和“暂停”按钮,并使它们在纷扰的环境容易被点击。






应用商店在表格行中使用带边框的按钮来强调分区点击行获得更多信息,和点击行内的按钮进行购买。



反馈有助于理解

反馈让用户知道app正在做什么,发现他们接下来该做什么,并且理解操作结果。UIKit控件和视图提供了许多种类的反馈。

尽可能地,将状态和其他相关反馈信息整合进你的UI界面中去。最好能让用户在不采取行动或被打扰的情况下获得这类信息。例如,邮件应用在工具条中显示更新状态,则不会发生跟内容争抢用户。



避免不必要的警告。警告框是一种强有力的反馈机制,但它应该仅仅被用来传达重要的,并且是可执行的信息。如果用户发现很多警告的都是不重要的信息,那么他们会很快地学会忽视这些警告。了解更多关于警告框的使用方法,请参见“警告框”。


让信息输入变得简单

信息输入耗费时间和精力,无论是用户点击控件还是使用键盘。当用户被停下来要求完成大量的输入却看不到任何有用的结果,用户将会感到非常沮丧。

让用户轻松地做决定。例如,你可以用选择器或表格视图代替文本域,因为多数用户发现从列表中选择项目比输入文字更加容易。



合适地时候,从iOS中获得信息。设备中存储了用户的大量信息。在你自己能轻易找到信息的前提下,不要强迫用户提供,比如通讯录或日历。

处理好输入与信息回报两者的平衡。付出和回报的感觉让用户觉得他们正通过app取得进步。


动画


漂亮,微妙的动画充斥在iOS UI界面中,让app体验更加吸引人和充满活力。合适的动画应该是:

  •  沟通状态并提供反馈
  •  强化了直接操作的感觉
  •  帮助用户直观地看到操作结果


提供动画应该小心地,特别是对于那些无法提供沉浸式用户体验的app而言。

那些看起来过度的,无厘头的动画不但会阻碍app流程,还会降低app运行性能,并干扰用户执行任务。

特别低,有目的的、谨慎地使用动画效果和UIKit动作,并确保测试结果。合理地利用动画效果,能提升用户的理解和愉悦感;滥用则会让app看起来迷失方向、难以操控。

自定义动画与内置动画保持一致。用户已习惯了在内置app中体验过的精妙的动画。事实上,用户倾向于将在视图间切换时流畅的动画效果,设备手持方向改变时美妙的切换,以及基于物理效应(用力划,列表加速滑动)的一系列动画效果视为iOS体验理想当然的一部分。除非你创建的是沉浸式app,例如游戏,自定义动画都应该尽量接近内置应用的水平。

统一一致地使用动画效果。同其他类型的自定义一样,使用自定义动画应保持一致,这样用户可以建立起使用经验。

一般地,尽量真实可靠地自定义动画。人们倾向于看脸,但当体验到的动画没有意义,或者看起来违反物理定律时,人们会感觉无所适从。举个例子,当你从顶部下拉出来一个视图,让其消失的方式自然是推上去,原因是这么做帮助用户回忆起这个视图的来源。如果你通过将这个视图推到屏幕底部使其消失,你就打碎了在用户头脑中关于视图的心智模型,即视图是永远存在于屏幕顶部的。



品牌营销


成功的品牌营销不止把品牌元素放到app中那么简单。最优秀的app将已有的品牌资源整合成一种独特的、能带来愉悦、难忘的视觉和感官体验。

iOS通过图标,色彩,和字体的定制,轻而易举地让你的app与众不同。在设计这些界面元素时,请谨记2点:

  •   定制的元素应中看中用。但不管是定制的还是标准化元素,都应与app中的其他元素看上去相一致。
  •   为了让app融入iOS7大家庭, 并不要求设计出来的app都跟内置应用长得一样,但的确需要融合衬托,清晰,和纵深感(了解更多主题相关,请参阅“iOS7设计风格”(第9页))。

当你需要在app内宣传品牌时,请遵循以下原则。

以精致地,不张扬地方式吸收品牌资产。用户使用app是为完成某件事或纯粹娱乐,他们不想觉得自己是被逼着进来看广告的。为打造最佳的用户体验,你需要通过对字体,颜色,形象的选择,安静地告诉用户你的品牌个性。


不应该跟用户关心的内容争夺位置。例如,一个固定在手机屏幕顶部的二级导航条,除了展示品牌资产以外,没有任何作用,留给内容展示的空间反倒是少了。相反,应以用户内容为主,低调地宣传品牌,如定制色调或字体,或微定制背景。

抵制诱惑,避免在APP内打logo。移动设备屏幕相对较小,logo的出现占据了原本属于用户内容的空间。此外,在app内显示logo,起不到网页上相同的展示效果:用户经常是在无意间闯入某个未知网站,但很少有用户不看app图标就直接点开的。




颜色和字体


颜色促进沟通

在iOS7中,颜色起到提示交互性,增强活力,保证视觉连贯性的作用。内置应用使用了一组纯净的颜色集合,无论是单独还是组合在一起,亦或是在浅色或深色背景下,看上去都非常棒。


如果要自定义颜色,请确保这些颜色能组合在一起使用。例如,粉色系符合应用的风格,那么应该自定义一组能互相调和的粉色。

注意在各种不同环境下的颜色对比。比如,如果横条背景颜色和横条按钮的文字颜色缺乏足够的对比度,按钮将难于被发现。一条经验规则是两种颜色至少要超过50%的对比度,才可能被区分开。检测的方法是将设备拿到不同的光照条件下观察两种颜色能否被区分,这包括拿到室外的太阳底下。

小贴士:一种能提高区域对比度的方法是对UI进行去色处理,并在灰度模式下查看。如在区分交互性和非交互性元素或背景时遇到了困难,那就可能需要增加两者之间的对比度。

在设定横条的颜色时要将横条的半透明特性和横条背后的内容考虑进去。当考虑横条的颜色以匹配某个颜色,例如品牌颜色时,你可能需要尝试很多不同种颜色后才能找到最合适的。横条的外观同时受iOS系统半透明效果和横条背后app内容的影响作用。

API备注:为横条上的按钮上色时,请使用tintColor属性;如果要为横条上色,请使用barTintColor属性。了解更多关于横条的属性,请参见UINavigationBar Class Reference, UITabBar Class Reference ,UIToolbar Class Reference , and UISearchBar Class Reference

请考虑色盲人群。多数色盲人士都无法分辨出红绿色。检查app以确保没有将红色和绿色作为唯一的一种方式区分两种状态或值(一些图像编辑软件包含工具能够帮助做色盲检验)。通常来讲,使用一种以上的方式来表示元素的可交换性是个不错的主意。(了解更多关于在iOS7中体现可交互性,请参见“交互性触发元素”。

挑选出某个颜色作为主色来提示元素的交互性和状态。主色在内置的备忘录和日历应用中分别是黄色和红色。如果自定义主色以作为元素交互性和状态的提示性线索,请确保app中的其它颜色都不会跟其产生竞争关系。

避免将同一种颜色既用于交互性元素,又用在非交互性元素上。UI元素体现自身交互性的一种方式即是通过颜色。但如果交互性和非交互性元素都使用同一种颜色,那么用户将难以分辨该点击哪个地方了。

颜色可以传达意思,但不总是以你希望的方式。每个人对颜色都有自己的理解,在许多文化中对颜色的解释也不尽相同。需要花些时间研究你使用的颜色在其他国家或文化中可能会被如何解释。尽可能地,你需要确保app中的这些颜色传递出恰当的信息。

在多数场合,不要让颜色分散了用户的注意力。除非颜色对你的app目的而言非常重要,一般将颜色作为微妙的加强效果比较好。


文本应该永远是可读的

首要地,文本必须是可读的。如果用户无法阅读,就算是字体再漂亮都无济于事。当你采用了iOS7的Dynamic字体,你可以获得:

  •   自动调整各种字号下的字体间距和行高
  •   能够指定用各种文本类型来创建语义块,如正文,注脚和标题。
  •   用户在对字体大小进行重新设置后,文本能自动地适应和调整。(包括设置辅助功能中的更大字体)

备注:如果是自定义字体,依然可以根据系统设置调整字体大小。当用户更改设置时,app能自动对设置做出正确的响应调整。

采用Dynamic Type字体需要一些人工操作。了解更多如何使用文本样式,以及确保当用户更改字体大小时app能够及时接收到通知,请参见iOS文本编程指南中的“文本样式”。

为文本内容设定当字号调整时响应的优先顺序。并非所有内容对于用户都同等重要。当用户选择增大字号,他们实际希望的是所关心的那部分内容能更容易阅读;而不是屏幕上的每一个单词都变大。

举个例子,当用户设置辅助功能中的更大字体,邮件应用只是将标题和正文部分的信息放大显示,而相对不重要的文本,如日期和发件人,仍然是小字体。


当用户修改了字号,必要时还需要调整布局。比如,当用户选择小字体,可能需要将原来单栏布局调整为两栏布局。如果你想在所有字号下都进行布局调整,最好以字体集为最小单位,如小,中,大字体,而不是为每种不同字号而调整布局。

确保所有自定义字体及样式在各种字号下都是可读的。达成方法之一是效仿iOS在不同字号下显示字体样式的一些方式,比如:

  •   文本不应该小于11点(point),甚至当用户选择超小文本字体时也应如此。为进行区分,正文部分使用大号17点的字体,这也是默认的字体大小。
  •   一般来说,字号和行距相差以一个点为最小单位,例外的情况是两种标题样式,它们在超小号,小号和中号字体下的字号大小,行距和字距都是一样的。
  •   最小的3种字号,字距相对较大;最大的3种字号,字距则相对较小。
  •   标题和正文使用相同的字号。为彼此区分,标题字体加粗。
  •   导航控制器上的字体大小跟采用大字体的正文部分字体一样(大小为17点)。
  •   文本一般采用标准或中等体;不采用细体或粗体。

通常,整个app只使用一种字体。混杂了多种字体app看起来琐碎而缺乏秩序。替代的方法是,只使用一种字体,并仅有一些样式和字号。使用UIFonttext stlyes API,在不同语义场景下(如正文和标题)定义每种区域采用的字体。



图标和图形


应用图标

App需要一个漂亮的app图标。很多时候,用户会仅仅凭着app图标的外观来形成对app的质量,使用目的和可靠性的初步印象。



 

当你在思考app图标时,需要注意一些事情。当你准备开始创造时,请参见“App图标”以获得详细的指导说明。

  •   App图标是品牌的重要组成部分。让设计作为向用户讲述app故事的载体,并与用户建立起情感联系。
  •   最好的app图标是独一无二、整洁有吸引力,并且令人难忘的。
  •   App图标需要在各种尺寸大小以及不同背景下都显示良好。那些能丰富大尺寸图标的细节在小尺寸的图标上看起来可能会模糊成一团。


横条图标

iOS提供了大量的小图标,用来表示常见的任务和内容—在标签条,工具条和导航条上使用。

尽可能地使用这些内置的图标是不错的建议,因为用户已经知道它们分别代表什么意思。


如果要表示自定义的操作或内容,需要自定义横条图标。设计这些小而简练的图标非常不同于设计一个app图标。如果你需要自定义横条图标,请参见“横条按钮图标”了解更多内容。

注意,您可以使用文本代替图标来表示导航条或工具条上的元素。比如,日历应用使用“今天”,“日历”和“收件箱”等文字代替了图标。


关于在导航条或工具条上决定是用文本还是图标,应考虑的问题是在屏幕上将同时显示多少个图标。在界面上显示过多图标会让app看起来很难解读。同样,请记住,在iPhone应用上相比较iPad更难做出这个决定,原因是iPad应用有更多的空间用来给横条的文本显示。


图形

iOS应用倾向于图形化。无论你是展示用户的照片或是进行艺术创作,请遵循下面的指导意见。

支持Retina高清屏。确保为图形等艺术创作提供@2x assets支持。

照片和图形用原比例显示,拉升不要超过100%。你不希望创作的图像图像在app上是变形的或者过大。让用户决定是否需要放大或是缩小图像。

不要在你自己的设计中使用苹果公司产品的图像。这些是有版权的,并且产品可能会经常性地改变。


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
关于iOS7,设计师需要了解的十件事
ios平台设计规范 – Justinmind·学习站
15个APP设计技巧
小程序的制作规范
超赞!帮你打造极简风APP UI 的实用设计技巧
如何利用7秒时间,让用户决定使用我的App
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服