原型规范Word格式.docx
《原型规范Word格式.docx》由会员分享，可在线阅读，更多相关《原型规范Word格式.docx（33页珍藏版）》请在冰豆网上搜索。
播放类控件
作用：
播放按钮的推荐控件和参数。
播放控件V1.0
正向播放
图标尺寸：
24X24
暂停
停止
反向播放
下一片段
上一片段
上一帧图像
下一帧图像
9
快进/慢放
10
声音打开/静音
菜单和按钮
常用菜单和按钮推荐和参数。
菜单和按钮控件V1.0
字体选择
颜色选择
下划线选择
线样式
字体样式
按钮尺寸
按钮尺寸要求：
大85X32中56X26小44X22
按钮+文字
大按钮85X35（待定）
表单元素
提供表单及元素的推荐尺寸
表单元素控件库V1.0
文字标签
下拉列表
多项选择
单选按钮
单选按钮组
复选框
复选框组
图表和表格
提供图标和表格基本样式
图表和表格V1.0
数据表格
线形图
柱状图
饼图
常用图标控件
界面中常用的按钮图标。
各类图标控件V1.0
窗口控制图标
尺寸100X25最小化、缩放、关闭
搜索图标
尺寸24X24
关闭/删除
尺寸24X24
刷新
笔
箭头
添加
放大/缩小
加载中
设置
11
半透明层
12
全屏
13
文件
14
禁止/静音
15
关于
弹出面板
提供弹出面板（窗口）的基本样式。
弹出面板V1.0
可选标题尺寸400X35
文字13微软雅黑+关闭
底部弹出面板
顶部弹出面板
左边弹出面板
右边弹出面板
浮层窗口尺寸
提供弹出窗口的尺寸规格。
浮层尺寸V1.0
较轻量交互行为
最小尺寸350×
150最大350×
350；
宽度固定，高度随内容自动伸展，若内容高度超过350请选择其他交互模式
轻量交互行为
最小尺寸450×
170最大450×
450；
宽度固定，高度随内容自动伸展，若内容高度超过450请选择其他交互模式
有复杂交互行为
最小尺寸650×
250最大尺寸650×
提示性浮层
200×
60；
用以提示、反馈性的浮局
视频窗口尺寸
提供视频窗口的尺寸规格
视频窗口尺寸V1.0
小窗口QCIF
比例4：
3/16：
9
中窗口
大窗口
9/填充
图片尺寸
提供引用界面的尺寸规格（待定）
1.0
头像
XL200×
150
L160×
120
M100×
100
S80×
80
XS60×
60
Thumbnail40×
40
标识图
L150×
M120×
S100×
XS80×
常用图形
XL180×
240
200
160
S90×
XS100×
75
相册与照片
占位尺寸比例4：
3
L600×
600
M300×
300
S150×
Thumbnail150×
3.2常用组件
能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本，实现界面的一致性，规范性，突出界面的风格特征。
布局
使用栅格作为布局的摆放参考。
栅格布局V1.0
12栅格横向
1024（W）85-15
20栅格横向
1024（W）50-15
12栅格横纵
1024（W）X768（H）75-10
示例布局
根据栅格进行布局的设计
示例：
日期选择
提供日期选择的原型组件
日期选择V1.0
单月日期选择
年月日时分秒
年月日
单月日期范围
横向两月选择
起始时间至截至时间的年月日时分秒
起始时间至截至时间的年月日
导航
提供导航页签的组件。
导航V1.0
面包屑
折叠面板
分页
数据项分页；
搜索分页；
页签
模块页签；
导航页签；
导航栏
顶部导航栏；
左侧导航栏；
进度指示条；
表单处理
对表单等数据的多种处理方式，如搜索，格式化、总览和浏览。
表单过滤项
搜索类
实时过滤
搜索类（无例子）
表单自动填写
列表排序
表单类（无例子）
树状列表
提供树状列表组件的包括机构树、搜索及相关操作。
树状列表V1.0
说明（WxH）
列表规格
尺寸210X600（待定）
图标规格
尺寸16X16
滚动条规格
尺寸18X600
4.原型制作
4.1流程图
能够清晰表达用户用例，通过一个或多个逻辑完整、清晰流程图进行梳理和规范流程。
图4-1
接处警辅助流程泳道图：
4.2关键页面
4.3辅助页面
4.4原型注释
对界面的元素功能进行注释、具体的交互方式、各种条件下的状态变化、报错结果及展示方式以及操作结果等方面。
5.原型发布
5.1原型文档
对原型的更新和修改，及功能描述进行记录的文档。
5.2更新发布
更新发布后，方便研发和测试等同时即时获取最新版本原型。
内容：
AXURE需要根据需求，不选的完善和修改。
产品经理一旦更新原型，所有人可通过URL地址访问，获取最新原型。
同时可查看发布的不同版本和修改内容。
建议采用内网环境进行发布，使用Windows7自带的IIS进行发布。
访问的地址距离，例如：
http:
//192.168.7.89/XXX产品1.0/；
搭建的具体方式咨询网络工程师即可。
6.全局规范
6.1表单对齐
标签内容右对齐，控件左对齐，各控件的宽度尽量保持一致。
如下图：
图6-1 表单对齐方式
6.2页面、操作提示性描述
提示性描述文字原则：
精确、精炼。
下表此项目标准的提示信息：
提示类型
提示信息
删除前确认
您确定要删除吗？
删除成功
删除成功！
删除失败
数据已被使用提示：
删除失败！
数据被使用
其他类型的提示使用：
系统异常
编辑成功
更新成功！
编辑提交成功
编辑失败
数据重复时提示：
更新失败！
XX已存在
其他类型时提示：
添加成功
添加成功！
添加失败
数据已重复时提示：
添加失败！
XXX已存在
其他的类型提示：
系统异常。
上传成功
上传成功!
用于上传文件类的提示
上传失败
格式不正确时提示：
格式错误！
大小超过限制时提示：
文件大小超过限制！
上传失败！
查询在数据返回以前（表格）
查询在数据返回后若为空时
必填字段需要标明
输入的字段如果有特殊字符要求的，需要说明
有长度要求的需要标明
添加界面的下拉框值需要写全
用到的所有值在实体建模的实体详细描述中全部标注
16
“添加/编辑”界面上如有“返回”按钮，如果返回有特殊要求，需在按钮上写明具体要求
17
添加成功后，如果需要刷新页面重新添加，要在保存按钮上做效果
6.3数据表格设计规范
项目
规范说明
对齐方式
居中使用场景：
用于内容字符长度在业务范围内相对固定，变化不大的内容（类似序号、操作、时间、状态、姓名、性别等）
左对齐使用场景：
用于内容字符长度变化很快，（类似新闻＼通知的标题）
右对齐使用场景：
用于像金额数据项的显示．
某一列若加链接
必须使用超链接样式，
操作列统一命名规范
编辑：
（用于打开新页面或对话框进行数据的编辑，对修改、更新、更改之类的统一使用“编辑”）
删除：
（从数据库物理或逻辑删除）
移除：
（从一个集合中移除）
查看：
（用于打开新页面或对话框查询数据详细情况）
注：
在原型设计时，各操作之间使用半个汉字的间隔
状态用颜色区分
通过：
绿色[008000]
未通过：
红色[FF0000]
待审核：
原色
当前页位置
对于分页的表格，任何操作成功后都必须保持在当前页。
如在当前窗口打开新页面后返回、删除成功、编辑成功后都必须保留在当前页。
某一列内容过长
使用截取前部一定数量的字符串+“…”
默认
1.在PageNote中标明是否加载数据；
2.在PageNote中写明查询结果默认按照哪些字段排序；
翻页控件
1.如果列表页面不需要翻页功能，则在界面上不画翻页控件，并在页面的PageNote中注明；
2.如果列表页面需要翻页功能，则在界面上显示翻页控件；
6.4页面按钮命名
统一按钮名称
查询
用于类似像查找、搜索、检索之类的操作
用于像新建、新增、增加、创建之类的操作
对话框按钮
只能使用“确定、取消”，若出现三个按钮时根据业务动态调整
表单中按钮
提交：
用于类似保存、确认、确定的操作；
重置：
用于将表单还原。
返回：
用于在当前页面打开新页面，并再次返回上一页面，使用。
并放置在右上角位置。
关闭：
用于在弹出的新页面中关闭此面时使用。
6.5启动/登录界面
●软件启动封面要高清晰度的图像
●软件启动封面大小多为主流显示器分辨率的1/6大（微软标准）
●LOGO要弱化、系统名要强化
图6-2
●插图要有意义、象征性强
●使用的字体大小要规范：
一般正文使用12px，图标文字或标题使用14px
●图像的格式宜使用gif和png
●插图宜使用独立版权的图片
●使用摄影图像时应该进行数位处理，比如做高斯模糊处理等
●打开新增（修改）页面时，光标初始定位在第一个待输入的文本区。
图6-3
6.6主界面
●遵循的总体规则为：
导航优先、分层显示、功能按重要度排序。
●主界面比例狭长型为宜，最佳比例为16:
●界面配色要形成对比：
背景和前景要对比，如背景复杂+前景简单，前景深色+背景白色（或是浅色系）
●banner图标宜用平面图
图6-4
●色调使用：
宜使用白色、浅色，如浅蓝色、浅绿色等；
不建议大范围的使用深色系的纯色
6.7导航
●导航方式有纯头部导航、头部导航+左侧导航、头部+右侧导航、图标导航等
●导航中显示主要功能，最多不超过8个；
不常用功能加“更多…”来显示
●如果有下级菜单应该有下级箭头符号标示
图6-5
●导航中有选中状态和未选中状态要有区分，选中状态要突出、高亮或不同颜色显示
●不同功能区间应该用线条分割或是用空白分割
图6-6
●菜单深度一般尽量不超过三层，菜单层次太多时，应给出返回主窗口、主分支的快捷链接。
●目录树中，鼠标悬停于非叶子节点时出现子节点，减少用户点击数。
图6-7
●将重要信息放在上边和左边，左上角最容易吸引用户的注意力。
图6-8
6.8窗体布局
●窗体进行最大化操作和最小化操作以及任意更改窗体大小时，页面排版均正常。
窗体缩放时，窗体内的控件也要随窗体进行缩放。
●窗体有最小化、最大、关闭按钮
●控件对齐：
控件水平排列成一行时，采用水平中对齐，控件间隔按要求基本保持一致；
行与行之间间隔相同；
窗体边界距离应大于行间间隔
图6-9
●控件对窗体的覆盖率以不高于75%为宜
●按钮与窗体上、下、左、右之间的间距为14px，按钮之间的间距为6px
图6-10
●并列关系的控件间应该左对齐，同行的控件应该横向对齐，有从属关系的应该缩进。
图6-11
6.9提示信息
●提示消息尽量不抢夺用户的操作权利，尽量不强制用户进行操作。
通知类的消息（不需要用户反馈信息），不能强制用户进行操作。
图6-12（正反例对比）
●用户进行危险性操作或破坏性操作、运行状态错误时，系统应该有简洁易懂、口语化的提示信息。
一切含有计算机专业术语的提示信息都应该杜绝（尤其是诸如SQL错误，空指针异常等信息）。
图6-13（正反例对比）
●同一系统内同类交互信息（提示信息、询问信息、警告信息、错误信息）风格要统一，避免大量使用大红色。
图6-14（反例）
●耗时的操作系统有反馈信息，在进行长时间的操作时，要有等待光标、进度条或其他的可视反馈。
图6-15
●四种类型的交互信息的颜色选择
a）系统提示信息：
提示需要让用户注意的问题。
用蓝色
b）询问信息：
如是否继续某个操作。
用蓝色
图6-16
c）警告信息：
如提示某个安全问题。
用橙色
d）错误信息：
系统运行时出现的错误信息。
用红色
6.10文本框
●如果单行文本框能够满足需求，就不采用多行文本框。
图6-17（反例）
●单行文本框不宜过长或过短，以可完整显示最大可输入内容为最佳。
图6-18
●多行文本框录入内容超过文本框宽度能够自动换行。
图6-19
图6-20（反例）
●多行文本框录入内容超过页面显示区域，显示滚动条，可滚动显示。
图6-21
●交互信息页面的风格一致，最好有统一的交互页面。
●不可修改的字段，统一使用灰色文字显示。
图6-22
●输入域无特殊说明一律左对齐（金额可右对齐）。
●搜索框显示搜索建议。
图6-23
6.11弹出框/弹出窗口
●交互不复杂的情况下，尽量不使用弹出窗口，而在当前页面完成交互。
图6-24
图6-25（反例）
●弹出式窗口应尽量在不借助水平和垂直滚动条的情况下显示所有内容。
图6-26
6.12下拉框/单选框/复选框
●下拉框的长度与实际显示的数目一致，不能有空白行。
下拉框不能超过20行，如果选项超过20个，应该在下拉框中加入滚动条，或者按照层级关系采用多个下拉框联动方式实现。
●下拉框的宽度与实际需求匹配，不可出现某行内容显示不全的情况，也不可出现宽度大大超出需求的情况。
图6-27
●下拉框要有默认选项，如果确实不需要默认选项，则默认选中“请选择”或者“-”。
图6-28
●列表中，单选框和复选框的不能同时运用在同一区域中。
图6-29（反例）
●下拉内容少于等于3项，用单选框代替。
●界面空间拥挤时，使用下拉框而不用单选框。
●如果下拉框可以输入，则下拉框中的内容要根据输入内容进行动态调整。
图6-30
●复选框中选项个数比较多，建议采取悬浮复选的形式
图6-31
6.13列表页面
●列表查询条件项文字信息垂直右对齐、输入框信息左对齐，中间使用中文全角标点符号
●鼠标经过列表项有颜色变化，列表中每一条记录的尾部，都应该加上快捷按钮，方便对该条目进行相应地操作。
列表项显示文字信息居左对齐，列之间采用空白分割，不用线条分割。
图6-32
●列表字段名信息能排序，有排序箭头符号标示
●翻页功能支持输入页码跳转，除下面情况外，其他情况必须进行分页处理：
a）Grid显示的数据量几乎不增长且总数据量控制在某个范围内（建议以20条数据作为这个范围的分界点）。
b）实际业务明确要求不能分页
图6-33
⏹所有Grid列表必须指定自动扩展列，避免在高分辨率下出现下图所示的空白区域。
图6-33（反例）
●若存在分页，则Grid的高度设置以恰好完全显示一页数据为佳。
图6-34（反例）
●同一系统分页每页数据显示行数统一。
●Grid可以添加序号列，但禁止定义序号列的列标题
图6-35
6.14报表规范
●报表结果页面显示的标题与功能要一致
●查询结果的显示项应该都在黑色框
●查询结果每列、行有明显分割线
●报表结果的对其方式：
文字左对齐，数字右对齐
图6-36
6.15附件
●可正常添加符合格式的附件（大小限制提示进度条）（选择和保存合并为一步）
●附件可正常打开和保存，附件名较长时可正常操作
●直接输入错误的附件地址，保存时应给出恰当的提示信息。
（加图）
●附件打开和保存到本地时，文件名要显示原文件的文件名。
6.16各类控件的标准大小
图6-37
7.参考资料
雅虎设计模式库
SAP设计资料
//www.sapdesignguild.org/resources/ux_glossary.asp#user_req
界面设计规范
01.YNedut6.0界面原型设计全局规范.doc
升级会员 