Axure原型制作规范
一、 名词定义:
- Sitemap 导航图
- Widgets 组件
- Master 库
- Label 控件名
- Interactions 交互动作
- Annotations 注释
- Location and size 位置和尺寸
二、 Widgets规范
- 本站常用widgets规范:
- 命名规范:制定命名规范从而方便搜索和升级。
a. 全站使用,则命名方式为:Y+位置。
i. 全站顶部导航:统一为Yheader开头,包括各种宽导航、窄导航;
ii. 全站右侧边栏:统一以Yright开头,包括广告位、内容栏目等;
b. 单个产品使用,则命名方式为 产品名+位置
i. 空间左导航:y+产品名+left,例如yspaceleft
c. 页面子零件:命名方式为:Y+ 页面或产品+零件名。例如:
i. Tab:统一命名为Yspacetab
ii. 评论:统一命名为Ycomenticscomment
- 本站的widgets统一放在y.rplib文件中。在全局搜索中,输入y即可查看所有yoka widgets。
Y.rplib升级的问题:该文件放在局域网公共区中。每次更新完后,需要配备word说明文档。
- 自行制作widgets制作规范:
a) 最小化切分原则:在制作widgets时,遵循最小化原则,保证新的widgets能进行上下左右扩展、变化字体、增加新的数据项等。
b) 内部交互原则:如果widgets能内部完成交互,在制作时就要加上交互的命名,减少后期的操作。
c) 遵循设计规范原则:如果产品已经有成形的设计规范,那么自行制作的widgets必须大体遵循设计规范。制作新的widgets所使用的基本元素也要从设计规范产生。 - 必备widgets清单:
a) Yahoo提供的一套widgets;
b) 图标库;16,32,48三种尺寸的图标约200个;
c) Ajax.rplib 常见的ajax功能;
d) Y.rplib 针对本站的widgets; 升级方式:统一从公共区copy。每当有新的更新时,群发到邮件组的方式说明,并附上更新文件和最后更新时间。
三、 Master制作规范
1. 公共区域(具体指页头、页脚、导航条、页面内的公共元素):要求采用master,以减少修改量;
2. 对于位置固定的master,须设置为:Place in Background
3. 根据视觉规范,制作本站通用master。
四、 Sitemap制作规范
单个页面的命名规范:页面命名全部使用英文。格式为:页面内容+动作。例如: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_draftadd、del、edit 原则上从属于list页面。但必须遵守产品设计思路。另外,如果add在页面内完成(弹层或ajax区块)可不遵守此原则;
对于复杂业务,要求单独提供flow。展示页面的业务逻辑和判断条件。
五、 交互动作规范
控件命名:数据块+空间类型。由于页面内的组件无法在其他页面是不可见的,所以页面内的各个控件不需要带页面名字。例如:shopmap_pan代表店铺地图的图层。
交互动作规范:
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) 功能说明:说明该对象的主要完成的功能。
2) 交互效果:说明该对象的交互动作以及产生的交互结果;此处应该包含各种判断的说明。
3) 优先级:也可以理解为重要性。标明该控件在交互中的重要性。
4) 关联关系:包含触发方式(默认显示 / 被动触发),以及其他对象/数据的关联关系。对于同时拥有管理后台、用户后台的地方,需要说明数据关系。
5) 测试用例:提供测试方法及测试应该使用的数据。
6) 注意事项:注意事项。 可以针对各个特殊控件、组件自定义其他注释。
七、 整体制作要求
- 任何一个完整的产品,包括3部分,这3部分在原型需要独立展示:
1) 用户前端页面:
a) 用户在不登陆、登陆情况下进行浏览的页面;
b) 用户自行管理数据/帐户的页面。
2) 管理员的管理页:主要数据的增删改查、审核。
3) 数据统计功能:主要包括流量统计(IP、PV、UV、登陆用户数、活跃用户数)。 - 页面命名遵守上文提到的sitemap规范(add child page->rename)
- RP文件命名规范:y+产品名+特性+子项目+日期。例如:
1) 化妆品库新版首页:y_cosmentics_newindex_20100322.rp
2) 空间新版首页:y_space_newversion_20100210.rp - Tab使用:
1) 选项卡不要超过5个,最多不能超过7个。可以考虑使用2级选项卡来减少数量。
2) 被选中的选项卡和底下的区域要保持同色或接近同色。
3) 禁止在选项卡里面还使用滚动条; 页脚的pagenotes区域:默认使用两个字段,在任何文档中均需要保留着3个字段。
1) 功能说明。说明本页面主要的功能,以及与其他页面的关系。
2) 测试用例。说明本页面使用哪些数据进行常规测试和边界测试。
3) 注意事项。说明本页面在设计、制作、开发和测试中需要注意的事项。- 保真度(仅针对前端页面):
1) 创新型产品、产品改版:为了体现新产品的业务逻辑,或展示产品的改进功能,本类原型要求高保真原型。具体包含:
a) 所有页面有完整的链接,能顺利跳转、关闭;
b) 任何交互均有完整的流程和结束;
c) 关键功能、创新点要上色,不得使用自带的灰白色、黑色;
d) 按钮的点击变化能实时体现:文本框、输入框、文字、层的变化。
e) 使用条件判断,并根据条件做不同的提示。
f) 对于各个控件有完整的说明文档;
2) 传统产品、新增功能:可以使用一般的线框图,使用黑白灰原型。具体包括:
a) 对于页面大部无改进,可以直接截取静态图;
b) 对于无关或者传统功能,可以部分忽略跳转和交互效果;
c) 提供关键的条件判断。
d) 不要求完整的说明文档;
3) 具体保真度,还可以参考产品文档的使用人员的知识结构、工作经验、配合默契度等灵活掌握。 - 全部产品原型文档均需通过snv上传到共享中。
由axure生成页面原型说明文档:按照标准模板生成即可。
Axure原型制作规范的更多相关文章
- 登录界面之Axure原型制作
*****登录界面制作步骤***** 1.背景色:需要设定的背景色不知道色值,可以使用截图工具截取一小块粘贴到axure页面, 点击页面样式中的背景色左上角的取色器点击一下该色块,即可将背景色全部填充 ...
- Axure使用
(一) Axure rp的界面 1-主菜单工具栏 大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示. 2-主操作界面 绘制产品原型的操作区域,所有的用到的元件都拖到该区域. 3 ...
- Axure 入门
Axure RP是一个专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写. Axure RP是美国Axu ...
- axure工具的使用总结
---恢复内容开始--- Axure工具的使用 axure是什么? Axure RP是一款快速原型设计工具,它不需要任何编程或写代码基础,就可以设计出交互效果良好的产品原型,常用于互联网产品设计.网页 ...
- 交互原型设计软件axure rp学习之路(三)
(三)Axure rp元件的触发事件 l OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发.比如点击按钮. l OnMouseEnter(鼠标移入时): 鼠标进入 ...
- Axure Base 08 动态面板的用途
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于动态面板 动态面板是axure原 ...
- Axure教程:如何使用动态面板?动态面板功能详解
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板 动态面板是a ...
- AXURE RP8 - 实战手册 网站和APP原型制作案例精粹
扫码时备注或说明中留下邮箱 付款后如未回复请至https://shop135452397.taobao.com/ 联系店主
- AXURE在原型设计中的应用
转: http://uedc.163.com/2248.html 前言 什么是原型呢? 产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块.元素进行粗放式的排版和布局,深入 ...
随机推荐
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- 菜鸟Python学习笔记第一天:关于一些函数库的使用
2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- AutoMapper:Unmapped members were found. Review the types and members below. Add a custom mapping expression, ignore, add a custom resolver, or modify the source/destination type
异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 应用场景:ViewModel==>Mode映射的时候出错 AutoMappe ...
- MVC5+EF6+MYSQl,使用codeFirst的数据迁移
之前本人在用MVC4+EF5+MYSQL搭建自己的博客.地址:www.seesharply.com;遇到一个问题,就是采用ef的codefirst模式来编写程序,我们一般会在程序开发初期直接在glob ...
- 移动端1px边框
问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...
- git亲测命令
一.Git新建本地分支与远程分支关联问题 git checkout -b branch_name origin/branch_name 或者 git branch --set-upstream bra ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 问题记录:EntityFramework 一对一关系映射
EntityFramework 一对一关系映射有很多种,比如主键作为关联,配置比较简单,示例代码: public class Teacher { public int Id { get; set; } ...
- 【Machine Learning】决策树案例:基于python的商品购买能力预测系统
决策树在商品购买能力预测案例中的算法实现 作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本 ...