Web页面axure设计规范精简版.docx

Web页面axure原型设计规范目录一．基础规范11.页面规范12.axure基础元件命名13.交互标注24.用例说明25.文字编排与设计2二．规范细则31.元件设置32.页面布局43.弹出层设置6三．其它规范71.页面拆分原则72.页面注释：73.变量84.变更履历8一．基础规范1.页面规范网页宽度统一采用990px。原型采用网格布局，原型摆放位置与网格辅助线对应(10的倍数)， 设置后效果如下图：2.axure基础元件命名2.1有触发事件的元件（动作发起者）大写英文字母_部件功能属性_部件名称A_导航栏_首页按钮2.2无触发事件的元件（动作接受者，被显示）小写英文字母_部件所在区域_部件名称a_首页内容_首页背景（除了动作发起者其它都用小写）3.交互标注 3.1描述填写对部件进行“交互动作”加“链接指向”进行的说明3.2可交互状态填写对部件所有“交互状态”的说明3.3字符限制 “填写对部件是否有字符限制或者具体如何限制的说明 3.4目标发布到对部件所属项目版本进行说明3.5日期 对部件修改日期进行说明4.用例说明 多用例场景用例名称需明确表达用例发生前提。5.文字编排与设计5.1文字字体无特殊需求时通常为Arial(默认)5.2文字颜色通常字体颜色仅限以下四种，如有需要，尽量采用统一字体的不同字族网站主文字颜色为#333333可点击项颜色为#0066cc着重显示的字体颜色为#FF0000不可用元素字体颜色为#999999二．规范细则1.元件设置1.1文本框宽度：25px,长度：内容较少的长度为180px(默认)内容较多的长度自行设置，多个内容较多的文本框长度保持一致文本框内字体为Arial 13号字1.2按钮按钮宽度为40px,长度为100px,长度可根据显示内容自行制定使用规则： 蓝色、橙色为活动按钮，可根据需求选择 深灰色为次要功能按钮浅灰色为不可用按钮1.3表格表格大小：根据内容自行制定，每行高度保持一致显示效果如下图：1.4动态面板大小：根据需求自行定义，不同页面相同功能的面板大小一致命名：动态面板命名能够明确表达其作用。多状态动态面板状态名能清晰提现所对应的状态。1.5母板多页面通用部分（如头部、左侧菜单栏等）设定为模板，模板类型设为背景母版母版-右键-类型-转为背景母版如无特殊需要，不使用自定义元件。2.页面布局表现形式如下图：3.弹出层设置3.1 弹出层位置说明需要居中的弹出层设定为浏览器居中悬浮效果，设置方法如下图：1.动态面板-右键-编辑内容-固定到浏览器2.水平固定、垂直固定设为居中3.2 确认框规则大小：宽460px，长180px标题字体：Arial 13号内容字体：Arial 16号显示坐标：400，按实际需求确定3.3 提示框规则大小：宽460px，长180px标题字体：Arial 13号内容字体：Arial 16号显示坐标：400，按实际需求确定3.4 提示框（自消失）规则大小：宽380px，长60px内容字体：Arial 16号显示时间：3秒显示坐标：400，按实际需求确定3.5 说明类提示框规则大小：宽300px，长100px内容字体：Arial 16号3.6 错误信息提示规则大小：宽25px，长263px(内容过长时可自行制定)内容字体：Arial 13号三．其它规范1.页面拆分原则模块文件夹下级页面为互不相同的显示页。交互层数过多时（一般为三层）应拆分为多个页面。拆分后的页面作为文件夹使用，不含任何内容，拆分后的页面已子页面的形式添加到该页。2.页面注释：每次制作、修改原型时需添加页面注释，格式如下图：3.变量变量使用：同一变量在不同的功能交互下不能重复调用、赋值。如有需要，需新建其它变量，变量名称要能清楚表达其使用方式及作用，不可使用aaa,111等无意义的名称。4.变更履历在建立原型时增加变更履历页面，并在每次修改完成后添加修改履历，内容如下图：Web页面原型设计规范8