2025.5.22 Axure 基础与线框图制作学习笔记

一、Axure 基础 - 界面及相关了解

1. 界面布局

   • 工具栏 ：位于软件上方，包含新建、打开、保存等常用文件操作按钮，以及撤销、重做、剪切、复制、粘贴等编辑功能按钮，方便快速执行相关操作。

   • 元件面板 ：在左侧，提供各种基本元件，如文本框、按钮、图片、表格等，通过拖拽这些元件到画布中可以构建界面元素。元件面板还支持自定义元件库，方便团队协作和重复利用。

   • 画布 ：是设计原型的核心区域，用于放置和编辑元件，搭建页面布局。可以对画布进行放大、缩小、平移等操作，以便更精准地设计界面。

   • 母版 ：可以将多个页面中重复出现的部分（如头部、导航栏、页脚等）提取出来创建成母版，在各个页面中引用，保持页面元素的一致性，提高设计效率。当需要修改这些公共元素时，只需在母版中进行修改，所有引用该母版的页面将自动更新。

   • 页面管理器 ：用于创建、删除和管理各个页面，可以设置页面的属性、大小、背景颜色等，还可以对页面进行排序和分组，便于组织复杂的原型项目。

   • 属性面板 ：位于右侧，用于设置选中元件的属性，如位置、大小、字体、颜色、交互效果等。不同的元件具有不同的属性选项，通过设置这些属性可以实现多样化的视觉效果和交互行为。

2. 基本操作

   • 创建新项目 ：通过点击工具栏上的 “新建” 按钮，选择项目模板或空白项目来创建新的原型项目。

   • 保存项目 ：使用工具栏上的 “保存” 按钮或快捷键 Ctrl + S，将项目保存到本地或服务器上，确保设计成果不丢失。

   • 撤销与重做 ：利用工具栏上的撤销、重做按钮或快捷键 Ctrl + Z、Ctrl + Y，对操作进行回退和恢复，纠正错误操作。

   • 添加元件 ：在元件面板中选择所需的元件，拖拽到画布中合适的位置，然后通过属性面板对元件进行详细设置。

   • 调整布局 ：可以通过拖动元件、修改元件的宽高属性来调整布局，同时还可以使用对齐工具（如左对齐、居中对齐、右对齐、顶对齐、垂直居中对齐、底对齐等）和分布工具（如横向分布、纵向分布）来快速整齐地排列多个元件，保持界面的整洁和美观。

   • 添加文本 ：使用文本框元件，在画布中绘制文本框，然后输入相应的文本内容。可以通过属性面板设置文本的字体、字号、颜色、加粗、倾斜、下划线等格式，以满足不同的文本展示需求。

二、线框图制作

1. 线框图概念

   • 线框图是一种使用线条和简单的形状来描绘界面布局和结构的低保真设计表示方式，它不关注界面的视觉设计细节，如颜色、字体、图片等，而是侧重于展示页面元素的相对位置、大小和交互关系，帮助设计师快速梳理需求、规划页面架构和流程。

2. 线框图制作流程

   • 确定页面目的与功能 ：在开始制作线框图之前，明确页面的主要功能和用户目标，例如一个登录页面，其核心功能是让用户输入账号和密码进行登录，因此需要包含账号输入框、密码输入框、登录按钮等基本元素。

   • 绘制草图 ：可以先在纸上或使用简单的绘图工具快速绘制出页面的大致布局草图，确定各个元素的摆放位置和大致比例关系，这有助于在 Axure 中更高效地构建线框图。

   • 添加基本元件 ：根据草图，在 Axure 的画布中依次添加相应的元件，如文本框、按钮、列表框、图片占位符等，按照页面的逻辑顺序进行布局。

   • 调整布局与对齐 ：使用对齐工具和分布工具对元件进行整齐排列，确保页面布局合理、美观，符合用户的视觉习惯和操作流程。

   • 添加交互逻辑（基础） ：为元件添加简单的交互效果，如按钮的点击事件、文本框的输入验证等，通过设置元件的交互属性（如点击时跳转到指定页面、显示 / 隐藏其他元件等）来模拟用户与界面的基本交互行为，初步构建页面的交互框架。

3. 高保真图制作

   • 完善视觉设计 ：在完成线框图的基础上，对页面进行视觉美化，包括添加合适的颜色、字体、图标、图片等元素，使页面更加生动、吸引人。可以使用 Axure 提供的样式设置功能，对元件的外观进行详细定制，如设置背景颜色、边框样式、圆角半径等，或者导入外部设计好的图片素材作为背景或装饰元素。

   • 细化交互细节 ：进一步丰富交互效果，如为按钮添加悬停、按下等不同状态的样式变化，为页面元素添加动画效果（如淡入淡出、滑动、缩放等），增强用户与界面的互动体验。同时，可以利用 Axure 的动态面板功能，实现更复杂的交互逻辑，如选项卡切换、手风琴菜单展开 / 收起、弹出层显示 / 隐藏等。

   • 整合与测试 ：将所有页面进行整合，确保整个原型的导航流畅、交互逻辑正确无误。通过预览功能，模拟用户真实操作场景，检查页面之间的跳转是否顺畅，交互效果是否符合预期，发现问题及时进行调整和优化。

4. 交互基础

   • 事件与动作 ：Axure 的交互设计基于事件和动作的关联。事件是指用户在界面上触发的操作，如点击、双击、鼠标悬停等；动作是指系统对事件做出的响应，如跳转到页面、显示 / 隐藏元件、设置元件的值等。通过为元件添加事件并关联相应的动作，可以实现丰富的交互功能。

   • 变量与函数 ：变量用于存储数据，可以在交互过程中动态地获取或修改变量的值，从而影响页面的显示内容和交互行为。例如，可以通过设置一个计数变量来控制某个元素显示的次数或顺序。函数是用于执行特定任务的一段代码逻辑，Axure 提供了一些内置函数，如用于数学计算、字符串处理、日期时间操作等的函数，同时也支持自定义函数，以满足复杂的交互需求。

   • 条件判断 ：在交互设计中，条件判断是实现不同交互逻辑的关键。可以根据用户的输入、元件的状态、变量的值等条件，使用 if-else 语句或 switch-case 语句来判断并执行相应的动作，使页面具备智能的响应能力，例如根据用户输入的账号密码是否正确来决定是跳转到首页还是显示错误提示信息。

掌握 Axure 基础和线框图制作技巧对于产品设计和原型开发至关重要，通过不断地实践和探索，可以更高效地将创意转化为可视化的原型，更好地与团队成员和利益相关者进行沟通和协作。