Axure原型制作规范

关于Axure原型的设计规范网上比较多，但是站在有效率的使用 Axure 这个基础上看，确实有 3 个需要着重注意的关键问题，分别是：

字体： 在原型页面的文字设计中，字体的选择方面建议使用苹方（ macOS ）或是微软雅黑（ Windows ） ，以便达到更好的显示效果。

配色： 在原型页面的色彩设计中，最好保持一致，无论是文本还是其他图形、图片不要使用太多非黑灰白 以外的色值。

排版： 在原型页面的结构设计中，要灵活的使用参考线、对齐、分布等功能，使页面内容具有良好的可读性。

Axure产品原型图的作用是将创意和需求直观的呈现出来。一份高质量的原型图可以减少产品需求分析和沟通的成本，同时可以减少产品研发过程中需求变动的风险。做高质量的原型图除了依靠自己的学习和能力，可以选择优质的大厂设计资源做参考，还可以利用更便捷的工具辅助，轻松完成更直观的交互效果。

组件制作规范

1、最小化切分原则:在制作组件时，遵循最小化原则，保证新的组件能进行上下左右扩展、变化字体、增加新的数据项等。

2、内部交互原则: 如果组件能内部完成交互，在制作时就要加上交互的命名，减少后期的操作。

3、避循设计规范原则:如果产品已经有成形的设计规范，那么自行制作的组件必须大体遵循设计规范。制作新的组件所使用的基本元素也要从设计规范产生。

库制作规范

1、公共区域(具体指页头、页脚、导航条、页面内的公共元素):要求采用库，以减少修改量

2、对于位置固定的库，须设置为: Place in Background

3、根据视觉规范，制作通用库

一、 名词定义：
　　1. Sitemap 导航图
　　2. Widgets 组件
　　3. Master 库
　　4. Label 控件名
　　5. Interactions 交互动作
　　6. Annotations注释
　　7. Location and size 位置和尺寸

二、 Widgets规范
　　1. 本站常用widgets规范：
　　　1) 命名规范：制定命名规范从而方便搜索和升级。
　　　　a) 全站使用，则命名方式为：Y+位置。
　　　　　　i. 全站顶部导航：统一为Yheader开头，包括各种宽导航、窄导航；
　　　　　　ii. 全站右侧边栏：统一以Yright开头，包括广告位、内容栏目等；
　　　　b) 单个产品使用，则命名方式为 产品名+位置
　　　　　　i. 空间左导航：y+产品名+left，例如yspaceleft
　　　　c) 页面子零件：命名方式为：Y+ 页面或产品+零件名。例如：
　　　　　　i. Tab：统一命名为Yspacetab
　　　　　　ii. 评论：统一命名为Ycomenticscomment
　　　2) 本站的widgets统一放在y.rplib文件中。在全局搜索中，输入y即可查看所有yoka widgets。
　　　3) Y.rplib升级的问题：该文件放在局域网公共区中。每次更新完后，需要配备word说明文档。
　　2. 自行制作widgets制作规范：
　　　a) 最小化切分原则：在制作widgets时，遵循最小化原则，保证新的widgets能进行上下左右扩展、变化字体、增加新的数据项等。
　　　b) 内部交互原则：如果widgets能内部完成交互，在制作时就要加上交互的命名，减少后期的操作。
　　　c) 遵循设计规范原则：如果产品已经有成形的设计规范，那么自行制作的widgets必须大体遵循设计规范。制作新的widgets所使用的基本元素也要从设计规范产生。
　　3. 必备widgets清单：
　　　a) Yahoo提供的一套widgets；
　　　b) 图标库；16,32,48三种尺寸的图标约200个；
　　　c) Ajax.rplib 常见的ajax功能；
　　　d) Y.rplib 针对本站的widgets；
　　4. 升级方式：统一从公共区copy。每当有新的更新时，群发到邮件组groupname@website.com的方式说明，并附上更新文件和最后更新时间。

三、 Master制作规范
　　1. 公共区域（具体指页头、页脚、导航条、页面内的公共元素）：要求采用master，以减少修改量；
　　2. 对于位置固定的master，须设置为：Place in Background
　　3. 根据视觉规范，制作本站通用master。

四、 Sitemap制作规范
　　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_draft
　　2. add、del、edit 原则上从属于list页面。但必须遵守产品设计思路。另外，如果add在页面内完成（弹层或ajax区块）可不遵守此原则；例如：下图是某相册的页面：
　　3. 对于复杂业务，要求单独提供flow。展示页面的业务逻辑和判断条件。

五、 交互动作规范
　　1. 控件命名：数据块+空间类型。由于页面内的组件无法在其他页面是不可见的，所以页面内的各个控件不需要带页面名字。例如：shopmap_pan代表店铺地图的图层。

　　2. 交互动作规范：
　　　　1) 对于文本型内容的链接：在文字上面增加一个image map region，在该层上面加链接。
　　　　2) Axure的交互动作总有如下几种：
　　　　a) Onclick
　　　　b) Onmouseenter鼠标的指针移动到对象上
　　　　c) Onmouseout 鼠标的指针移动出对象外
　　　　d) Onkeyup
　　　　e) Onfocus 鼠标的指针进入文字输入状态（获得焦点）
　　　　f) Onlostfocus 鼠标的指针离开文字输入状态 （失去焦点）
　　　　g) Onchange
　　　　h) Onpageload
　　　　3) 对于同一个位置的条件判断，要求在按钮上如下提示，以方便技术和制作人员阅读。对于高保真的原型，则应该加上数据判断，避免这种提示。
　　　下图：简单判断
　　　下图：高级判断：

六、 Annotations注释规范
　　1. 注释的内容：一个完整的注释需要包含以下说明：
　　　　1) 功能说明：说明该对象的主要完成的功能。
　　　　2) 交互效果：说明该对象的交互动作以及产生的交互结果；此处应该包含各种判断的说明。
　　　　3) 优先级：也可以理解为重要性。标明该控件在交互中的重要性。
　　　　4) 关联关系：包含触发方式（默认显示 / 被动触发），以及其他对象/数据的关联关系。对于同时拥有管理后台、用户后台的地方，需要说明数据关系。
　　　　5) 测试用例：提供测试方法及测试应该使用的数据。
　　　　6) 注意事项：注意事项。
　　2. 可以针对各个特殊控件、组件自定义其他注释。

七、 整体制作要求
　　1. 任何一个完整的产品，包括3部分，这3部分在原型需要独立展示：
　　　　1) 用户前端页面：
　　　　　　a) 用户在不登陆、登陆情况下进行浏览的页面；
　　　　　　b) 用户自行管理数据/帐户的页面。
　　　　2) 管理员的管理页：主要数据的增删改查、审核。
　　　　3) 数据统计功能：主要包括流量统计（IP、PV、UV、登陆用户数、活跃用户数）。
　　2. 页面命名遵守上文提到的sitemap规范(add child page->rename)
　　3. RP文件命名规范：y+产品名+特性+子项目+日期。例如：
　　　　1) 化妆品库新版首页：y_cosmentics_newindex_20100322.rp
　　　　2) 空间新版首页：y_space_newversion_20100210.rp
　　4. Tab使用：
　　　　1) 选项卡不要超过5个，最多不能超过7个。可以考虑使用2级选项卡来减少数量。
　　　　2) 被选中的选项卡和底下的区域要保持同色或接近同色。
　　　　3) 禁止在选项卡里面还使用滚动条；
　　5. 页脚的pagenotes区域：默认使用两个字段，在任何文档中均需要保留着3个字段。
　　　　1) 功能说明。说明本页面主要的功能，以及与其他页面的关系。
　　　　2) 测试用例。说明本页面使用哪些数据进行常规测试和边界测试。
　　　　3) 注意事项。说明本页面在设计、制作、开发和测试中需要注意的事项。

　　6. 保真度（仅针对前端页面）：
　　　　1) 创新型产品、产品改版：为了体现新产品的业务逻辑，或展示产品的改进功能，本类原型要求高保真原型。具体包含：
　　　　　　a) 所有页面有完整的链接，能顺利跳转、关闭；
　　　　　　b) 任何交互均有完整的流程和结束；
　　　　　　c) 关键功能、创新点要上色，不得使用自带的灰白色、黑色；
　　　　　　d) 按钮的点击变化能实时体现：文本框、输入框、文字、层的变化。
　　　　　　e) 使用条件判断，并根据条件做不同的提示。
　　　　　　f) 对于各个控件有完整的说明文档；
　　　　2) 传统产品、新增功能：可以使用一般的线框图，使用黑白灰原型。具体包括：
　　　　　　a) 对于页面大部无改进，可以直接截取静态图；
　　　　　　b) 对于无关或者传统功能，可以部分忽略跳转和交互效果；
　　　　　　c) 提供关键的条件判断。
　　　　　　d) 不要求完整的说明文档；
　　　　3) 具体保真度，还可以参考产品文档的使用人员的知识结构、工作经验、配合默契度等灵活掌握。
　　7. 全部产品原型文档均需通过snv上传到共享中。
　　8. 由axure生成页面原型说明文档：按照标准模板生成即可。

　　　结语：工欲善其事必先利其器。axure是一个工具，帮助我们更好地表达。但是，没有必要为了做一个完美的axure文件（rp文件），而浪费大量的精力。我们追求不是完美的原型，而是好用的产品，清晰的结构，流畅的交互。