iOS设计指南

关于这个指南

这个指南主要是讲怎么根据iOS人机界面指南来设计app,而不是如何做自定义的控件。有时候,打破这些规则是有必要的。这篇文档的目的是指引你如何设计,而不是帮你解决一些复杂的、罕见的设计问题。

这篇非正式文档会定期更新。最近一次更新:2014年11月11日。

分辨率和屏幕大小说明

设备 Retina 竖屏(PX) 横屏(PX)
iPhone 6+ Retina HD 1080 x 1920 1920 x1080
iPhone 6 Retina 750 x 1334 1334 x 750
iPhone 55, 5S, 5C Retina 640 x 1136 1136 x 640
iPhone 44, 4S Retina 640 x 960 960 x 640
iPhone1st, 2nd & 3rd Generation No 320 x 480 480 x 320
iPad Air / Retina iPad1st & 2nd Generation / 3rd & 4th No 1536 x 2048 2048 x 1536
iPad Mini2nd & 3rd Generation Retina 1536 x 2048 2048 x 1536
iPadMini, 1st & 2nd Generation No 768 x 1024 1024 x 768

点和像素的区别

像素是我们在数字屏上所能控制的最小的值。在同一块屏幕上,像素越多就越清晰,PPI越高(像素/英寸),显示的内容就越清晰。

点是与分辨率无关的测量单位。根据屏幕的像素密度来计算,一个点可以包含多个像素(比如:在retina屏上,1点包含2×2个像素)。

当你为多种屏幕做设计的时候,你应该考虑的是点,而不是像素。意思就是不管你设计的是哪种app,你都需要有3种不同分辨率的素材。

注意

只要没有特殊说明(如在值的后面加px),这篇指南所用的单位都是点。如果你需要像素值,只需要把点的值乘2(针对Retina屏)或者点的值乘3(针对Retina HD屏)。

设备 资源分辨率 像素/英寸 屏幕尺寸
iPhone 6+ @3x 401 5.5″
iPhone 6 @2x 326 4.7″
iPhone 55, 5S, 5C @2x 326 4.0″
iPhone 44, 4S @2x 326 3.5″
iPhone1st, 2nd & 3rd Generation @1x 163 3.5″
iPad Air / Retina iPad1st & 2nd Generation/ 3rd & 4th @2x 264 9.7″
iPad Mini2nd & 3rd Generation @2x 326 7.9″
iPad Mini1st Generation @1x 163 7.9″
iPad1st & 2nd Generation @1x 132 9.7″

iPhone6+的下采样

对所有的iOS设备来说,显示像素和物理像素是相等的,只有一个例外:iPhone 6 Plus的Retina宽屏。因为它的屏幕比正常的@3x分辨率要低,显示的内容就自动地缩放了87%(2208 x 1242变为1980 x 1080)。

iPhone5S,6,6+都不一样,更多信息请看这里

 

App 图标

设备 App 图标 AppStore 图标 索引 设置
iPhone 6+ 180×180 px 1024×1024 px 120×120 px 87×87 px
iPhone 6, 5S, 5, 5C, 4S, 4 120×120 px 1024×1024 px 80×80 px 58×58 px
Old iPhones 1st, 2nd, 3rd Generation 57×57 px 1024×1024 px 29×29 px 29×29 px
Retina iPadsMini 2 & 3, Air, 3 & 4 152×152 px 1024×1024 px 80×80 px 58×58 px
Old iPads1, 2, Mini 1 76×76 px 1024×1024 px 40×40 px 29×29 px

自动应用特效

添加到应用包里的app图标资源一般都是正方形的PNG图片。当设备显示出来的时候,iOS会自动给app图标添加各种特效。

圆角

以前的圆角,就是一个简单的半径而已。但iOS7以后,app图标使用了超椭圆形状来制作圆角。Apple没有发布这个形状的正式模板,如果你想使用的话,可以试试这个非正式模板,不过它或多或少有些误差。

最终导出的资源不应该包含圆角,它只是满足你在设计过程中添加效果的需要,比如描边或阴影效果就需要圆角,以便和图标的各个角对齐。

警告

如果你为了使用与图标圆角对齐的效果,而给资源添加了超椭圆的遮罩,那一定要保证遮罩外不要有任何透明的区域。app图标不支持透明,渲染出来以后,透明的地方会显示成黑色。如果你的遮罩没达到100%的精确度,那用户就会在圆角边缘看到一些小的黑色块。出现这种情况的时候,建议你把画布的背景色设置成和app图标的背景色一致。

描边(在某些情况下)

如果你的app图标用了白色的背景,那有1像素的灰色描边能更容易识别边缘。要做到这,只需要在settings或AppStore设置一下。

遗留特效(iOS6及之前的版本)

旧的iOS版本,下面这些特效会自动应用:圆角(和iOS7+的图标使用的不是同一个形状),在主屏幕上的阴影效果和的光泽效果。光泽效果可以禁用。

网格系统

Apple开发了一个黄金比例的网格系统让你可以正确地缩放和排列icon上的元素。尽管如此,即使Apple的设计师也没有严格地按照这个网格系统来开发app图标。如果你的icon上的元素没有严格按网格对齐时,看起来更好一些,那你可以尝试着打破规则。

字体

所有iOS版本的默认字体都是Helvetica Neue。iOS7之后,Apple针对字体做了一些小修改,但在你的设计里使用原来的Helvetica Neue字体也是很不错的。现在除了默认字体之外,许多非传统的字体也可以使用了。你可以从这里找到完整的预安装字体列表。

用户字体

从技术上来说,任何True Type Font (.ttf) 都可以使用在iOS应用里,但是得注意授权。一般说来,使用对商业用途完全免费的字体是安全的。商业字体的应用证书是很难得到的,要得到它们可能有点贵。这是我收集的可以在手机应用里使用的字体证书。

配色

iOS以后,Apple给系统界面和预装app使用了醒目的配色。你能使用默认的iOS配色表上列出的颜色,也可以(如果你想让你的应用变得醒目)使用你自己的颜色

图标

iOS app中,图标与要执行的操作有视觉上的联系,可以作为文本标签很好的补充,或者完全取代文本(比如“New”,“Delete”等等)。通常的,我们使用图标区分Navigation Bar, Tool Bar or Tab Bar。

Bar按钮图标

bar中的图标总是会有两个不同的状态:默认状态是用1到1.5像素的线画出轮廓,激活状态则把这些线用颜色填充。

你一定不能造按钮图标中包含阴影或内阴影之类的额外特效,因为这些特效都是iOS之前的版本残留下来的(在iOS7重新设计了)。按钮图标应该用一种颜色绘制在透明的背景上——图标的形状通常作为遮罩,颜色则以编程方式实现。

活动视图图标

活动视图图标(也叫做共享弹窗)以前被设计成轮廓样式,但iOS8中,Apple又回到了在白色背景上用实色填充图标的风格。

通用的设计元素

iOS提供了一连串的视图和控件的集合,让开发者能快速建立界面。有一些元素可以被用户自定义,其它的不能也不应该那么做。当为iOS设计一个应用时,你应该了解你的工具集并坚持无论什么时候都尽可能使用它们。然而,有的项目里,自定义控件是值得的,因为你需要更加定制化的外观或者想要改变已经存在的控件的功能(危险区)。一切皆有可能,有时候打破规则是明智的,但是在准备这么做之前请在考虑考虑。

状态栏

状态栏包含基础的系统信息,像当前的信号,时间,电池状态等等。它看起来和 Navigation Bar类似,它们都用了同样的背景色填充。为了匹配app的样式和保证易读性,状态栏的内容主要有两种不同的样式:暗(黑色)和亮(白色)。

也可以隐藏状态栏,但准备这么做之前,请再考虑考虑。例如,app要经常下载网络内容时,用户更关心他们是否连接了WIFI网络;再比如,当app需要蓝牙连接第三方硬件时,用户更关心蓝牙是否开启。隐藏状态栏的一个合适的理由是:你想把所有会让人注意力分散的元素移除。例如,全屏内容展示,比如相册。

导航栏

导航栏是使应用穿梭在多个视图之间以及管理当前视图的控件。它总是出现在屏幕顶端,状态栏的下面。默认情况下,背景半透明,在导航栏下的内容会有些模糊。导航栏的背景可以设置成实色,渐变色或用户自定义的图片。

iPhone6竖屏模式下的Navigation Bar

iPhone 4S横屏模式下的Navigation Bar。导航栏的高度减少了12像素,iPads上除外。在横屏模式下,一般都隐藏状态栏。

下面的元素有一些特殊的对齐要求。

  • 后退按钮总是应该在左侧。
  • 当前视图的标题总是应该在导航栏正中。
  • 功能按钮总是应该在右侧。如果可能,不应该有超过一个的主要action,以避免误触和保持简洁。

工具栏

工具栏包含了一系列管理和操作当前视图内容的动作集。在iPhone上,总是出现在屏幕下边缘,在iPad上,它可能会出现在屏幕顶端。

类似于导航栏,工具栏的背景色也是可以修改的,默认情况下是半透明的,它下面的内容成模糊状。

在导航栏上,超过三个按钮就很难适配或者看起来很乱,这时候就应该使用工具栏。

搜索栏

 

搜索栏有两种不同的默认样式:突出的和最小化。这两种样式都有同样的功能。

  • 用户只要没有文字键入,搜索栏里就显示一个占位符文字,并且还有一个可以用来获取最近搜索内容的书签图标。
  • 一旦搜索的内容键入,占位符就消失了,然后一个清晰的删除按钮就出现在了搜索栏右边缘。

搜索栏可以利用一个提示——输入短句来介绍搜索的上下文环境。例如,键入“城市”,“邮编”,“机场”。

突出 搜索栏样式,使用和不使用提示的两种风格

最小化搜索栏样式
为了更多的控制搜索,可以使用范围栏限制搜索栏。范围栏和搜索栏有同样的样式,但它的搜索结果分门别类的归类了。例如,在音乐app中,可以用演唱者,专辑或歌曲来过滤搜索结果。

标签栏

标签栏允许用户通过同一app中的单个间视图快速导航,这也是使用他的唯一目的。它总是出现在屏幕底部。默认情况下,它像导航栏一样,有一些透明并且对在它下面的内容使用了系统模糊。

标签栏仅仅能包含固定数量的标签。一旦超过了这个数量,末尾的标签就会最替换成“More-tab”。点击后弹出隐藏的 tab 列表。可以使用重排序标签功能重排序。

iPhones上的最大标签数是5个,在iPad上最大标签数是7个。

为了在视图上告知用户新消息,可以给标签栏按钮添加红点带数字的标记。如果视图暂时不可用,与之关联的标签按钮不应该完全隐藏;而是应该把图标淡化显示,从视觉上表示被禁用的状态。

表视图

表视图以单列或多列展示少量或多个列表信息,并且有可以将内容分组的选项。

根据你的数据类型,有两种基本的表视图类型可以使用。

无格式

无格式表视图包含数行,顶端可以有表头,底部有表脚。屏幕右边缘可以显示垂直导航,通过它导航到表的各个地方。这种情况适合展示大量的、可排序的数据(例如:按字母排序)。

组表视图允许你把行组合成一个组。每个组都有自己的头(最好是用于描述组的用途)和脚(可以是帮助文本等等)。一个组表视图至少需要包含一个组,每个组至少需要有一行。

对于这两种类型的表,都有几种呈现数据的样式,能让用户方便地扫读、细读以致修改数据。

默认

默认样式包含左端一张可选的图片和一个标题

带有子标题

子标题样式的表视图在标题下还有小字号的子标题文本。它能够进一步的说明标题或者有简短描述。

带值

带值样式的表视图允许你展示一个与该行标题相关的值。和默认样式类似,每行左边都可以有图片和标题。标题对应一个右对齐的值,值的颜色一般比标题略淡一些。

模态,弹出框和通知窗

iOS给展示,编辑,操作数据的临时界面提供了多种样式,让临时界面能够更符合特定环境。临时界面有各自存在的特殊目的并且它们互相之间看起来都不同,所有的临时界面都有一个相同的地方:在显示的时候,它在当前视图处于最上层(它们出现在一切视图之上),其他内容都被一个半透明的黑色背景所覆盖。

活动视图

活动视图被用来执行一些特定的任务。这些任务可以是系统任务,像内容分享,它们也可以完成自定义的操作。当设计自定义任务按钮的图标时,你应该遵循的原则与设计激活状态的 bar 按钮相同——实色填充,无特效,在一个透明背景上。

功能

Action Sheet 常常被用来执行一系列操作里的一个单独的操作,强制用户确认某个操作,或者选择取消。

在竖屏模式下(和在分辨率较小的横屏模式下)Action 总是显示成一个按钮列表,并从屏幕下方滑动出来。Action 上应该有取消按钮来关闭视图以保证不执行列表上的任何动作。

当有足够的空间时(例如:在iPad上),Action外观上就变成了弹出框。关闭视图的按钮也不需要了,因为敲击弹出框外的任何地方,视图就自动关闭了。

通知窗

通知窗的作用是告知用户一些关键信息和强制用户做一些决定。

通知窗一定包含一行标题文本和一个(纯信息提示,例如:ok)或两个(需要用户做一些决定,例如:send和cancel)按钮。

你也可以加上一些信息,如果需要,也可以加上两个文本输入域,其中一个可以是密文输入框,适用于输入密码或PINs值这样的敏感信息。

编辑菜单

当元素被选中时(文本,图片,其他),就弹出编辑菜单,它允许用户执行像复制,粘贴,剪切之类的操作。虽然你能控制用户可以选择哪些操作,但编辑菜单的外观是设定好的,不能重新配置,除非你写一个自己的编辑菜单。

弹出框

有一些特定的功能操作在运行之前需要用户多个输入,这时候弹出框就很有用。最好的例子是添加一个条目,在条目创建之前,总要有一些状态需要设置。

在水平方向下,弹出框显示在相关控件的下方,并通过一个向上箭头指向展示它的相关控件。弹出框的背景稍稍降低了一点不透明度,它下面的内容会有些模糊,就像iOS7中的许多其他UI元素一样。

弹出框是一个非常强大的临时界面,它可以包含导航栏,表视图,地图,网页视图等多种对象。弹出框的尺寸会随着所包含的内容而增长,当它包含了太多元素而增长到视图底部时,它就会变成一个可滚动的弹出框。

模态

模态对于需要用户多次输入或需要多条指令的任务来说,是很有用的视图。它们也是出现在一切视图之上,并且,当它打开的时候,系统会锁住在它之下的任何交互元素。

典型的模态通常提供:

  • 描述任务的标题;
  • 不保存、不执行任何操作就关闭模态视图的按钮
  • 存储和提交任何输入信息的按钮;
  • 各种要用户输入的控件;

模态有三种不同的样式:

  1. Full screen: 覆盖整个屏幕.
  2. Page sheet: 在竖屏模式下,模态视图仅覆盖部分内容,只在半透明的黑背景下展示部分父视图内容.在横屏模式下,page sheet模态就像全屏模态一样展示
  3. Form sheet: 在竖屏模式下,模态出现在屏幕中间,模态视图范围之外,父视图内容展示在半透明背景之下。当键盘显示的时候,模态视图会自动调整它的位置。

控件

iOS提供了很大范围内你所能想到的大部分基础控件。下面列出了最重要的控件(通常使用),但对可得到的所有控件列表,你应该访问iOS Developer Library.

按钮

最为常用的控件还是普通的按钮。iOS7之后,默认按钮的设计看起来不再像一个按钮,更像一个文本链接。按钮允许你高度自定义它的样式,从文本,阴影,颜色到预设的图标或者不带文本的图标(用自定义背景做图标)等等一切都可以自定义。

请牢记按钮有几种状态,应该从视觉上一望而知:默认,高亮,选择,无效。

选择器

选择器用来从一个可用值列表里选出一个值。就类似网页上的下拉列表。选择器的扩展是日期选择器,允许用户从日、月、时中滚动选择一个日期和时间。

除了背景颜色以外,选择控制器的样式和尺寸(像键盘一样)都不能改变。大多数情况下,它们都出现在键盘出现的底部,但它也可以在其他位置出现。

分段控件

分段控件包含数个分段按钮(至少两个),分段用于过滤内容或或者作为清晰分类的内容的 tab 栏。

每个分段都可以包含一个文本标签或一幅图(图标),但不能都有。另外,不推荐在一个分段控件里同时出现这两种分段按钮样式(文本和图像)。每个分段的宽度都会基于分段的数量自动的改变。(两个分段:控件总宽的50%,5个分段:控件总宽的20%)。

滑块

滑块控件允许从一个范围的值中选出一个。因为选择值的过程平滑没有任何跳跃,所以推荐用滑块来选择一个估算的、不精确的值。例如:用滑块来控制音量就很棒,用户可以看出和听出大声和非常大声的区别,如果用输入框来设置一个精确的分贝值就有些不切实际了。

它也可以给最小值和最大值设置图标,显示在滑块控件的开头和结尾,在视觉上强化滑块的目的。

步进器

步进器使用在用户需要输入一个范围内的某个精确值的时候(例如:1-10)。步进器包括两个分段按钮,一个是增加当前值,一个是降低当前值。

界面上,步进器控件有很高的自由度:

  • 你可以为步进按钮使用自己的图标;
  • 如果要维持 iOS 原生的样式,你也可以自定义边框、背景和图标的颜色:只需设置 tint color,即可自动改变这些元素的颜色。
  • 如果你想更进一步,你可以为步进器按钮和分隔符使用自定义图片。

切换开关

切换开关允许用户快速的在两个状态之间切换:开和关。它是iOS应用的勾选框。能为它自定义开和关状态的颜色,但是这个按钮的外观和尺寸不能改变。

键盘

 

不同的键盘类型能为特殊的文本输入提供更适合键盘。你也可以定义自己的键盘,默认的键盘不能自定义样式或尺寸。

深入阅读和资源

这份指南仅提供了设计iOS应用的基础信息。一旦你深入挖掘,你会对更多的信息感兴趣。这些文章和资源都会帮助到你。

ANIMATIONS & PROTOTYPING

DEVELOPMENT STARTER GUIDES

BAR BUTTON ICONS

APP ICONS

UI KITS

5 收藏 评论

关于作者:zer0Black

目前工作为移动开发,兴趣广泛,计算机各方面均有强烈兴趣。 个人主页 · 我的文章 · 18 ·  

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部