IOS设备设计完整指南

时间  2019-11-08
标签 ios 设备 设计 完整 指南 栏目 iOS 繁體版
原文   原文链接

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

6606

关于此设计指南

此设计指南描述的是如何按照苹果官方的 iOS 人机界面指南（HIG）为 iOS 设计应用，而不是如何设计自定义控件。这能够帮助你们打破规则。此文档只做指导做用，并不是为了解决复杂的、特定的设计问题。ios

（非官方文档，原做者 Ivo 将按期更新和补充。最后更新于：2014年11月11日。）git

分辨率和显示规格

6406

点（pt）和像素（px）的区别

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

点（points）是一个与分辨率无关的计算单位。根据屏幕的像素密度，一个点能够包含多个像素（例如，在标准Retina显示屏上1 pt里有2 x 2个像素）。web

当你为多种显示设备设计时，你应该以“点”为单位做参考，但设计仍是以像素为单位设计的。这意味着仍然须要以3种不一样的分辨率导出你的素材，无论你以哪一种分辨率设计你的应用。编程

 

注意数组

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

 

6506

iPhone 6 Plus上的降采样（Downsampling）

在全部iOS设备上，渲染的像素和实际像素是相等的。惟一的例外是：iPhone 6 Plus的Retina HD屏幕。由于其屏幕的像素分辨率比天然的 @3x 分辨率更低，渲染的内容会自动调整到大约原尺寸的87%（从2208 x 1242像素适应到1920 x 1080像素)。浏览器

6106

（iPhone 5S、6 和 6 Plus显示的区别。更多信息请点击 这里。）安全

App 图标

6306

自带效果

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

 

圆角

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

6206

 

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

 

注意：

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

 

描边（在某些状况下）

若是应用图标使用了白色背景，那么为了可以识别出图标的边界，将会带上1像素的灰色描边。这只有在iOS“设置”（若是你的应用在这里列了出来）和AppStore上会这样。

 

遗留效果（iOS6及之前的版本）

在iOS旧版本上，会自带这些效果：圆角（稍微不一样于iOS7+图标使用的形状）、投影（在主屏幕上）和光泽（能够禁用）。

栅格系统（Grid system）

6806

苹果开发了一套黄金比例栅格系统，能够在你的图标上很好地肯定元素的尺寸和对齐。不过，即便在原生应用的图标上，苹果的设计师们也没有严格按照这个栅格系统来设计。因此，若是你的图标元素不严格彻底对齐栅格能够表现得很好，那么打破规则约束，自由发挥吧。

字体

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

自定义字体

技术上，任何字体（.ttf）均可以在iOS应用上使用，但要注意受权许可。应该安全地使用那些能够彻底免费商业用途的字体。不过App商业用途许可的字体很是少，即便有，得到其许可也会比较昂贵。须要的话，MyFonts 目前提供了大量的字体，能够受权移动应用使用。

配色

6706

自从iOS7，苹果开始在系统界面和预装应用上使用明亮的配色。而你可使用以上默认的iOS配色，也可使用本身的颜色（若是想脱颖而出的话最好这样作）。

图标运用

iOS应用里，做为动做执行的视觉表现，图标永远是最好的方式，其经常使用于搭配文本或者彻底取代文本（常见的有“新建”、“删除”等）。一般，在导航栏、工具栏或标签栏上，咱们会对图标做相应的处理。

栏按钮图标（Bar Button Icons）

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

7007

 

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

活动视图图标

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

6906

经常使用设计元素

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

状态栏（Status Bar）

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

7107

 

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

导航栏（Navigation Bar）

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

7207

（iPhone 6竖屏时的导航栏。）

 

7407

（iPhone 4S横屏时的导航栏。栏高度减小到12pt，在iPad上也是这样。在横屏时隐藏状态栏是习惯作法。）

 

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

      • – 返回按钮老是在左端左对齐。
      • – 当前视图的标题则在Bar上居中。
      • – 动做按钮则老是右端对齐。并且应该不要超过一个主要动做，以防误点以及连续操做能够更简单些。

工具栏（Toolbar）

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

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

7307

 

工具栏一般用于超过3个主动做的特定视图。不然很难适应并且外观会看起来很混乱。

搜索栏（Search Bar）

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

      • – 只要用户没有输入文本时，搜索框内将显示提示文本（Placeholder Text），而且，能够选择地设置一个书签图标，用来查看最近搜索以及保存的搜索。
      • – 一旦输入搜索项目，提示文本将消失，而一个清晰的清空按钮将出如今右端。

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

7507

（弹出状态的搜索栏，无提示和有提示版。）

 

7607

（最小化状态的搜索栏。）

 

为了查询搜索能更好地控制，能够为搜索栏接上一个范围栏（Scope Bar）。范围栏将使用和搜索栏相同的风格，其在明肯定义了搜索结果类别的状况下会颇有用。例如，一个音乐应用，搜索结果能够再次经过歌手、专辑或歌曲进行筛选。

标签栏（Tab Bar）

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

7707

 

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

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

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

表格视图（Table View）

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

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

 

纯表格

8008

 

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

 

分组表格

7807

 

分组表格视图以分组的方式组织你的”表行”。每一个分组能够有一个头（最好用于描述组的内容）以及一个尾（显示帮助信息等）。分组表格至少要由一个分组组成，并且每一个分组至少要有一行。

 

 

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

默认

7907

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

 

带副标题

8108

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

 

带数值

8208

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

模态、浮动框、警告提示

iOS提供多种临时视图，能够必定程度上显示、编辑和修改数据，以适应给定的情境。每一个临时视图都是具备特别的用途的，并且每一个外观都不同。全部临时视图都有一个共同点：当显示时，会在当前视图的最顶层（即在其余全部的上面），并且下面的内容会蒙上一层半透明黑色背景。

 

活动视图（Activity View）

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

8308

 

动做（Actions）

动做菜单（Action Sheets ），用于从可执行的动做中选择执行一个动做，要求App用户选择一个动做继续，或者取消。

8508

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

当有足够空间时（例如在iPad屏幕上），动做菜单视图则换成一个浮动框（Popovers）。这时并不要求要有一个关闭按钮，由于点击任意外面的空白地方就能够关闭了。

 

警告提醒（Alerts）

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

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

8608

 

同时，你能够添加一条信息文本，若是须要，能够添加两个输入文本框，其中一个能够是遮盖的文本，用于输入私密信息如密码或PIN码。

 

编辑菜单

8408

在一个元素被选定时(文本，图片及其余)，编辑菜单容许用户执行复制、粘贴、剪切等操做。虽然菜单上的选项是能够自定义的，但菜单的外观你是没法设置的，除非你构建一个本身的自定义编辑菜单。

 

浮动框（Popover）

当一个特别动做要求用户在程序进行的同时输入多个信息时，浮动框（Popover）是个绝佳选择。一个很好的例子就是，当选择添加一个项目时，有好几项属性须要在项目被添加前设置好，这时，这些设置能够在浮动框上完成。

在通常状况下，浮动框上方会有一个相关的控件（如一个按钮），当打开的时候浮动框的箭头指向控件。浮动框背景也是轻微减小不透明度的毛玻璃模糊效果，就像iOS7以来的其余大多数UI元素同样。

8708

浮动框是一个强大的临时视图，其能够包含多种元件，例如能够拥有本身的导航栏，表格视图，地图以及网页视图。当浮动框由于包含大量元素而拥有较大尺寸时，能够在浮动框内滚动，从而到达视图底部。

 

模态（Modals）

对于要求用户执行多个指令或输入多个信息的任务来讲，模态视图是一个十分有用的视图。模态出如今全部元素的顶层，并且，当打开时，其区块会与下面的其余交互元素产生相互做用。

8908

输入模态常拥有：

      • – 一个描述任务的标题；
      • – 一个不保存、不执行其余动做的关闭模态视图按钮；
      • – 一个保存或提交输入的信息的按钮；
      • 以及各类对用户在模态视图上输入的信息起做用的元素。

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

      1. 全屏（Full screen）：覆盖整个屏幕。
      2. 页表（Page sheet）：在竖屏时，模态视图只覆盖部分下面的内容，当前视图留下一部分可视区域，并覆盖一层半透明黑色背景。在横屏时，页表模态视图和全屏模态视图同样。
      3. 表单（Form sheet）：在竖屏时，模态视图在屏幕中间，周围区域可见但覆盖一层半透明黑色背景。当键盘显示时，模态视图的位置会自适应地改变。在横屏时，表单模态视图也是和全屏模态视图同样。

 

控件（Controls）

iOS为全部你能想到的基本输入类型提供了范围很广的控件。这些控件你会发现十分重要（由于常常会用到），完整的可用控件的列表，你得去iOS开发者资料库里查看。

 

按钮（Buttons）

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

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

 

选择器（Pickers）

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

8808

（左边：表格视图里的日期选择器，右边：代替键盘的选择器。）

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

 

分段控件（Segment Controls）

分段控件包含一系列分段（至少两个），能够用于筛选内容或为整理的分类内容建立标签。

9309

（没有Icon和有Icon的分段控件）

 

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

 

滑块（Sliders）

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

9109

（无Icon和有Icon的滑块控件。）

 

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

 

步进器（Stepper）

步进器应用在用户须要在一个容许范围里输入一个精确值的状况（例如，1至10）。一个步进器须要包含两个分段按钮，一个用于减小当前值，一个用于增长。

9009

视觉上，步进器能够高度自定义。

      • – 你能够为每一个步进按钮设置自定义的Icon；
      • – 在保留原生iOS外观的时，你能够自定义其边界的颜色，背景以及浅色（Tint Color）的Icon，其会自动设置到每一个元素里。
      • – 若是须要进一步自定义，分段按钮以及分隔符都彻底可使用自定义的背景图。

 

开关（Switch）

9209

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

 

键盘（Keyboards）

对于特殊文本的输入提供了多种键盘类型。能够建立本身的彻底自定义键盘，但默认键盘不能自定义风格或尺寸。

深刻阅读和资源

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

 

通用

 

动效&原型

 

教程

 

栏按钮图标

 

App 图标

 

UI Kits

 

文章来源：UI中国

原做者： Ivo Mynttine

转载请注明：学ui网 » IOS设备设计完整指南

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程