iOS-HIG 视觉设计-布局

Layout

People generally want the ability to use their favorite apps on all of their devices and in any orientation. In iOS, interface elements and layouts can be configured to automatically change shape and size on different devices, during multitasking on iPad, in split view, and when the screen is rotated. It’s essential that you plan ahead and design an app that provides a great experience in any context.

用户一般希望在任何方向都能使用他们喜欢的app在他们所有设备上。在iOS上,界面元素和布局可以被配置成在不同的设备下自动改变形状和大小,在iPad多任务时,在分割视图,和屏幕被旋转时。你提前计划和设计在任何环境提供良好体验一个app,是很有必要的。

Maintain focus on the current content during context changes.Content is your highest priority. Changing focus when the environment changes can be disorienting, frustrating, and make people feel like they’ve lost control of the app.

在环境改变时维持关注当前内容。内容是你的最高优先级。当环境改变关注会令人迷惑,沮丧,和使用户觉得失去了对app的控制。

Ensure primary content is clear at its default size.People shouldn’t have to scroll horizontally to read important text, or zoom to see primary images, unless they choose to change the size.

确保主要内容在它初始大小是清晰的。用户不应该不得不横向滑动来阅读重要文本,或者缩放来查看主要图片,除非他们选择改变大小。

Maintain an overall consistent appearance throughout your app.In general, elements with similar functions should look similar.

贯穿app维持一个一致的外观。一般,有相同功能的元素应该看起来相似。

Use visual weight and balance to convey importance.Large items catch the eye and appear more important than smaller ones. Larger items are also easier to tap, which is especially important when an app is used in distracting surroundings, such as in the kitchen or a gym. In general, place principal items in the upper half of the screen and—in a left-to-right reading context—near the left side of the screen.

使用可见的权重和平衡来传达重要性。大的项目捕获眼球,看起来比小的项目更重要。大些的项目也更容易被点击,当在容易分心的环境使用app时这点特别重要,例如在厨房或健身房。一般,将主要的item放在屏幕上半边-在一个从左到右的阅读环境-靠近屏幕的左边。

Use alignment to ease scanning and to communicate organization and hierarchy.Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also indicate how groups of content are related.

使用对齐来减少浏览和传达组织结构和层级。对齐使得一款app看起来整洁和有组织,帮助用户专注当滚动时,和使得找信息变得容易。缩进和对齐也可以表明相关的内容如何组织。

Avoid gratuitous layout changes.Just because someone rotates a device doesn’t mean the entire layout needs to change. For example, if your app shows a grid of images in portrait mode, it doesn’t have to present the same images as a list in landscape mode. Instead, it might simply adjust the dimensions of the grid. Try to maintain a comparable experience in all contexts.

避免无理由的布局改变。仅仅因为某人旋转一个设备不意味着整个布局需要改变。例如,如果你的app在竖屏模式显示一个图表表格,在横屏模式它不必要呈现相同的图像。取而代之,它可能仅仅改变grid的维度。尝试在所有环境维持一个相同的体验。

If possible, support both portrait and landscape orientations.People prefer to use apps in different orientations, so it’s best when you can fulfill that expectation.

如果可能,支持竖屏和横屏两种模式。用户希望在不同的方向使用app,所以你最好满足这个期望。

If your app supports only one orientation, support both variants.If it’s essential that your app run in a single orientation, make sure it supports both orientation variants. For example, if your app only runs in landscape mode, it should be usable regardless of whether the Home button is on the left or the right. If the device is rotated 180 degrees while using your app, your app should respond by rotating its content 180 degrees. If your app doesn't rotate automatically when someone holds the device wrong, they'll know instinctively to rotate it. You don't need to tell them.

如果你的app只支持一个方向,支持不同的变体。若果你的app必须运行在单一的方向,确保它支持两种方向的变种。例如,如果你的app只能运行在横屏模式,它应该可用不管Home button是在左边还是右边。如果设备旋转180度,app的内容也应该跟着旋转180度。如果你的app不自动旋转,当某人拿设备的方向不对,他们本能知道要旋转它,你不需要告诉他们。

Customize your app’s response to rotation according to context.A game that lets people move a character by rotating the device, for example, probably shouldn’t switch orientations during gameplay. It could, however, display menus and intro sequences based on the current orientation.

定制你的app根据环境回应旋转。一个游戏允许用户移动一个角色通过旋转设备,例如,也许不应该转换方向在玩游戏时。它可以,无论怎样,显示菜单和介绍顺序基于当前方向。

Provide ample spacing for interactive elements.Try to maintain a minimum tappable area of 44pt x 44pt for all controls.

为交互元素提供足够空间。尝试为所有控制提供一个最小44pt*44pt的可点击范围。

Be prepared for text size changes.People expect most apps to respond appropriately when they choose a different text size in Settings. To accommodate some text-size changes, you might need to adjust the layout. For more information about text usage in your app, seeTypography.

为文本大小改变做好准备。用户期望所有app反应正常当他们在Settings中选择一个不同的文本字体。为了适应一些字体大小改变,你可能需要改变布局。For more information about text usage in your app, seeTypography.

For developer guidance on adaptivity, seeAuto Layout Guide.

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

推荐阅读更多精彩内容