原型规范Word格式.docx

1、播放类控件作用：播放按钮的推荐控件和参数。播放控件 V1.0正向播放图标尺寸：24X24暂停停止反向播放下一片段上一片段上一帧图像下一帧图像9 快进/慢放10 声音 打开/静音菜单和按钮常用菜单和按钮推荐和参数。菜单和按钮控件 V1.0字体选择颜色选择下划线选择线样式字体样式按钮尺寸按钮尺寸要求：大85X32 中56X26 小 44X22按钮+文字大按钮 85X35（待定）表单元素提供表单及元素的推荐尺寸表单元素控件库 V1.0文字标签下拉列表多项选择单选按钮单选按钮组复选框复选框组图表和表格提供图标和表格基本样式图表和表格 V1.0数据表格线形图柱状图饼图常用图标控件界面中常用的按钮图标。各

2、类图标控件 V1.0窗口控制图标尺寸 100X25 最小化、缩放、关闭搜索图标尺寸 24X24关闭/删除尺寸 24X24 刷新笔箭头添加放大/缩小加载中设置11 半透明层12 全屏13 文件14 禁止/静音15 关于弹出面板提供弹出面板（窗口）的基本样式。弹出面板 V 1.0可选标题尺寸 400X35 文字 13 微软雅黑 +关闭底部弹出面板顶部弹出面板左边弹出面板右边弹出面板浮层窗口尺寸提供弹出窗口的尺寸规格。浮层尺寸 V1.0较轻量交互行为最小尺寸350150 最大350350；宽度固定，高度随内容自动伸展，若内容高度超过350请选择其他交互模式轻量交互行为最小尺寸450170 最大450

3、450；宽度固定，高度随内容自动伸展，若内容高度超过450请选择其他交互模式有复杂交互行为最小尺寸 650250 最大尺寸650提示性浮层20060；用以提示、反馈性的浮局视频窗口尺寸提供视频窗口的尺寸规格视频窗口尺寸 V1.0小窗口 QCIF比例4：3 /16：9中窗口大窗口9/ 填充图片尺寸提供引用界面的尺寸规格（待定）1.0头像XL 200150L 160120M 100100S 8080XS 6060Thumbnail 4040标识图L 150M 120S 100XS 80常用图形XL 180240200160S 90XS 10075相册与照片占位尺寸 比例4：3L 600600M 3

4、00300S 150Thumbnail 1503.2常用组件能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本，实现界面的一致性，规范性，突出界面的风格特征。布局使用栅格作为布局的摆放参考。栅格布局 V 1.012栅格 横向1024（W） 85-15 20栅格 横向1024（W） 50-1512栅格 横纵1024（W）X768（H） 75-10示例布局根据栅格进行布局的设计示例：日期选择提供日期选择的原型组件日期选择 V1.0单月日期选择年月日 时分秒年月日单月日期范围横向两月选择起始时间 至 截至时间 的 年月日 时分秒起始时间 至 截至时间 的 年月日导航提供导航页签的组件

5、。导航 V1.0面包屑折叠面板分页数据项分页；搜索分页；页签模块页签；导航页签；导航栏顶部导航栏；左侧导航栏；进度指示条；表单处理对表单等数据的多种处理方式，如搜索，格式化、总览和浏览。表单过滤项搜索类实时过滤搜索类（无例子）表单自动填写列表排序表单类（无例子）树状列表提供树状列表组件的包括机构树、搜索及相关操作。树状列表 V1.0说明（W x H）列表规格尺寸 210X600 （待定）图标规格尺寸 16X16滚动条规格尺寸 18X6004.原型制作4.1流程图能够清晰表达用户用例，通过一个或多个逻辑完整、清晰流程图进行梳理和规范流程。图4-1接处警辅助流程 泳道图：4.2关键页面4.3辅助页

6、面4.4原型注释对界面的元素功能进行注释、具体的交互方式、各种条件下的状态变化、报错结果及展示方式以及操作结果等方面。5.原型发布5.1原型文档对原型的更新和修改，及功能描述进行记录的文档。5.2更新发布更新发布后，方便研发和测试等同时即时获取最新版本原型。内容：AXURE需要根据需求，不选的完善和修改。产品经理一旦更新原型，所有人可通过URL地址访问，获取最新原型。同时可查看发布的不同版本和修改内容。建议采用内网环境进行发布，使用Windows7 自带的IIS进行发布。访问的地址距离，例如：http:/192.168.7.89/XXX产品1.0/ ；搭建的具体方式咨询网络工程师即可。6.全局

7、规范6.1表单对齐标签内容右对齐，控件左对齐，各控件的宽度尽量保持一致。如下图：图6-1表单对齐方式6.2页面、操作提示性描述提示性描述文字原则：精确、精炼。下表此项目标准的提示信息：提示类型提示信息删除前确认您确定要删除吗？删除成功删除成功！删除失败数据已被使用提示：删除失败！数据被使用其他类型的提示使用：系统异常编辑成功更新成功！编辑提交成功编辑失败数据重复时提示：更新失败！XX已存在其他类型时提示：添加成功添加成功！添加失败数据已重复时提示：添加失败！XXX已存在其他的类型提示：系统异常。上传成功上传成功!用于上传文件类的提示上传失败格式不正确时提示：格式错误！大小超过限制时提示：文件大

8、小超过限制！上传失败！查询在数据返回以前（表格）查询在数据返回后若为空时必填字段需要标明输入的字段如果有特殊字符要求的，需要说明有长度要求的需要标明添加界面的下拉框值需要写全用到的所有值在实体建模的实体详细描述中全部标注16 “添加/编辑”界面上如有“返回”按钮，如果返回有特殊要求，需在按钮上写明具体要求17 添加成功后，如果需要刷新页面重新添加，要在保存按钮上做效果6.3数据表格设计规范项目规范说明对齐方式居中使用场景：用于内容字符长度在业务范围内相对固定，变化不大的内容（类似序号、操作、时间、状态、姓名、性别等）左对齐使用场景：用于内容字符长度变化很快，（类似新闻通知的标题）右对齐使用场景

9、：用于像金额数据项的显示某一列若加链接必须使用超链接样式，操作列统一命名规范编辑：（用于打开新页面或对话框进行数据的编辑，对修改、更新、更改之类的统一使用“编辑”）删除：（从数据库物理或逻辑删除）移除：（从一个集合中移除）查看：（用于打开新页面或对话框查询数据详细情况）注：在原型设计时，各操作之间使用半个汉字的间隔状态用颜色区分通过：绿色008000未通过：红色FF0000待审核：原色当前页位置对于分页的表格，任何操作成功后都必须保持在当前页。如在当前窗口打开新页面后返回、删除成功、编辑成功后都必须保留在当前页。某一列内容过长使用截取前部一定数量的字符串+“”默认1. 在PageNote中标明

10、是否加载数据；2. 在PageNote中写明查询结果默认按照哪些字段排序；翻页控件1. 如果列表页面不需要翻页功能，则在界面上不画翻页控件，并在页面的PageNote中注明；2. 如果列表页面需要翻页功能，则在界面上显示翻页控件；6.4页面按钮命名统一按钮名称查询用于类似像查找、搜索、检索之类的操作用于像新建、新增、增加、创建之类的操作对话框按钮只能使用“确定、取消”，若出现三个按钮时根据业务动态调整表单中按钮提交：用于类似保存、确认、确定的操作；重置：用于将表单还原。返回：用于在当前页面打开新页面，并再次返回上一页面，使用。并放置在右上角位置。关闭：用于在弹出的新页面中关闭此面时使用。6.5

11、启动/登录界面 软件启动封面要高清晰度的图像 软件启动封面大小多为主流显示器分辨率的1/6大（微软标准） LOGO要弱化、系统名要强化图6-2 插图要有意义、象征性强 使用的字体大小要规范：一般正文使用12px，图标文字或标题使用14px 图像的格式宜使用gif和png 插图宜使用独立版权的图片 使用摄影图像时应该进行数位处理，比如做高斯模糊处理等 打开新增（修改）页面时，光标初始定位在第一个待输入的文本区。图6-36.6主界面 遵循的总体规则为：导航优先 、分层显示、功能按重要度排序。 主界面比例狭长型为宜，最佳比例为16: 界面配色要形成对比：背景和前景要对比，如背景复杂+前景简单，前景深

12、色+背景白色（或是浅色系） banner图标宜用平面图图6-4 色调使用：宜使用白色、浅色，如浅蓝色、浅绿色等；不建议大范围的使用深色系的纯色6.7导航 导航方式有纯头部导航、头部导航+左侧导航、头部+右侧导航、图标导航等 导航中显示主要功能，最多不超过8个；不常用功能加“更多”来显示 如果有下级菜单应该有下级箭头符号标示图6-5 导航中有选中状态和未选中状态要有区分，选中状态要突出、高亮或不同颜色显示 不同功能区间应该用线条分割或是用空白分割图6-6 菜单深度一般尽量不超过三层，菜单层次太多时，应给出返回主窗口、主分支的快捷链接。 目录树中，鼠标悬停于非叶子节点时出现子节点，减少用户点击数。

13、图6-7 将重要信息放在上边和左边，左上角最容易吸引用户的注意力。图6-86.8窗体布局 窗体进行最大化操作和最小化操作以及任意更改窗体大小时，页面排版均正常。窗体缩放时，窗体内的控件也要随窗体进行缩放。 窗体有最小化、最大、关闭按钮 控件对齐：控件水平排列成一行时，采用水平中对齐，控件间隔按要求基本保持一致；行与行之间间隔相同；窗体边界距离应大于行间间隔图6-9 控件对窗体的覆盖率以不高于75%为宜 按钮与窗体上、下、左、右之间的间距为14px，按钮之间的间距为6px图6-10 并列关系的控件间应该左对齐，同行的控件应该横向对齐，有从属关系的应该缩进。图6-116.9提示信息 提示消息尽量不

14、抢夺用户的操作权利，尽量不强制用户进行操作。通知类的消息（不需要用户反馈信息），不能强制用户进行操作。 图6-12（正反例对比） 用户进行危险性操作或破坏性操作、运行状态错误时，系统应该有简洁易懂、口语化的提示信息。一切含有计算机专业术语的提示信息都应该杜绝（尤其是诸如SQL错误，空指针异常等信息）。图6-13（正反例对比） 同一系统内同类交互信息（提示信息、询问信息、警告信息、错误信息）风格要统一，避免大量使用大红色。图6-14（反例） 耗时的操作系统有反馈信息，在进行长时间的操作时，要有等待光标、进度条或其他的可视反馈。图6-15 四种类型的交互信息的颜色选择a） 系统提示信息：提示需要让

15、用户注意的问题。用蓝色 b） 询问信息：如是否继续某个操作。用蓝色图6-16c） 警告信息：如提示某个安全问题。用橙色d） 错误信息：系统运行时出现的错误信息。用红色6.10文本框 如果单行文本框能够满足需求，就不采用多行文本框。图6-17（反例） 单行文本框不宜过长或过短，以可完整显示最大可输入内容为最佳。图6-18 多行文本框录入内容超过文本框宽度能够自动换行。图6-19图6-20（反例） 多行文本框录入内容超过页面显示区域，显示滚动条，可滚动显示。图6-21 交互信息页面的风格一致，最好有统一的交互页面。 不可修改的字段，统一使用灰色文字显示。图6-22 输入域无特殊说明一律左对齐（金额

16、可右对齐）。 搜索框显示搜索建议。图6-236.11弹出框/弹出窗口 交互不复杂的情况下，尽量不使用弹出窗口，而在当前页面完成交互。图6-24图6-25（反例） 弹出式窗口应尽量在不借助水平和垂直滚动条的情况下显示所有内容。图6-266.12下拉框/单选框/复选框 下拉框的长度与实际显示的数目一致，不能有空白行。下拉框不能超过20行，如果选项超过20个，应该在下拉框中加入滚动条，或者按照层级关系采用多个下拉框联动方式实现。 下拉框的宽度与实际需求匹配，不可出现某行内容显示不全的情况，也不可出现宽度大大超出需求的情况。图6-27 下拉框要有默认选项，如果确实不需要默认选项，则默认选中“请选择”或

17、者“-”。图6-28 列表中，单选框和复选框的不能同时运用在同一区域中。图6-29（反例） 下拉内容少于等于3项，用单选框代替。 界面空间拥挤时，使用下拉框而不用单选框。 如果下拉框可以输入，则下拉框中的内容要根据输入内容进行动态调整。图6-30 复选框中选项个数比较多，建议采取悬浮复选的形式图6-316.13列表页面 列表查询条件项文字信息垂直右对齐、输入框信息左对齐，中间使用中文全角标点符号 鼠标经过列表项有颜色变化，列表中每一条记录的尾部，都应该加上快捷按钮，方便对该条目进行相应地操作。列表项显示文字信息居左对齐，列之间采用空白分割，不用线条分割。图6-32 列表字段名信息能排序，有排序

18、箭头符号标示 翻页功能支持输入页码跳转，除下面情况外，其他情况必须进行分页处理：a） Grid显示的数据量几乎不增长且总数据量控制在某个范围内（建议以20条数据作为这个范围的分界点）。b） 实际业务明确要求不能分页图6-33 所有Grid列表必须指定自动扩展列，避免在高分辨率下出现下图所示的空白区域。图6-33（反例） 若存在分页，则Grid的高度设置以恰好完全显示一页数据为佳。图6-34（反例） 同一系统分页每页数据显示行数统一。 Grid可以添加序号列，但禁止定义序号列的列标题图6-356.14报表规范 报表结果页面显示的标题与功能要一致 查询结果的显示项应该都在黑色框 查询结果每列、行有明显分割线 报表结果的对其方式：文字左对齐，数字右对齐图6-366.15附件 可正常添加符合格式的附件（大小限制提示 进度条）（选择和保存合并为一步） 附件可正常打开和保存，附件名较长时可正常操作 直接输入错误的附件地址，保存时应给出恰当的提示信息。（加图） 附件打开和保存到本地时，文件名要显示原文件的文件名。6.16各类控件的标准大小图6-377.参考资料雅虎设计模式库SAP设计资料/www.sapdesignguild.org/resources/ux_glossary.asp#user_req界面设计规范01.YNedut6.0 界面原型设计全局规范.doc