文档章节

学习Axure RP原型设计

数通畅联
 数通畅联
发布于 2017/04/28 17:04
字数 2304
阅读 95
收藏 2
点赞 0
评论 0

1 概述

原型设计是应用开发设计的第一要素。好的原型设计不仅可以起到沟通的作用,而且对客户而言应用程序拥有更直观的体现。原型设计通过内容和结构展示以及界面布局编排,实现在开发前期用户与产品进行交互。提高用户对项目的认可度,有利于项目的推进。下面为大家介绍一款原型设计工具——Axure RP。

2 名词解释

Axure RPAxure RP是一个专业的快速原型设计工具。Axure,代表美国Axure公司;RP则是Rapid Prototyping的缩写,译为快速原型。

3 工具介绍

Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。

3.1 应用范围

Axure的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的线框图。不用进行编程,就可以在线框图上定义简单连接和高级交互。在线框图的基础上,可以自动生成HTML(标准通用标记语言下的一个应用)原型和Word格式的规格。

Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等,另外,架构师、程序开发工程师也在使用Axure。

3.2 常用功能

Axure的软件界面总的来说,可以分为9大模块

1. 菜单栏:和大部分的软件界面一样,都是一些常规的文件、编辑、视图等。

2. 工具栏:是页面进行编辑的一些快捷操作,主要有字体设置、大小设置、页面显示大小和Axure本身自带的一些快捷操作等。

3.  站点地图:呈树状结构、可以添加、删除页面、也可以对设计中的页面进行重命名操作。

4. 部件区域:组件集中地带:矩形组件、图片组件、动态面板组件……使用方式是直接拖动部件到页面编辑区域。

5. 母版区域:共用,复用。

6. 页面编辑区域:拖动相关的部件进行线框图编辑和交互具体的实施。

7. 页面交互区域:设置页面属性,交互样式。

8. 部件属性区域:组件的注视、组件的交互、组件的属性编辑。

9. 动态面板区域:设置动态面板的可视与隐藏。

3.3 环境搭建

1. 输入https://www.axure.com.cn/网址,进入Axure官网里点击下载项,就能看的Axure RP的下载链接了。

下载完成后的安装包如图:

2. 双击安装包会弹出安装向导

3. 点击下一步

4. 勾选“我同意”,点击下一步。

5. 选择安装路径点击下一步。

6. 点击下一步

7. 点击下一步

把运行的勾选项去掉,安装的是英文版,需要进行汉化,所以先不要运行。在网上找一个汉化包,汉化的过程网上都有,这里不做介绍了。安装完成后桌面会出现一个快捷方式,双击就可以打开Axure RP软件了。

4 样例讲解

4.1 前期准备

首先需要准备原型设计要用到的素材,输入网站http://www.agileai.com,到 数通畅联官网把需要用到的图片,logo,图标和文字下载下来备用。

1. 打开Axure RP软件,它和大多数的设计软件的布局相似,这里不一一介绍了。点击工程,选择页面样式编辑器,在页面样式编辑器里有对齐,字体选项,将页面调试为居中显示,字体选择宋体。

2. 点击布置,选择网格和辅助线,根据需要进行调试。网格和辅助线对设计会起到辅助作用。

4.2 编辑图片

1. 先从数通畅联官网首页的顶部开始,在库里拖拽图片到设计区。

2. 双击图片,会让你选择文件,选择数通畅联logo。

3. 效果图如下:

按同样的方式继续搭建顶部。接下来遇到关于图片的操作都如上所述,就不再做讲解了。

4. 顶部设计好后点击预览按钮,就可在浏览器里预览效果了。

5. 预览效果如图:

6. 在页面处右键可以重命名,重命名后,在浏览器里预览时,会显示出页面名称。

4.3 导航菜单

1. 做导航,在库里选择菜单-水平,将其拖拽到设计区。

2. 默认是三个,点击右键可以新增菜单和子菜单。

3. 选中菜单,在右侧编辑区选择样式更改导航背景色和字体颜色。在编辑区上面可以给元件起名,建议采用英文命名,命名格式例如PasswordInput01或Password01,它的含义是序号01的密码输入框。格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读

4. 导航编辑完后为其添加鼠标移动效果,如图:

5. 点击预览,查看效果。

4.4  滚动字幕

1. 做导航下面的当前位置。在库里拖拽矩形到设计区,长度和导航一致。添加图标,在库里选择单行文本,输入“当前位置:”和“首页”。

2. 在“当前位置”的右侧是滚动的文字,是动态的,在库里选择动态面板,调整大小,放到右侧。

3. 双击动态面板,弹出动态面板状态管理。点击“+”新增状态。

4. 双击State1,进入编辑页面,如图:

5. 选择单行文本拖动到动态面板上,并输入内容。设置鼠标悬停时,字体颜色为红色。

6. 三个状态都编辑完成后,返回原编辑页,在编辑区里双击载入时。

7. 弹出编辑框,在编辑框里设置动态面板的动作。如图:

8. 点击预览,就能看到滚动的效果了。

4.5 轮播图片

1. 做轮播图,轮播图也是动态的,同样也需要动态面板。将动态面板拖动致设计区,调整位置和大小,并设置状态。然后在添加一个图片切换指示按钮,也是用动态面板,添加状态,在每个状态里显示不同的指示样式。如图:

2. 点击右侧编辑区里的载入时,设动画效果。设置的参数要和轮播的图片对应。设置参数如图:

3. 点击预览,查看效果。

接下来配置轮播图下面的内容,配置这些内容时用上面讲到的技术就可以了,就不做过多说明了。

4.6 返回顶部

1. 在最下面有一个回到顶部的按钮,在库里找个矩形和一个箭头,按快捷键Ctrl+G,将其组合,然后右键,转换为动态面板。

2. 在库里在选择一个占位符,放到最顶端,透明度设置为0。

3. 选择返回顶部按钮,设置鼠标单击时的参数,如下图:

4. 点击确定,返回顶部按钮就设置完成了。

4.7 悬浮效果

1. 做右侧的欢迎咨询,它是浮动在右侧的。按照欢迎咨询的样式编辑好后,转换为动态面板,选择固定到浏览器,设置参数如图:

2. 到这里,数通畅联官网首页的内容全部做完了,点击预览,就可以看到以假乱真的设计原型了。

4.8 生成文件

1. 预览没有问题后,点击发布按钮,生成html文件。

2. 弹出编辑框,选择生成路径,点击生成,就可以生成html文件了。

5 心得总结

原型设计是在项目的设计阶段进行的,原型设计对后期的项目开发启到了非常重要的作用,如果设计做的不到位,在开发阶段就会陷入困境。有一个好的原型设计,在和客户谈合作时也会启到非常好的效果,所以学会原型设计非常重要。

在这里只是简单的介绍了Axure RP工具的使用,它还有许多强大的功能,如果您感兴趣,可以到Axure RP官网进行学习。

© 著作权归作者所有

共有 人打赏支持
数通畅联
粉丝 83
博文 203
码字总数 195353
作品 6
沈阳
架构师
the file is already open in another instance of axure RP

使用axure RP进行原型设计的时候,将不同角色的个人中心设计分别保存在了不同的文件,比如:老师个人中心的原型设计我就保存为“老师个人中心.rp”,学生个人中心的原型设计我就保存为“学生...

微wx笑 ⋅ 2016/06/18 ⋅ 0

Axure RP Introduction

Axure RP是一个专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。Axure RP是美国Axure Software Solution公司旗舰产品,是...

Tmac ⋅ 2016/10/11 ⋅ 0

Axure RP 各个版本中文版 汉化包 破解版 下载地址及注册码

一、Axure RP原型设计工具介绍: Axure RP是美国Axure SoftwareSolution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或W...

江哥一直在 ⋅ 2016/01/11 ⋅ 3

比Visio更实用的网页原型设计工具Axure RP Pro 5

互联网行业产品经理的一项重要工作,就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作,就是结合批注、大量的说明以及流程图画框架图wireframe,将自己的产品原型完整而...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

原型图设计软件

原型图设计软件 1. Axure RP http://www.axure.com http://www.axure.org Photoshop级别 2. GUI Design Studio http://www.carettasftware.com/guidesignstudio 画图板级别 3. Pencil http:/......

donny945 ⋅ 2014/03/13 ⋅ 2

原型设计:Axure 8.0正式版发布 附下载地址和汉化包

导读:Axure是一个专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是RapidPrototyping(快速原型)的缩写。期待已久的Axure8.0正式版,终于如期而至,今天小编妹...

江哥一直在 ⋅ 2016/05/09 ⋅ 2

Axure RP 快速原型设计工具

  Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型...

蚊子888 ⋅ 2014/02/09 ⋅ 0

产品经理(PM)常用原型图设计工具

本文转贴自:http://www.zhangping.name/2010/08/28/pm-wireframes-design-tools/ ,尽管都是一些商业软件,但对设计的确非常有帮助。 天天和产品打交道,不时要做一些页面原型、离不开各种工...

红薯 ⋅ 2010/09/13 ⋅ 27

使用原型设计工具 Axure RP创建一个web页面框架

前言 什么是原型呢? 原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。利用交互设计...

红焖鲤鱼 ⋅ 2016/07/09 ⋅ 2

谁在撼动Axure在原型设计领域的霸主地位?

目前活跃在国外的原型设计工具不胜枚举:Pidoco、UXPIN、Proto.io 6、InVision等等,令人眼花缭乱。曾几何时,Axure一枝独秀,可以说是占据了无法撼动的地位。然而时过境迁,现在的国内市场上...

jongde ⋅ 2016/08/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux kernel脉络和主干总结

写在前面 前人常说,对Linux操作系统/内核的理解,是计算机行业从业者的内功,决定了你在技术领域想走多远。但内核的庞大以及学习曲线之陡峭,总让我在学习途中觉得犹如“管中窥豹”。 随着工...

Markz0928 ⋅ 30分钟前 ⋅ 0

在gcc中使用intel风格的内联汇编

很简单,内联汇编使用asm(“.intel_syntax noprefix/n”)声明一下,以后的内联汇编就可以用intel风格了,构建可执行文件时给gcc加上-masm=intel参数。 先写一个小程序测试一下: [cpp] view...

simpower ⋅ 40分钟前 ⋅ 0

NIO 之 ByteBuffer实现原理

相关文章 BIO、NIO、AIO 内部原理分析 NIO 之 Selector实现原理 NIO 之 Channel实现原理 前言 Java NIO 主要由下面3部分组成: Buffer Channel Selector 在传统IO中,流是基于字节的方式进行...

轨迹_ ⋅ 49分钟前 ⋅ 0

Jenkins docker权限问题

环境Ubuntu Server 工具 jenkins-war:2.89.2 报错信息 Cannot connect to the Docker daemon. Is the docker daemon running on this host?Build step 'Execute shell' marked build as fai......

Pulsar-V ⋅ 50分钟前 ⋅ 0

180621-一个简单的时间窗口设计与实现

如何设计一个计数的时间窗口 时间窗口,通常对于一些实时信息展示中用得比较多,比如维持一个五分钟的交易明细时间窗口,就需要记录当前时间,到五分钟之前的所有交易明细,而五分钟之前的数...

小灰灰Blog ⋅ 今天 ⋅ 0

Android之Dalvik、ART、JIT、AOT

Android之Dalvik、ART、JIT、AOT 本文内容:Dalvik、ART、JIT、AOT之间关系 本文定位:知识记录 学习过程记录,加深理解,提升文字组合表达能力。也希望能给学习的同学一些灵感 本文整理于[...

lichuangnk ⋅ 今天 ⋅ 0

Thrift RPC实战(五) thrift连接池

Thrift本身没有提供连接池,我们可以用Apache Commons Pool2来实现一个 一、定义对象工厂 BasePooledObjectFactory<T> extends BaseObject implements PooledObjectFactory<T> public class......

lemonLove ⋅ 今天 ⋅ 0

git 命令简写

简写 命令 g git gst git status gd git diff gdc git diff --cached gdv git diff -w "$@" | view - gl git pull gup git pull --rebase gp git push gc git commit -v gc! git commit -v ......

charley158 ⋅ 今天 ⋅ 0

Java中的锁使用与实现

1.Lock接口 锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能够防止多个线程同时访问共享资源。 在Lock出现之前,java程序是靠synchronized关键字实现锁功能的,而Java SE5之后,...

ZH-JSON ⋅ 今天 ⋅ 0

Intellij IDEA神器常用技巧四-类和方法注释模板设置

IDEA自带的注释模板不是太好用,我本人到网上搜集了很多资料系统的整理了一下制作了一份比较完整的模板来分享给大家,我不是专业玩博客的,写这篇文章只是为了让大家省事。 这里设置的注释模...

Mkeeper ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部