Human Interface Guidelines——Adaptivity and Layout

尝试阅读《Human Interface Guidelines》原文翻译学习iOS设计指南。

用户通常希望能够在他们所有的设备或任何场景中使用他们喜欢的app。在iOS系统中,界面元素和布局可以为不同的设备自动配置改变形状和大小,在ipad上可以处理并行任务,在分割视图中,当屏幕旋转时等等。设计一个能够在任何环境中提供良好体验的适应性接口是至关重要的。

设备屏幕尺寸和方向

iOS设别有不同的屏幕尺寸,并且可以用于横向或纵向。

为了了解屏幕分辨率如何影响app的视觉设计,see Image Size and Resolution

自动布局

自动布局是构造自适应界面的开发工具。适应Auto Layout可以定义管理app中内容的规则(称为约束),例如,你约束一个按钮,使其始终以水平方向为中心,并定位在图像的下方八个点,这于可用的屏幕空间无关。

自动布局自动调整布局根据指定的约束时,某些环境变化(称为特性)检测。 你可以设置你的应用程序动态地适应大范围的特性,包括:


布局指南及安全区

布局指南定义的矩形区域实际上并不显示在屏幕上,但有助于内容的定位、对齐和间距。 该系统包括预定义的布局指南,可以很容易地在内容周围应用标准的页边距,并限制文本的宽度以获得最佳的可读性,此外还可以定义自定义布局指南。

大小类别(Size Classes)

Size classes是根据大小自动分配给内容区域的特性。 该系统定义了两个大小类,规则(表示扩展空间)和紧凑(表示约束空间) ,用于描述视图的高度和宽度。

一个视图可以包含任何大小类别的组合:

与其他环境变化一样,iOS 会根据内容区域的大小类动态调整布局。 例如,当垂直大小类从紧凑高度变为常规高度时,可能是因为用户将设备从横向旋转到纵向方向,制表符条可能变得更高。

Device Size Classes

根据屏幕大小,不同大小的类组合适用于不同设备上的全屏体验。

Multitasking Size Classes

在 iPad 上,当你的应用程序运行在多任务配置中时,size 类也适用。

总体布局考虑

确保主要内容在其默认大小时是清晰的。 人们不必为了阅读重要文本而水平滚动,或者为了看到主要图像而缩放,除非他们选择改变大小。

在整个应用程序中保持整体一致的外观。 一般来说,具有相似功能的元素应该看起来相似。

使用视觉重量和平衡来传达重要性。 大件物品吸引眼球,显得比小件物品更重要。 大一点的东西也更容易点击,当一个应用程序被用于分散注意力的环境时,比如在厨房或者健身房,这一点尤其重要。 一般来说,将主要项目放置在屏幕的上半部分,并且在从左到右的阅读上下文中放置在屏幕左侧附近。

使用对齐来简化扫描和沟通组织和层次结构。 对齐使应用程序看起来整洁有序,帮助人们在滚动时集中注意力,并且更容易找到信息。 缩进和对齐还可以指示内容组之间的关系。

如果可能的话,支持纵向和横向方向。 人们喜欢在不同的方向使用应用程序,所以当你能满足这个期望时是最好的。

为文本大小的更改做好准备。 人们希望大多数应用程序在设置中选择不同的文本大小时能够响应。 为了适应一些文本大小的变化,您可能需要调整布局。 有关应用程序中文本使用的详细信息,请参阅排版。

为交互元素提供充足的触摸目标。 尽量保持所有控件的最小可伸缩面积为44 pt x 44 pt。


在多个设备上预览你的应用程序。 您可以使用模拟器(包含在 Xcode 中)预览您的应用程序,并检查剪辑和其他布局问题。 如果你的应用程序支持横向模式,不管设备是左旋还是右旋,都要确保你的布局看起来很棒。 全屏 iphone 不支持倒置肖像模式。 有些功能,比如广色图像,最好在实际设备上预览。

在较大的设备上显示文本时应用可读性边距。 这些页边距使文本行足够短,以确保舒适的阅读体验。

适应环境的变化

在上下文更改期间保持对当前内容的关注。 内容是你的最高优先级。 当环境发生变化时,改变注意力会让人感到迷惑和沮丧,并且会让人觉得失去对应用程序的控制。

避免不必要的布局变化。 当有人旋转一个设备,整个布局不必改变。 例如,如果你的应用程序在纵向模式下显示一个图片网格,它就不必在横向模式下显示与列表相同的图片。 相反,它可以简单地调整网格的尺寸。 尝试在所有情况下保持一种可比较的体验。

如果您的应用程序必须以单一方向运行,那么支持这两种变体。 一个只在横向模式下运行的应用程序应该是可用的,不管用户是向左还是向右旋转设备。 一个只在肖像模式下运行的应用程序应该在用户旋转设备180度时将其内容旋转180度ーー除了不支持倒置肖像模式的 iPhone x。 如果你的应用程序没有自动旋转当有人拿着设备在错误的方向,他们会本能地知道旋转它。 你不需要告诉他们。

根据上下文自定义应用程序对轮换的反应。 例如,一个允许人们通过旋转设备移动角色的游戏,在游戏中可能不应该改变方向。 但是,它可以根据当前的方向显示菜单和导入序列。

确保你的应用程序可以在 iPad 上运行,而不仅仅是在 iPhone 上。 用户喜欢在任何一种 iOS 设备上运行应用程序的灵活性。 即使你希望大多数人在 iPhone 上使用你的应用程序,界面元素在 iPad 上也应该保持可见性和功能性。 如果你的应用程序的某些功能需要专门针对 iphone 的硬件(比如3D touch) ,考虑在 iPad 上隐藏或禁用这些功能,让人们使用你的应用程序的其他功能。

当重复使用现有的艺术品时,要注意长宽比的差异。 不同的屏幕大小可能有不同的长宽比,导致艺术作品出现裁切、凸框或凸框。 确保重要的视觉内容在所有显示大小上都保持在可视范围内。

设计全屏体验

扩展可视元素以填充屏幕。 确保背景延伸到显示器的边缘,并且垂直滚动布局,如表格和集合,一直延伸到底部。

避免显式地将交互式控件放在屏幕的最底部和角落。 人们使用显示器底部边缘的滑动手势来访问主屏幕和应用程序切换器等功能,这些手势可能会取消你在这个区域实现的自定义手势。 屏幕的远端角落可能是人们很难达到舒适的地方。

插入必要的内容,以防止裁剪。 一般来说,内容应该居中对称插入,这样它在任何方向上看起来都很棒,不会被圆角夹住,不会被传感器外壳隐藏,也不会被进入主屏幕的指示器遮挡。 为了达到最好的效果,使用标准、系统提供的界面元素和自动布局来构建你的界面,并坚持布局指南和 UIKit 定义的安全区域。 当设备处于横向时,对于某些应用程序(比如游戏)来说,将可伸缩的控件放在屏幕的下方(延伸到安全区域以下) ,以便为内容提供更多的空间可能是合适的。 在屏幕顶部和底部放置控件时使用匹配的插入,并在 Home 指示器周围留出足够的空间,这样人们在试图与控件交互时就不会意外地瞄准它。 因为 Home 指示器仍然集中在屏幕上,它相对于你的应用程序界面的位置可能会改变。

插入全宽度按钮

一个延伸到屏幕边缘的按钮可能看起来不像一个按钮。 尊重标准的 UIKit 边距的两侧全宽按钮。 屏幕底部的全宽按钮如果有圆角并与安全区域底部对齐,看起来最好,这也确保了它不会与 Home 指示器冲突。

不要掩盖或呼吁特别注意关键的显示功能

不要试图通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或访问主屏幕的指示器。 也不要使用诸如括号、饰边、形状或说明文字等视觉装饰来引起对这些区域的特别注意。

注意状态栏的高度

全屏 iphone 的状态栏比老款 iphone 的高。 如果你的应用程序假设一个固定的状态栏高度来定位状态栏下面的内容,你必须更新你的应用程序来根据用户的设备动态定位内容。 请注意,全屏 iphone 的状态栏在语音记录和位置跟踪等后台任务激活时不会改变高度。

如果你的应用程序目前隐藏了状态栏,重新考虑全屏 iphone 的决定

全屏 iphone 比老款 iphone 有更多的垂直空间,状态栏占据了你的应用程序可能无法充分利用的屏幕区域。 状态栏还显示人们认为有用的信息。 它只应该被隐藏以换取附加值。

允许自动隐藏的指标访问主屏幕节制

当启用自动隐藏时,如果用户几秒钟没有触摸屏幕,指示器就会淡出。 当用户再次触摸屏幕时,它会重新出现。 这种行为只能用于被动观看,比如播放视频或照片幻灯片。



END.THANKS FOR YOUR READING~

如有不当,还请多多指教~

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

推荐阅读更多精彩内容