美文网首页
IOS人机界面指南(一):UI设计基础01

IOS人机界面指南(一):UI设计基础01

作者: iq小卡 | 来源:发表于2015-07-17 15:07 被阅读150次

    1.1 为iOS而设计(Designing for iOS)

    iOS 的革新关键词如下:

    遵从

    :UI能够更好地帮助用户理解内容并与之互动,但却不会分散用户对内容本身的注意力。

    清晰

    :各种大小的文字应该易读,图标应该醒目,去除多余的修饰,突出重点,很好地突显了设计理念。

    深度

    :视觉的层次和生动的交互动作会赋予UI新的活力,不但帮助用户更好理解新UI的操作并让用户在使用过程中感到惊喜。

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

    无论你是重新设计一个现有的应用或是重新开发一个,请尝试下列方法:

    首先,去除了UI元素让应用的核心功能呈现得更加直接并强调其相关性。

    其次,直接使用iOS的系统主题让其成为应用的UI,这样能给用户统一的视觉感受。

    最后,保证你设计的UI可以适应各种设备和不同操作模式,这样用户可以在不同场景下舒适地享用你的应用。

    在整个设计过程中,时刻准备着推翻先例,假设问题,并以重点内容和功能(为目标)来驱动每个细节设计。

    1.1.1 以内容为核心(Defer to Content)

    虽然明快美观的UI和流畅的动态效果是iOS体验的亮点,但内容始终是iOS的核心。这里有一些方法,以确保你的设计能够提升你的应用功能体验并关注内容本身。

    充分利用整个屏幕。天气应用是最好的例子:漂亮的天气图片充满全屏,呈现用户所在地当前天气情况这最重要的信息,同时也留出空间呈现了每个时段的气温数据。

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

    尽量减少视觉修饰和拟物化设计的使用。UI面板、渐变和阴影有时会让UI元素显得很厚重,致使抢了内容的风头。应该以内容为核心,让UI成为内容的支撑。

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

    尝试使用半透明底板。半透明的控件——比如控制中心——关联了使用场景,帮助用户看到更多可用的内容,并可以起到短暂的提示作用。在iOS中,透明的控件只让它遮挡住的地方变得模糊——看上去像蒙着一层米纸一样——它并没有遮挡屏幕剩余的部分。

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

    1.1.2 保证清晰度(Provide Clarity)

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

    使用大量留白。留白让重要内容和功能显得更加醒目。此外,留白可以传达一种平静和安宁的视觉感受,它可以使一个应用看起来更加聚焦和高效。

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

    让颜色简化UI一个主题色——比如在记事本中使用的黄色——让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个应用一个统一的视觉主题。内置应用使用家族化的系统颜色,无论在深色和浅色背景上看起来都干净,纯粹。

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

    通过使用系统字体确保易读性。iOS的系统字体自动调整行间距和行的高度,使阅读时文本清晰易读,无论何种大小的字号都表现良好。无论你是使用系统或是自定义字体,务必使用动态型,这样你的应用可以在用户选择不同字号时做出应对。

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

    使用无边框的按钮。默认情况下,所有bar上的按钮都是无边框的。在内容区域,无边框按钮以文案、颜色以及操作指引标题来表明按钮功能。当按钮被激活时,该按钮呈现高亮的浅色状态来作为操作响应。

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

    1.1.3 用深度来体现层次(Use Depth to Communicate)

    iOS经常在不同的层级上展现内容,用以表达分组和位置,并帮助用户了解在屏幕上的对象之间的关系。

    通过使用一个在主屏幕上方的半透明背景浮层来区分文件夹和其余部分的内容。

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

    备忘录以不同的层级展示,如插图所示。用户在使用备忘录里的某个条目时,其他的条目被收起在屏幕下方(译者按:其实这个视觉提示使用起来很隐晦)。

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

    日历有较深的层级,当他们在翻阅年、月、日的时候,以及增强的交互动画给用户一种层级纵深感(循序切换的层次,从年到月到日)。在滚动年份视图时,用户可以即时看到今天的日期以及其他日历任务。当用户处于月份视图时,点击年份视图按钮,月份会缩小至年份视图中的所处位置。

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

    今天的日期依然处于高亮状态,年份出现在返回按钮处,这样用户可以清楚地知道他们在哪儿,他们从哪里进来并且知道如何返回。

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

    类似的过渡动画出现在用户选择一个日期时:月份视图从所选位置分开,将当前的周日期推向屏幕顶端并翻转出以小时为单位的当天时间视图。这些动画加强了日历上年月日之间的关系的感知度。

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

    1.2 iOS应用解析(iOS App Anatomy)

    几乎所有的iOS 应用都应用了UIKit framework中定义的组件。了解这些组件的名字,作用和构成能够帮助你设计应用过程中做出更好的决定。

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

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

    Bars包含了导航信息,告诉用户他们所在的位置并包含了一些能帮助用户浏览或启动某些操作的控制按钮。

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

    控制按钮:展示信息或者控制动作。

    临时视图:短时间出现,给用户重要信息或者额外的选择或者其他功能。

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

    从编程的角度来说,UI组件被认为是不同类别的视图,因为他们从UIView得到继承。视图能绘制屏幕内容并且知道用户何时触摸了屏幕。视图的所有类型有:控件(比如按钮和滑块),内容视图(比如集合视图和表格视图),以及临时视图(如警告提示和动作菜单)。

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

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

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

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

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

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

    1.3 适应性和布局(Adaptivity and Layout)

    1.3.1 为自适应而开发(Build In Adaptivity)

    人们通常想随心所欲地使用自己喜欢的应用程序。在iOS 8及未来的版本中,你可以使用不同分辨率和自动布局来帮助你定义屏幕布局视图,视图控制器以及需要随显示环境改变的视图(显示环境display environment的概念指的是设备的整个屏幕或者其中一部分,比如一个跳出菜单区域或一个分视图控制器的主视图部分)。

    iOS定义了两个尺寸类别(size class),常规的(regular)和压缩的(compact)。常规尺寸有着较易拓展的空间,而压缩尺寸约束了空间的使用。想要定义一种显示环境,你需要定义横纵尺寸类型。如你所想,iOS设备可以有横屏竖屏两种不同的使用模式。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1.3.2 在不同环境提供良好体验(Provide a Great Experience in Each Environment)

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

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

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

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

    避免提示人们旋转设备的提示UI

    出现。

    让应用清晰地运行在支持的方向下,让用户明白应该旋转设备,而不是添加不必要的引导性混乱。

    支持同一个方向上的变化。

    例如,如果一个应用只能垂直运行,用户无论用左手或是右手握持时都能触及到home键。如果用户在使用应用时180度旋转设备,那最好应用内容也能及时响应并旋转180度。

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

    1.3.3 使用布局来沟通(Use Layout to Communicate)

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

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

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

    使用视觉化的重量和平衡向用户展示相关的屏显重要元素。大型控件吸引眼球,而比小的控件更容易在出现时被注意到。而且大型控件也更容易被用户点击,这让它们在应用中更加有用——就像电话和时钟(上面的按钮)——用户经常在容易分心的环境中能(正常)使用它们。

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

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

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

    准备好改变字体大小。用户期望大多数应用能有设置字号大小的功能。为了适应一些文本大小的变化,你也许需要调整布局;想要得到更多文本显示相关的信息,你可以查阅章节Text Should Always Be Legible.

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

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

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

    1.4 起始与停止(Starting and Stopping)

    1.4.1 即时启动(Start Instantly)

    有种说法是用户往往不会花超过一两分钟去审视一个新应用,当你将应用从打开到启动这段时间压缩得很短,并且同时在载入过程中呈现一些对用户有帮助的内容,你就会激发用户的兴趣并给所有用户一个惊喜。

    重要:不要在安装过程结束后告诉用户需要重启设备。重启需要时间并且会让人觉得你的应用看上去不可靠而且很难使用。

    如果你的应用有内存使用问题,或者不重启就无法流畅运行,你必须声明这些问题。关于如何开发一款性能良好的应用,请查阅iOS应用编程指南

    尽可能避免使用闪屏或者其他启动体验。用户能够在启动后立即开始使用应用是最好不过的。

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

    避免让用户做过多设置。而应该如此:

    聚焦在满足

    80%

    的用户需求上。

    这样主体用户群就无需设置各种选项,因为你的应用已经默认处于他们想要的状态。如果有些功能有少部分用户想要,换句话说,大部分人不需要的话,就别管它了。

    尽可能用其他方式获取更多(用户)信息。

    如果你能得到用户在内置应用或硬件设置中提供的信息,直接从系统中获取它们,而不需要再次让用户输入。

    如果你必须获取设置信息,在你的应用中直接向用户询问,然后尽快保存这些设定

    (译者注:这段讲的是权限许可,如能否访问照片或者日历或地理位置信息等等)。这样用户就无需强制跳出应用进入系统设置页面了。如果用户需要更改设置,他们可以在任何时候进入应用的设置选项进行修改。

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

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

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

    只提供开始使用应用所必需的信息。

    好的新手引导应该告诉用户接下来第一步应该做什么,或者简短地演示大部分用户感兴趣的一些功能。在能够浏览你的应用之前,如果用户遇到太多的信息,让用户记住这些不是当前所必须的内容,他们很可能会觉得你的应用很难用。如果在某些特定场景下确实需要一些引导,那么也应该在用户进入这个场景之后再进行。

    使用交互动画来吸引用户,并让用户通过实际上手来学习如何使用。

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

    能够简单地取消或者跳过新手引导。

    有些用户看完新手引导之后就不想再看,有些甚至根本就不想看新手引导。请记住用户的选择,不要强迫用户每次打开你的应用都要再做一次选择。

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

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

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

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

    准备一张与应用首页看上去一样的闪屏。iOS会在启动应用时调用这张图,这样可以让用户觉得启动速度很快,降低对等待时间的感知度。具体如何制作闪屏,请查阅Launch Images。(译者注:Launch Images章节处在iOS Human Interface Guidelines的Icon and Image Design部分,翻译将在后续更新中放出,烦请各位耐心等候。)

    如果可能,不要让用户在初次启动应用时阅读免责声明或者确认用户协议。你可以直接在App Store展示这些内容,使用户在下载前就有所了解;虽然这个办法能最大地减少麻烦,但也不是一直可行。如果在某些情况下你必须展示这些内容,要确保它们与UI保持统一并在产品功能与用户体验之间达成平衡。

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

    1.4.2 时刻准备好停止(Always Be Prepared to Stop)

    iOS 应用无需关闭或退出选项。当用户切换应用,回到主屏幕或者将设备调至睡眠模式的时候,其实就是停止了当前应用的使用。

    当用户切换应用时,iOS的多任务系统会将其放置到后台并将新应用的UI替换上来。在这种情况下,你必须做到以下几点:

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

    当应用停止的时候保存当前状态,使用户可以在回到应用时能从中断之处继续使用。例如,在使用可滚动的数据列表时,退出后保存列表所在的位置。

    有些应用可能需要一直在后台运行。例如,用户可能希望能在使用一个应用的同时还能一直听歌,接着又想用另外一个应用来检查代办项或者玩游戏。关于如何正确处理多任务,请查阅Multitasking。(译者注:Multitasking章节处在iOS Human Interface Guidelines的iOS Technologies部分,翻译将在后续更新中放出,烦请各位耐心等候。)

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

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

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

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

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

    1.5 导航(Navigation)

    除非导航设计的不合理,不然用户不应明显察觉到应用中的导航体验。放置导航到一个能够支撑你的应用结构和目的却又不过分引起用户注意的状态。

    广义来说,有三种主要类型的导航,每种导航都有其适应的应用结构:

    分层。

    扁平。

    内容或经验驱动。

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

    document.createElement('video');

    http://isux.tencent.com/wp-content/uploads/2014/09/20140922163952373.m4v

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

    http://isux.tencent.com/wp-content/uploads/2014/09/20140922164218524.m4v

    在内容驱动或经验驱动信息结构的应用中,导航的内容也会根据内容或经验来进行设计。例如,在阅读一本电子书时,用户会一页接一页地进行阅读,也会在目录中选择想要阅读的页码跳转后开始阅读。同样的,在游戏应用中,导航的作用也非常重要。

    http://isux.tencent.com/wp-content/uploads/2014/09/20140922164218977.m4v

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

    用户应该时刻清楚自己当前在应用中所处的位置,以及如何前往他们所想到的页面。

    无论导航类型是否适合你的应用结构,最重要的是用户访问内容的路径应该是合理、可预期和易于寻找的。

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

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

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

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

    一般来说,最好能给用户到达每一屏的路径。如果用户需要,就应该考虑使用临时视图,例如模态视图、动作菜单或警告框。查看Modal ViewAction SheetAlert了解更多。

    (译者注:上文提到的章节均处在iOS Human Interface Guidelines的第4章,翻译将在后续更新中放出,烦请各位耐心等候。若有需要,亦可先参考先前已翻译的iOS7 UI Elements章节:。)

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

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

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

    1.6 模态情境(Modal Contexts)

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

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

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

    �必须引起用户关注的时候。

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

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

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

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

    保证提醒对话框的内容都是重要且可操作的。提醒对话框会打断用户的体验并且要点击才会消失,所以要让用户感到提醒信息是有用的,打断是有价值的。

    尊重用户关于接收通知的选择。用户会设置接收应用通知的形式,必须尊重要用户的喜好设置,否则可能触怒用户,导致其关闭所有的推送通知。

    1.7 交互性和反馈(Interactivity and Feedback)

    1.7.1 用户知道标准手势(Users Know the Standard Gestures)

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

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

    除了用户熟悉的标准手势,iOS还定义了一些系统范围内的操作,例如呼出控制中心或消息中心。在任意应用下都可以使用这些操作。

    不要给标准手势赋予不同的行为。除非你的应用是游戏,否则重新定义标准手势会使用户迷惑,且增加使用难度。

    不要创建和标准手势功能相似的手势操作。用户已经习惯了标准手势的行为,没有必要让用户学习达到同样效果的不同操作。

    可以用复杂手势作为完成某任务的快捷方式,但不能是唯一触达方式。最好给用户提供一些简单、直接的方式完成某操作,即使这种方法需要额外的动作。简单的手势能让用户集中于当前的体验和内容,而不是交互操作本身。

    除非是游戏,否则避免定义新的手势。在游戏或其他沉浸式的应用中,操作手势也是有趣体验的一部分。但是在普通应用中,帮助用户达成目标要比操作本身重要的多,所以最好使用标准手势,尽量避免让用户去发掘和记忆新的操作。

    在特定的环境中,可以考虑使用多指操作。虽然复杂的操作并不一定适用于所有应用,但对用户会花大量时间使用的应用来说可以丰富体验,例如游戏或创建内容环境。但因为非标准手势可发现性差,要尽量少用,并且不要让这类手势成为完成任务的唯一方式。

    1.7.2 可交互元素吸引用户点击(Interactive Elements Invite Touch)

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

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

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

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

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

    一个图标或者标题提供了清晰的名称指引用户点击它。例如,地图中的标题“立交桥路线”,“定位到这里”,清晰地说明了用户可做的操作。结合关键色,就可以省去按钮边界或其他多余的修饰。

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

    在内容区域,有必要给按钮添加边界或背景。操作条中的按钮、动作表单和提醒对话框可以不需要边界,因为用户知道在这种区域中大多数选项是可交互的。但是在内容区域,按钮有必要使用边界或背景将按钮从其他内容中区分出来。例如,系统自带的音乐、时钟、照片和App Store应用会在一些特别的场景中使用这种按钮。

    照片应用中给分享按钮增加了边框,与其他解释性文本进行了区分。

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

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

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

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

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

    1.7.3 反馈有助于理解(Feedback Aids Understanding)

    反馈会帮助用户了解应用当前在做什么,发现接下来可以做什么以及理解动作产生的结果。UIKit提供了很多反馈。

    尽可能将状态或其他的反馈信息整合到UI中。用户不进行操作或不跳出当前内容就能获得需要的信息是最好的。例如,邮箱应用将当前邮箱的状态显示工具条上,这样就不会影响当前内容。

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

    避免显示不必要的警告框。警告框是一种很强的反馈机制,只有在传递非常重要也是理论上可行的信息时才需要使用它。如果用户常看到很多不是重要信息的警告框,他们很快就会忽略所有对话框提醒。

    1.7.4 输入信息的方式要简单(Inputting Information Should Be Easy)

    不管用户是点击控件还是使用键盘,输入信息都会花费时间和精力。如果发挥有用的效用前就让用户输入大量信息会减弱用户继续使用的欲望。

    让用户更容易地进行选择。例如,使用选择器或者表格代替纯文本,避免要求用户打字来提高选择效率,降低选择成本。

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

    适宜地从iOS中获取信息。设备上存储了大量的用户信息。可以的话,不要让用户提供你可以轻易找到的信息,例如联系人或日历信息。

    提供有用的反馈来平衡用户的输入。付出和回报的概念可以帮助用户感到进程在被推进。

    相关文章

      网友评论

          本文标题:IOS人机界面指南(一):UI设计基础01

          本文链接:https://www.haomeiwen.com/subject/ehhpqttx.html