移动应用UI设计规范.docxVIP

移动应用UI设计规范（golo5.0）序号拟稿人审核批准签名日期2015-01-272015-04-13修订记录序号版本号修订内容修订人修订日期AV1.0golo 5.0应用的界面各部分的设计标准2015-1-17BC移动应用UI设计规范概述1.规范目的确保元征公司手机×××××××××××设计工作的效率和质量。加强元征公司手机×××××××××××设计风格的统一，提高元征产品的品牌形象，保证元征产品品牌的市场影响力和可持续发展。2.适用范围元征公司手机APP设计规范适用于golo5.0包括车主、技师的IOS手机版本、Android版本。3.基本架构UI设计的效果图分辨率是：640x1136px(像素)此设计规范都是在640x1136px分辨率下标示和展现出来的，所有的标注均不包含线，IOS系统可以按照原图较准确的开发实现，Android系统由于分辨率较多且屏幕大小不一，每个屏幕呈现出来的效果各异， Android的开发人员可参考此份规范实现最相近最佳的效果；以下为golo5.0最基本的架构。图示：规范内容1.栏1.1状态栏Status Bar描述：用于显示用户系统重要信息，如信号强度、运营商信息、网络状况、时间、电量等图示内容。 说明：内容和大小系统自带图示：颜色：#f7f7f7 RGB ×××××××××××1.2导航栏Navigation Bar描述：用于显示当前的视图的名称，并提供相关导航的控件用于层级间的视图切换，甚至作用于视图内容的控件。说明：一级功能模块的首页没有返回键，二级以上的页面有返回键；图示：颜色：#f7f7f7 RGB ×××××××××××1.3页签栏Tab Bar描述：为用户提供在不同视图中进行切换的功能，并且方便用户对同级视图直观了解。说明：功能等分居中，左右滑动切换，页签条内的Tab数量控制在5个以内，超过数量的Tab隐藏在右边，滑动既可展现出来。图示：颜色：#edededRGB ×××××××××××1.4工具栏Tool Bar描述：为用户提供直接作用于当前屏幕的工具集合叫作工具栏。工具栏可以包括图标或者其它管理内容的控件。说明：功能等分居中，工具条经常与管理内容的控件组合使用，工具条中的工具数量建议控制在5个以内，这里以常见的5个功能按钮组合为例进行规范。图示：颜色：#f7f7f7 RGB ×××××××××××1.5广告栏Ad Column描述：即广而告之之意。广告是为了某种特定的需要，通过一定形式的媒体，公开而广泛地向公众传递信息的宣传手段说明：一般会展现在主页置顶的位置。图示：1.6 标题栏Title bar描述：显示当前页面的主要内容、应用程序名、文件名等等说明：分为两种情况1.页面的标题，体现在导航栏上面(参考导航栏)；2.段落的标题，体现在内容区域中每个段落的顶部，有两种样式，一是包含在段落列表里面，为段落主要标题，一是段落列表框上面，起提示作用的标题。图示：段落标题提示性标题颜色：白色 #分隔栏Dividing bar描述： 分隔栏可以分为分割线和分割条，它主要用于分隔不同段落的内容和版块，也可以用于装饰页面。说明：用于内容区域较多，分割线一般为1像素，长短根据页面设计需求而定，个别特殊页面另当别论；分割条分两种，一种是分隔条上无字的情况，一种是带字的情况。图示：1.分割线2.分割栏颜色：分割线 #c6c6c6 RGB ×××××××××××分隔栏 #edededRGB ×××××××××××2.框2.1 弹出框Pop-up Box描述： 操作后在操作页面上直接弹出来的框，主要起提示作用。说明：弹出框的结构分为底部遮挡面和上面弹出框，弹出框又分为三种类型：1..顶部动态弹出框，顶部不动，根据内容多少往下延伸2.底部动态弹出框，底部不动，根据内容多少往上延伸3.中间弹出框，中间弹出框分为两种，一种是固定弹出框，一种是动态弹出框，宽度不变，内容如果超出固定弹出框的范围，高度根据内容多少而定。图示：2.1.1顶部弹出框2.1.2底部弹出框2.1.3中间弹出框颜色：中间弹出框为白色 #加载框Loading Box描述：即提示加载的意思，表示启动程序时文件或信息的载入。加载框是为了提示用户页面正在加载，让用户耐心等待的提示性小界面。说明：一般会展现在页面正中间的位置。图示：颜色：中间弹出框为白色 #搜索框Search Box描述： 用户按搜索按钮后在操作页面上直接弹出来的框，可以输入搜索的内容。说明：搜索框由框和搜索框提示语，还有“搜索”字按键组成，搜索框一般出现在页面的导航栏，弹出式覆盖导航栏本身的内容，只留返回键，点“搜索”字进行搜索后，按返回键返回。图示：颜色：白色底 # .1352.4下拉框Drop-down Box描述： 下拉框主要用于选择性的操作，下拉框有多个