10、ios手机界面1设计指南

1、关于此设计指南此设计指南描述的是如何按照苹果的 iOS 人机界面指南（HIG）为 iOS设计应用，而不是如何设计自定义控件。这可以帮助大家打破规则。此文档只作指导作用，并非为了解决复杂的、特定的设计问题。（非文档，原作者 Ivo 将定期更新和补充。最后更新于：2014 年 11 月 11 日。）分辨率和显示规格点（pt）和像素（px）的区别像素（pixels）是数码显示上最小的计算。在同一个屏幕尺寸，更高的 PPI（每英寸的像素数目），就能显示的像素，同时渲染的内容也会更清晰。点（pos）是一个与分辨率无关的计算。根据屏幕的像素密度，一个点可以包含多个像素（例如，在标准 Retina 显示屏上

2、 1 pt 里有 2 x 2 个像素）。当你为多种显示设备设计时，你应该以“点”为作参考，但设计还是以像素为设计的。这意味着仍然需要以 种不同的分辨率导出你的素材，不管你以哪种分辨率设计你的应用。注意如没有另外指定（如一个数值加上“V”），此指南提到具体尺寸均以点（VZ）为。如果你需要转换成相应的像素值，很简单，8KZOTG 屏相应乘 或 8KZOTG .* 屏则乘 。6 Plus 上的降采样（Downsling）在所有 iOS 设备上，渲染的像素和实际像素是相等的。唯一的例外是：6 Plus 的 Retina HD 屏幕。因为其屏幕的像素分辨率比自然的 3x 分辨率更低，渲染的内容会自动调整

3、到大约原尺寸的 87%（从 2208 x 1242 像素适应到1920 x 1080 像素)。（5S、6和6Plus 显示的区别。信息这里。）App图标自带效果应用图标（Appicons）素材通常会以多种尺寸的无添加效果的、正方形的 PNG 文件添加到应用包中。当在一个设备上渲染时，iOS 会自动添加多种效果在 App 的图标上。圆角过去使用简单半径值的圆角已经不再使用了。从 iOS 7 开始，App 的图标已经开始使用一种叫“超椭圆”（Superellipse）的形状。因为苹果公司并未发布一个的形状模板，所以你要用这个非模板 来准确地确定图标将会被折叠多少。圆角不要包含在最终的导出素材中。但

4、你在设计过程中可能会需要用到圆角，因为添加描边或阴影等效果时，要对齐图标的边角来设计。注意：如果以 Supererllipse 形状来遮罩你的图标素材，希望运用的一些效果可以对齐到边角，那么，确保不要在遮罩区域外使用任何透明的部分。所有应用图标都不支持透明，将会渲染纯黑色。如果你的素材不是 100%不透明的，那么用户将会在圆形边缘上看到黑色噪点。所以设计时画布的背景设置成和 App 图标相同的背景。描边（在某些情况下）如果应用图标使用了白色背景，那么为了能够识别出图标的边界，将会带上 1像素的灰色描边。这只有在 iOS“设置”（如果你的应用在这里列了出来）和 AppStore 上会这样。遗留效

5、果（iOS6 及以前的版本）在 iOS 旧版本上，会自带这些效果：圆角（稍微不同于 iOS7+图标使用的形状）、投影（在主屏幕上）和光泽（可以禁用）。栅格系统（Grid system）苹果开发了一套黄金比例栅格系统，可以在你的图标上很好地确定元素的尺寸和对齐。不过，即使在原生应用的图标上，苹果的设计师们也没有严格按照这个栅格系统来设计。所以，如果你的图标元素不严格完全对齐栅格可以表现得很好，那么打破规则约束，发挥吧。字体所有 O59 版本的默认系统字体都是 .KRKZOIG 4KK。O59 开始，苹果对此字体作了一些轻微的修改，但在设计过程中使用原来的 .KRKZOIG 4KK 字体完全没问题

6、。除了默认的字体，也有许多代替字体可以使用。你可以在 O59 完整预装字体里查找。自定义字体技术上，任何字体（ ZZL）都可以在 O59 应用上使用，但要注意。应该安全地使用那些可以完全免费商业用途的字体。不过 VV 商业用途的字体非常少，即使有，获得其也会比较昂贵。需要的话，3_,UTZY 目前提供了大量的字体，可以移动应用使用。配色自从 iOS7，苹果开始在系统界面和预装应用上使用明亮的配色。而你可以使用以上默认的 iOS 配色，也可以使用自己的颜色（如果想脱颖而出的话最好这样做）。图标运用iOS 应用里，作为动作执行的视觉表现，图标是最好的方式，其常用于搭配文本或者完全取代文本（常见的有

7、“新建”、“删除”等）。通常，在导航栏、或栏上，会对图标作相应的处理。栏按钮图标（Bar Button Icons）Bar 上的图标应有两种不同的状态：以 1 或 1.5pt 线宽的轮廓线描绘的默认状态，以实体填充的活动状态。不要在按钮图标上添加任何如投影或阴影这样的效果，因为这在旧 iOS 版本（iOS7 Redesign 之前）上显得十分多余。此外，按钮图标应该在半透明背景上以纯色绘制图标的形状将用于遮罩，而图标颜色将会以编程方式赋予。活动视图图标活动视图（如众所周知的弹出框 Share Popover）上的图标通常是线性图标，但 iOS8 开始，苹果又回归到了在纯白背景上使用实体填充图标

8、了。常用设计元素iOS 提供了大量的可以直接使用的视图和控件，帮助开发者快速创建界面。有些元素可以一定程度上地自定义，但有些可能就，而且也是不应该自定义的。当设计一个 iOS 应用时，你要了解这些工具库，学会什么时候合适就要使用他们。不过，有些时候，创建一个自定义控件也许更好，因为你需要一个更个性的外观，或者想要改变一个已存在控件的功能（领域）。总之一切皆可能，有时候打破规则更有意义，但一定要三思而后行。状态栏（Sus Bar）状态栏包含基本系统信息，例如当前事件、时间、电池状态及其他信息。视觉上状态栏是和导航栏相连的，都使用一样的背景填充。为配合 App 的风格和保证可读性，状态栏内容有两种

9、不同的风格：暗色（黑）和亮色（白）。可以隐藏状态栏，但还是那句，请三思。举个例子，当应用网络内容时，用户可能想知道，是否连上了一个 WIFI 网络；或者，当应用要请求蓝牙连接到第硬件时，是否打开了蓝牙。如果真的要隐藏，一个合理的隐藏状态栏的理由是，当你希望从一个单一元素里移除一切干扰时，比如当展示需要全屏的内容时，如幻灯。导航栏（Navigation Bar）导航栏包含了一些控件，用来在应用里不同的视图中导航，以及管理当前视图中的内容。导航栏屏幕的顶部，状态栏的正下方。默认的，导航栏背景会进行轻微半透明处理，以及对下面的内容进行毛玻璃办的模糊处理。背景可以填充纯色、渐变颜色，或者是自定义位图。

10、（6 竖屏时的导航栏。）（4S 横屏时的导航栏。栏高度减少到 12pt，在 iPad 上也是这样。在横屏时隐藏状态栏是做法。）导航栏元素总是按照特定的对齐方式。-返回按钮总是在左端左对齐。1.-当前视图的标题则在 Bar 上居中。2.-动作按钮则总是右端对齐。而且应该不要超过一个主要动3.作，以防误点以及连续操作可以更简单些。（Toolbar）包含一些管理、控制当期那视图内容的动作。上，将在屏幕底部边缘，而在 iPad 上，其可以在屏幕顶部出现。和导航栏一样，其背景填充也可以自定义，默认是半透明效果以及模糊处理遮住的内容。通常用于超过 3 个主动作的特定视图。否则很难适应而且外观会看起来很。搜

11、索栏（Search Bar）搜索栏默认有两种风格状态：凸显（Prominent）和最小化（Minimal）。两种的功能都相同。- 只要用户没有输入文本时，搜索框内将显示提示文本1.（Placeholder Text），并且，可以选择地设置一个书签图标，用来查看最近搜索以及保存的搜索。- 一旦输入搜索项目，提示文本将，而一个清晰的清空2.按钮将出现在右端。搜索栏可以设置一段提醒一个简短的句子介绍搜索功能。例如，“输入一个城市、或机场。”（弹出状态的搜索栏，无提示和有提示版。）（最小化状态的搜索栏。）为了查询搜索能更好地控制，可以为搜索栏接上一个范围栏（Scope Bar）。范围栏将使用和搜索栏相

12、同的风格，其在明确定义了搜索结果类别的情况下会很有用。例如，一个音乐应用，搜索结果可以再次通过歌手、专辑或歌曲进行筛选。栏（Tab Bar）栏常用于快速切换应用上的独立视图，且一般也只能这样用。通常在屏幕底部。默认情况下使用和导航栏一样的轻微半透明，以及使用和系样的模糊处理遮住的内容。栏仅可以拥有固定的最大数。一旦数目超过最大数目，则最后一个选项卡将会以“”代替，其余以列表形式隐藏于此，另外，一般会有选项可以对显示的选项卡重新进行排序。上最大选项卡数目是 个，而 OVGJ 上则可以显示多达 个而无需“更多”。通知用户在一个新视图上有新消息，通常会在栏按钮上显示一个数字徽标。如果一个视图暂时隐藏

13、，相关的选项卡按钮不会完全隐藏，而是会慢慢淡化以传达一个不可用的状态。表格视图（:GHRK OK）表格视图用于呈现大多数列表风格的信息，可以一列或者多列，也可以选择几行来划分信息或分组。根据你选择的数据类型，可能会用到这两种基本的表格视图类型。纯表格纯表格由一定的行数组成，在顶部可以拥有一个表头，以及底部可以含有一个表尾。可以在屏幕右端带一个垂直导航，通过表格的形式进行导航，这在呈现大量数据时十分有用。在右端还可以通过一些方式进行排序（例如，按字母自上到下排序）。分组表格分组表格视图以分组的方式组织你的”表行”。每个分组可以有一个头（最好用于描述组的内容）以及一个尾（显示帮助信息等）。分组表格

14、至少要由一个分组组成，而且每个分组至少要有一行。对于这两种表格视图类型，都拥有一些风格，能以一定的方式呈现数据，让用户可以简单地检索、浏览甚至修改它：默认默认的表格行风格是一个图标加一个标题，而图标在左端。带副标题带副标题的表格风格在标题下面允许有一个简短的副标题文本。常用于进一步解释或简短描述。带数值带数值表格风格可以带一个与行标题相关的特别值。和默认风格类似，每行也可以有一个图标和标题，都是左对齐。紧随其后的是右对齐的数值文本，通常颜色会比标题文本的颜色浅些。模态、浮动框、警告提示iOS 提供多种临时视图，可以一定程度上显示、编辑和修改数据，以适应给定的情境。每个临时视图都是具有特别的用途

15、的，而且每个外观都不一样。所有临时视图都有一个共同点：当显示时，会在当前视图的最顶层（即在其他所有的上面），而且下面的内容会蒙上一层半透明黑色背景。活动视图（IZOOZ_ IUTJK.U创建原型（.U:U9.6XUZUZ_VK /T IUJK ;YOTM 9ZUX_HUGXJ）H_ 3KTM :U10.(ORJOTM O59 VVY ,XUS 9IXGZIN1.H_ 3OQK 8TJRK2.)UIUG )UTZXURY3.5VKT 9UXIK )USSKXR4.栏按钮图标 8KZOTG /IUTY LUX O591.UT )XKGZOK 3GXQKZ 2. O59 /IUTY3.UT )XKGZOK 3GXQKZ 4. O59 /IUTY 9ZXKGSROTK5.UT )XKGZOK 3GX