iOS Human Interface Guidelines 3 界面的自适应性和布局

近期正在学习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)。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,884评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,212评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,351评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,412评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,438评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,127评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,714评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,636评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,173评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,264评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,402评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,073评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,763评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,253评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,382评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,749评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,403评论 2 358

推荐阅读更多精彩内容