iPhone iOS平台视觉规范 说明书.doc

iPhone iOS 平台视觉规范 说明书目 录1.创建优秀的用户界面.............................................................................................................7 2.视图 VIEW.................................................................................................................................52.1 状态栏 STATUS BAR.....................................................................................................52.2 导航栏 NAVIGATION BAR...........................................................................................62.3页签栏 TAB BAR............................................................................................................9 2.4 工具栏 TOOL BAR.....................................................................................................7 2.6分类表格视图TABLE VIEWS......................................................................................123.控件 CONTROL ......................................................................................................................143.1 控制类 CONTROLS .....................................................................................................143.2按钮类BUTTONS.......................................................................................................153.3 选择器类 PICKERS.......................................................................................................163.4 搜索类 SEARCH...........................................................................................................173.5提示类ALERTS ...........................................................................................................193.6 文本域类 TEXT FIELDS................................................................................................204.界面 INTERFACE ....................................................................................................................204.1 启动图像 SPLASH........................................................................................................204.2登录页面LOGIN PAGE...............................................................................................224.3说明页面 TEXT PAGE..................................................................................................245.图形 GRAPHICS......................................................................................................................265.1 应用程序图标 APPLICATION ICON............................................................................265.2 系统图标 STANDARD ICON.......................................................................................275.3 自定义图标 CUSTOM ICON........................................................................................296.截图 SCREENSHOTS..............................................................................................................327.命名 NAMING RULES............................................................................................................338.平台特点..................................................................................................................................331.引言 IntroductioniPhone OS 平台应用的视觉设计应遵循相应的平台特性与设计规范，保持不同应用产品在同一平台的整体性与一致性。

此文档作为 iPhone OS 平台应用开发的视觉基础规范，整体全面的介绍了常用系统控件，规范了演变后的自绘视图尺寸及标准，为视觉设计提供了很好的参考和借鉴设计者应参阅此文档进行视觉设计，并严格遵守硬性部分的规范标准，最终达到应用产品视觉统一，视觉资源易于维护，设计质量有效保证的目的人机界面设计原则一个优秀用户界面应该遵循一些人机界面设计原则，这些原则来源于人——用户——思考和工作的方式，而不是设备的性能如果一个用户界面没有吸引力，令人费解，或不合逻辑，那么即使是一个伟大的应用程序也会因此让用户觉得烦琐但是，一个美观的，无需用户思考且引人入胜的用户界面不仅可以改善应用程序功能，还能激发用户对应用程序产生正面情感和依赖感2.视图 ViewiPhone 的用户界面基本由各种视图组合而成，不同种类和不同层级的视图构成用户界面的视觉结构，用户也是通过视图来切换不同信息并完成不同任务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、导航条的设计建议遵循上图中默认样式的基本尺寸将当前视图的标题作为导航栏的标题。

当用户浏览到一个新的信息层次中时，两件事情应该发生：确保导航栏的文字易读系统字体提供了最大的可读性，不过，如果你觉得合适，也可以指定不同的字体 使用工具栏而不是导航栏 如果需要显示一大堆控件，或者你不需要启用导航功能 不要增加导航栏的控件，把导航栏弄得很挤，即使看起来有足够的空间，也不要这么做 导航栏上的元素可以包括视图的标题、返回按钮以及一个管理当前内容的控件，不能再多了导航栏内容（只显示当前页面名称的导航栏 ）后退按钮为用户回到上一个页面提供了一种可靠的方式，要尽量避免改变该按钮的行为方式应当尤其避免创建多个部分的后退按钮（不推荐使用多个部分的后退按钮 ）（导航栏可包含页面内容操控按钮 ） 页签栏 Tab Bar)描述：为用户提供在不同视图中进行切换的功能，并且方便用户对同级视图直观了解区域参数：X:0 像素 Y:431 像素 W:320 像素 H:49 像素系统样式：系统仅提供一种页签条样式，且自动生成页签的不同状态效果自绘样式规则：页签条基本样式仅支持自定义修改色值如果需要重新设计页签条，请遵循基本样式的相关尺寸与规范这里以常见的 5 个 Tab 的页签条为例进行规范1、页签条高度为 49 像素，且不随横竖屏切换产生变化2、页签条内的 Tab 数量控制在 5 个以内，超过数量的 Tab 在特定页面显示3、页签的图像尺寸为 30X30 像素4、页签的描述文字大小为系统 10 号字，且与对应图像居中显示5、设计页签条建议遵循上图中默认样式的基本尺寸所有标签栏显示图标和文字的标签都是相同的宽度并且显示黑色背景。