文档章节

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

红焖鲤鱼
 红焖鲤鱼
发布于 2016/07/09 14:52
字数 1288
阅读 6530
收藏 7

前言

什么是原型呢?    

原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导至该产品的可用性。

简单说,“原型”是在项目前期阶段的重要设计步骤,主要以发现新想法和检验设计为目的,重点在于直观体现产品主要界面风格以及结构、并展示主要功能模块以及之间相互关系,不断确认模糊部分,为后期的视觉设计和代码编写提供准确的产品信息

使用人群

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

使用目的

用例阐释者,用来了解用例的用户界面;

系统分析人员,用来了解用户界面如何影响系统分析;

设计员,用来了解用户界面如何施加影响及它对系统“内部”的要求;

常用快速原型设计工具

Axure RP、Balsamiq Mockup、Pencil Project、Pencil Project、Prototype Composer、Omni Graffle、GUI Design Studio(GDS)、Office组件,这里我们使用的是Axure RP

Axure RP工具简介

Axure RP是一个快速绘制Wireframe和Prototyping的工具,主要用来定义应用程序的需求与规格,以及设计使用者界面与功能。本文介绍如何使用Axure RP创建WEB页面框架。

 

设计准备

1、软件安装:下载Axure RP,安装成功

2、axure组件导入:安装后系统自带了一部分最基础常用的,网上也有很多别人做好的,软件使用到一定阶段可以考虑自己制作元件,以便提高产品原型的制作速度,现在我们先去网上下载一些别人做好的组件,然后放到软件安装的目录/DefaultSettings/Libraries下,重启后就可以使用了

 

设计案例——web页面框架

设计思路:在页面框架中一般分为几个区域,普通的页面包含头部,底部,菜单和主窗口。效果如下:

步骤一、母版的创建

在模板里面分别创建3个母板header、foot、body

步骤二、绘制模板内容

在header界面创建一个800*40的矩形

在foot界面创建一个800*20的矩形

在body界面创建一个700*400的框架,并命名为body

 

步骤三、创建导航页面

在页面区域创建一个名称为0index的界面并在界面上画了一个800*460的矩形

步骤四、在页面中进行布局

分别将header,foot放在界面的上面和下面,body放在x:100,y:40,的位置。

 

步骤五、添加菜单导航

在部件库中找到导航,将导航栏放在页面X:0,Y:40的位置,让后将菜单重命名一次,这里以客户管理举例,将导航栏分别命名为客户管理,客户新增、客户查询

 

步骤六、创建子页面

在页面区域分别对应创建3个界面客户管理,客户新增、客户查询

 

步骤七、自定义事件实现菜单功能

 

鼠标左键单机客户新增,然后双击击鼠标单击时,弹出界面

 

 

第二步点击新动作:点击内部框架,第四部选配置动作:选择body(内部框架),打开在,选择1-1客户新增,点击确认

客户查询与客户新增操作一样,然后点击预览

步骤八、查看预览效果

预览效果如下,将左侧的关闭掉,分别点击一下,客户新增和客户查询,看一下效果

注意事项

1.前期设计不要加入视觉设计的元素。着眼于大局,不要纠结细枝末节。因为我们的原型方案还没有最终通过,肯定要通过多次迭代才能确定方案,太多的视觉设计就是浪费时间;    再者,如果原型做的十分逼真,在产品讨论会上,视觉的元素会很快抓住大家的眼球,到时就会有领导来质疑你的界面是不是该换成蓝色,按钮是不是再精致一些这样的问题。没有人会专注于你的交互设计了。    

2.最好在使用axure工具前,用纸和笔画一些纸面原型,整理一下思路。    

3.这个过程应是快速的,迭代的。    

参考资料:

http://uedc.163.com/2248.html

http://www.cr173.com/html/29758_1.html

© 著作权归作者所有

上一篇: java解析XML
红焖鲤鱼
粉丝 119
博文 45
码字总数 34301
作品 0
浦东
QA/测试工程师
私信 提问
加载中

评论(2)

Edita
Edita
现在做原型,可以尝试使用国产Mockplus了,软件上手快,操作便捷。做同样的效果,比Axure快很多。
请勿吸烟
请勿吸烟
原型工具怎么能少了我才使用的mockplus简单、好用哦
Mac OS下安装Axure RP 8.0.0.3312 中文破解版

Mac下一款快速原型设计工具——Axure RP,有了它可以大大提高你的工作效率。此次带来的是Axure RP 8.0.0.3312 版本。 介绍 Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的...

james_laughing
2018/09/19
85
0
Axure RP Introduction

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

Tmac
2016/10/11
15
0
产品经理(PM)常用原型图设计工具

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

红薯
2010/09/13
21.3K
27
原型设计:Axure 8.0正式版发布 附下载地址和汉化包

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

江哥一直在
2016/05/09
337
2
Axure RP 各个版本中文版 汉化包 破解版 下载地址及注册码

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

江哥一直在
2016/01/11
16.9K
3

没有更多内容

加载失败,请刷新页面

加载更多

【0911】linux软件包安装和卸载

【0911】linux软件包安装和卸载 一、安装软件包的三种方法 1、rpm工具:与win中的exe安装包类似,红帽子公司包管理系统 2、yum工具:属于一种用python开发的工具,支持自动的安装依赖的包 3、...

飞翔的竹蜻蜓
28分钟前
3
0
【外行学IT】手机网页自适应之rem和viewport

在写手机网页时,对于像素的问题会非常困惑,初学者很多时候会因为那么一个小点的问题解决不了,或者无法理解透彻就放弃了学习。 我在学习写手机网页时也困惑了许久,出现过下面的问题: 图片...

前端老手
39分钟前
5
0
三、Java设计模式之单一职责原则

定义:不要存在多于一个导致类变更的原因。 一个类、接口、方法只负责一项职责 优点:降低类的复杂度、提高类的可读性,提高系统的可维护性、降低变更引起的风险

东风破2019
46分钟前
4
0
搭建高可用MongoDB集群(分片)

搭建高可用MongoDB集群(分片) KaliArch关注1人评论28269人阅读2017-12-04 21:57:41 MongoDB基础请参考:https://blog.51cto.com/kaliarch/2044423 MongoDB(replica set)请参考:https:/...

linjin200
今天
6
0
Pandas DataFrame创建方法大全

Pandas是Python的数据分析利器,DataFrame是Pandas进行数据分析的基本结构,可以把DataFrame视为一个二维数据表,每一行都表示一个数据记录。本文将介绍创建Pandas DataFrame的6种方法。 创建...

汇智网教程
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部