iPhoneiOS平台视觉规范说明书

iPhoneiOS

平台视觉标准说明书目 录创立优秀的用户界面 7\l“_TOC_250016“视图VIEW 5状态栏STATUSBAR 5\l“_TOC_250015“导航栏NAVIGATIONBAR 6\l“_TOC_250014“页签栏TABBAR 9\l“_TOC_250013“工具栏TOOLBAR 72.6分类表格视图TABLEVIEWS 错误！未定义书签。控件CONTROL 14\l“_TOC_250012“把握类CONTROLS 14按钮类BUTTONS 错误！未定义书签。\l“_TOC_250011“选择器类PICKERS 16\l“_TOC_250010“搜寻类SEARCH 17提示类ALERTS 错误！未定义书签。\l“_TOC_250009“文本域类TEXTFIELDS 20\l“_TOC_250008“界面INTERFACE 20\l“_TOC_250007“启动图像SPLASH 20\l“_TOC_250006“登录页面LOGIN 22\l“_TOC_250005“说明页面TEXT 24\l“_TOC_250004“图形GRAPHICS 26\l“_TOC_250003“应用程序图标APPLICATIONICON 26\l“_TOC_250002“系统图标STANDARDICON 27\l“_TOC_250001“自定义图标CUSTOMICON 29截图SCREENSHOTS 32命名NAMINGRULES 33\l“_TOC_250000“平台特点 33引言IntroductioniPhoneOS平台应用的视觉设计应遵循相应的平台特性与设计标准，保持不同应用产品在同一平台的整体性与全都性。此文档作为iPhoneOS平台应用开发的视觉根底标准，整体到达应用产品视觉统一，视觉资源易于维护，设计质量有效保证的目的。人机界面设计原则一个优秀用户界面应当遵循一些人机界面设计原则，这些原则来源于人——用户——思考考且引人入胜的用户界面不仅可以改善应用程序功能感和依靠感视图ViewiPhone的用户界面根本由各种视图组合而成，不同种类和不同层级的视图构成用户界面的视觉构造，用户也是通过视图来切换不同信息并完成不同任务。(2.1状态栏.)描述：用于显示用户系统重要信息，如信号强度、运营商信息、网络状况、时间、电量等图示内容。区域参数：X:0像素Y:0像素W:320像素H:20在iPhone上，状态栏可以有不同的颜色；在iPad状态栏意味着用户需要退出你的程序来看清楚，比方说，是否需要充电。要的状态栏等界面元素。但要留意，保证用户只需轻轻一点，就能把状态栏找回来。不要使用什么特别的手势，用户不情愿记住这个手势。不要创立定制的状态栏。用户依靠于系统供给的状态栏的全都性。虽然你可以在你的程序中隐蔽状态栏，但是创立一个全的状态栏替换掉原来的还是不适宜的。在iPhone上，可以指定状态栏的颜色。你可以选择灰色〔默认颜色色或半透亮的黑色〔值为0.5的黑色。(2.2导航栏NavigationBar)于视图内容的控件。区域参数：X:0像素Y:20像素W:320像素H:441442、尽量保证导航条中的按钮满足44X44像素的响应区域38个中文字以内4、导航条的设计建议遵循上图中默认样式的根本尺寸将当前视图的标题作为导航栏的标题。当用户扫瞄到一个的信息层次中时，两件事情应当发生：确保导航栏的文字易读。系统字体供给了最大的可读性，不过，假设你觉得适宜，也可以指定不同的字体。使用工具栏而不是导航栏假设需要显示一大堆控件，或者你不需要启用导航功能。这么做。导航栏上的元素可以包括视图的标题、返回按钮以及一个治理当前内容的控件，不能再多了。导航栏内容〔只显示当前页面名称的导航栏〕后退按钮为用户回到上一个页面供给了一种牢靠的方式，要尽量避开转变该按钮的行为方式。应当尤其避开创立多个局部的后退按钮〔不推举使用多个局部的后退按钮〕〔导航栏可包含页面内容操控按钮。〕:///wiki/iphone:Navigation-bars〔具体网址〕(2.3页签栏TabBar)描述：为用户供给在不同视图中进展切换的功能，并且便利用户对同级视图直观了解。区域参数：X:0像素Y:431像素W:320像素H:49系统样式：系统仅供给一种页签条样式，且自动生成页签的不同状态效果。根本样式的相关尺寸与标准。这里以常见的5Tab149像素，且不随横竖屏切换产生变化2Tab5Tab330X30410号字，且与对应图像居中显示5、设计页签条建议遵循上图中默认样式的根本尺寸的背景淡化并且标签中的图片变亮。〔注：标签栏不管哪个方向都不会改变其透亮度或高度。〕假设应用程序的标签栏有五个或者少于五个的标签iPhone全部标签户可以查看一个单独在屏幕上显示的其他选项的列表来查找更多(2.4工具栏ToolBar)它治理内容的控件。区域参数：X:0像素Y:436像素W:320像素H:44系统样式：系统供给三种样式供设计者选择使用，分别为默认浅灰、纯黑以及5%的alpha透亮黑色样式默认浅灰色样式自绘样式规章：工具条常常与治理内容的控件组合使用，这里以常见的5个功能按钮组合为例进展标准。需要留意的是，工具条样式的设计应与其它功能条风格保持全都性。144像素2、尽量保证工具条中的按钮满足44X44像素的响应区域3、工具条中的工具数量建议把握在5个以内4、工具条的设计建议遵循上图中默认样式的根本尺寸工具栏中的按钮以均匀方式水平分布击到他们需要的按钮。推举的界面元素点击域大小为44×44像素，因此少于或等于五个的工具栏按钮是合理的。你可以为你的工具栏指定颜色和透亮度来使它的整体外观跟你的应用程序以及〔即导航栏，标签栏，状态栏〕全都。你可以使用自定义颜色或者选择一种标准颜色：Blue(thedefaultcolor)蓝色〔默认颜色〕Black〔黑色〕(2.5常规表格视图TableViews)iPhone有典型性的表格视图种类之一。区域参数：X:0像素Y:64像素W:320像素H:不定举3种具有典型性的表格样式，并针对尺寸及坐标进展建议，设计者可结合具体状况进展参考。144像素2、系统使用表格中的索引条区域尺寸为320X23像素3、系统使用表格中的标题条区域尺寸为320X44像素4、如使用建议方案请严格遵循对应尺寸标准(2.6分类表格视图TableViews)iPhone有典型性的表格视图种类之一。区域参数：X:0像素Y:64像素W:320像素H:不定如有自绘需求，请设计者参考如下的相关标准。144像素2、如使用建议方案请严格遵循对应尺寸标准controls(3.1.把握类Controls)活动指示器：用于提示用户有未知时间的任务或进程正处于活动状态1、活动指示器可编辑显示尺寸及颜色，以协作不同背景使用2、活动指示器应用于状态栏的尺寸为14X14像素3、活动指示器应用于内容区域的尺寸为20X20像素4、活动指示器默认颜色为白色进度指示器：用于显示时间可知的进程或任务的进度1、进度指示器可应用于工具栏、内容区域、提示面板等视图2、进度指示器的具体尺寸及坐标可依据实际状况自定义方式1、分页指示器允许被编辑颜色及位置等参数2、分页指示器的一般被放于内容区域的下部并与之中心对齐的位置3、分页指示器尽量把握圆点数量在20个以内/否或者开/关。用户可以通过滑动进展切换。1、开关控件主要应用于分类表格视图，并被放置于表格的右侧281X24像素化的。1、滑块调整器允许编辑外观、颜色、长度甚至是方向上的调整2、设计者可以依据具体状况自由设计独特的滑块调整器样式来匹配应用产品的风格(3.2.按钮类Buttons)详情按钮：详情按钮消灭在列表项中，用于表述该项的详情内容124X242、自绘详情按钮可依据产品风风格整相应颜色及样式信息按钮：信息按钮供给查看应用配置详情的途径，一般显示在当前屏的反面1、信息按钮供给浅色背景和深色背景两种风格，以适应不同背景的视觉呈现2、系统自动供给信息按钮按下时的发光效果317X17像素标准按钮：标准按钮按用途可分为侧重质感的样式和无质感样式两种类型1、标准按钮长度允许自定义，设计者可依据按钮数量及布局自行设定，建议最大长度把握3002、按钮上的描述文字建议把握在4个中文字以内344像素分段把握按钮：用户点击分段把握按钮的不同局部会切换显示区域的不同内容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、系统供给了多种提示框，此标准不建议任何设计形式的调整28个中文字以内316个中文字以内4、文本内容居中显示动作列表：由用户动作开启的动作列表，供用户进展更细节需求上的操作选择1、系统供给了多种背景样式供选择，以适应不同的使用环境，此标准不建议任何设计形式的调整2、动作列表中按钮的数量允许自定义，设计者可依据实际状况进展增减(3.6.文本域类TextFields)文本输入框：文本输入框用于承受用户输入的区域。需要协作键盘区域使用1、文本输入框的默认区域高度为30像素2〔〕界面Interface特别说明。设计者可以从标准或建议中获得相应的参考。(4.1.启动图像Splash)描述：启动图像是翻开应用程序之后的第一个界面视图，用于显示用Logo、品牌文字及版权信息等内容。区域参数：X:0像素Y:0像素W:320像素H:480系统样式：无的建议。设计者应遵照产品视觉风格等方向性的要求进展启动图像的设计工作。1320X480PNG格式图片2、Logo200X200像素，并放置于黄金分割线中心位置3、品牌文字及版权信息等内容依据整体风格设计的定位具体安排，此标准不做限制4、如参照此标准进展布局设计，请遵守相关尺寸的建议(4.2.登录页面Login)们照旧建议设计者尽可能的从产品风格和特点动身，打造适合产品本身的登录页面设计。系统样式：不推举准。1、键盘和状态栏存在的状况下，登录视图的区域为320X244像素2290X150像素的输入面板样式344像素，且按钮与按钮之间的距离至少保证10像素4、如参照此标准进展布局设计，请遵守相关尺寸的建议(4.3.说明页面Text)描述：文字说明的页面在应用产品中也很常见，例如帮助、关于、版权等页面。此标准以常见样式为例做说明。系统样式：暂无面干净法规，设计者仅需要统一文字段落的边距、行距、字间距等属性。1、状态栏和导航栏存在的状况下，文字视图的区域为320X416像素2、文字显示区域至少距离边界10像素图形Graphics(5.1.应用程序图标ApplicationIcon)描述：启动程序图标用于应用产品的启动以及相关页面的呈现使用，共有三种尺寸的类型。1、启动程序图标共包括三种尺寸，分别为512X512像素、57X57像素、29X29像素272dpi区分率357X57像素和29X29PNG格式图片4512X512JPEG或TIFF5、程序将自动为图标赐予圆角及高光效果，除特别要求，设计者无需在图形中添加注：iphone960x640px区分率中图标显示尺寸114pxX114px，20像素的圆角4个像素的90度黑色投影, 2个像素的90度白色内投影默认自带的高光Iphone480pxX320px图标显示尺寸57pxX57px ，10像素的圆角 ，2像素的90度黑色投影，1像素的90度白色内投影 默认自带的高光在Ipad1024pxX768px区分率中 ，图标显示尺寸72pxX72px ，13像素的圆角2像素的90度黑色投影，1像素的90度白色内投影 默认自带的高光(5.2.系统图标StandardIcon)此标准对于此类图标做硬性规定，一样意义的图标使用系统默认优先原则。工具栏与导航栏中的标准图标：图标为带有透亮通道的24X24像素PNG格式文件翻开一个行为，允许用户执行一个应用程序翻开一个行为，允许用户执行一个应用程序活动翻开一个行为允许在相机状态拍照照相在编辑模式打卡一个信息编辑显示特定应用的书签书签显示一个搜寻栏搜寻添加一个工程添加删除当前工程删除移动一个包含应用程序的工程到目的地，例如文件夹组织发送一个工程到另外的地点回复发送一个工程到另外的地点回复停顿当前的进程或者任务停顿刷内容〔只在必要时才使用，否则自动更〕刷开头某媒体播放或幻灯片播放媒体播放或幻灯片快速向前快进暂停媒体播放或幻灯片〔请留意这意味着保存环境〕暂停媒体播放或幻灯片快速后退快退标签中使用的标准图标：图标为带有透亮通道的30X30像素PNG格式文件查看特定应用的书签查看特定应用的书签书签查看联系人联系人查看下载项下载查看用户的最爱我的保藏通过应用程序查看特征特征查看用户行为的历史记录历史记录查看更多标签更多显示最近的工程最近工程显示最常联系的联系人最多查看在特定的时间段内被用户使用过的程序最的进入搜寻模式搜寻显示最常使用的工程最高比例(5.3.自定义图标CustomIcon)系统默认的优先原则。工具栏与导航栏中的自定义图标：图标为带有透亮通道的24X24像素PNG格式文件转到个人中心、起始页或者初始化界面转到个人中心、起始页或者初始化界面主页菜单集合，点击进入菜单或设置界面菜单扫瞄网页时执行前进操作前进扫瞄网页时执行后退操作后退书签保藏夹保藏夹、书签对扫瞄窗口进展治理和切换，并现实窗口数多窗口当目前开启窗口数为1个以上时，点击关闭全部窗口关闭全部窗口增文件、文件夹、窗口、等操作增返回上一个界面返回清空文件夹中的文件、下载任务、历史记录等删除编辑完成时确实认操作完成文件治理或者书签治理中建一个文件夹建文件夹对所选对象进展编辑的操作编辑标签中使用的自定义图标：图标为带有透亮通道的30X30像素PNG格式文件更换界面皮肤进入保藏夹、书签治理各种功能设置退出全屏模式恢复正常模式白天或者环境光较强的扫瞄模式对文件进展治理对下载任务和已下载文件进展治理点击进入意见反响提交界面对资讯内容、网页、feed等进展更操作点击进入全屏模式包含版本信息，使用教程，常用解答等信息聚合扫瞄器中点击可将网页添加至首页的快速栏目

皮肤中心保藏夹、书签设置关闭全屏日间模式文件治理下载治理意见反响刷全屏模式帮助添加至快速链接对扫瞄过的网页、文件进展治理操作点击进入写心情点击进展软件检查更对文件，关键字，网页等进展查询的操作将网页文件上传中手动拍照上传图片功能点击进展取消，暂停当前的操作任务

历史记录写心情检查更搜寻添加至保藏拍照取消、暂停(6.APPScreenshots)描述：提交APP审核需上传最多5张产品页面上的截图，应涵盖应用产品的主要页面。需要留意的是，截图不允许包涵状态栏样式。1320X4602、产品页面截图不应包涵状态栏局部3、产品页面截图的区分率为72dpi区分率4JPEG或TIFF5、需供给的产品页面截图数量为最多5张视觉资源命名规章NamingRules具有很大的意义，对设计者和维护者的效率提升赐予最大保障。命名公式：公司名_工程名_应用场合_名称_状态_属性〔后缀〕常规命名例如：T_qqreader_mainmenu_search_btn1_focus.Png点九命名例如：T_qqreader_mainmenu_fontbg.9.Png页头header页头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平台特点Table5-2SizesforimagesintheCFBundleIconskeyIcon

Idiom Size UsageApp icon(required)App icon(required)Settings/Searchresultsicon

iPhoneiPadiPhone/iPad

57 pixels114 pixels(@2x)72 pixels144 pixels(@2x)29 pixels58 pixels(@2x)50

57ThisisthemainiconforappsrunningoniPhoneand114 iPodtouch.The@2xvariantoftheiconisforuseondeviceswithRetinadisplaysonly.72ThisisthemainiconforappsrunningoniPad.The144 @2xvariantoftheiconisforuseondeviceswithRetinadisplaysonly.29 ThisistheicondisplayedinconjunctionwithsearchresultsoniPhoneandiPodtouch.Thisiconisalsoused58 bytheSettingsapponalldevices.The@2xvariantoftheiconisforuseondeviceswithRetinadisplaysonly.50Search resultsicon

iPad

pixels100 pixels

100

ThisistheicondisplayedinconjunctionwithsearchresultsoniPad.The@2xvariantoftheiconisforuseondeviceswithRetinadisplaysonly.(@2x)Table5-3TypicallaunchimagedimensionsDeviceiPhoneandiPodtouchiPad

Portrait Landscape320x480pixelsNotsupported640x960pixels(@2x)768x1024pixels 1024x748pixels1536x2023pixels(@2x) 2048x1496pixels(@2x)Todemonstratethenamingconventions,supposeyouriOSapp’sInfo.