iPhone iOS平台视觉规范 说明书

平台视觉规范说明书

iPhone iOS

目 录

1.创建优秀的用户界面............................................................................................................. 7 2.视图VIEW ............................................................................................................................... 5

2.1 2.2 2.3 2.4

状态栏STATUS BAR .................................................................................................... 5 导航栏NAVIGATION BAR .......................................................................................... 6

页签栏TAB BAR .......................................................................................................... 9

工具栏TOOL BAR ..................................................................................................... 7

2.6 分类表格视图TABLE VIEWS .......................................................... 错误！未定义书签。

3.控件CONTROL ..................................................................................................................... 14

3.1 3.2 3.3 3.4 3.5 3.6

控制类CONTROLS .................................................................................................... 14

按钮类BUTTONS ........................................................................... 错误！未定义书签。

选择器类PICKERS ..................................................................................................... 16 搜索类SEARCH ......................................................................................................... 17

提示类ALERTS ............................................................................... 错误！未定义书签。

文本域类TEXT FIELDS .............................................................................................. 20

4.界面INTERFACE ................................................................................................................... 20

4.1 4.2 4.3

启动图像SPLASH ...................................................................................................... 20

登录页面LOGIN PAGE .............................................................................................. 22 说明页面TEXT PAGE ................................................................................................. 24

5.图形GRAPHICS .................................................................................................................... 26

5.1 5.2 5.3

应用程序图标APPLICATION ICON ........................................................................... 26 系统图标STANDARD ICON ...................................................................................... 27 自定义图标CUSTOM ICON ....................................................................................... 29

6.截图SCREENSHOTS ............................................................................................................. 32 7.命名NAMING RULES .......................................................................................................... 33 8.平台特点 ................................................................................................................................ 33

1.引言 Introduction

iPhone OS平台应用的视觉设计应遵循相应的平台特性与设计规范，保持不同应用产品在同一平台的整体性与一致性。此文档作为iPhone OS平台应用开发的视觉基础规范，整体全面的介绍了常用系统控件，规范了演变后的自绘视图尺寸及标准，为视觉设计提供了很好的参考和借鉴。设计者应参阅此文档进行视觉设计，并严格遵守硬性部分的规范标准，最终达到应用产品视觉统一，视觉资源易于维护，设计质量有效保证的目的。

人机界面设计原则

一个优秀用户界面应该遵循一些人机界面设计原则，这些原则来源于人——用户——思考和工作的方式，而不是设备的性能。如果一个用户界面没有吸引力，令人费解，或不合逻辑，那么即使是一个伟大的应用程序也会因此让用户觉得烦琐。但是，一个美观的，无需用户思考且引人入胜的用户界面不仅可以改善应用程序功能，还能激发用户对应用程序产生正面情感和依赖感

2.视图 View

iPhone的用户界面基本由各种视图组合而成，不同种类和不同层级的视图构成用户界面的视觉结构，用户也是通过视图来切换不同信息并完成不同任务。

描述：用于显示用户系统重要信息，如信号强度、运营商信息、网络状况、时间、电量等图示内容。

区域参数：X:0像素 Y:0像素 W:320像素 H:20像素

在iPhone上，状态栏可以有不同的颜色；在iPad上，状态栏始终是黑色的。

如果你的应用程序不是游戏或全屏的媒体浏览程序，在隐藏状态栏之前请三思。

虽然这些程序可能长期隐藏状态栏，但是你应该理解这是一种非主流的设计决定。永久隐藏状态栏意味着用户需要退出你的程序来看清楚，比如说，是否需要充电。

如果用户在欢乐的看图，看电影，或者看其他什么全屏的程序，可以隐藏掉不重要的状态栏等界面元素。但要注意，保证用户只需轻轻一点，就能把状态栏找回来。不

要使用什么特殊的手势，用户不乐意记住这个手势。

不要创建定制的状态栏。用户依赖于系统提供的状态栏的一致性。虽然你可以在你的程

序中隐藏状态栏，但是创建一个全新的状态栏替换掉原来的还是不合适的。

在iPhone上，可以指定状态栏的颜色。你可以选择灰色（默认颜色），不透明的黑

色或半透明的黑色（也就是α值为0.5的黑色）。

(2.2导航栏 Navigation Bar)

描述：用于显示当前视图的名称，并提供相关导航的控件用于层级间的视图切换，甚至作用于视图内容的控件。

区域参数：X:0像素 Y:20像素 W:320像素 H:44像素 1、尽量保证导航条高度为44像素

2、尽量保证导航条中的按钮满足44X44像素的响应区域

3、导航文字建议控制在8个中文字以内

4、导航条的设计建议遵循上图中默认样式的基本尺寸

将当前视图的标题作为导航栏的标题。当用户浏览到一个新的信息层次中时，两件事

情应该发生：

确保导航栏的文字易读。系统字体提供了最大的可读性，不过，如果你觉得合适，也可

以指定不同的字体。

使用工具栏而不是导航栏 如果需要显示一大堆控件，或者你不需要启用导航功能。 不要增加导航栏的控件，把导航栏弄得很挤，即使看起来有足够的空间，也不要这么做。 导航栏上的元素可以包括视图的标题、返回按钮以及一个管理当前内容的控件，不能再多了。

导航栏内容

（只显示当前页面名称的导航栏 ）

后退按钮为用户回到上一个页面提供了一种可靠的方式，要尽量避免改变该按钮的行为方式。应当尤其避免创建多个部分的后退按钮

（不推荐使用多个部分的后退按钮 ）

（导航栏可包含页面内容操控按钮。 ）

(2.3页签栏 Tab Bar)

描述：为用户提供在不同视图中进行切换的功能，并且方便用户对同级视图直观了解。 区域参数：X:0像素 Y:431像素 W:320像素 H:49像素

系统样式：系统仅提供一种页签条样式，且自动生成页签的不同状态效果。

自绘样式规则：页签条基本样式仅支持自定义修改色值。如果需要重新设计页签条，请遵循基本样式的相关尺寸与规范。这里以常见的5个Tab的页签条为例进行规范。

1、页签条高度为49像素，且不随横竖屏切换产生变化

2、页签条内的Tab数量控制在5个以内，超过数量的Tab在特定页面显示 3、页签的图像尺寸为30X30像素

4、页签的描述文字大小为系统10号字，且与对应图像居中显示 5、设计页签条建议遵循上图中默认样式的基本尺寸

所有标签栏显示图标和文字的标签都是相同的宽度并且显示黑色背景。当标签被选中后，它的背景淡化并且标签中的图片变亮。

（注：标签栏不论哪个方向都不会改

变其透明度或高度。 ）

如果应用程序的标签栏有五个或者少于五个的标签，iPhone操作系统可以用相同的大小显示所有标签

户可以查看一个单独在屏幕上显示的其他选项的列表来查找更多

(2.4工具栏 Tool Bar)

描述：为用户提供直接作用于当前屏幕的工具集合叫作工具栏。工具栏可以包括图标或者其它管理内容的控件。

区域参数：X:0像素 Y:436像素 W:320像素 H:44像素

系统样式：系统提供三种样式供设计者选择使用，分别为默认浅灰、纯黑以及5%的alpha透明黑色样式 默认浅灰色样式

自绘样式规则：工具条经常与管理内容的控件组合使用，这里以常见的5个功能按钮组合为例进行规范。需要注意的是，工具条样式的设计应与其它功能条风格保持一致性。

1、尽量保证工具条高度为44像素

2、尽量保证工具条中的按钮满足44X44像素的响应区域 3、工具条中的工具数量建议控制在5个以内 4、工具条的设计建议遵循上图中默认样式的基本尺寸

工具栏中的按钮以均匀方式水平分布。对工具栏中的按钮数目进行限制可以使用户更容易点击到他们需要的按钮。推荐的界面元素点击域大小为44×44像素，因此少于或等于五个的工具栏按钮是合理的。

你可以为你的工具栏指定颜色和透明度来使它的整体外观跟你的应用程序以及其他栏（即导航栏，标签栏，状态栏）一致。你可以使用自定义颜色或者选择一种标准颜色：

Blue (the default color)蓝色（默认颜色） Black（黑色）

(2.5常规表格视图 Table Views)

描述：需要用户在很多格式类似的数据集合中进行快速浏览，并进行相应选择的时候，通常使用表格视图来实现，它是iPhone界面结构中非常重要且常见的元素。常规表格视图是具有典型性的表格视图种类之一。

区域参数：X:0像素 Y:64像素 W:320像素 H:不定

自绘样式规则：常规表格视图有多种样式适用不同的需求，并且尺寸允许自定义。此规范列举3种具有典型性的表格样式，并针对尺寸及坐标进行建议，设计者可结合具体情况进行参考。

1、尽量保证表格高度为44像素

2、系统使用表格中的索引条区域尺寸为320X23像素 3、系统使用表格中的标题条区域尺寸为320X44像素 4、如使用建议方案请严格遵循对应尺寸规范

(2.6

描述：需要用户在很多格式类似的数据集合中进行快速浏览，并进行相应选择的时候，通常使用表格视图来实现，它是iPhone界面结构中非常重要且常见的元素。分类表格视图是具有典型性的表格视图种类之一。

区域参数：X:0像素 Y:64像素 W:320像素 H:不定

自绘样式规则：分类表格视图常用于设置之类的页面，此规范不建议过多的变化该部分布局。如有自绘需求，请设计者参考如下的相关规范。

1、尽量保证表格高度为44像素

2、如使用建议方案请严格遵循对应尺寸规范

3.控件controls

(3.1.控制类 Controls)

活动指示器：用于提示用户有未知时间的任务或进程正处于活动状态

1、活动指示器可编辑显示尺寸及颜色，以配合不同背景使用 2、活动指示器应用于状态栏的尺寸为14X14像素 3、活动指示器应用于内容区域的尺寸为20X20像素 4、活动指示器默认颜色为白色

进度指示器：用于显示时间可知的进程或任务的进度

1、进度指示器可应用于工具栏、内容区域、提示面板等视图 2、进度指示器的具体尺寸及坐标可根据实际情况自定义

分页指示器：分页指示器向用户提供了快速查看打开了多少页面以及这些页面的打开顺序的方式

1、分页指示器允许被编辑颜色及位置等参数

2、分页指示器的一般被放于内容区域的下部并与之中心对齐的位置 3、分页指示器尽量控制圆点数量在20个以内

标准开关：开关控件向用户提供了两个可选的互斥状态，比如是/否或者开/关。用户可以通

过滑动进行切换。

1、开关控件主要应用于分类表格视图，并被放置于表格的右侧 2、开关控件的默认尺寸为81X24像素

标准滑块：用户通过拖动调节器可以在一个范围内调节数值或进程。且数值或进程是连续变化的。

1、滑块调节器允许编辑外观、颜色、长度甚至是方向上的调整

2、设计者可以根据具体情况自由设计独特的滑块调节器样式来匹配应用产品的风格

(3.2.按钮类 Buttons)

详情按钮：详情按钮出现在列表项中，用于表述该项的详情内容

1、详情按钮的尺寸为24X24像素

2、自绘详情按钮可根据产品风格调整相应颜色及样式

信息按钮：信息按钮提供查看应用配置详情的途径，一般显示在当前屏的背面

1、信息按钮提供浅色背景和深色背景两种风格，以适应不同背景的视觉展示

2、系统自动提供信息按钮按下时的发光效果 3、信息按钮的默认尺寸为17X17像素

标准按钮：标准按钮按用途可分为侧重质感的样式和无质感样式两种类型

1、标准按钮长度允许自定义，设计者可根据按钮数量及布局自行设定，建议最大长度控制300像素以内

2、按钮上的描述文字建议控制在4个中文字以内 3、标准按钮的高度为44像素

分段控制按钮：用户点击分段控制按钮的不同部分会切换显示区域的不同内容

1、分段控制器的长度取决于段落数目和最大的段落尺寸，高度为44像素

2、分段控制器的段落数量建议控制在5个以内，以保证每个段落最小长度不低于44像素 3、分段控制器允许自定义样式、颜色等属性

(3.3.选择器类 Pickers)

时间和日期选择器：向用户提供了简单选择方法，主要用于日期及时间的选择

1、时间和日期选择器的默认尺寸为320X216像素 2、时间和日期选择器最多可以允许4个选择轮

(3.4.搜索类 Search)

标准搜索栏：标准搜索栏是一个用户可以输入的文本区域，应用可以根据用户输入的内容进行搜索。标准搜索栏会在如下两种布局中切换。

1、标准搜索栏的搜索输入区域高度为30像素 2、点击搜索输入区会发生搜索栏高度与布局的变化 3、此规范建议的尺寸及坐标仅供设计者参考

组合搜索栏：组合搜索栏是在标准搜索栏的基础上整合了另一个文本域控件的组合形式，组合搜索栏会在如下两种布局中切换。

1、组合搜索栏的搜索输入区域高度为30像素

2、点击搜索输入区会发生组合搜索栏高度与布局的变化 3、此规范建议的尺寸及坐标仅供设计者参考

(3.5.提示类 Alerts)

提示框：用于提示用户重要信息，并给予用户选择的弹出面板

1、系统提供了多种提示框，此规范不建议任何设计形式的调整 2、标题文字建议控制在8个中文字以内 3、正文文字建议控制在16个中文字以内 4、文本内容居中显示

动作列表：由用户动作开启的动作列表，供用户进行更细节需求上的操作选择

1、系统提供了多种背景样式供选择，以适应不同的使用环境，此规范不建议任何设计形式

本文来源：https://www.bwwdw.com/article/wzz1.html