【设计篇】Axure原型设计,一文学懂

产品成长指北产品星球2023-6-8 15:43

一、绘制工具

原型分类

  • 低保真(Low-Fidelity)原型,又称线框图或者草图原型,它主要用于快速展示和测试概念。这类原型的细节很少,通常只包含主要功能和流程。低保真原型的主要优点在于,它们可以在设计早期迅速创建和修改,使得设计师和利益相关者能够快速迭代和改进设计。

  • 中保真(Medium-Fidelity)原型位于低保真和高保真之间,它们在视觉和交互上比低保真原型更详细。中保真原型通常包括更多的页面,具有更准确的内容和功能。它们通常用于进行更深入的用户测试和评审,以进一步验证和改进设计。

  • 高保真(High-Fidelity)原型看起来和感觉就像最终产品,它们包含所有的细节,如颜色、图像、字体和布局。高保真原型可以提供用户全面的交互体验,包括动画和过渡效果。它们主要用于在设计的最后阶段进行细致的用户测试和评审。

常用的绘制工具

  • Axure:Axure RP 是一个专业的快速原型设计工具,能够帮助设计师快速创建线框图、流程图、原型等,支持多人协作,并且可以生成HTML文件供用户体验。

  • Figma:Figma 是一款基于云计算的协作式UI设计工具。它的优点在于,可以实时协作,设计师可以在同一项目中并行工作,同时支持向量网络编辑和版本控制。

  • Adobe XD:Adobe XD 是Adobe公司推出的一款用于用户体验设计、原型设计的工具。它的优点是集设计和原型两个功能于一体,且与Adobe其他软件的兼容性强。

  • 墨刀xiaopiu等:墨刀是一款简单易用的在线原型设计工具,支持团队协作,适合快速制作简单的交互原型。xiaopiu则是一款面向移动端的原型设计工具,提供大量现成的组件和模板,非常适合初学者使用。

Axure是最基础的原型绘制工具,没有现成封装好的交互动画、组件,一开始入门门槛比较高,只要迈过去,使用它可以达到完全高保真的效果,通过你日积月累的经验,丰富的原件库、模板,你的原型绘制效率也会提高。

国内一大批原型设计工具,都是封装好的组件、交互效果,效率是高的,但是并不是所有的封装都可以达到想要的效果。而且一旦使用了墨刀、xiaopiu这类工具,再去用Axure就非常难。

Axure的灵活性和可定制性是它的一大优点,它可以让设计师有更大的自由度,创造出独特的用户体验。此外,Axure还有强大的动态面板和变量功能,可以实现复杂的交互效果,这是许多其他工具无法比拟的。

学习Axure对于入门选手是一个挑战,接受并且战胜这个挑战,那么你的原型效果和绘制效率都不会比其他设计工具差,而且会更好。其他原型设计类工具的使用都不在话下。

二、认识界面

2.1 界面概览

Axure的界面主要由以下几个部分构成:

页面区: 页面区是Axure的核心工作区域,你可以在这里创建和组织你的页面和元件。页面区提供了多种工具,让你可以更容易地管理你的设计。

  • 新增页面:点击右上角的文件图标可以快速新建页面。

  • 新增页面夹:如果你的项目中有很多页面,你可以通过点击右上角的文件夹图标来创建页面夹,以便更好地组织你的页面。

  • 页面层级组织:你可以通过拖拽页面来改变它们的顺序,或者将它们移动到不同的文件夹中。

  • 重命名/修改等:右键点击页面,你可以重命名、删除或复制页面。

2.2 概要区

概要区显示了你的设计中的所有元件和它们的层级关系。如果你的设计中有很多元件,这个功能会非常有用。

2.3 元件库

元件库包含了Axure的内置元件,以及你可以自己创建的元件。

  • AXURE自带元件:Axure提供了一套基础的元件库,包括按钮、输入框、图像等常用元件。

  • 创建自己的元件库:你可以将常用的设计元素保存到自己的元件库中,以便在多个项目中复用。

  • 导入元件:你还可以导入其他设计系统的元件(*.rplib文件)。

2.4 母版区

母版是一种特殊类型的元件,它可以在多个页面上重复使用。你可以将经常在多个页面上重复出现的元素,如导航菜单、页脚等,保存为母版,然后在需要的页面上调用它。对母版的任何更改都会自动应用到所有使用该母版的页面上。

2.5 样式区

样式区是你可以修改和定义元件样式的地方。它包括了各种视觉属性,如颜色、字体、大小、边框等等。需要注意的是,基础元件、动态面板、中继器他们的样式设计都不同

2.6 交互区

交互区是你可以为元件添加和定义交互行为的地方。Axure的交互功能非常强大,可以实现各种复杂的用户交互效果。

  • 添加交互:选择元件后,你可以在交互区为元件添加各种事件行为,如点击、鼠标移入、拖拽等。

  • 定义交互效果:在交互区,你可以详细定义交互的效果,如跳转到其他页面、显示或隐藏元件、改变元件属性等。你甚至可以使用条件逻辑来创建更复杂的交互。

三. 认识元件

元件定义:

件是Axure中用来构建界面的基本单位,它们可以是图形、文本、按钮、列表或其他用户界面元素。

元件分类:

  • 基本元件:包含矩形、圆、图片、按钮、文本、动态面板、中继器、热区等

  • 表单元件:包含文本框、下拉框、复选框、单选康

  • 表格元件:包含树、表格等

  • 标记元件:包含快照、便签、标记等

  • 流程图:包含各种类型的流程图

特殊元件认识:

对于绘制交互界面,最常用的是基本元件,像矩形、圆这些基础元件是非常好理解的,而动态面板、中继器需要花功夫理解学会使用

  • 动态面板:IPhone15的灵动岛其实和动态面板是一个概念,我们知道灵动岛所在的区域,当有来电通知、APP消息通知、播放歌曲时,这个区域会显示对应的信息。而动态面板指的就是在同一区域,因用户操作、系统反馈而产生的区域内容的变化

  • 中继器:中继器这个概念在中文层面不太好理解,我们看它的英文Repeater,顾名思义就是重复的元素。原型界面中有很多是重复的内容排布,在绘制过程中,不需要每条目都画一遍,只需考虑哪些内容是重复的,绘制一个后转化为中继器。快速绘制完成数据填充和排版

因此,我们在设计时,一定要绘制页面结构图,并且判断这个页面是否属于动态面板,是否有中继器的属性

元件的样式和交互

每个元件都有一系列的属性,包括位置、大小、颜色、字体等。通过修改这些属性,设计师可以精确地控制元件的外观和布局

设计师可以为元件添加各种交互行为,如点击、悬停、拖动等,并定义这些行为的效果,如跳转到其他页面、显示或隐藏元素、改变元素的属性等

四、样式设计

在 Axure 中,样式设计是一项关键任务,它包含各种元素的视觉属性,如颜色、形状、尺寸、边框,甚至包括元素的位置和布局。

选择模式

Axure 提供两种选择模式:流程图模式和元件模式。根据你需要创建的元素类型,可以在这两种模式中进行切换。

插入元件

你可以通过工具栏中的各种绘图工具来插入元件,包括钢笔工具、矩形工具、圆形工具等。通过这些工具,你可以在画布上绘制出你想要的形状。

调整元件形状

在 Axure 中,你可以通过拖动元件的边缘或角落来调整其形状。此外,你还可以通过点工具来选择元件,并拖动点来改变元件的形状。

元件层级

元件层级决定了元件在画布上的显示顺序。你可以通过“置于顶层”和“置于底层”的选项来改变元件的层级。

组合和取消组合

当你需要将多个元件作为一个整体进行操作时,可以选择这些元件,然后使用快捷键 ctrl+g 来将它们组合起来。如果需要取消组合,同样使用 ctrl+g 快捷键。

元件布局

Axure 提供了多种布局选项,包括左对齐、居中对齐、右对齐、顶部对齐、中部对齐、底部对齐、水平等距和垂直等距。你可以根据需要选择合适的布局方式。

元件样式

元件样式包括元件的大小、文字样式、边框样式等。你可以在样式面板中设置这些属性。

特殊元件的样式

对于动态面板和中继器这样的特殊元件,它们的样式设置与普通元件有所不同。需要特别注意的是,动态面板可以包含多个状态,每个状态可以有不同的样式。而中继器则可以用来创建重复的元素,每个元素可以应用相同的样式。

五、交互设计

Axure 是一款强大的交互设计工具,通过理解和掌握它的事件和动作逻辑,可以帮助你创造高度互动的原型。以下是 Axure 在交互设计中的主要应用:

5.1 交互事件

事件是触发动作的操作。这些操作可以是用户的鼠标点击、键盘输入、页面加载等。不同的元件类型(页面、元件、中继器等)对应不同的事件种类。根据选中的元件类型,Axure 会提供相应的事件列表供你选择。

5.2 动作

动作是由事件触发的元件行为。这些行为可以是链接到其他页面、显示或隐藏元件、改变元件属性等。Axure 提供了丰富的动作类型,包括链接动作、元件动作、中继器动作和其他动作,以满足不同的设计需求。

5.3 交互样式

交互样式是元件在特定交互状态下的显示样式。Axure 提供了一系列预定义的交互样式,包括鼠标悬停(Hover)、鼠标按下(MouseDown)、选中(Selected)、焦点(Focused)等。你可以为元件定义不同的交互样式,以提升用户体验。

理解这些基本概念后,你可以通过组合不同的事件、动作和交互样式,设计出丰富、生动的交互效果。在实际设计过程中,尝试各种不同的组合和配置,不断调试和优化,将有助于你更好地掌握 Axure 的交互设计功能。

5.4 条件逻辑

在Axure中,你可以为事件添加条件逻辑。这就意味着你可以创建一个判断,如果满足某些条件,那么就执行某个动作。这种功能非常强大,可以帮助你创建更复杂的交互。

5.5 变量和函数

Axure支持使用变量和函数来创建更复杂的交互。你可以定义自己的全局变量,然后在事件和动作中引用这些变量。此外,Axure还提供了一系列的内置函数,你可以用它们进行数学运算、处理文本等。

六、预览、导出和共享

在Axure RP中,你可以使用预览、导出和共享功能,来让其他人看到你的设计成果。

预览:在Axure RP中,你可以点击工具栏上的"预览"按钮,以在默认浏览器中打开当前的页面。预览功能是一个很好的工具,让你可以在完成设计后立即查看其效果。需要注意的是,预览的尺寸将根据你在Axure中设置的页面尺寸来决定。如果你的设计需要在不同设备或窗口大小上查看,你可能需要在预览前调整你的页面尺寸。

导出:Axure RP支持将你的设计导出为HTML文件,这意味着你可以将你的设计变成一个可以在任何浏览器中查看的网页。要导出你的设计,只需点击菜单栏上的"文件" -> "导出" -> "到HTML...",然后选择一个保存位置。导出的文件包括一个HTML文件和一个配套的文件夹,包含你的设计所需的所有资源。你可以将这些文件上传到任何可以托管静态网站的服务器上,以便在网上分享你的设计。

共享:Axure还提供了一个在线共享服务,叫做Axure Share。使用Axure Share,你可以直接从Axure RP上传你的设计,然后生成一个链接,你可以将这个链接发送给任何人,让他们可以在浏览器中查看你的设计。要使用Axure Share,你需要在Axure网站上创建一个免费账户。然后在Axure RP中,点击菜单栏上的"发布" -> "到Axure Share...",然后按照提示操作即可。

七、快捷键

Axure 提供了一系列的快捷键以帮助用户提升工作效率。以下是一些常用的 Axure 快捷键:

常规操作:

  • Ctrl + N:新建项目

  • Ctrl + O:打开项目

  • Ctrl + S:保存项目

  • Ctrl + Z:撤销

  • Ctrl + Y:重做

  • Ctrl + C:复制

  • Ctrl + V:粘贴

  • Ctrl + X:剪切

  • Ctrl + A:全选

  • Ctrl + G:组合

  • Ctrl + Shift + G:取消组合

编辑操作:

  • Ctrl + D:复制并粘贴选定元素

  • Ctrl + [ / ]:将选定元素向前/向后移动一层

  • Ctrl + Shift + [ / ]:将选定元素移动到最顶层/最底层

  • Ctrl + L / R / T / B:左对齐/右对齐/顶对齐/底对齐选定元素

  • Ctrl + Alt + C / M:水平/垂直居中选定元素

查看操作:

  • Ctrl + + / -:放大/缩小视图

  • Ctrl + 0:实际大小

  • Ctrl + 1:适应窗口

八. 相关网站

以下是一些相关的Axure RP资源网站,它们提供了大量的教程、模板、示例和社区讨论:

  1. Axure官方网站 (https://www.axure.com/):这是Axure的官方网站,上面有最新的产品信息、教程和支持资源。

  2. Axure Forum (https://forum.axure.com/):这是Axure的官方论坛,你可以在这里寻找答案、分享你的工作或者请求帮助。

  3. Axureland (https://axureland.com/):这是一个收集了许多Axure资源(包括教程、模板和示例)的网站。

  4. UX/UI Land (https://uxuiland.com/):这个网站提供了一些关于UX/UI设计的资源,其中包括Axure RP的教程和模板。

  5. Axure Themes (https://www.axurethemes.com/):这个网站提供了一些可以在Axure RP中使用的预制主题和模板。

  6. Axure Widgets (https://www.axurewidgets.com/):这个网站提供了一些可以在Axure RP中使用的预制组件和元件。

  7. Axure shophttps://www.axureshop.com/):提供基于Axure软件设计的网页产品原型、APP产品原型、手机H5页面原型、小程序原型的发布和下载。