Axure原型制作规范

news/2024/11/3 1:30:34/

Axure原型制作规范


一、 名词定义:
  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文件),而浪费大量的精力。我们追求不是完美的原型,而是好用的产品,清晰的结构,流畅的交互。

 

 


美视佛雷斯羽毛球俱乐部
济南高新区国际会展中心E区五层
下午3点30到5点30


http://www.ppmy.cn/news/529759.html

相关文章

Git进阶系列 | 5. Rebase vs Merge

Git是最流行的代码版本控制系统,这一系列文章介绍了一些Git的高阶使用方式,从而帮助我们可以更好的利用Git的能力。本系列一共8篇文章,这是第5篇。原文:Rebase vs. Merge: Integrating Changes in Git[1] 大多数开发人员都理解在G…

Sentinel 规则持久化

我们知道我们的Sentinel-dashboard配置的规则,在我们的微服 务以及控制台重启的时候就清空了,因为他是基于内存的 原生模式 Dashboard的推送规则方式是通过 API 将规则推送至客户端并直接更新到内存 优缺点:这种做法的好处是简单,无依赖&…

校园视频AI分析预警系统 TesnorFlow

校园视频AI分析预警系统通过分布式TensorFlow模型训练,校园视频AI分析预警系统对学生的行为进行实时监测,当系统检测到学生出现打架、翻墙、倒地、抽烟等异常行为时,校园视频AI分析预警系统将自动发出警报提示相关人员及时采取措施。深度学习…

Android巴士倒闭了吗

做Android开发的小伙伴们,应该有听说Android巴士这个网站吧,当年Android开发很火的时,这个网站流量很大,很多人在上面发帖回答问题之类,本人还冲了点钱用于下载源码。 一转眼五年过去了,这个网站越来越少人…

VR巴士发车啦

近几年,由于疫情影响,居家云办公、云旅游逐渐兴盛起来,VR技术得到快速发展。但VR眼镜中的旅行再如何逼真,也无法取代实地旅行带来的体验。后疫情时代,随着各国生活秩序逐渐恢复正常,诞生了一种虚实结合的旅…

MBD——Bus使用全解

目录 一、前言 二、创建Bus 三、使用Bus 一、前言 Long Timer Goes Done; 在MBD中使用对信号归类定义为Bus类型,然后定义对应的变量作为输入输出使得模型看起来简洁、清晰; 二、创建Bus类型 首先打开Simulink,打开Model Exploer&#xff0…

百度自动驾驶巴士开启收费运营

11 月 28 日,多辆百度自动驾驶巴士、阿波龙亮相重庆永川新区中心体育馆广场,车内VR场景体验也同步开放体验,现场吸引了大量市民围观、参与。通过此次体验活动,不仅让永川市民近可以近距离体验到智慧生活,也意味着永川自…

宝宝巴士儿歌下载链接

小宝宝在家就喜欢看宝宝巴士,电视上版本不太齐全、要不就是不是我想要的有两只老虎、数鸭子的那些的儿歌,现在新的宝宝巴士我不太喜欢,什么冰淇凌跳舞转圈圈啥的?,搜了好久才在网上下载下来的2015版本,顺便也转了一下…