IOS设备设计完整指南

作为初学者,常常不知如何下手设计,IOS应用UI设计中碰到的种种基础小问题,在此都将一一得到解答。这份完整的设计指南将带你快速上手,为IOS设计出优雅的应用吧。

IOS设备设计完整指南_第1张图片

关于此设计指南

此设计指南描述的是如何按照苹果官方的 iOS 人机界面指南(HIG)为 iOS 设计应用,而不是如何设计自定义控件。这可以帮助大家打破规则。此文档只作指导作用,并非为了解决复杂的、特定的设计问题。

(非官方文档,原作者 Ivo 将定期更新和补充。最后更新于:2014年11月11日。)

分辨率和显示规格

IOS设备设计完整指南_第2张图片

点(pt)和像素(px)的区别

像素(pixels)是数码显示上最小的计算单位。在同一个屏幕尺寸,更高的PPI(每英寸的像素数目),就能显示更多的像素,同时渲染的内容也会更清晰。

点(points)是一个与分辨率无关的计算单位。根据屏幕的像素密度,一个点可以包含多个像素(例如,在标准Retina显示屏上1 pt里有2 x 2个像素)。

当你为多种显示设备设计时,你应该以“点”为单位作参考,但设计还是以像素为单位设计的。这意味着仍然需要以3种不同的分辨率导出你的素材,不管你以哪种分辨率设计你的应用。

 

注意

如没有另外指定(如一个数值加上“px”),此指南提到具体尺寸均以点(pt)为单位。如果你需要转换成相应的像素值,很简单,Retina屏相应乘2或Retina HD屏则乘3。

 

IOS设备设计完整指南_第3张图片

iPhone 6 Plus上的降采样(Downsampling)

在所有iOS设备上,渲染的像素和实际像素是相等的。唯一的例外是:iPhone 6 Plus的Retina HD屏幕。因为其屏幕的像素分辨率比自然的 @3x 分辨率更低,渲染的内容会自动调整到大约原尺寸的87%(从2208 x 1242像素适应到1920 x 1080像素)。

IOS设备设计完整指南_第4张图片

(iPhone 5S、6 和 6 Plus显示的区别。更多信息请点击 这里。)

App 图标

IOS设备设计完整指南_第5张图片

自带效果

应用图标(App icons)素材通常会以多种尺寸的无添加效果的、正方形的PNG文件添加到应用包中。当在一个设备上渲染时,iOS会自动添加多种效果在App的图标上。

 

圆角

过去使用简单半径值的圆角已经不再使用了。从iOS 7开始,App的图标已经开始使用一种叫“超椭圆”(Superellipse)的形状。因为苹果公司并未发布一个官方的形状模板,所以你要用这个非官方模板 来准确地确定图标将会被折叠多少。

IOS设备设计完整指南_第6张图片

 

圆角不要包含在最终的导出素材中。但你在设计过程中可能会需要用到圆角,因为添加描边或阴影等效果时,要对齐图标的边角来设计。

 

注意:

如果以Supererllipse形状来遮罩你的图标素材,希望运用的一些效果可以对齐到边角,那么,确保不要在遮罩区域外使用任何透明的部分。所有应用图标都不支持透明,将会渲染纯黑色。如果你的素材不是100%不透明的,那么用户将会在圆形边缘上看到黑色噪点。所以推荐设计时画布的背景设置成和App图标相同的背景。

 

描边(在某些情况下)

如果应用图标使用了白色背景,那么为了能够识别出图标的边界,将会带上1像素的灰色描边。这只有在iOS“设置”(如果你的应用在这里列了出来)和AppStore上会这样。

 

遗留效果(iOS6及以前的版本)

在iOS旧版本上,会自带这些效果:圆角(稍微不同于iOS7+图标使用的形状)、投影(在主屏幕上)和光泽(可以禁用)。

栅格系统(Grid system)

IOS设备设计完整指南_第7张图片

苹果开发了一套黄金比例栅格系统,可以在你的图标上很好地确定元素的尺寸和对齐。不过,即使在原生应用的图标上,苹果的设计师们也没有严格按照这个栅格系统来设计。所以,如果你的图标元素不严格完全对齐栅格可以表现得很好,那么打破规则约束,自由发挥吧。

字体

所有iOS版本的默认系统字体都是Helvetica Neue。iOS7开始,苹果对此字体作了一些轻微的修改,但在设计过程中使用原来的Helvetica Neue字体完全没问题。除了默认的字体,也有许多代替字体可以使用。你可以在 iOS完整预装字体清单里查找。

自定义字体

技术上,任何字体(.ttf)都可以在iOS应用上使用,但要注意授权许可。应该安全地使用那些可以完全免费商业用途的字体。不过App商业用途许可的字体非常少,即使有,获得其许可也会比较昂贵。需要的话,MyFonts 目前提供了大量的字体,可以授权移动应用使用。

配色

IOS设备设计完整指南_第8张图片

自从iOS7,苹果开始在系统界面和预装应用上使用明亮的配色。而你可以使用以上默认的iOS配色,也可以使用自己的颜色(如果想脱颖而出的话最好这样做)。

图标运用

iOS应用里,作为动作执行的视觉表现,图标永远是最好的方式,其常用于搭配文本或者完全取代文本(常见的有“新建”、“删除”等)。通常,在导航栏、工具栏或标签栏上,我们会对图标作相应的处理。

栏按钮图标(Bar Button Icons)

Bar上的图标应有两种不同的状态:以1或1.5pt线宽的轮廓线描绘的默认状态,以实体填充的活动状态。

IOS设备设计完整指南_第9张图片

 

不要在按钮图标上添加任何如投影或阴影这样的效果,因为这在旧iOS版本(iOS7 Redesign之前)上显得十分多余。此外,按钮图标应该在半透明背景上以纯色绘制——图标的形状将用于遮罩,而图标颜色将会以编程方式赋予。

活动视图图标

活动视图(如众所周知的分享弹出框 Share Popover)上的图标通常是线性图标,但iOS8开始,苹果又回归到了在纯白背景上使用实体填充图标了。

6906

常用设计元素

iOS提供了大量的可以直接使用的视图和控件,帮助开发者快速创建界面。有些元素可以一定程度上地自定义,但有些可能就不行,而且也是不应该自定义的。当设计一个iOS应用时,你要了解这些工具库,学会什么时候合适就要使用他们。不过,有些时候,创建一个自定义控件也许更好,因为你需要一个更个性的外观,或者想要改变一个已存在控件的功能(危险领域)。总之一切皆可能,有时候打破规则更有意义,但一定要三思而后行。

状态栏(Status Bar)

状态栏包含基本系统信息,例如当前事件、时间、电池状态及其他更多信息。视觉上状态栏是和导航栏相连的,都使用一样的背景填充。为配合App的风格和保证可读性,状态栏内容有两种不同的风格:暗色(黑)和亮色(白)。

IOS设备设计完整指南_第10张图片

 

可以隐藏状态栏,但还是那句,请三思。举个例子,当应用下载网络内容时,用户可能想知道,是否连上了一个WIFI网络;或者,当应用要请求蓝牙连接到第三方硬件时,是否打开了蓝牙。如果真的要隐藏,一个合理的隐藏状态栏的理由是,当你希望从一个单一元素里移除一切干扰时,比如当展示需要全屏的内容时,如图片幻灯。

导航栏(Navigation Bar)

导航栏包含了一些控件,用来在应用里不同的视图中导航,以及管理当前视图中的内容。导航栏总在屏幕的顶部,状态栏的正下方。默认的,导航栏背景会进行轻微半透明处理,以及对下面的内容进行毛玻璃办的模糊处理。背景可以填充纯色、渐变颜色,或者是自定义位图。

IOS设备设计完整指南_第11张图片

(iPhone 6竖屏时的导航栏。)

7407

(iPhone 4S横屏时的导航栏。栏高度减少到12pt,在iPad上也是这样。在横屏时隐藏状态栏是习惯做法。)

 

导航栏元素总是按照特定的对齐方式。

      • – 返回按钮总是在左端左对齐。

      • – 当前视图的标题则在Bar上居中。

      • – 动作按钮则总是右端对齐。而且应该不要超过一个主要动作,以防误点以及连续操作可以更简单些。

工具栏(Toolbar)

工具栏包含一些管理、控制当期那视图内容的动作。iPhone上,工具栏将永远在屏幕底部边缘,而在iPad上,其可以在屏幕顶部出现。

和导航栏一样,其背景填充也可以自定义,默认是半透明效果以及模糊处理遮住的内容。

IOS设备设计完整指南_第12张图片

 

工具栏通常用于超过3个主动作的特定视图。否则很难适应而且外观会看起来很混乱。

搜索栏(Search Bar)

搜索栏默认有两种风格状态:凸显(Prominent)和最小化(Minimal)。两种的功能都相同。

      • – 只要用户没有输入文本时,搜索框内将显示提示文本(Placeholder Text),并且,可以选择地设置一个书签图标,用来查看最近搜索以及保存的搜索。

      • – 一旦输入搜索项目,提示文本将消失,而一个清晰的清空按钮将出现在右端。

搜索栏可以设置一段提醒——一个简短的句子介绍搜索功能。例如,“输入一个城市、邮编或机场。”

IOS设备设计完整指南_第13张图片

(弹出状态的搜索栏,无提示和有提示版。)

 

IOS设备设计完整指南_第14张图片

(最小化状态的搜索栏。)

 

为了查询搜索能更好地控制,可以为搜索栏接上一个范围栏(Scope Bar)。范围栏将使用和搜索栏相同的风格,其在明确定义了搜索结果类别的情况下会很有用。例如,一个音乐应用,搜索结果可以再次通过歌手、专辑或歌曲进行筛选。

标签栏(Tab Bar)

标签栏常用于快速切换应用上的独立视图,且一般也只能这样用。通常在屏幕底部。默认情况下使用和导航栏一样的轻微半透明,以及使用和系统一样的模糊处理遮住的内容。

7707

 

标签栏仅可以拥有固定的最大标签数。一旦数目超过最大数目,则最后一个选项卡将会以“更多标签”代替,其余标签以列表形式隐藏于此,另外,一般会有选项可以对显示的选项卡重新进行排序。

iPhone上最大选项卡数目是5个,而ipad上则可以显示多达7个而无需“更多”标签。

通知用户在一个新视图上有新消息,通常会在标签栏按钮上显示一个数字徽标。如果一个视图暂时隐藏,相关的选项卡按钮不会完全隐藏,而是会慢慢淡化以传达一个不可用的状态。

表格视图(Table View)

表格视图用于呈现大多数列表风格的信息,可以一列或者多列,也可以选择几行来划分信息或分组。

根据你选择的数据类型,可能会用到这两种基本的表格视图类型。

 

纯表格

IOS设备设计完整指南_第15张图片

 

纯表格由一定的行数组成,在顶部可以拥有一个表头,以及底部可以含有一个表尾。可以在屏幕右端带一个垂直导航,通过表格的形式进行导航,这在呈现大量数据时十分有用。在右端还可以通过一些方式进行排序(例如,按字母自上到下排序)。

 

分组表格

IOS设备设计完整指南_第16张图片

 

分组表格视图以分组的方式组织你的”表行”。每个分组可以有一个头(最好用于描述组的内容)以及一个尾(显示帮助信息等)。分组表格至少要由一个分组组成,而且每个分组至少要有一行。

 

 

对于这两种表格视图类型,都拥有一些风格,能以一定的方式呈现数据,让用户可以简单地检索、浏览甚至修改它:

默认

IOS设备设计完整指南_第17张图片

默认的表格行风格是一个图标加一个标题,而图标在左端。

 

带副标题

IOS设备设计完整指南_第18张图片

带副标题的表格风格在标题下面允许有一个简短的副标题文本。常用于进一步解释或简短描述。

 

带数值

IOS设备设计完整指南_第19张图片

带数值表格风格可以带一个与行标题相关的特别值。和默认风格类似,每行也可以有一个图标和标题,都是左对齐。紧随其后的是右对齐的数值文本,通常颜色会比标题文本的颜色浅些。

模态、浮动框、警告提示

iOS提供多种临时视图,可以一定程度上显示、编辑和修改数据,以适应给定的情境。每个临时视图都是具有特别的用途的,而且每个外观都不一样。所有临时视图都有一个共同点:当显示时,会在当前视图的最顶层(即在其他所有的上面),而且下面的内容会蒙上一层半透明黑色背景。

 

活动视图(Activity View)

活动视图是用于执行特定任务的视图。这些任务可以是默认系统任务,如通过选项分享内容等,或者可以完全自定义这些动作。当设计自定义任务按钮图标时,你应该按照和栏按钮图标激活状态下同样的规范——实体填充,没有其余的效果,放在一个半透明背景上。

IOS设备设计完整指南_第20张图片

 

动作(Actions)

动作菜单(Action Sheets ),用于从可执行的动作中选择执行一个动作,要求App用户选择一个动作继续,或者取消。

IOS设备设计完整指南_第21张图片

在竖屏时(以及在一些小屏幕横屏上也是),动作菜单总是以一列按钮滑动而出显示在屏幕底部。在这种情况下,一个动作菜单应该有一个取消按钮来关闭此视图,而不是只能执行前面的动作。

当有足够空间时(例如在iPad屏幕上),动作菜单视图则换成一个浮动框(Popovers)。这时并不要求要有一个关闭按钮,因为点击任意外面的空白地方就可以关闭了。

 

警告提醒(Alerts)

警告提醒用于通知用户关键信息,以及可以强制用户做出一些动作选择。

警告视图总包含一个标题文本,可以不限于一行(对于纯信息警告如“OK”),以及不限一个或两个按钮(请求式的决定,如“发送”和“取消”)。

IOS设备设计完整指南_第22张图片

 

同时,你可以添加一条信息文本,如果需要,可以添加两个输入文本框,其中一个可以是遮盖的文本,用于输入私密信息如密码或PIN码。

 

编辑菜单

8408

在一个元素被选定时(文本,图片及其他),编辑菜单允许用户执行复制、粘贴、剪切等操作。虽然菜单上的选项是可以自定义的,但菜单的外观你是无法设置的,除非你构建一个自己的自定义编辑菜单。

 

浮动框(Popover)

当一个特别动作要求用户在程序进行的同时输入多个信息时,浮动框(Popover)是个绝佳选择。一个很好的例子就是,当选择添加一个项目时,有好几项属性需要在项目被添加前设置好,这时,这些设置可以在浮动框上完成。

在一般情况下,浮动框上方会有一个相关的控件(如一个按钮),当打开的时候浮动框的箭头指向控件。浮动框背景也是轻微减少不透明度的毛玻璃模糊效果,就像iOS7以来的其他大多数UI元素一样。

IOS设备设计完整指南_第23张图片

浮动框是一个强大的临时视图,其可以包含多种元件,例如可以拥有自己的导航栏,表格视图,地图以及网页视图。当浮动框因为包含大量元素而拥有较大尺寸时,可以在浮动框内滚动,从而到达视图底部。

 

模态(Modals)

对于要求用户执行多个指令或输入多个信息的任务来说,模态视图是一个十分有用的视图。模态出现在所有元素的顶层,而且,当打开时,其区块会与下面的其他交互元素产生相互作用。

IOS设备设计完整指南_第24张图片

输入模态常拥有:

      • – 一个描述任务的标题;

      • – 一个不保存、不执行其他动作的关闭模态视图按钮;

      • – 一个保存或提交输入的信息的按钮;

      • 以及各种对用户在模态视图上输入的信息起作用的元素。

这是三种可用的模态视图风格:

      1. 全屏(Full screen):覆盖整个屏幕。

      2. 页表(Page sheet):在竖屏时,模态视图只覆盖部分下面的内容,当前视图留下一部分可视区域,并覆盖一层半透明黑色背景。在横屏时,页表模态视图和全屏模态视图一样。

      3. 表单(Form sheet):在竖屏时,模态视图在屏幕中间,周围区域可见但覆盖一层半透明黑色背景。当键盘显示时,模态视图的位置会自适应地改变。在横屏时,表单模态视图也是和全屏模态视图一样。

 

控件(Controls)

iOS为所有你能想到的基本输入类型提供了范围很广的控件。这些控件你会发现十分重要(因为经常会用到),完整的可用控件的列表,你得去iOS开发者资料库里查看。

 

按钮(Buttons)

或许所有中最常用的控件就是这经典好用的按钮了。从iOS7开始,默认按钮设计就不再看起来像个按钮了,而更像是一个纯文本链接。不过按钮控件还是具有高度的自定义性的,允许你自定义文本风格、投影以及颜色,甚至是一个按钮都是可以定制的。假如没有文本标签的话,全自定义背景都行。

记住,一个按钮有多个状态,每个状态需传达相关视觉语言:默认(Default),高亮(Highlighted),选定(Selected),不可用(Disabled.)。

 

选择器(Pickers)

选择器用于从可用值列表中选定一个值。其等于网站上常用的下拉选框(选择器也用于触摸模式下的Safari浏览器)。选择器的拓展版本是“日期选择器”(Datepicker),可以让用户滚动一个日期时间列表来选择日、月份和时间。

IOS设备设计完整指南_第25张图片

(左边:表格视图里的日期选择器,右边:代替键盘的选择器。)

除了背景颜色外,选择器控件的视觉风格、尺寸都不能调整。通常,选择器在屏幕的底部。当键盘同时出现时,其可能出现在其他位置。

 

分段控件(Segment Controls)

分段控件包含一系列分段(至少两个),可以用于筛选内容或为整理的分类内容创建标签。

IOS设备设计完整指南_第26张图片

(没有Icon和有Icon的分段控件)

 

每个分段可以包含一个文本或一个图标,但不能同时有文本和图标。另外,也不推荐在一个分段控件里混用分段类型(文本和图标混合出现)。一个分段的宽度会基于分段的数量自动改变(即两个分段:各占总控件宽度50%,5个分段则各占20%)。

 

滑块(Sliders)

滑块控件可以让用户从一个允许范围内滑动滑块选择一个特定的值。因为滑动十分流畅也无需其余步骤就可以选择一个值,所以推荐滑块用于选择一个估计值,而不是一个需要精确的数值。比如,滑块控件可以很好地设置音量,因为用户可以从音量上听出区别,同时可以看到滑块上响和不响的区别,但如果是输入一个数值来设置分贝值就十分不现实了。

IOS设备设计完整指南_第27张图片

(无Icon和有Icon的滑块控件。)

 

可以设置最小值和最大值的Icon,在显示控件始端和末端显示,让用户直观地知道滑块的用途。

 

步进器(Stepper)

步进器应用在用户需要在一个允许范围里输入一个精确值的情况(例如,1至10)。一个步进器需要包含两个分段按钮,一个用于减少当前值,一个用于增加。

9009

视觉上,步进器可以高度自定义。

      • – 你可以为每个步进按钮设置自定义的Icon;

      • – 在保留原生iOS外观的时,你可以自定义其边界的颜色,背景以及浅色(Tint Color)的Icon,其会自动设置到每个元素里。

      • – 如果需要进一步自定义,分段按钮以及分隔符都完全可以使用自定义的背景图。

 

开关(Switch)

9209

开关允许用户快速切换两种可用状态:打开和关闭。这也就是iOS应用上的“复选框”,只不过以开关的形式表现。开关控件可以自定义打开和关闭状态的颜色,但开关切换按钮的样式和尺寸不能设置修改。

 

键盘(Keyboards)

对于特殊文本的输入提供了多种键盘类型。可以创建自己的完全自定义键盘,但默认键盘不能自定义风格或尺寸。

深入阅读和资源

本文章只是提供一些让你入门 iOS 7 的基本信息。一旦深入,你可能会对更多的细节感兴趣。以下这些文章和资源会帮到你:

 

通用

      • iOS人机交互指南(iOS Human Interface Guideline)

      • by Apple


      • UIKit UI 目录(UIKit User Interface Catalog)

      • by Apple


      • 个人iOS App设计流程(My app design workflow)

      • by Marc Edwards


      • 学习移动App设计(Learn Mobile App Design)

      • on Treehouse

 

动效&原型

      • Framer.js

      • $79.99, trial available


      • Marvel

      • Free Prototyping for Everyone


      • Pixate

      • Prototype iOS animations


      • Origami

      • Quartz composer framework by Facebook


      • 如何基于故事板使用XcondeHow创建原型(How To Prototype In Xcode Using Storyboard)

      • by Meng To

 

教程

      • Building iOS Apps From Scratch

      • by Mike Rundle


      • Cocoa Controls

      • Open Source, Commercial

 

栏按钮图标

      • 3000 Retina Icons for iOS

      • on Creative Market – $99


      • 2080 iOS 8 Icons

      • on Creative Market – $69


      • 1640 iOS Icons – Streamline

      • on Creative Market – $69


      • 500 Line Vector Icons

      • on Creative Market – $11

 

App 图标

      • App Icon 模板

      • Photoshop


      • iOS App Icon 模板

      • Sketch

 

UI Kits

    • iPhone GUI for Sketch (iOS 7)

    • Sketch


    • iOS 7 GUI PSD (iPhone)

    • Photoshop


    • iPad GUI for Sketch (iOS 7)

    • Sketch


    • iPad GUI PSD

    • Photoshop


    • iOS 8 UI Kit + for Sketch

    • Sketch


    • Blueprint

    • Sketch


你可能感兴趣的:(IOS设备设计完整指南)