iPhoneiOS平台视觉规范说明书.docVIP

iPhone iOS 平台视觉规范 说明书 目 录 1.创建优秀的用户界面.7 2.视图 VIEW.5 2.1 状态栏 STATUS BAR.5 2.2 导航栏 NAVIGATION BAR.6 2.3页签栏 TAB BAR9 2.4 工具栏 TOOL BAR.7 2.6分类表格视图TABLE VIEWS12 3.控件 CONTROL 14 3.1 控制类 CONTROLS .14 3.2按钮类BUTTONS.15 3.3 选择器类 PICKERS.16 3.4 搜索类 SEARCH.17 3.5提示类ALERTS .19 3.6 文本域类 TEXT FIELDS20 4.界面 INTERFACE 20 4.1 启动图像 SPLASH20 4.2登录页面LOGIN PAGE.22 4.3说明页面 TEXT PAGE24 5.图形 GRAPHICS26 5.1 应用程序图标 APPLICATION ICON26 5.2 系统图标 STANDARD ICON.27 5.3 自定义图标 CUSTOM ICON29 6.截图 SCREENSHOTS32 7.命名 NAMING RULES33 8.平台特点33 1.引言 Introduction iPhone OS 平台应用的视觉设计应遵循相应的平台特性与设计规范，保持不同应用产品在 同一平台的整体性与一致性。此文档作为 iPhone OS 平台应用开发的视觉基础规范，整体 全面的介绍了常用系统控件，规范了演变后的自绘视图尺寸及标准，为视觉设计提供了很 好的参考和借鉴。设计者应参阅此文档进行视觉设计，并严格遵守硬性部分的规范标准， 最终达到应用产品视觉统一，视觉资源易于维护，设计质量有效保证的目的。 人机界面设计原则 一个优秀用户界面应该遵循一些人机界面设计原则，这些原则来源于人用户思考 和工作的方式，而不是设备的性能。如果一个用户界面没有吸引力，令人费解，或不合逻 辑，那么即使是一个伟大的应用程序也会因此让用户觉得烦琐。但是，一个美观的，无需 用户思考且引人入胜的用户界面不仅可以改善应用程序功能，还能激发用户对应用程序产 生正面情感和依赖感 2.视图 View iPhone 的用户界面基本由各种视图组合而成，不同种类和不同层级的视图构成用户界面 的视觉结构，用户也是通过视图来切换不同信息并完成不同任务。 (2.1状态栏状态栏.) 描述：用于显示用户系统重要信息，如信号强度、运营商信息、网络状况、时间、电量等 图示内容。 区域参数：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、导航条的设计建议遵循上图中默认样式的基本尺寸 将当前视图的标题作为导航栏的标题。当用户浏览到一个新的信息层次中时，两件事 情应该发生： 确保导航栏的文字易读。系统字体提供了最大的可读性，不过，如果你觉得合适，也 可以指定不同的字体。 使用工具栏而不是导航栏 如果需要显示一大堆控件，或者你不需要启用导航功能。 不要增加导航栏的控件，把导航栏弄得很挤，即使看起来有足够的空间，也不 要这么做。 导航栏上的元素可以包括视图的标题、返回按钮以及一个管理当前 内容的控件，不能再多了。 导航栏内容 （只显示当前页面名称的导航栏 ） 后退按钮为用户回到上一个页面提供了一种可靠的方式，要尽量避免改变该按钮的行为方 式。应当尤其避免创建多个部分的后退按钮 （不推荐使用多个部分的后退按钮 ） （导航栏可包含页面内容操控按钮。 ） /wiki/iphone:Navigation-bars（详细网址） (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、工具条的设计建议遵循上图中默认样式的基本尺寸 工具栏中的按钮以均匀方式水平分布。对工具栏中的按钮数目进行限制可以使用户更容易 点击到他们需要的按钮。推荐的界面元素点击域大小为 4444 像素，因此少于或等于五个 的工具栏按钮是合理的。 你可以为你的工具栏指定颜色和透明度来使它的整体外观跟你的应用程序以及 其他栏（即导航栏，标签栏，状态栏）一致。你可以使用自定义颜色或者选择 一种标准颜色： 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分类表格视图 Table Views) 描述：需要用户在很多格式类似的数据集合中进行快速浏览，并进行相应选择的时候，通 常使用表格视图来实现，它是 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、系统提供了多种背景样式供选择，以适应不同的使用环境，此规范不建议任何设计形 式的调整 2、动作列表中按钮的数量允许自定义，设计者可根据实际情况进行增减 (3.6.文本域类 Text Fields) 文本输入框：文本输入框用于接受用户输入的区域。需要配合键盘区域使用 1、文本输入框的默认区域高度为 30 像素 2、文本输入框可以通过程序进行隐藏（同搜索框进行组合使用，而搜索输入区域被激活 时） 4.界面 Interface 描述：应用产品的设计中会遇到很多类似的特殊页面，此规范列举具有典型性特征的页面 进行特殊说明。设计者可以从规范或建议中获得相应的参考。 (4.1.启动图像 Splash) 描述：启动图像是打开应用程序之后的第一个界面视图，用于显示用 Logo、品牌文字及 版权信息等内容。 区域参数：X:0 像素 Y:0 像素 W:320 像素 H:480 像素 系统样式：无 自绘样式规则：系统本身并没有针对启动图像做更多的限制，此规范也只做常规设计方式 上的建议。设计者应遵照产品视觉风格等方向性的要求进行启动图像的设计工作。 1、启动图像为 320X480 像素无透明通道的 PNG 格式图片 2、Logo 图像建议尺寸 200X200 像素，并放置于黄金分割线中心位置 3、品牌文字及版权信息等内容根据整体风格设计的定位具体安排，此规范不做限制 4、如参照此规范进行布局设计，请遵守相关尺寸的建议 (4.2.登录页面 Login Page) 描述：登录页面是应用产品中很典型的页面，虽然可以完全通过默认的系统控件实现，但 我们依然建议设计者尽可能的从产品风格和特点出发，打造适合产品本身的登录页面设计。 系统样式：不推荐 自绘样式规则：登录页面的自绘方式应符合产品整体风格，布局也可个性设计。此规范以 常用样式为例，所涉及的尺寸及坐标偏靠常规设计，仅作为设计者参考的依据，不作为硬 性标准。 1、键盘和状态栏存在的情况下，登录视图的区域为 320X244 像素 2、建议增加尺寸为 290X150 像素的输入面板样式 3、按钮的高度建议 44 像素，且按钮与按钮之间的距离至少保证 10 像素 4、如参照此规范进行布局设计，请遵守相关尺寸的建议 (4.3.说明页面 Text Page) 描述：文字说明的页面在应用产品中也很常见，例如帮助、关于、版权等页面。此规范以 常 见样式为例做说明。 系统样式：暂无 自绘样式规则：说明类页面的特点是以文字显示居多，类似的版式设计的原则是尽量保持 页面整洁规矩，设计者仅需要统一文字段落的边距、行距、字间距等属性。 1、状态栏和导航栏存在的情况下，文字视图的区域为 320X416 像素 2、文字显示区域至少距离边界 10 像素 5.图形 Graphics (5.1.应用程序图标 Application Icon) 描述：启动程序图标用于应用产品的启动以及相关页面的展示使用，共有三种尺寸的类型。 1、启动程序图标共包括三种尺寸，分别为 512X512 像素、57X57 像素、29X29 像素 2、启动程序图标的分辨率均为 72dpi 分辨率 3、启动程序图标 57X57 像素和 29X29 像素均为没有透明通道的 PNG 格式图片 4、启动程序图标 512X512 像素为高质量的 JPEG 或 TIFF 格式图片 5、程序将自动为图标赋予圆角及高光效果，除特殊要求，设计者无需在图形中添加 1.注： 2.iphone 960x640px 分辨率中图标显示尺寸 114px X 114px，20 像素的圆角 4 个像素的 90 度黑色投影, 2 个像素的 90 度白色内投影默认自带的高光 在 Iphone 480px X 320px 分辨率中 图标显示尺寸 57px X 57px ， 10 像素的圆角 ，2 像素的 90 度黑色投影 ，1 像素的 90 度白色内投影 默认自带的高光 在 Ipad 1024px X 768px 分辨率中 ，图标显示尺寸 72px X 72px ，13 像素的圆角 2 像素的 90 度黑色投影 ，1 像素的 90 度白色内投影 默认自带的高光 (5.2.系统图标 Standard Icon) 描述：系统根据不同视图位置，提供多种常用的图标样式，并且这些图标已被多数用户认 知。此规范对于此类图标做硬性规定，相同意义的图标使用系统默认优先原则。 工具栏与导航栏中的标准图标：图标为带有透明通道的 24X24 像素 PNG 格式文件 打开一个行为，允许用户执行一个应用程序活动 打开一个行为允许在相机状态拍照照相 在编辑模式打卡一个新信息编辑 显示特定应用的书签书签 显示一个搜索栏搜索 添加一个新项目添加 删除当前项目删除 移动一个包含应用程序的项目到目的地，例如文件夹组织 发送一个项目到另外的地点回复 停止当前的进程或者任务停止 刷新内容（只在必要时才使用，否则自动更新）刷新 开始某媒体播放或幻灯片播放 媒体播放或幻灯片快速向前快进 暂停媒体播放或幻灯片（请注意这意味着保存环境）暂停 媒体播放或幻灯片快速后退快退 标签中使用的标准图标：图标为带有透明通道的 30X30 像素 PNG 格式文件 查看特定应用的书签书签 查看联系人联系人 查看下载项下载 查看用户的最爱我的收藏 通过应用程序查看特征特征 查看用户行为的历史记录历史记录 查看更多标签更多 显示最近的项目最近项目 显示最常联系的联系人最多查看 在特定的时间段内被用户使用过的程序最新的 进入搜索模式搜索 显示最常使用的项目最高比例 (5.3.自定义图标 Custom Icon) 描述：除系统提供标准图标之外，设计者可以根据功能的独特性设计符合其意义的自定义 图标，但应与标准图标保持一致性，避免不必要的认知门槛，且依然遵循相同意义的图标 使用系统默认的优先原则。 工具栏与导航栏中的自定义图标：图标为带有透明通道的 24X24 像素 PNG 格式文件 转到个人中心、起始页或者初始化界面主页 菜单集合，点击进入菜单或设置界面菜单 浏览网页时执行前进操作前进 浏览网页时执行后退操作后退 书签收藏夹收藏夹、书签 对浏览窗口进行管理和切换，并现实窗口数多窗口 当目前开启窗口数为 1 个以上时，点击关闭全部窗口关闭全部窗口 新增文件、文件夹、窗口、等操作新增 返回上一个界面返回 清空文件夹中的文件、下载任务、历史记录等删除 编辑完成时的确认操作完成 文件管理或者书签管理中新建一个文件夹新建文件夹 对所选对象进行编辑的操作编辑 标签中使用的自定义图标：图标为带有透明通道的 30X30 像素 PNG 格式文件 更换界面皮肤皮肤中心 进入收藏夹、书签管理收藏夹、书签 各种功能设置设置 退出全屏模式恢复正常模式关闭全屏 白天或者环境光较强的浏览模式日间模式 对文件进行管理文件管理 对下载任务和已下载文件进行管理下载管理 点击进入意见反馈提交界面意见反馈 对资讯内容、网页、feed 等进行更新操作刷新 点击进入全屏模式全屏模式 包含版本信息，使用教程，常用解答等信息聚合帮助 浏览器中点击可将网页添加至首页的快速栏目添加至快速链 接 对浏览过的网页、文件进行管理操作历史记录 点击进入写心情写心情 点击进行软件检查更新检查更新 对文件，关键字，网页等进行查询的操作搜索 将网页添加至收藏 文件上传中手动拍照上传图片功能拍照 点击进行取消，暂停当前的操作任务取消、暂停 (6.APP 截图 Screenshots) 描述：提交 APP 审核需上传最多 5 张产品页面上的截图，应涵盖应用产品的主要页面。需 要注意的是，截图不允许包涵状态栏样式。 1、产品页面截图尺寸为 320X460 像素 2、产品页面截图不应包涵状态栏部分 3、产品页面截图的分辨率为 72dpi 分辨率 4、产品页面截图应为高质量的 JPEG 或 TIFF 格式图片 5、需提供的产品页面截图数量为最多 5 张 7.视觉资源命名规则 Naming Rules 描述：视觉资源素材输出应符合基本的命名规则，命名统一规范对于视觉资源的识别与维 护具有很大的意义，对设计者和维护者的效率提升给予最大保障。 命名公式：公司名_项目名_应用场合_名称_状态_属性（后缀） 常规命名示例：T_qqreader_mainmenu_search_btn1_focus.Png 点九命名示例：T_qqreader_mainmenu_fontbg.9.Png 常用命名汇总： 页头 header登录条 progressbar标志 logo 侧栏 sidebar广告条 banner导航 nav 子导航 subNav菜单 menu子菜单 subMenu 下拉菜单 dropMenu工具条 toolbar表单 form 栏目 column箭头 arrow搜索 search 搜索按钮 search_btn滚动条 scroll内容 content 标签页 tab列表 list提示信息 msg 小技巧 tips栏目标题 title链接 links 页脚 footer服务 service热点 hot 新闻 news下载 download注册 regsiter 登录 login注销 logout退出 exit 关闭 close取消 cancel确定 OK 菜单树 menutree快捷键 shortcut添加 add 删除 del清空 clear全选 all 状态 status按钮 btn投票 vote 合作伙伴 partner版权 copyright网站地图 sitemap 弹出框 popup对话框 dialog复选框 checkbox 单选框 radiobutton常态 normal悬停 hover 焦点 focus默认 default已访问过的 visited 失效 disable激活 active按下 pressed 8.平台特点 Table 5-2 Sizes for images in the CFBundleIcon s keyIcon IdiomSizeUsage App icon (required) iPhone 57 x 57 pixels 114 x 114 pixels (2x) This is the main icon for apps running on iPhone and iPod touch. The 2x variant of the icon is for use on devices with Retina displays only. App icon (required) iPad 72 x 72 pixels 144 x 144 pixels (2x) This is the main icon for apps running on iPad. The 2x variant of the icon is for use on devices with Retina displays only. Settings/Searc h results icon iPhone/ iPad 29 x 29 pixels 58 x 58 pixels (2x) This is the icon displayed in conjunction with search results on iPhone and iPod touch. This icon is also used by the Settings app on all devices. The 2x variant of the icon is for use on devices with Retina displays only. Search results icon iPad 50 x 50 pixels 100 x 100 pixels This is the icon displayed in conjunction with search results on iPad. The 2x variant of the icon is for use on devices with Retina displays only. (2x) Table 5-3 Typical launch image dimensionsDevice PortraitLandscape iPhone and iPod touch 320 x 480 pixels 640 x 960 pixels (2x) Not supported iPad 768 x 1024 pixels 1536 x 2008 pixels (2x) 1024 x 748 pixels 2048 x