Axure入门教程 -- 第二章:创建第一个Axure项目

第二章:创建第一个Axure项目

1. Axure项目的结构与管理

1.1 页面与页面树

操作步骤:

  1. 打开 Axure,点击左上角的**"文件"** > "新建文件",创建一个空白项目。
  2. 在页面树面板(左侧)中,右键 > "添加页面",创建多个页面(如"首页""关于我们""联系我们")。
  3. 页面可以通过拖拽调整顺序,双击页面名称可以重命名。

实际场景:

• 企业官网设计:使用页面树管理多个页面(如首页、服务介绍、联系页面)。

• 复杂项目结构:例如设计一个电商网站,可以在页面树中创建"首页""产品详情页""购物车页""支付页"等,模拟用户浏览路径。
关键点与难点分析:

• 页面树是项目的组织结构,需合理命名并按照用户逻辑进行分层管理。

• 难点:多页面设计中,保证不同页面样式和交互逻辑的一致性。可以通过母版(Master)来统一管理,后续会详细讲解。

1.2 页面视图与设置

操作步骤:

  1. 在页面编辑区,右键空白处,选择**"页面设置"**,调整页面尺寸(如1440px宽,900px高)。
  2. 点击工具栏中的**"网格和辅助线"**,设置网格间距(如10px)并启用对齐吸附功能,方便排版。

实际场景:

• 移动端原型:将页面宽度设置为375px,高度为667px,模拟iPhone的屏幕尺寸。

• 桌面端原型:设置宽度为1440px或1920px,模拟常见的网页设计尺寸。
关键点与难点分析:

• 网格设置对于保持组件对齐非常重要,尤其是复杂布局时。

• 难点:不同设备的页面尺寸需要提前规划,建议了解常见屏幕分辨率以选择合适的设置。

2. 新建项目与设置

2.1 创建新项目

操作步骤:

  1. 点击工具栏中的**"新建项目"**,创建一个空白页面。
  2. 在右侧属性面板中,设置页面背景色、全局字体样式等基础属性。
  3. 使用工具栏中的**"矩形""文本框"**等工具,快速绘制一个简单的页面布局。
    实际场景:

• 登录页面设计:绘制输入框、按钮,并调整组件位置和样式,创建一个简单的登录原型。

• 产品展示页设计:使用图片占位符表示产品图片,配合文本组件标注产品名称和价格。
关键点与难点分析:

• 初学者容易忽略页面属性的设置(如背景色和字体样式),建议在项目开始时进行全局规范。

• 难点:如何快速添加并调整组件布局。可以通过辅助线和网格吸附来优化。

2.2 页面尺寸与样式设置

操作步骤:

  1. 点击工具栏中的**"页面设置"**按钮,选择合适的分辨率(如桌面端1440x900)。
  2. 使用右侧属性面板,设置全局字体(如微软雅黑,16px,#333)。
  3. 添加辅助线:拖动标尺(页面边缘)到页面中央,方便对齐布局。
    实际场景:

• 移动端适配设计:调整页面为移动端尺寸,结合辅助线进行排版设计。

• 全屏展示原型:设置宽度为1920px,设计适合大屏幕的用户界面。
关键点与难点分析:

• 样式设置直接影响原型的整体效果,应提前规划颜色、字体、组件间距等视觉规范。

• 难点:组件样式的一致性,可通过样式库或母版来解决。

3. 绘制基本组件

3.1 常用组件的添加

操作步骤:

  1. 打开工具栏,选择基本组件(如矩形、文本、图片占位符)。

  2. 拖动到页面上,调整位置和尺寸。

  3. 右键单击组件,设置其样式(如背景色、边框、阴影)。
    示例操作:创建登录页面原型

  4. 绘制矩形组件,表示输入框:
    • 拖动矩形到页面,设置大小为300x40px,边框颜色为灰色(#ccc),背景色为白色。

  5. 添加文本标签:
    • 在输入框上方添加"用户名"文字,字体设置为16px,颜色为#333。

  6. 绘制按钮:
    • 添加一个矩形组件,设置为蓝色背景(#007BFF),添加白色文字"登录"。

3.2 组件属性和样式调整

操作步骤:

  1. 选中组件,在右侧属性面板中调整样式:
    • 设置字体、颜色、背景色、圆角半径等属性。
  2. 点击工具栏中的**"格式刷"**,快速复制样式到其他组件。
    实际场景:

• 表单页面设计:创建用户名和密码输入框,设置按钮交互效果。

• 导航栏设计:绘制矩形组件作为背景,添加多个文字组件表示导航按钮,并对齐分布。
关键点与难点分析:

• 重点:通过"格式刷"和样式面板快速调整多个组件的样式一致性。

• 难点:如何在绘制组件时对齐并保持间距一致。可以使用 Axure 的**"对齐工具"**来解决。

4. 互动实际操作练习

任务1:创建一个简单的登录页面

  1. 目标:创建一个带有用户名输入框、密码输入框和登录按钮的页面。

  2. 步骤提示:
    • 添加矩形组件表示输入框,并添加文本组件作为标签。
    • 调整每个组件的间距,保持对齐。
    • 为登录按钮设置样式(蓝色背景+白色文字)。
    任务2:创建多页面跳转原型

  3. 目标:实现"首页"跳转到"关于我们"页面。

  4. 步骤提示:
    • 创建两个页面,分别命名为"首页"和"关于我们"。
    • 在首页添加一个按钮,右键单击设置"单击时跳转到'关于我们'"。
    • 预览效果,验证跳转功能是否正常。

5. 关键点与难点总结

  1. 关键点:
    • 熟悉 Axure 的基本界面与工具操作。
    • 合理规划页面结构和全局样式。
    • 使用对齐工具和网格,保持布局整齐美观。
  2. 难点与解决方案:
    • 多页面逻辑管理:建议使用 Axure 的页面树合理命名和组织。
    • 组件样式的一致性:利用"格式刷"和"样式库"功能快速调整样式。

6. 实际使用场景

案例1:企业官网原型设计

复制代码
•	创建页面树,分别设计"首页""关于我们""服务介绍"等页面。
•	添加跳转按钮,模拟用户从首页导航到其他页面的路径。

案例2:移动端登录界面设计

复制代码
•	设置页面宽度为375px,绘制登录表单并调整组件布局。
•	添加按钮点击交互,模拟登录后的跳转。

通过以上内容,初学者可以在实际操作中掌握 Axure 的基本功能,为后续学习交互设计和复杂逻辑奠定基础。

相关推荐
左手厨刀右手茼蒿12 小时前
Flutter for OpenHarmony: Flutter 三方库 shamsi_date 助力鸿蒙应用精准适配波斯历法(中东出海必备)
android·flutter·ui·华为·自动化·harmonyos
互联网散修17 小时前
鸿蒙应用开发UI基础第三十节:循环渲染核心ForEach 实战与性能优化
ui·华为·harmonyos
程序员Ctrl喵1 天前
状态管理与响应式编程 —— 驾驭复杂应用的“灵魂工程”
开发语言·flutter·ui·架构
AxureMost1 天前
Seelen UI 桌面美化工具(仿MAC交互)
macos·ui·交互
colin52101 天前
AxureRP11母版-多母版之间交互功能教程JH110003
交互·axure·axure母版·母版交互
I'm Jie2 天前
Swagger UI 本地化部署,解决 FastAPI Swagger UI 依赖外部 CDN 加载失败问题
python·ui·fastapi·swagger·swagger ui
爱学习的程序媛2 天前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
爱学习的程序媛2 天前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
紫丁香2 天前
Selenium自动化测试详解1
python·selenium·测试工具·ui
spencer_tseng2 天前
Terminal Single Sign-on
axure