美文网首页
iOS Human Interface Guidelines 3

iOS Human Interface Guidelines 3

作者: 一冠疯格 | 来源:发表于2016-03-28 08:35 被阅读106次

    近期正在学习iOS的交互设计规范,计划把部分交互、界面设计翻译出来,可以加深理解,需要的同学也可以做参考,有翻译得不好的地方,欢迎指正。

    翻译:王冠

    自适应性和布局

    内置(应用)的自适应性

    人们通常希望在自己所有的电子设备上,不管是横屏竖屏,都能正常使用自己喜欢的 app,在 iOS 8 (包括iOS8)之后,设计师使用“尺寸自动归类”和“自动调整布局”来帮助实现用户期望中的界面自动适配的效果,而做到这两点需要:

    1定义屏幕布局。

    2当环境改变时,视图控制器和视图该如何适应。

    (“显示环境”的概念指的是整个设备屏幕或者仅仅一部分屏幕,例如弹出框区域或者分开的视图控制器中的主要视图)

    iOS包括一个特性集合里面的显示环境概念。同时也包括尺寸种类、显示比例、界面风格。你可以用特性集合中的元素让你的界面和界面控制器在多变的显示环境中能正常响应。 

    iOS 定义了两种水平尺寸种类:常规(regular)和紧凑(compact)。常规尺寸类与可扩展空间有关,紧凑尺寸类与约束空间有关。为了描述显示环境,可以指定一个水平尺寸类别和一个垂直尺寸类别。和你想的一样,一个 iOS 设备可以在竖屏和横屏使用不同的尺寸类集合。

    当显示环境的尺寸种类改变时,iOS会自动进行多种布局变换。例如,当垂直尺寸类从紧密变为常规,导航栏和工具栏自动变高。

    当设计师需要依靠尺寸类来设计布局的改变,app 可以在任何显示环境下都呈现出很好的效果。

    注:在尺寸类里,继续用自动布局来进行小的界面调整,像延伸或紧缩内容。

    例如,iPad一直使用常规尺寸类,无论尺寸大小还是横屏竖屏。iPad 的显示环境总是水平常规且垂直常规。

    iPhone 的显示环境因设备尺寸和横屏竖屏而变化。

    在竖屏时,iPhone 6 Plus 使用水平紧密和垂直常规的尺寸类,见下图。

    在横屏时,iPhone 6 Plus 使用水平常规和垂直紧密的尺寸类,见下图。

    除 iPhone 6 Plus 之外的所有其他 iPhone 机型,包括 iPhone 6,都使用相同的尺寸集合。

    (在竖屏时,iPhone 6、iPhone 5、iPhone 4s 都使用水平紧密和垂直常规的尺寸类;在横屏时,这些设备都使用水平紧密和垂直紧密的尺寸类。)

    所有环境下,都提供优质的使用体验

    当设计者充分利用app的自适应性,可以保证 UI 随显示环境变换时迅速响应。遵守这些规范的话,可以让设备不论在横屏还是竖屏状态下,都有出色的使用体验。

    需要在所有环境下都专注于显示核心内容。这应该是设计者的最高优先级。用户使用 app 来浏览他们喜欢的内容时,与界面发生交互。当环境改变时改变聚焦,这会让用户感觉对于app已经失去控制。

    避免没有理由的去改变界面布局。在所有的环境中提供一致的使用体验,让用户在手动旋转设备,以便在不同设备上使用app时保持一致的使用模式。例如,如果你在水平常规模式下使用了网格来显示图片,就不用在压缩模式下使用列表来显示一样的内容,虽然你可能调整了网格的尺寸。

    如果你的app仅在一个方向上运行,请呈现效果时直接一些。用户希望设备在任何方向下都正常使用你的app,当你满足这个期待时,使用体验才是最好的。不过如果你的app只能在一个方向下运行,就应该:

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

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

    如果你的app把设备展示方向翻转识别为用户输入,那么就该按程序设定的方式来响应设备翻转。例如,一个游戏允许用户利用设备翻转来移动游戏中的道具,那么游戏应用本身的UI元素就不该对翻转屏幕发生反馈。在这种情况下,你必须关联两个需要变化的方向,同时允许人们在这两个方向切换直到他们开始执行应用的主体任务。直到用户开始执行主要任务,那就开始按程序设定的那样来响应设备的动作。

    使用布局来交流

    界面布局不仅包括屏幕上展示的UI元素。你的界面布局需要让用户知道哪些最重要、哪些是他们选择的、以及界面元素之间的关系。

    加强重要内容和功能的显示效果,使用户更容易聚焦在核心任务上。有几个好方法是:在屏幕的上半部分放置重要内容—按照从左到右的习惯(把重要内容放在左上部分)

    让控件显示出不同的视觉重量和平衡,来告知用户屏幕上元素的主次关系,尺寸大的控件更吸引眼球,和小尺寸控件相比更容易被看到。大尺寸控件也更容易被用户点击,这让他们在app中非常实用,例如电话和始终上面的按钮控件,能让用户在分心的时候仍然正常使用。

    使用对齐让阅读更流畅,让分组和层次之间更有秩序。对齐让app看起来优雅而有序,也让用户在滑动屏幕内容时更容易定位和专注于重要信息。不同信息分组的缩进与对齐让它们之间的关联更清晰,可以让用户更容易找到指定控件。

    确保用户即使在内容处理默认尺寸下仍然可以理解到主要内容。例如,用户应该不用水平滚动屏幕就能看到重要的文本,或不用放大操作就可以看到主体图像。

    做好准备改变字体的大小。用户希望当该表设置不同字体的时候,app可以迅速响应。为了适应一些文本大小的变化,你也许需要调整界面布局,想要得到更多文本显示相关的信息,可参考:颜色与字体。

    尽可能避免UI上不一致的界面表现。一般有着相似功能的控件外观也应该类似。用户通常认为他们看到不同的界面元素,总有其原因,而且用户会去尝试。

    给每个可交互的元素足够的空间,可以让用户容易操作里面的内容和控件。给点按类控件的大小是44 x 44点(points)。

    相关文章

      网友评论

          本文标题:iOS Human Interface Guidelines 3

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