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

前言

什么是原型呢？    

原型设计是交互设计师与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页面框架。

 

设计准备

一、软件安装：下载Axure RP，安装成功

二、axure组件导入：安装后系统自带了一部分最基础经常使用的，网上也有不少别人作好的，软件使用到必定阶段能够考虑本身制做元件，以便提升产品原型的制做速度，如今咱们先去网上下载一些别人作好的组件，而后放到软件安装的目录/DefaultSettings/Libraries下，重启后就可使用了

 

设计案例——web页面框架

设计思路：在页面框架中通常分为几个区域，普通的页面包含头部，底部，菜单和主窗口。效果以下：

步骤1、母版的建立

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

步骤2、绘制模板内容

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

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

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

 

步骤3、建立导航页面

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

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

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

 

步骤5、添加菜单导航

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

 

步骤6、建立子页面

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

 

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

 

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

 

 

第二步点击新动做：点击内部框架，第四部选配置动做：选择body（内部框架）,打开在，选择1-1客户新增，点击确认

客户查询与客户新增操做同样，而后点击预览

步骤8、查看预览效果

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

注意事项

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

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

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

参考资料：

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

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