如何利用axure设计一个登录界面

背景，文本框，密码框，登录按钮，注册按钮，在按钮添加用例并进行简单的非空校验方法/步骤

首先，打开axurerppro65，新建页面，这时会出现一个home，三个page，如下图所示：

接着，从视图窗口拖出两个textfield，移动到编辑窗口，并修改显示的文字，如下图所示：

然后，再拖两个按钮到编辑框，修改显示的文字为“登录”和“取消”，如下图所示：

一般登录界面都会有“记住我”这个功能，即是下次登录不需要输入密码，这里添加一个复选框，如下图所示：

有时登录界面会有一个自动登录的功能，这里我也设计一个，利用复选框设计自动登录，如下图所示：

接着，给账号和密码输入框设置限定，如字符长度、密码显示等

对Axure RP 9 的基础功能进行一定程度的介绍，一来方便新手迅速了解Axure，二来比对新版Axure与Axure 8的区别，更快了解新版本Axure

界面介绍

剪切,复制, 粘贴很好理解，使用方式和win电脑的快捷键相同，Ctrl X为剪切，Ctrl C为复制，Ctrl V为粘贴，在Axure中，可以选中一段交互进行复制粘贴，值得注意的是，很多朋友找不到Axure RP 9的格式刷，不同于Axure 8 的格式刷，我也是找了好久，后来发现选择某个元件，按下复制按钮或快捷键，然后选中另一个元件按下Ctrl Alt V即可将前一个元件的格式及公共交互部分复制并粘贴到后一个元件上，这就是Axure RP 9的神秘格式刷。

分区1：选择模式
使用过Computer Aided Design（即CAD）软件的同学应该很容易理解这个功能，当界面上画了很多很多方框的时候，很难精确批量的选择我们想要选中的元件，这时候切换不同的选中模式就可以快速的选择我们想要的元件。第一个，一个小虚线框里边装着三个小框的模式是指当我们的鼠标范围选中元件的任意面积，即可选中当前元件；第二个一个小虚线框中间放着一个小方框的模式是指当我们鼠标选取完全覆盖当前元件的所有面积的时候，才能选中元件。图标的样子还是很好理解哒。后边那个一个框连着一个框的是指连接线，Axure可以用于画流程图，画流程图，连接线就必不可少啦。

分区2：插入形状
插入按钮点击后可以选择如图的几个工具，这几个工具从他的名称上就可以轻易的判别工具的用途，这里值得注意的是，在选择矩形、椭圆或直线工具的时候，在绘制的同时按住Shift键，可以绘制正方形、圆形、水平线或垂直线。在Axure RP 9 中，设置了快捷键，如在英文模式下点击P键，会直接选取到钢笔工具（Pen）。插入里面的功能不是很常用，就不过多的做解释。

分区3：点（编辑控点）

这个工具看着有点儿抽象，其实很简单，选中元件，选择点，元件四周会出现菱形的小方块儿，拖动方块就可以任意改变元件的形状，右键元件，选择编辑控点也可以达到同样的效果。

分区4：置顶和置底

置顶和置底很好理解，就是将选中的元件置于最下层或最上层，这里只需要提醒大家快捷键即可，Ctrl Shift ] 是置顶，Ctrl ] 是上移一层；Ctrl Shift [ 是置底，Ctrl [ 是下移一层。

分区5：组合和取消组合

组合和取消组合是方便管理大量元件或页面的方式，PS、PR、AE、PPT等等的软件中都有用到，选中多个元件点击组合就可以将元件打组，windows系统之，大部分软件打组的快捷键是Ctrl G，取消组合是Ctrl Shift G。

分区6：调整大小

这个 *** 作比较鸡肋，正常情况下按住Ctrl键，滑动鼠标滚轮就可以实现放大和缩小屏幕，不同的是该按钮下边有Fit All和Fit Selection，分别代表屏幕大小调整为适合全部元件和适合所选元件，效果大家自行体会即可。

分区7：对齐 

对齐 *** 作在很多的软件中都有，对于像我这样的强迫症患者或者追求更完美效果的人来说简直是福利。Axure里提供了8种对齐方式，分别是左对齐、居中对齐、右对齐、顶部对齐、居中、底部对齐、横向均与分布、垂直均匀分布。这里需要注意的是，每一种对齐方式都是用相同的规则，选中多个元件，以选中的第一个元件为参考元件，将后边选中的元件与首个选中的元件对齐。大家自行体会。

分区8：预览和共享

预览就是预览原型，分享中包含很多选项，很多设置，本期不做详解，大家知道简单的预览和发布到HTML就可以了。

分区9：元件样式

选择不同的样式有不同的效果，比如标题、文本等，不做详细介绍，在使用的过程中可以很明显的体验到不同。

分区10：文本设置
分区11：元件样式 文本设置是绝大部分软件必备的功能，调整字体、大小、对齐方式等。
元件样式包括填充颜色、边框颜色、边框大小、边框线性及元件坐标。

分区12：左侧面板

左侧面板中默认的有页面、大纲、库和母版。页面就像PPT的张数一样，有几张幻灯片、有几个页面，很好理解。大纲是用来显示当前页面内有多少的元件，元件的名称及归属的，Axure8中，大纲默认在页面的右下角，属于右侧面板的部分。库是指元件库，里面包含我们使用的矩形框、文本框、下拉列表、多行文本、中继器、动态面板等，只要拖动元件到页面内，就算是将元件添加进入了我们的工作面板。同时，我们还可以添加元件到我们的库内。Axure自带的元件库可以满足大多时候的需求。

母版可以理解为模板，当我们多个页面需要复用一个元件组件的时候，可以选中这个元件或元件组，右键添加为母版，这样，在以后需要复用的时候，将母版内的项拖动到页面内就可以把元件带到新的页面内。

分区13：右侧面板

右侧面板包括交互、样式和注释。注释就是注释喽，我们在绘制原型的时候把我们的文案写在注释内，方便程序员或UI查看相关信息。样式就是用来设置元件的，包括元件的名称、大小、坐标、边框、颜色、阴影、圆角及边距等等的信息，非常强大。交互是Axure中最核心的地方之一，在这里，我们为元件或页面添加交互，交互部分本篇不做详细描述，未来基础教程篇会深入讲解,期待吧。

前面的同志说截图，这个其实不显示，虽然是快了，但是非常影响质量。
其实没有什么快速的方法，因为axure本身就是一个体力活，技术含量相对较低，最有效的方法应该是先把你想要模仿的网站的资源（、视频、音乐等等）找全（尽量），然后在axure里面工作的时候要有层次，就是从最底层开始建立，然后再到最上面能看见的，因为最下面的东西往往是一整块，如背景什么的。在最上面的东西比较细碎，所以放到最后来，如果你按照从上到下的顺序的话后面会比较麻烦。
还有一个想要提高效率那就是要善用那个母版（就是把许多元素合成一个整体那个东西），这样就不会显得杂乱，处理起来比较方便。

元件是线框图绘制过程中必不可少的基础元素，线框图是由一些列元件组合而成。因此认识和熟练了解每一个元件的特征，对绘制线框图或者原型来说是非常重要的，本章节就详细讲解每个元件的用途和应用特征。

方框、椭圆、占位符、按钮、标题、标签和文本，这几个元件本质上都属于形状元件。选中元件，可以通过右侧对应的样式面板对元件进行编辑。

添加文本：选中元件，双击元件或右击在d出菜单中选择“编辑文字”，即可对元件执行添加文本、编辑文本的 *** 作。

选择形状：形状元件可以改变各种形状，包括矩形、三角形、圆形、弧形、五角星、爱心、水滴等。选中元件，右键单击在d出菜单中选择“选择形状”。

转换为：形状元件转换为后，可以保留形状元件上添加的交互和注释。选中元件，右键单击在d出菜单中选择“转换为”。

填充：形状元件支持颜色填充和填充。颜色填充可通过顶部的工具栏或右侧的样式面板，进行配色。通过形状元件导入的，大小和位置固定在形状内部，不同于常规的导入。选中形状元件，右键单击下拉菜单中选择“导入图像”或在右侧样式面板选择本地，完成导入。
边框：形状元件可以设置边框的颜色、边框线的粗细（厚度）、线条的样式（直线、虚线）以及每条边框线（隐藏部分线框）的可见性。通过顶部工具栏或右侧样式面板均可以设置。

编辑控点：通过拖动控点的位置，可以将元件改变成任何你想要的形状，一般元件有4个控点。选中形状元件，右键单击下拉菜单中选择“编辑控点”或点击顶部工具栏中的点，拖拽元件边框上的小菱形位置，可以改变元件现状。

变换形状：可以对形状元件进行水平和垂直翻转，对多个形状元件进行布尔运算，改变点的连接方式（直线连接或曲线连接）。选中形状元件、右键单击下拉菜单中选择“变换形状”，d出的右侧菜单中选择变换方式。

指定选择组：与单选按钮组效果类似，当组中有一个元件被选中后，其他组元件自动切换为未选中状态，常用语于Table切换或标签导航。若将元件添加到指定的组，首先选中形状元件，右键单击下拉菜单中选择“指定选择组”，编辑选择组名称。

工具提示：常用于一些 *** 作提示，如Axure工具栏、页面与大纲、库与母版等相关的 *** 作按钮，鼠标悬停在按钮上方，显示提示信息。选中形状元件，右键单击下拉菜单中选择“工具提示”，编辑提示信息。

圆角效果：形状元件可以将直角转换为圆角。选中元件，拖动左上角的倒三角手柄来控制圆角的半径，也可以通过右侧样式面板输入角度来调整圆角效果。在样式面板中，还可以设置各圆角的可见性，可以做到部分顶点显示为圆角，部分顶点显示为直角。

阴影：可以为形状添加外部阴影、内部阴影和文字阴影，增加原型的保真程度。选中元件，通过顶部的工具栏或右侧的样式面板为形状元件添加各种阴影，可以自由设置阴影的投影位置、大小、颜色以及模糊程度。

不透明度：通过拖动右侧样式面板中的滑块，可以灵活设置形状元件的不透明度。

边距：控制形状元件内的文字与上下左右四个边框线的距离。选中形状元件后，通过右侧的样式面板调整文字与四个方向边框线的距离。

自适应宽高：根据形状元件内的文字内容，可以自适应宽度和高度，减少了手动调整元件尺寸和文字换行的 *** 作。选中元件，点击右侧样式面板的适合文本宽度或适合文本高度。选择适合文本宽度，则所有文本在一行显示，形状元件的宽度跟着文字的宽度而自动调整（略大于文本宽度）；选择适合文本高度，则形状元件的高度随着文字的高度而自动调整（略高于文本高度）。

交互样式：形状元件支持添加鼠标悬停时、鼠标按下时、选定时、禁用时、获得焦点时的交互样式。选中形状元件，点击右侧交互面板，点击新建交互，为元件设置样式效果。

元件可以用来添加和插图，以表达你的设计理念、产品创新、照片等更多内容。

导入图像：拖拽一个元件到设计区域，双击或右键单击菜单中选择“导入图像”，导入。Axure支持的格式包含：JPG、GIF、PNG和BMP。

粘贴：从任意处复制一张均可以粘贴到Axure中，当我们复制的较大时，系统会提示“该图像过大，可能导致应用程序运行缓慢，您要优化它吗？”，建议点击是，系统将会无损压缩大小。一般从excel或CSV复制内容时，建议点击右键，选择“选择性粘贴，粘贴为”，直接Ctrl+V通常会粘贴为文本格式。

添加/编辑文字：导入后，右击选择“编辑文字”，上的文字还可以进行样式编辑，如颜色、大小、字体等。

水平和垂直翻转：导入后，选中，右键d出菜单中选择“水平翻转”或“垂直翻转”，可以对进行水平和垂直翻转。

分割图像：分割与裁剪在设计领域俗称切图。两者的区别在于是否保持了的完整性，前者完整保留内容，后者默认保留选定部分内容。选中，右键单击菜单或在右侧样式面板中选择分割图像，出现十字架虚线，十字架交叉处即为切点，点击设计区域右上角的+、—和|选择切割线，—代表了横线切割，+代表了竖线切割。

裁剪图像：分为裁剪、复制和剪切三种方式。裁剪只保留选定区域，复制不对原图像有任何影响，剪切从原中切除选定区域。选中，右键单击菜单或在右侧样式面板中选择剪裁图像，通过拖拽虚线矩形框四个顶点的位置来调整裁剪范围大小，移动矩形框确定裁剪的区域。点击设计区域右上角的裁剪、复制和剪切可以选择剪裁的方式，默认为剪裁。

边框和圆角：通过工具栏和样式面板可以给添加边框。设置边框的颜色、边框线的厚度（粗细）、边框线的样式（直线、虚线）。拖动左上角的倒三角或直接在样式面板设置圆角半径，来达到设置圆角的目的。（设置界面与形状元件类似，不在重复截图）

不透明度和阴影：通过拖动样式面板中的滑块可以设置的不透明度。元件仅能设置外部阴影，设计方法与形状元件类似。（设置界面与形状元件类似，不在重复截图）

优化：使用通过功能，在保证基本不影响浏览质量的前提下（降低的像素密度，但一般肉眼无法察觉，基本可以忽略），使得占用的存储空间更小，同时也可以提升原型的加载速度，提升浏览体验。通常在导入大图时，Axure会自动提示是否需要优化，也可以手动优化。选中，右键点击菜单选择“优化图像”。

等比例缩放：按住shift键盘，同时拖动边角的顶点，可以按比例缩放。选中，通过工具栏或样式面板中锁定宽高比例，更改宽或高的值也可以做到等比例缩放。

交互样式：也可以像形状元件一样添加交互样式，可以添加鼠标悬停时、鼠标按下时、选定时、禁用时、获得焦点时样式效果。（设置界面与形状元件类似，不在重复截图）

在原型设计时，通常需要将原型的几个版块或内容进行区隔，这个时候利用水平线和垂直线就会比较方便。

箭头：通过工具栏或样式面板可以为横线或垂直线设置箭头样式。选中线条，在工具栏或样式面板中点击箭头样式，在下拉列表中任意选中想要的箭头样式。

颜色、厚度和样式：可以为线条添加颜色、设置厚度和样式（直线、虚线），在工具栏和样式面板中均可以设置。按住shift键，拖动线条，可以改变线条的长短。

旋转线条：Windows按住Ctrl，Mac按住cmd，同时将鼠标悬停在线的末尾进行拖拽，或者在样式面板中直接输入旋转角度。注意这里的旋转角度均按照顺时针方向旋转。

热区是一个浮在最顶层的透明图层，热区可以放置在任意元件的上方，为热区设置交互其实也等同于为热区下方的元件设置交互。

多个元件设置同一交互：如资讯列表页，需要同时为和文章标题设置一个鼠标单击跳转事件，这个时候可以直接在和标题上覆盖一层热区，为热区设置鼠标单击事件。

单个元件中的某一区域设置交互：利用热区覆盖在元件上的局部区域，为热区设置鼠标单击事件，即可起到元件的局部区域可点击效果。

热区的可见性：预览原型效果时，热区是透明不可见的，但在Axure源文件中默认会显示为一个透明的遮罩层，通过菜单栏中的视图>遮罩>热点，可以隐藏掉遮罩，与预览时的效果是一样的。

动态面板可以创建多个状态，每个状态下面都可以装有若干个元件，每个状态可以当做是一个全新的页面，在这里可以任意摆放元件，设置元件的样式甚至是交互，因此它更像是一个巨大的容器。动态面板是在原型制作中使用最多的高级元件，很多交互效果都依赖于动态面板来实现。

动态面板状态：动态面板是由一个或多个状态组成的，每一个状态里面都可以包含多个元件。同一时间，动态面板只能显示一个状态，使用交互设置可以显示或隐藏动态面板以及各状态的可见性。添加动态面板有两种方法，第一种，直接从元件库拖拽动态面板至设计区域；第二种，将要设置为动态面板的元件右键单击选择“转换为动态面板”。其中第二种方法，可以直接调整动态面板的大小至合适尺寸。第一种方法，如果状态中元件的尺寸大于动态面板时，则超出部分在动态面板中将不可见。在样式面板中可设置“调整大小以适合内容”，以保证状态中元件的可见性。

编辑动态面板状态：双击动态面板选择一个状态进行编辑，进入状态中，我们会看到中间有一个白色矩形区域，矩形区域为动态面板的画布，超出部分，则在动态面板中不可见，如果看不到白色矩形，则一定是在样式面板中为动态面板勾选了“调整大小以适应内容”，取消勾选，则可以在状态中看到白色矩形。在状态中编辑元件，就和我们平常在页面中编辑元件一样 *** 作。设计区域的右上角可以切换隔离状态，默认为隔离。隔离状态是指是否将动态面板以外的元件纳入进来。点击设计区域右上角的关闭按钮，则为退出动态面板状态，回到页面。

管理动态面板状态：双击动态面板进入编辑状态，点击设计区域左上角可以管理动态面板的状态，在这里可以增加状态、复制状态、删除状态。

动态面板专有样式

滚动条：当动态面板尺寸小于状态内容尺寸时，需要为动态面板设置滚动条以查看状态中的更多内容。滚动条有四种样式：不需要、根据需要滚动、纵向滚动、横向滚动。选中动态面板，在右侧样式面板中设置滚动条样式。

100%宽度：勾选后动态面板各状态在浏览器中打开后，可用显示完整的宽度，而不受动态面板自身宽度影响。

固定到浏览器：始终固定在页面的某个特定位置，如App的底部导航，资讯类产品的顶部标签导航都可以利用“固定到浏览器”的样式效果。选中动态面板，点击右侧样式面板的“固定到浏览器”，勾选固定到浏览器窗口，选择固定位置的方向，设置边距，勾选保持在前面（将动态面板图层置顶）。

其他通用样式
动态面板的位置和尺寸、填充、边框、阴影和圆角等这些公共样式的属性设置同形状元件一致，请参考上文说明 。

设置动态面板状态（交互动作）

面板切换：对于有多个状态的动态面板，可以使用设置动态面板状态这一动作切换到指定的状态，这也是动态面板最常用的交互动作。在用例的交互动作中选择“设置动态面板状态”，在状态项中下拉选择切换的状态。下拉选择的切换状态包含以下四种切换方式：指定状态（state1/state2)、上一个状态（previous）、下一个状态（next）、停止切换（stop）、值（value）。

上一个/下一个：选择上一个状态、下一个状态时可以进行状态的重复循环（状态是有限的），设置中自动勾选“从最后一个到第一个自动循环”，在更多选项中还可以设置首次循环的时间间隔。这样动态面板就可以按照规律无限循环下去，循环切换常用于轮播图的自动播放。

停止切换：当我们需要停止动态面板无限循环时，如停止轮播或内容广播，可以在状态列表中选择停止切换。

值（value）：使用值来设置动态面板状态时，需要注意值必须与动态面板的状态名称一致时，才能生效。当需要基于某一个页面存储的全局变量值在本页面中使用“页面加载时”事件来设置动态面板到指定状态。此时，只需要设置一个简单的交互用例即可实现。

动态面板切换动画：进入与退出都可以设置过渡动画，在设置用例时的动作配置中选择动画效果。进入与退出支持设定的动画效果包含：逐渐、向上滑动、向下滑动、向左滑动、向右滑动、向上翻转、向下翻转、向左翻转、向右翻转。设定动画效果后，我们需要为每个过渡动画设置时间，注意这里的时间单位是毫秒。

更多选项：如果原来动态面板为隐藏，在这里可以勾选为显示，还可以设置展开和收起的状态。

当我们需要引用页面或页面中某个部分的内容时，可以使用内部框架达到引用的效果。内部框架既可以引用Axure文件中的页面，也可以引用外部的页面。

从元件库中拖动内部框架至设计区域，双击内部框架，在d出的窗口中选择链接的内部页面，或填写外部页面的URL地址，点击确定，完成引用页面的设置。右侧的样式面板可以设置隐藏边框，下拉选择滚动条的显示方式和预览类型。滚动条的显示方式包含：根据需要滚动、总是滚动和从不滚动，这里的滚动条设置包含了垂直滚动和水平滚动。预览类型包含：无、视频、地图和自定义预览，自定义预览支持从本地导入。这里的预览设置仅为Axure内部预览，在浏览器预览看不到设置效果。

中继器元件由中继器数据集和中继器项两部分构成。中继器可以用于需要重复设置的元件，如商品列表页、资讯列表页、联系人列表、表格等。

编辑中继器：从元件库拖动中继器至设计区域，双击中继器进入中继器编辑页面，中间的白色区域为中继器的画布，中继器的画布大小既可以手动调整，也可以根据页面内容自动调，在设计时无需手动拖动顶点来控制画布大小。画布外的元件，将会同步至中继器的左侧或上方。中继器画布右上角有一个隔离开关和关闭按钮，隔离开关的作用同动态面板一致，默认为关闭（隔离），点击开启后，会将中继器周围的其他元件均纳入进来，像是一个容量超大的乾坤袋。中继器编辑页面可以任意放置元件，如同在一个全新页面进行线框图设计。

中继器数据集：中继器元件是由中继器数据集的数据项填充，填充的数据项可以是文本、甚至是链接。Axure 90中，在中继器内部和外部均可以编辑数据集。右侧的样式面板中，我们可以看到类似于表格形状的即为数据集，在单元格里可以任意填充数据。数据集中的行与列的数据可以任意编辑，值得注意的是数据集列的命名需要为英文，否则在中继器项载入数据时将无法关联数据集内容。

中继器的项：中继器中重复布局的元件这里称之为项，双击中继器元件，进入中继器进行编辑，中继器页面中的元件会被重复加载多次（中继器有几行信息，就被重复加载几次）。

加载项：利用交互事件每项加载时将数据集中的数据填充到设计区域。

插入文本：双击交互事件每项加载时，添加设置文本动作，设置value值时，点击右侧的fx,点击插入变量、属性、函数或运算符，在下拉列表中找到中继器/数据集下面的变量ItemPhone，点击确定完成文本（手机号码）的加载。完成此设置后，当中继器每项加载时，就会将数据集中列（Phone）的内容自动插入到刚刚设置的文本元件中。

导入：导入图像到数据集中并使用“设置图像”动作将插入到中继器的项中。在做这项交互设置前，需要提前在中继器中准备一个图像元件，用来关联显示中继器数据集的图像。在数据集中右击想要插入的项，选择“导入图像”，选择插入本地图像。右侧交互面板中点击“每项加载时”事件。添加“设置图像”动作，选择目标元件（中继器数据集事先设置元件的那一列内容）。设置图像时（SET DEFAULT IMAGE），选择值，点击右侧的fx，点击插入变量、属性、函数或运算符，在下拉列表中找到中继器/数据集下面的变量ItemHead portrait，点击确定完成图像（手机号码）的加载。完成此设置后，当中继器每项加载时，就会将数据集中列（Head portrait）的内容自动插入到刚刚设置的图像元件中。

插入页面链接：中继器数据集中的项可以添加引用页（跳转链接），当用户点击某个指定的元件时，触发链接跳转。数据集中右键点击空白项并选择“引用页”，选择本地页面。在中继器中选择一个触发跳转动作的元件，为其添加单击事件，添加“在当前页打开”动作，然后选择链接到外部网址或本地页面，点击fx，在d出的编辑窗口中，点击插入变量、属性、函数或运算符，在下拉列表中找到中继器/数据集下面的变量Itemlink（添加链接的数据项），点击确定完成链接跳转的设置。

中继器内部元件的交互：中继器的数据项可以添加任意交互，如同正常元件一样。

中继器专有样式

布局：中继器的内容支持按垂直、横向样式展示内容。垂直布局时，可以设定每一列数据有几项；横向布局时，可以设定每一行有几项。选中中继器，布局样式中选择垂直或横向，勾选换行，填写每一列或每一行项的数量。如果不勾选换行，则所有的项将全部垂直展示成一列或横向展示成一排。

项的背景：项的背景既可以设置单一颜色，也可以设置两种不同的颜色交替显示。勾选样式面板中的交替颜色，设置背景色和交替色。默认情况下，中继器内容没有背景色，页面看上去是白色，是因为整个页面背景默认显示白色，并非中继器项背景为白色。

分页：中继器为我们提供了分页功能，当中继器项较多时，可以设置分页。选中中继器，在样式面板中，勾选多页，设置每页项的数量和开始页。

本篇结语 ：下一节将重点讲解文本输入框、下拉列表框、列表选择框、复选框和单选按钮的使用说明及使用技巧。后续每一篇章节尽量控制篇幅，这一篇基础元件的说明有点长，基础性的东西才是最重要的，所以值得详细讲解，也希望大家能够有更深刻的理解。

---