iOS11人机交互指南(五)- 视觉设计(Visual Design)- 上

一、适应性和布局(Adaptivity and Layout)

用户通常希望能够在他们的所有设备和任何环境中使用他们喜欢的应用程序。在iOS中,当在iPad上进行多任务处理,可以将界面元素和布局配置为自动在不同设备上更改形状和大小。在分屏视图,当屏幕旋转时,很有必要设计一个适应性强的界面,从而保证在任何环境中提供良好的体验。

1.1 设备屏幕尺寸和方向(Device Screen Sizes and Orientations)

iOS设备有各种不同的屏幕尺寸,并且横向纵向都可使用。

想了解屏幕分辨率对应用程序插图的影响,请参阅 Image Size and Resolution

1.2 自动布局(Auto Layout)

自动布局是构建自适应界面的开发工具。使用自动布局,你可以定义管理应用程序内容的规则(称为约束)。例如,您可以约束一个按钮,不管可用的屏幕空间如何,使其总是水平居中,并且位于图像下方8个点。

当检测到某些环境变化(称为特征)时,自动布局将根据指定的约束自动重新调整布局。可以将应用设置为动态适应各种特征,包括:

1)不同的设备屏幕尺寸,分辨率和色域(sRGB / P3)

2) 不同的设备方向(纵向/横向)

3)分屏视图

4) iPad上的多任务模式

5)动态类型文字大小更改

6) 国际化功能基于区域设置启用(从左到右/从右到左的布局方向,日期/时间/数字格式,字体变化,文本长度)

7)系统功能可用性(3D Touch)

开发指导请查阅 Auto Layout GuideUITraitCollection

1.3 布局指南和安全区(Layout Guides and Safe Area)

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

坚持UIKit定义的安全区域和布局边距。这些布局指南基于设备和页面进行适当的设置。安全区域还可以防止内容覆盖状态栏、导航栏、工具栏和标签栏。系统提供的标准视图会自动采用安全区域布局指南。

开发指导请查阅UILayoutGuide, layoutMarginsGuide, readableContentGuide, 和 safeAreaLayoutGuide

1.4 大小类别(Size Classes)

大小类别是根据大小自动分配给内容区域的特征。系统定义了两个尺寸类,常规(表示展开空间)和紧凑(表示约束空间),它们描述了视图的高度和宽度。

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

1)常规宽度,常规高度

2)紧凑的宽度,紧凑的高度

3)规则宽度,紧凑高度

4)紧凑宽度,常规高度

与其他环境变化一样,iOS会根据内容区域的大小类别动态进行布局调整。例如,当垂直尺寸类别从紧凑高度变为常规高度时,可能是因为用户将设备从横向旋转到纵向,标签栏可能会变高。

设备大小(Device Size Classes)

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

多任务大小类(Multitasking Size Classes)

在iPad上,你的应用程序在多任务配置运行中(multitasking),大小类别也适用。

1.5 布局注意事项(Layout Considerations)

环境变化期间,保持对当前内容的专注。内容是您的最高优先级。环境变化时改变焦点可能让用户迷失方向与沮丧,并让用户觉得失去了对应用的掌控。

确保主要内容在默认大小下清晰。用户应该不需要横向滚动来阅读重要文本或缩放以查看主图像,除非他们选择更改大小。

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

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

使用对齐以轻松扫视并传达组织和层次结构。对齐使得应用程序看起来整齐有序,帮助用户在滚动时集中注意力,更易获取信息。缩进和对齐也可以显示内容组的相关性。

扩展视觉元素以填充屏幕。您的应用程序应该充分利用所有可用的屏幕空间。

确保合适的内容边距和间距。通常,内容应该舒适地间隔开并且从屏幕的边缘稍微插入。一般来说,内容最适合中心和对称地插入,这样它在任何方向看效果都很好。为获得最佳效果,请使用标准的系统提供的界面元素、自动布局和标准边距,并遵守安全区域布局指南。

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

为交互元素提供充足的触控目标。试图让所有控件保持44pt x 44pt的最小可点击范围。


避免免费的布局变更。用户旋转设备并不意味着整个布局需要改变。例如,如果您的应用程序以纵向模式显示网格图像,则不必在横向模式下呈现与列表相同的图像。相反,它只需要调整网格的尺寸。尝试在所有情况下保持可比的经验。

尽可能同时支持纵向和横向。用户喜欢以不同的方向使用应用程序,最好满足这个期望。

如果您的应用仅支持一个方向,则支持两种变体。如果您的应用程序仅以横向模式运行,则无论用户是左右旋转设备,都应该可以使用它。如果设备在仅以纵向模式运行的应用程序使用时旋转180度,则应用程序内容也应旋转180度(除了在iPhone X中)。如果用户以错误的方向握住设备时,您的应用不会自动旋转,他们会本能地知道旋转它,你不需要额外告诉他们。

根据情况自定义应用程序对旋转的响应。例如,通过旋转设备让用户移动角色的游戏可能不应该在游戏过程中切换方向。然而,它可以根据当前方向显示菜单和介绍序列。

准备文本大小更改。用户期望当他们在“设置”中选择不同的文本大小时,大多数应用程序都会进行适当的响应。为了适应一些文本大小的更改,您可能需要调整布局。有关应用程序文本使用的更多信息,请查阅 Typography

确保你的应用程序也能在iPad上良好运行,而不仅仅在iPhone上。用户喜欢在任何类型iOS设备上灵活运行你的应用程序。即使你希望大多数用户在iPhone上使用你的应用程序,界面元素也应该在iPad上保持可见和功能良好。如果你的应用程序的某些特性需要iphone特有的硬件——比如3D Touch功能,可以考虑隐藏或禁用iPad上的这些功能,让用户去使用应用程序的其他功能。

二、动画(Animation)

贯穿于iOS系统的优美、精细的动画在用户和屏幕屏幕内容之间建立了视觉上的联系。当动画被合理利用时,它能够表达状态、提供反馈、加强直接操纵感,并且视觉化呈现用户的操作结果。

明智且审慎地使用动画和动效。不要为了使用动画而使用动画。过度或是无端的动画会让用户感到不连贯或是错乱,尤其是在那些非沉浸式体验的应用中。iOS经常使用动效,比如在主屏和其它地方使用了视差效果,来建立用户对深度的认知。这些效果有助于增强理解和提升愉悦感,但是滥用它们就会让一个应用变得令人困惑并且难以控制。如果你想使用动效,一定要进行用户测试以保证它们真的能达到效果。

动画要尽可能的写实且连贯。用户可以接受艺术创造,但是当动效没有意义或是违背了物理定律时,用户就会感到混乱。比如,如果用户通过在屏幕顶部下滑呼出一个视图,那么他们应该也能通过上滑将该视图关闭。

动画要保持一致性。一个熟悉并流畅的体验能一直让用户参与其中。用户已经习惯了贯穿于iOS系统的精细动画,比如平稳的过渡、横竖屏之间的流畅转换和基于物理现实的滚动。 除非你在创造一个沉浸式体验,比如游戏,不然自定义动画都应该和系统自动地动画相符。

可选择动画。当用户在可访问性偏好选项中启用了减少动画时,应用程序应该最小化或消除应用动画。

三、品牌(Branding)

成功的品宣不仅是单纯地在应用中添加品牌元素。优秀的应用通过优雅别致的文字、颜色和图片来营造独特的品牌辨识度。提供足够的品牌元素让用户感觉是处在你的应用中,但不要给予太多而变成干扰。

融入精妙的、不唐突的品牌元素。用户使用你的应用是为了娱乐、得到信息或是完成任务,而不是为了观看广告。要想达到最好的体验,请巧妙地将品牌融于应用设计中。让应用图标的颜色贯穿于界面设计是一个在你的应用中提供专属环境的好办法。

不要让品宣阻碍了优秀的应用设计。首先,让你的应用要更像是一个iOS应用。保证它是直观的、易于导航的、易用的并且以内容为中心的。当你的应用在其它平台也适用,不要为了保持品牌的一致性而牺牲了设计的质量。

内容比品宣更重要。在屏幕顶部一直放置一个除了展示品牌元素以外没有任何用途的头栏,就意味着牺牲了用来浏览内容的空间。相反,考虑采用低打扰性的方式来实现品宣,比如使用自定义的配色方案和字体,或是巧妙地自定义背景。

抵制住想要在应用中到处展示logo的诱惑。避免在应用中到处展示logo,除非它是所提供环境必不可少的一部分。这点在导航栏中尤其重要,因为提供一个标题比logo更加有用。

遵循Apple的商标准则。Apple的商标不能在你的应用名称或图像中出现。请参阅Apple TrademarkGuidelines for Using Apple Trademarks

提示 App Store提供更多机会突出您的品牌。相关指导请查阅 App Store Marketing Guidelines

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,057评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,945评论 4 60
  • 正面和负面外部效应。 税率的正确使用多半用在外部效应上面。举例:吸烟对自己有害健康,而在于公共场合吸烟,就有损于其...
    ae0a6f68e050阅读 382评论 0 0
  • 一切拿结果说话,凡事都有下一步! 通过易效能22天的践行,我发觉自己的好此习惯变的更好了。 首先我很明确我艰持训练...
    倪昔武重庆从乐农业阅读 89评论 1 1