怎样做好网站原型设计？（做好网站原型设计的2大具体操作）

一、什么是 Axure

1.Axure的概述

Axure是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）等。

Axure能让你快速的进行原型的设计，让相关人员对你的设计进行体验和验证，向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。另外，Axure还能让团队成员进行多人协同设计，并对设计进行方案版本控制管理。

Axure使原型设计及和客户的交流方式发生了变革：

l 进行更加高效的设计；

l 让你体验动态的原型；

l 更加清晰的交流想法；

2.Axure与墨刀、Sketch的比较

1.Axure流程图原型界oldschool,windows系统,PC端web界面原型和APP界面原型都静态、动态能做，也适用于项目流程图的制作。适合做低保真原型，给视觉设计师为参考流程来出视觉稿。

2.sketch原型界newschool，iOS系统，适合后期做交互高保真原型。初学者不建议用，花时间，效率低，但后期出效果做交互、产品发布会等等，sketch做出来的东西专业视觉美观佳。

3.墨刀 原型界的“明日之子”正流行，推荐使用，在线工具，有网就可以搞，不管啥系统，库模板丰富。

3.Axure界面介绍

软件界面大致的划分为8大块区域：

菜单栏、工具栏、页面区域、元件库区域、母版区域、工作区域、检视区、页面概要区域。

二、Axure基本操作

使用元件

基础1：添加元件到画布

在左侧元件库中选择要使用的元件，按住鼠标左键不放，拖动到画布适合的位置上松开注意安装资源包中一般都有特殊元件的元件素材，可以载入至软件中使用。

基础2：添加元件名称

文本框属性中输入元件的自定义名称，建议采用英文命名。

建议格式：PasswordInput01 或Password01。名称含义：序号01 的密码输入框。

格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读。同时注意在画原型元件时，要以坐标轴左上角开始制作。

基础3：设置元件位置/ 尺寸

元件的位置与尺寸可以通过鼠标拖曳调整，也可以在快捷功能或元件样式中进行输入调整

x：指元件在画布中的x 轴坐标值。

y：指元件在画布中的y 轴坐标值。

在输入数值调整元件尺寸时，可以在样式中设置，让元件【保持宽高比例】

w：指元件的宽度值。

h：指元件的高度值。

基础4：设置元件默认角度

方式一：选择需要改变角度的元件，按住<Ctrl> 键的同时，用鼠标拖动元件的节点到合适的角度。

方式二：在元件样式中进行角度的设置，元件的角度与元件文字的角度可以分开设置。

基础5：设置元件颜色与透明

选择要改变颜色的元件，单击快捷功能区中的背景颜色设置按钮，选取相应的颜色，或者在元件样式中进行设置。

基础6：设置形状或图片圆角

可以通过拖动元件左上方的圆点图标进行调整，也可以在元件样式中设置圆角半径来实现

1.圆角半径数值 2.设置圆角半径 3.拖动改变圆角 4.取消部分圆角

基础7：设置矩形仅显示部分边框

在Axure RP 8 的版本中，矩形的边框可以在样式中设置显示全部或部分

基础8：设置线段/ 箭头/ 边框样式

线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置

基础9：设置元件文字边距/ 行距

在元件样式中可以设置元件文字的【行间距】与【填充】

行间距：是指文字段落行与行之间的空隙。 填充：是指文字与形状边缘之间填充的空隙。

基础10 设置元件默认隐藏

选择要隐藏的元件，在快捷功能或者元件样式中勾选【隐藏】选项

基础11：设置文本框输入为密码

文本框属性中选择文本框的{ 类型} 为【密码】。

基础12：设置打开选择文件窗口

文本框属性中选择文本框的{ 类型} 为【文件】，即可在浏览器中变成打开选择本地文件的按钮。该按钮样式各浏览器略有不同

元件库大致分为六大类，功能大多数是所见即所得，英译汉的版本也很好理解。对应每个元件，大家拖着拽到工作区一一使用，并研究它们的属性设置，便可以很好的应用了。英译汉的版本也很好理解。

下面首先我们着重说两个交互元件的应用：热区、动态面板并举例说明；后续我们会对整个元件库的特殊元件进行一个概括性的示意图演示并举例说明交互状态中的四种模式（1）鼠标悬停变色（2）鼠标按下跳转（3）鼠标选中/移开 跳转（4）交互禁用；

基础13：元件库的分类

1.元件库分为六大类

（1）默认的常见的元件 （2）默认表单元件 （3）默认菜单和表的元件

（4）默认的标记的元件 （5）默认的流程图元件 （6）经常会用到的icon元件。

2.元件库常见元件浏览器预览效果

3.其他元件库元件示意图

总结

通过今天Axure的基本介绍，你学会了Axure的基本操作方法，包括：

1.添加元件到画布

2.添加元件名称

3.设置元件位置/尺寸

4.设置元件默认角度

5.设置元件颜色与透明

6.设置形状或图片圆角

7.设置矩形仅显示部分

8.设置线段/箭头/边框

9.设置元件文字边距/行距

10.设置元件默认隐藏

11.设置文本框输入为密码

12.设置打开选择问卷窗口

13.元件库的分类