AXURE原型制作规范V10.docx

AXURE原型制作规范V10.docx

《AXURE原型制作规范V10.docx》由会员分享，可在线阅读，更多相关《AXURE原型制作规范V10.docx（10页珍藏版）》请在冰豆网上搜索。

AXURE原型制作规范V10

AXURE原型制作规范V1.0

AXURE8.0原型制作规范

文档修订记录

序号

版本号

修订日期

修订概述

修订人

审批人

备注

1

V1.0

1概述

1.1简述

此文档主要从原型设计制作的管理角度出发，根据AXURE8的特点，描述系统原型设计制作时应该遵守的规范和标准。

1.2目标群体

此文档目标群体为神东需求、设计、开发、以及测试的技术人员。

1.3范围

此文档适用于所有神东自主研发的软件项目。

1.4名词定义

Ø1.Sitemap（pages）导航图

Ø2.Widgets组件

Ø3.Master库

Ø4.Label控件名

Ø5.Interactions交互动作

Ø6.Annotations（notes）注释

Ø7.Locationandsize位置和尺寸

1.5标准原则

原型制作要遵循《中国神华神东信息系统建设规范_04_界面规范》，同时还要具备以下原则：

Ø流程：

可完整的模拟用户体验流程，有可逆流程

Ø逻辑：

清晰明确，判断有提示

Ø界面：

规范，整洁

Ø说明：

明确，易理解

2制作规范

2.1文件命名规范

序号

规范

备注

2.1.1

RP文件统一新建文件夹，命名为【name.RP】文件，存放各阶段版本的RP文件，各版本RP文件必须后缀日期和序列号，系统名+子项目+日期+序号，如****_web_2017102201.rp

2.1.2

所有导出的HTML文件存放文件夹命名为：

【name.file】,所导出的文件夹按照日期命名，如：

如****_web_2017102201

2.2Widgets规范

Ø命名规范：

序号

规范

备注

2.2.1

全站使用，则命名方式为：

分类+位置。

Ø全站顶部导航：

统一为Allheader开头，包括各种宽导航、窄导航；

Ø全站右侧边栏：

统一以Allright开头，包括宣传位、内容栏目等；

2.2.2

单个模块使用，则命名方式为模块名+位置

i.空间左导航：

产品名+left，例如yspaceleft

2.2.3

页面子零件：

命名方式为：

页面或模块+零件名。

例如：

Tab：

统一命名为spacetab

2.3Master制作规范

序号

规范

备注

2.3.1

公共区域（具体指页头、页脚、导航条、页面内的公共元素）：

要求采用master，以减少修改量；

2.3.2

对于位置固定的master，须设置为：

PlaceinBackground

2.3.3

根据神东的视觉规范，制作系统通用master。

2.4Sitemap（pages）制作规范

序号

规范

备注

2.4.1

单个页面的命名规范：

页面命名全部使用英文。

格式为：

页面内容+动作。

例如：

article_add

　　　1）顶层页面：

　　　　　a）前端页面统一以user为顶层页，表示这是用户使用的页面。

　　　　　b）使用admin为管理员的管理页；

　　　　　c）使用statistics为数据统计功能页；

　　　2）子页面：

　　　　　a）汇总页：

list

　　　　　b）浏览页：

view

　　　　　c）增加数据：

add

　　　　　d）修改数据：

edit

　　　　　e）修改分类：

recatalog

　　　　　f）创建数据：

create

　　　　　g）重新命名：

rename

　　　3）扩展：

子页面的命名可以扩展，格式为：

页面内容+动作+名称。

例如：

article_add_draf

2.4.2

add、del、edit原则上从属于list页面。

但必须遵守产品设计思路。

另外，如果add在页面内完成（弹层或ajax区块）可不遵守此原则

2.4.3

对于复杂业务，要求单独提供flow。

展示页面的业务逻辑和判断条件

2.4.5

一个业务流程的所有页面，都必须在sitemap创建页面文件夹，便于管理页面。

2.4.6

业务流程中所涉及的二级或三级页面，可以用子页面表示，以显示页面级别。

2.5交互动作规范

ØAxure的交互动作总有如下几种：

a）Onclick单击

b）Onmouseenter鼠标的指针移动到对象上

c）Onmouseout鼠标的指针移动出对象外

d）Onkeyup

e）Onfocus鼠标的指针进入文字输入状态（获得焦点）

f）Onlostfocus鼠标的指针离开文字输入状态（失去焦点）

g）Onchange

h）Onpageload

i）OnLoad在加载时（可以应用于全部部件）

j）OnRotate在旋转时（可以应用于形状、图像、线条、热区）

k）OnSelectedChange在选择状态改变时（应用于形状、图像、线条、热区、复选框、单选框、树）

l）OnSelected在被选择时（应用于形状、图像、线条、热区、复选框、单选框、树）

m）OnUnselected在被取消选择时（应用于形状、图像、线条、热区、复选框、单选框、树）

n）OnResize在重新设置大小时（可以应用于动态面板）

o）OnItemResize在行项目重新设置大小时（可以应用于中继器）

序号

规范

备注

2.5.1

控件命名：

数据块+空间类型。

由于页面内的组件无法在其他页面是不可见的，所以页面内的各个控件不需要带页面名字。

例如：

shopmap_pan代表店铺地图的图层。

2.5.2

条件判断：

对于同一个位置的条件判断，要求在按钮上提示，以方便相关人员阅读。

对于高保真的原型，则应该加上数据判断，避免这种提示。

2.6Annotations（notes）注释规范

序号

规范

备注

2.6.1

控件对象的注释的内容：

一个完整的注释需要包含以下说明：

1）功能说明：

说明该对象的主要完成的功能。

2）交互效果：

说明该对象的交互动作以及产生的交互结果；此处应该包含各种判断的说明。

3）优先级：

也可以理解为重要性。

标明该控件在交互中的重要性。

4）关联关系：

包含触发方式（默认显示/被动触发），以及其他对象/数据的关联关系。

对于同时拥有管理后台、用户后台的地方，需要说明数据关系。

5）测试用例：

提供测试方法及测试应该使用的数据。

6）注意事项：

注意事项。

2.6.2

可以针对各个特殊控件、组件自定义其他注释。

2.6.3

页面注释的内容，需要一下着3个字段。

1）功能说明。

说明本页面主要的功能，以及与其他页面的关系。

2）测试用例。

说明本页面使用哪些数据进行常规测试和边界测试。

3）注意事项。

说明本页面在设计、制作、开发和测试中需要注意的事项。

2.7Tab使用规范

序号

规范

备注

2.7.1

选项卡不要超过5个，最多不能超过7个。

可以考虑使用2级选项卡来减少数量。

2.7.2

被选中的选项卡和底下的区域要保持同色或接近同色。

2.7.3

禁止在选项卡里面还使用滚动条；

2.8低保真度规范

传统系统、新增功能：

可以使用一般的线框图，使用黑白灰原型。

序号

规范

备注

2.8.1

对于页面大部无改进，可以直接截取静态图；

2.8.2

对于无关或者传统功能，可以部分忽略跳转和交互效果；

2.8.3

提供关键的条件判断。

2.8.4

不要求完整的说明文档

2.9高保真度规范

前端页面要求高保真原型，面向用户使用的管理页面，用户、领导关心的重点页面要求高保真原型。

序号

规范

备注

2.9.1

所有页面有完整的链接，能顺利跳转、关闭；

2.9.2

任何交互均有完整的流程和结束；

2.9.3

关键功能、创新点要上色，不得使用自带的灰白色、黑色；

2.9.4

按钮的点击变化能实时体现：

文本框、输入框、文字、层的变化；

2.9.5

使用条件判断，并根据条件做不同的提示；

2.9.6

对于各个控件有完整的说明文档；

2.10文档规范

序号

规范

备注

2.10.1

全部系统的原型文档均需传到云协作中，并在记录项目全生命周期表记录。

2.10.2

按照Axure标准模板生成页面原型说明文档