• 日本设计师【藤田雅臣 Masaomi Fujita】

  • Eneritz Samaniego 花店视觉识别和品牌设计

  • 现代产业接手韩亚航空 13 年品牌商标将走入历史

  • 坐标大阪阪急百货,Bottega Veneta 开出品牌第一家咖啡店

  • 综艺节目《奇葩说》视觉形象升级,打造更有趣的视觉星球

  • 福特全新纯电动 SUV Mustang Mach-E 正式亮相,2021 年将引入中国

  • 每周一书:彼得·布鲁克《空的空间》

  • 精致又高端 Cihuatán 朗姆酒包装设计

  • 著名品牌咨询公司 Wolff Olins 启用全新品牌 LOGO

  • 建筑新跨界 隈研吾 x ASICS 联名跑鞋即将发售

  • 家庭浴室全能选手——汉斯格雅柯洛玛 E 淋浴管套装

  • 家庭浴室全能选手——汉斯格雅柯洛玛 E 淋浴管套装

  • 又来新题目了!新版《生活垃圾分类标志》标准发布

  • 每日一图:属于芬兰的“MUJI 式生活”

  • 全新非接触式饮水器现身伦敦街头

  • Facebook 推出 Lasso,这是要正面刚抖音了

  • AI 画作的首场拍卖会确定了时间,10 月底佳士得将带来历史性的一刻

  • 微软正式发布 Surface Hub 2 是协同工作的未来吗?

交互

iOS 9 人机界面指南(一):UI 设计基础

贡献者: 铁菇马力 来源:ISUX 时间:4年前 热度:

2015102716343355.png

1.1 为 iOS 而设计

iOS  表现了以下三大设计原则:

  • 遵从 :UI 应该有助于用户更好地理解内容并与之交互,并且不会分散用户对内容本身的注意力。

  • 清晰 :各种尺寸的文字清晰易读;图标应该精确醒目,去除多余的修饰,突出重点,以功能驱动设计。

  • 深度 :视觉的层次感和生动的交互动画会赋予 UI 新的活力,有助于用户更好地理解并让用户在使用过程中感到愉悦。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

无论你是重新设计现有的应用,还是重新开发一个新应用,请基于下列方法进行设计考虑:

  • 首先,去除掉 UI 元素让应用的核心功能突显出来,并明确之间的相关性。

  • 然后,使用 iOS 的主题来定义 UI 并进行用户体验设计。完善细节设计,以及适当合理的修饰。

  • 最后,保证你设计的 UI 可以适配各种设备和各种操作模式,使得用户在不同场景下都可以享受你的应用。

在整个设计过程中,时刻准备着推翻先例,质疑各种假设,并以内容和功能视为重点来驱动每个细节的设计。

1.1.1 设计跟随内容  

尽管清新美观的 UI 和流畅的动态效果都是 iOS 体验的亮点,但内容始终是 iOS 的核心。

这里有一些方法可以确保你的设计既可以提升功能体验,又可以关注内容本身。

充分利用整个屏幕。系统天气应用是这个方法的绝佳范例:用漂亮的全屏天气图片呈现现在的天气,直观地向用户传递了最重要的信息,同时也留出空间呈现了每个时段的天气数据。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

重新考虑(尽量减少)拟物化设计的使用。遮罩、渐变和阴影有时会让 UI 元素显得很厚重,导致影响到了对内容的关注。相反,应该以内容为核心,让用户界面成为内容的支撑。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

用半透明 UI 元素样式来暗示背后的内容。半透明的控件元素(比如控制中心)可以提供了上下文的使用场景,帮助用户看到更多可用的内容,并可以起到短暂的提示作用。在 iOS 中,半透明的控件元素只让它遮挡住的地方变得模糊——看上去像蒙着一层米纸——它并没有遮挡屏幕剩余的部分。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础1.1.2 保证清晰  

确保你的应用始终是以内容为核心的另一个方法是保证清晰度。这里有几种方法可以让最重要的内容和功能清晰可见,且易于交互

使用大量留白。留白可以使重要的内容和功能更加醒目、更易理解。留白还可以传达一种平静和安宁的心理感受,它可以使一个应用看起来更加聚焦和高效。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

让颜色简化 UI。使用一个主题色——比如 Notes 中用了黄色——高亮了重要区块的信息并巧妙地用样式暗示可交互性。同时,也让应用有了一致的视觉主题。内置的应用使用了同系列的系统颜色,这样一来,无论在深色或浅色背景上看起来都很干净,纯粹。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

 

通过使用系统字体确保易读性。iOS 的系统字体使用动态类型来自动调整字间距和行间距,使文本在任何尺寸大小下都清晰易读。无论你是使用系统字体还是自定义字体,一定要采用动态类型,这样一来当用户选择不同字体尺寸时,你的应用才可以及时做出响应。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

使用无边框的按钮。默认情况下,所有的栏上的按钮都是无边框的。在内容区域,通过文案、颜色以及操作指引标题来表明该无边框按钮的可交互性。当它被激活时,按钮可以显示较窄的边框或浅色背景作为操作响应。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

1.1.3 用深度层次来进行交流

iOS 经常在不同的视图层级上展现内容,用以表达层次结构和位置,这样可以帮助用户了解屏幕上对象之间的关系。

对于支持 3D 触控的设备,轻压、重压,以及快捷操作能让用户在不离开当前界面的情景下预览其他重要内容。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

通过使用一个在主屏幕上方的半透明背景浮层,这样文件夹就能清楚地把内容和屏幕上其他内容区分开来。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

如图所示,备忘录以不同的层级展示内容条目。用户在使用备忘录里的某个条目时,其他条目会被集中收起在屏幕下方。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

日历具有较深的层级,当用户在翻阅年、月、日时,增强的转场动画效果给用户一种层级纵深感。在滚动年份视图时,用户可以即时看到今天的日期以及其他日历任务。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

当用户选择了某个月份,年份视图会局部放大该月份,过渡到月份视图。今天的日期依然处于高亮状态,年份会显示在返回按钮处,这样用户可以清楚地知道他们在哪儿,他们从哪里进来以及如何返回。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

类似的过渡动画也出现在用户选择某个日期时:月份视图从所选位置分开,将所在的周日期推向内容区顶端并显示以小时为单位的当天时间轴视图。这些交互动画增强了年、月、日之间的层级关系以及用户的感知。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础1.2 iOS 应用解析

几乎所有的 iOS 应用都应用了 UIKit framework 中定义的组件。了解这些基本组件的名称、作用和功能可以帮助你在应用的界面设计过程中做出更好的决策。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

UIKit 提供的 UI 组件可以大致分为以下 4 种类型:

  • 栏:包含了上下文信息来指引用户他们所在的位置,以及控件来帮助用户导航或执行操作。

  • 内容视图:包含了应用的具体内容以及某些操作行为,比如滚动、插入、删除、排序等等。

  • 控件:用于执行操作或展示信息。

  • 临时视图:短暂出现给予用户重要信息或提供更多的选择和功能。

UIKit 除了定义 UI 组件元素,还定义对象如何实现功能,例如手势识别、绘图、辅助功能和打印支持。

从编程的角度来看,UI 组件元素其实是视图的子类,因为它们继承了 UIView。视图能绘制屏幕内容并知道用户何时在其范围内触屏。视图的所有类型有:控件(比如按钮和滑块)、内容视图(比如集合视图和表格视图),以及临时视图(如警告提示和动作菜单)。

要在应用中管理一组或者一系列的视图,通常需要使用视图控制器。它能协调视图的内容显示,实现与用户交互的功能并能在不同屏幕内容之间切换。比如,“设置”使用了一个导航控制器来展示其视图层级。

这里有一个关于视图与视图控制器如何结合并呈现 iOS 应用的 UI 的例子,如图。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

尽管开发者认为真正起到作用的是视图和视图控制器,但一般用户感知到的 iOS 应用是不同屏幕内容的集合。从这个角度来看,在应用里,屏幕内容一般对应于一个独特的视觉状态或者模式。

注:一个 iOS 应用程序包含一个窗口。但是,不同于计算机程序中的窗口,iOS 窗口没有可见的部分并且不能在屏幕上被移动到另一个位置。很多 iOS 应用程序只有一个窗口;可以支持外部显示设备器的应用程序可以有不止一个窗口。

iOS Human Interface Guidelines 中,屏幕(screen)这个词和大部分用户理解的一样。作为一个开发者,你也许需要阅读一下其他与 UIscreen 相关的章节,这样你可以更好的了解如何关联外部屏幕。

1.3 适应性和布局

1.3.1 为自适应而开发

人们通常希望在他们所有的设备和多种情境中使用自己喜欢的应用程序,比如在不同的设备方向上和 iPad 的分屏情况下。尺寸类别( Size classes)和自动布局(Auto Layout)可以通过定义屏幕的布局、视图控制器和视图在环境变化时候应该怎么适应来帮助你实现这个愿望。(显示环境 [display environment] 的概念指的是设备的整个屏幕或者其中一部分,比如弹出框的区域或者 iPad 分屏视图中其中一侧的区域。)

iOS 在特征集合(trait collection)的定义中包含了显示环境的概念,特征集合囊括了尺寸类别(size class),显示比例(display scale)和用户界面语言(user interface idiom)。你可以使用一个特征集合让你的视图和视图控制器响应显示环境的变化。

iOS 定义了两个尺寸类别(size class),常规的(regular)和压缩的(compact)。常规尺寸与拓展的空间紧密相关,压缩尺寸与约束的空间相关。想要定义一种显示环境,你需要定义一种横屏尺寸类别,与一种竖屏尺寸类别。如你所想,一个 iOS 设备在竖屏模式可以使用一套类别,而横屏模式下可以使用另一套类别。

iOS 能随着尺寸类别和显示环境变化而自动生成不同布局。举个例子,当垂直尺寸从压缩变为常规时,导航栏和工具栏会自动变高。

当你靠尺寸类别来驱动布局变化时,你的应用在任何显示环境时都能显示得很好。关于如何在 Interface Builder 中更好的使用尺寸类别,你可以查阅 Size Classes Design Help.

注:在一种尺寸类别中,持续使用 Auto Layout 进行小的布局调整,比如拉伸或压缩内容。更多 Auto Layout,参看  Auto Layout Guide.

下面的实例可以帮助你形象展现尺寸类型如何适配不同设备的显示环境。例如:iPad(包括 iPad Pro)在长宽和横屏竖屏时都使用常规尺寸类型。换句话说,iPad 显示环境一直处于垂直和水平的常规状态。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

注:合格的 iPad 型号支持多任务,你的应用可能需要与其他应用共享同一个屏幕。确保使用 Auto Layout,这样你可以在用户使用多任务功能时响应他,比如 分屏模式(Split View)和多任务分屏模式(Slide Over)。

除了使用 Auto Layout,当你在 iPad Pro 上展示可读性的内容时,依靠 UIView 的  readableContentGuide属性是非常重要的,这样可以拥有让读者舒服的边距。

iPhone 的显示环境可根据不同的设备和不同的握持方向而改变。

竖屏时,iPhone6 Plus 使用的是压缩宽度和常规高度类型。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

横屏时,iPhone6 Plus 使用的是常规宽度和压缩高度类型。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

其他 iPhone 型号,包括 iPhone6 使用相同的尺寸类型设置。

竖屏时,iPhone 6,iPhone 5 和 iPhone 4S 使用的是压缩宽度和常规高度。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

横屏时,这些设备在宽高上使用的都是压缩类。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

1.3.2 在不同环境提供良好体验

当你使用自适应来开发 UI 时,你可以保证 UI 跟随显示环境变化而适当地响应。遵照这些指南,你可以给用户良好的设备响应体验。

在所有环境下都保持对主体内容的专注。这是最高优先级。人们使用应用时,浏览感兴趣的内容并与之发生互动。随着环境变化改变专注点会让用户感觉到迷失方向,让他们感觉对应用失去控制。

避免布局上不必要的变化。在所有环境中保持一致的使用体验,能让人们在旋转设备或在不同设备上运行你的应用时维持稳定的使用模式。例如,如果你在水平的常规模式下使用了网格来显示图像,那么无需在压缩模式下使用列表来展示同样的内容,虽然你可能调整了网格的尺寸。

如果你的应用只在一个方向上运行,那么请直接一点。人们希望在各种握持方式下都可以使用你的应用,能满足这个期待是最好的。但是,如果你的应用只在一个方向下运行,那么你应当注意:

  • 避免出现提示人们旋转设备的相关 UI 元素。让应用在支持的方向下清晰地运行,如果需要用户旋转设备,不要给 UI 添加不必要的混乱。

  • 支持同一个方向上的变化。例如,如果一个应用只能横屏运行,用户无论用左手或是右手握持时都能触及到 home 键。如果用户在使用应用时 180 度旋转设备,那最好应用内容也能及时响应并旋转 180 度。

如果你的应用将设备方向翻转视为用户输入(的一种指令),那么就按照程序设定的方式来响应设备翻转。举个例子,一个游戏让用户利用设备翻转来移动游戏中的部件,那么这个游戏应用本身(的 UI)不能对翻转屏幕产生响应。在这种情况下,你必须关联两个需要变化的方向,并且允许人们在这两个方向切换直到他们开始(了解并执行)应用的主体任务。一旦人们开始执行主要任务,那就开始按程序设定的那样来响应设备的动作。

1.3.3 使用布局来沟通

布局包含的不仅仅是一个应用屏幕上的 UI 元素外观。你的布局,应该告诉用户什么是最重要的,他们的选择是什么,以及事物是如何关联起来的。

强调重要内容或功能,让用户容易集中注意在主要任务上。有几个比较好的办法是在屏幕上半部分放置主要内容——遵循从左到右的习惯——从靠近左侧的屏幕开始:

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

使用不同的视觉化重量和平衡来告诉用户当前屏显元素的主次关系。大型控件吸引眼球,比小的控件更容易在出现时被注意到。而且大型控件也更容易被用户点击,这让它们在应用中尤其有用——就像电话和时钟(上面的按钮)那样——能让用户经常在容易分心的环境下仍然保持正常使用。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

使用对齐来让阅读更舒缓,让分组和层次之间更有秩序。对齐让应用看起来整洁而有序,也让用户在滑动整屏内容时更容易定位和专注于重要信息。不同信息组的缩进与对齐让它们之间的关联更清晰,也让用户更容易找到某个控件。

确保用户在内容处于默认尺寸时便可清楚明白它的主要内容与含义。例如,用户应当无需水平滚动就能看到重要的文本,或不用放大就可以看到主体图像。

准备好改变字体大小。用户期望大多数应用都可以响应他们在 iOS 的设置中设定的字体大小。为了适应一些文本大小的变化,你也许需要调整布局;想要得到更多文本显示相关的信息,请查阅下文“颜色与字体”中相关的内容。

尽量避免 UI 上不一致的表现。在一般情况下,有着相似功能的控件看起来也应该类似。用户常常认为他们看到的不同总有原因,而且他们倾向于花时间去尝试(译者按:因此为了避免用户做无用的尝试,建议类似的功能外观都保持一样。)

给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件。常用的点按类控件的大小是 44 x 44 点(points)。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

 

1.4 启动与停止

1.4.1 即时启动

我们通常认为用户不会花超过一两分钟去评价一款新应用。当你可以最大程度地利用这段极短的时间,即时呈现对用户有帮助的内容时,你就能够激发新用户的兴趣并给所有用户一种极棒的体验。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

重要:不要在安装过程结束后告诉用户需要重启设备。重启需要花费时间,同时也会让人觉得你的应用不可靠且很难使用。
如果你的应用有内存使用或其它问题,导致不重启就无法流畅运行,你必须声明这些问题。想要了解如何开发一款性能良好的应用,请参阅
Use Memory Efficiently.
尽可能避免使用闪屏或者其他启动体验方式。用户能够在启动应用后立即开始使用是最好不过的。

尽可能地,避免让用户做过多设置。而应该如此:

  • 聚焦在 80% 目标用户的需求上。这样绝大部分用户就无需设置各种选项,因为你的应用已经默认处于他们想要的状态。如果有些功能仅有少部分用户想要,或者是大部分用户只需要使用一次,那就别管它了。

  • 尽可能用其他方式获取更多的用户信息。如果你能得到用户在内置应用或硬件设置中提供的信息,直接从系统中获取,不要让用户再次输入。

  • 如果你必须要求用户设置用户信息,在你的应用中直接提示用户输入。然后尽快保存这些设定(一般来说,保存到你的应用的设置模块中)。这样用户就无需强制跳出应用进入系统设置页面了。如果用户需要更改设置,他们可以在任何时候进入应用的设置模块进行修改。

尽可能让用户晚一点再登录。最理想的状态是,用户在无需登录的情况下就能尽量多地浏览内容并使用部分功能。例如,App Store 会在用户确定进行购买商品时,才要求用户进行登录。对于那些强制用户登录后才能进行一切有用操作的应用,用户往往会直接放弃。

如果你的应用必须先登录后使用,那么你应该在登录页面有一些简短的文字,来描述为什么必须先登录,以及这样做会给用户带来什么好处。

谨慎使用新手引导(介绍应用的功能和如何进行操作)。在考虑新手引导之前,你应该努力地完善你的应用,尽可能使应用的功能直观和易于寻找。其实,好的应用不需要新手引导。如果你确实觉得需要新手引导,那么请参考如下的建议,设计一个简洁、有针对性并且不妨碍用户的新手引导。

  • 只提供开始使用应用所必需的信息。好的新手引导应该告诉用户第一步应该做什么,或者简短地演示大部分用户感兴趣的一些功能。如果在能够探索你的应用之前,给用户展示太多信息,让用户记住这些不是当前所必须的内容,会让用户觉得你的应用很难用。如果在某些特定场景下确实需要额外帮助,那么也应该只在用户处于这个场景之后再提供。

  • 使用动画和可交互的方式来吸引用户,并让用户通过实际操作来学习如何使用。对于文字内容的增加应该谨慎,且仅当增加文字对于提升体验有益时才这么做。不要指望用户会阅读大段的文字。例如,可以使用动画而不是文字来描述如何执行一个简单的任务。在引导用户了解较为复杂的任务时,可以通过一些引导浮层来简要说明每一个步骤用户需要做什么。尽可能避免展示应用截图,因为截图不可交互的,用户可能会混淆截图和应用的实际界面

  • 能够让用户很容易地取消或者跳过新手引导。有些用户看完新手引导之后就不想再看,有些甚至根本就不想看新手引导。请记住用户的选择,不要强迫用户每次打开你的应用都要再选择一次。

不要太早要求用户去给你的应用评分。过早要求用户进行评分可能会适得其反。如果你想获得有价值的反馈和评论,在邀请用户评论之前,请给他们一点时间来使用你的应用,并对你的应用形成印象。例如,你可以等用户访问了一定数量的页面或完成了一定数量的任务之后,再邀请他们进行评价。

一般建议按照屏幕默认的定向方式启动你的应用。尽管如此,如果你的应用只有一种屏幕方向,那么就始终以这个方向启动,让用户在他们自己需要时再改变设备方向。例如,一个游戏或者媒体观看应用只在横屏模式下运行,那么就应该以横屏模式启动,即使设备当前处于竖屏模式。这样的话,如果用户在竖屏模式下打开应用,他们也知道应该把设备转成横屏来进行使用。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

注:最好让横屏应用支持两种方向的横屏,即 home 键在左或在右方都支持。如果设备当前已经处于横向状态,那么就按照当前状态启动应用,除非你有充分的理由不这么做。其他情况时,可以考虑按 home 键处于右侧的方式启动应用。(想要了解更多关于支持不同设备方向的内容,请参阅前文中 Adaptivity and Layout 相关章节。)

提供一张与应用首页看上去一样的闪屏。iOS 会在启动应用时调用这张图,这样可以让用户觉得启动速度很快,同时,也可以让你的应用有足够的时间去加载内容。具体如何制作闪屏,请查阅 Launch Files。

如果可能,不要让用户在初次启动应用时阅读免责声明或者确认用户协议。你可以直接在 App Store 展示这些内容,使用户在下载前就有所了解。如果在某些情况下你必须展示这些内容,要确保它们与界面保持统一并在产品功能与用户体验之间达成平衡。

在应用重启后,需要恢复到用户退出使用时的状态,让他们可以从中断之处继续使用。无需让用户记住是如何回到此状态的。

1.4.2 时刻准备好停止

iOS 应用不存在关闭或退出选项。当用户切换到另一个应用,回到主屏幕或者将设备调至睡眠模式的时候,其实就是停止了当前应用的使用。
当用户切换应用时,iOS 的多任务系统会将其放置到后台并将新应用的 UI 替换上来。在这种情况下,你必须做到以下几点:

随时并尽快保存用户信息。因为在后台的应用随时有可能被终止或退出。

当应用停止的时候保存尽可能多的当前状态的详细信息。这样使用户可以在回到应用时能从中断之处继续使用。例如,在使用可滚动的数据列表时,退出后保存列表所在的位置。了解更多关于保持和恢复应用状态的有效方式,请查阅 Preserving Your App’s Visual Appearance Across Launches.

有些应用可能需要一直在后台运行。例如,用户可能希望能在使用一个应用的同时还能一直听歌,接着又想用另外一个应用来检查代办项或者玩游戏。关于如何正确处理多任务,请查阅 Multitasking.

不要强制让应用退出。因为这样会让用户误以为是系统崩溃。如果有问题产生,需要告诉用户具体状况以及如何解决。以下有两个建议,取决于出现的问题有多严重,可以酌情使用:

如果应用中所有的功能当前都不可用,那么应该显示一些内容来解释当前的情形,并建议用户如何进行后续操作。这部分内容给予了用户以反馈,使用户相信你的应用现在没问题。同时这也可以稳定用户情绪,让他们决定是否要采取纠正措施,继续使用应用,还是切换到另一个应用。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

如果只有部分功能不可用,那么只要当用户使用这些功能时显示提示即可。其他情况下,用户就应该能正常使用应用的其他功能。如果你决定使用警告框来进行提示,请确保只在用户尝试使用不可用的功能时再显示。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

1.5 导航

除非导航设计不合理,不然用户应该明显察觉不到应用中的导航体验。导航设计应该能够支撑你应用结构和目的却又不分散用户注意力。
广义来说,导航主要有以下几种类型,每个导航都有其适应的应用结构:

  • 分层

  • 扁平

  • 内容或体验驱动

在有层级结构的应用中,用户在每个层级中都要选择一项,直到到达目的层级。如果要切换到另一个目的层级,用户必须回退一些层级,或者直接回到初始层级再次选择。系统设置和邮箱应用在这方面是很好示范,可以参考他们。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

译者注:以上为视频截图,完整视频可 点击观看

在扁平信息架构的应用中,用户可以从首页目录直接切换到另一个,因为所有的分类都可以从主屏直接访问。音乐和 App Store 是两个使用扁平结构的好例子。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

译者注:以上为视频截图,完整视频可 点击观看

在内容或体验驱动的信息架构应用中,导航也会根据内容或体验来设计。例如,在阅读一本电子书时,用户会一页接一页的进行阅读,或者直接从目录中选中某一个指定的页码;同样,在游戏中导航也是体验的重要组成部分。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

译者注:以上为视频截图,完整视频可 点击观看

在某些情况下,在一个应用中结合多种导航类型会有很好的效果。例如,对于扁平信息结构中某一分类下的内容,用分层导航的方式来显示可能会更好。

应该让用户时刻清楚自己当前在应用中所处的位置,及如何前往目的页面。无论使用哪种适合你的应用结构的导航,最重要的是用户访问内容的路径要有逻辑、可预期和易于追溯。

UIKit 定义了一些标准的 UI 元素,以方便地构建分层或扁平导航,还有一些元素可以构建以内容为中心的导航,例如电子书或者媒体观看类应用。游戏或者其他体验驱动的应用通常需要一些自定义的元素和行为。

使用导航栏(Navigation Bar)帮助用户轻松访问分层内容。导航栏的标题可以显示用户当前所处的层级,而后退按钮可以回到上一层级。想要了解更多内容,请查看 Navigation Bar.

使用标签栏(Tab Bar)显示同类型的内容或功能。标签栏很适合于扁平信息结构,可以让用户在分类之间随意切换,而不用在意当前所处的位置。想要了解更多内容,请查看 Tab Bar.

在应用中,如果每屏显示的都是同类项或同类页,可以使用页面控件(Page Control)。页面控件的优点是可以直观地告诉用户有多少个项目或页面,以及当前所处位置。想要了解更多内容,请查看 Page Control

一般来说,最好能给用户提供到达每一屏的唯一路径。如果某屏内容用户需要在不同场景下查看,可以考虑使用临时视图,例如模态视图、动作菜单或警告框。想要了解更多,请查看 Modal ViewAction SheetAlert

UIKit 同时还提供了以下相关控件:

  • 分段控件(Segmented Control)。分段控件让用户在一屏内就可以查到不同分类的内容,而不需要切换到其他屏幕。

  • 工具栏(Toolbar)。尽管工具栏和导航栏或标签栏相似,但是工具栏不具导航作用。相反,工具栏为用户提供了可以控制当前屏幕内容的控件。

  • 1.6 模态情境

模态是一个承载某些连贯操作或内容的优缺点并存的模式。它可以给用户提供一种不脱离主任务的方式去完成一个任务或者获得信息,但是也会临时性的阻止用户对应用的其他部分进行交互操作。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

理想情况下,用户可以与 iOS 应用进行一种非线性的交互,所以,尽可能的减少你应用中的模态体验是最好的。通常情况,仅在以下情境可以考虑使用模态:

  • 必须引起用户关注的时候

  • 一个独立的任务需要完成或者很明确需要被放弃,为了避免在模棱两可的状态下遗漏用户信息的时候

保证模态任务简单、简短和高度聚焦。你肯定不希望用户使用模态视图时像使用应用中的一个 mini 应用一样。如果子任务过于复杂,用户会在进入模态情境时忽略了主要任务。在设计一个涉及视觉层次的模态任务时特别要考虑这一点,因为用户有可能迷失并且忘记如何回到之前的操作中去。如果一个模态任务必须包含不同视图的子任务,确保给用户一个独立、清晰的导航路径,并避免迂回。更多关于模态试图的信息请参考 Modal View.

始终提供明显、安全的退出模态任务的途径。确保用户在退出模态视图时可以预期操作的结果。

一个任务需要多层级的模态视图时,确保用户理解点击非最高层级下的完成按钮的结果。点击一个低层级视图上的完成按钮是完成这个视图中任务的一部分,还是整个任务。因为有可能存在这种困惑,所以要尽可能避免在下级视图中添加完成按钮。

保证提醒对话框的内容都是必要且可操作的。提醒对话框会打断用户的体验并且要点击才会消失,所以要让用户感到提醒信息是有用的,打断是有价值的。想要了解更多请参考 Alert.

尊重用户关于接收通知的偏好设置。用户会设置接收应用通知的形式,确保遵重用户的喜好设置,否则可能会触怒用户,导致其关闭应用中所有的推送通知。

1.7 交互性与反馈

1.7.1 可交互元素吸引用户点击

为了暗示交互性,设计时会使用很多线索,包括点击的反馈、颜色、位置、上下文、表意明确的图标和标签等。并不需要过于修饰元素来向用户展示可交互性。

在支持 3D Touch 的设备上,当用户按压主屏上的图标时,背景会虚化以此来暗示可以进行更多功能的选择。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

一个关键的颜色可以给用户提供很强的视觉指引,尤其是没有冗余的其它颜色时。为了对比,使用蓝色来标记可交互的元素,同时能提供统一的、易识别的视觉风格。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

返回按钮使用多个线索指明其可交互并传达其功能: 它出现在导航中,显示了一个指向后方的图标,使用了关键色,并且显示了上一级页面的标题。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

一个图标或者标题提供了清晰的名称指引用户点击它。例如,地图中的标题“Flyover Tour”,“Directions to Here”,清晰的说明了用户可做的操作。结合关键色,就可以省去按钮边界或其他多余的修饰。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

在内容区域,必要时可以给按钮添加边界或背景。位于栏(Bar)、动作列表(Action Sheet)和警告框(Alert)中的按钮可以不需要边界,因为用户知道在这种区域中大多数选项是可交互的。但是在内容区域,有必要使用边界或背景将按钮从其他内容中区分出来。例如,音乐,时钟,照片,App Store 在一些特别的场景中使用这种按钮。

照片管理中给分享按钮增加了边框,从其他解释性文本中区分出来。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

时钟在秒表和计时页面中给按钮增加背景来强调开始和暂停按钮,并且使按钮在易分散注意力的内容中更容易点击。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础

应用商店中使用有边界的按钮,将按钮和整个内容条区分开来,点击整条内容查看详细信息,点击按钮进行下载安装。

[ISUX 转译]iOS 9 人机界面指南(一):UI 设计基础1.7.2 用户所知道的标准手势

用户使用点击、拖拽、捏合等手势与应用和他们的 iOS 设备进行交互。使用手势拉近了用户和设备之间的距离,并且增强了直接操纵感。用户通常期待手势在不同应用之间都是通用的。

用户在使用 3D Touch 时不需要学习额外的手势操作。当用户轻按屏幕并得到反馈时,很容易就能发现 3D Touch 提供的额外的交互方式。

 

铁菇马力

没有个性签名

评论 条回复
扫进你口袋
微信搜索Arting365design 或 扫描二维码

推荐阅读

© 2017 Arting365 Corporation, All right reserved / 沪ICP备05004653