Axure原型设计工具--产品经理必备

快来打我* 2024-04-19 08:15 99阅读 0赞

**目录**

Axure教程

Axure学习：严丝合缝的设计交互

一、分析

二、UI设计步骤

三、原型交互步骤

Axure案例：PC+APP

Axure案例：工单管理系统

Axure案例：数据可视化设计

--------------------

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具，它比一般创建静态原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。它同时支持多人协作设计和版本控制管理。

## Axure教程 ##

官方网站：[https://www.axure.com/][https_www.axure.com]

官方中文网站：[https://www.axure.com.cn/][https_www.axure.com.cn]

基础教程：[https://www.axure.com.cn/axure/course/][https_www.axure.com.cn_axure_course]

高级教程：[https://www.axure.com.cn/axure/advanced/][https_www.axure.com.cn_axure_advanced]

原型案例：[https://www.axure.com.cn/resource/][https_www.axure.com.cn_resource]

人人都是产品经理Axure教程：[http://www.woshipm.com/tag/axure%E6%95%99%E7%A8%8B][http_www.woshipm.com_tag_axure_E6_95_99_E7_A8_8B]

Axure元件库/源文件/素材分享平台：[https://www.axureshop.com/][https_www.axureshop.com]

## Axure学习：严丝合缝的设计交互 ##

[http://www.woshipm.com/rp/1245584.html][http_www.woshipm.com_rp_1245584.html]

以TIM登录界面为例。

![format_png][]

### 一、分析 ###

当我们手里仅有这一张截图时，怎样利用Axure做出和截图一样的原形界面呢？

首先，我们要获取到每个元件的长、宽、高、以及对应的X轴，Y轴信息

其次，我们也要知道各个元件中使用的颜色

分析截图，我们将此登录界面分为两部分，上半部为”LOGO”部，下半部分为”登录”部。

### 二、UI设计步骤 ###

将截图放在工作区，将X轴，Y轴设置为0,0.

1.标记”LOGO”部的元件位置。如下：

![format_png 1][]

移动图片到右边，在标记区域中添加元件。

1.1：背景区域：两个直角三角形，一个等边三角形（取色就使用拾色器取色）

![format_png 2][]

1.2：LOGO,应用名称位置：根据标记线，添加LOGO,应用名称，（为什么右图的LOGO看起来是正方形，而左图为矩形呢？因为右图的LOGO下有一勾，在标记时也要将此勾作为一个整体标记。）

![format_png 3][]

2.标记”登录”部的元件位置。如下：

![format_png 4][]

移动图片到右边，在标记区域中添加元件。由于登录部分元件比较多，我们需要分别拆开来看。

*  **头像**：圆形，位于左边据X轴41px，周长81px；
 *  **在线标记**：圆形，位于左边据X轴101px，周长12px；
 *  **用户名、密码输入框**：文本框，位于左边据X轴133px，宽196px，高28px；
 *  **所有的icon：**均为宽26px，高26px；
 *  **登录按钮**：按钮（矩形），与用户名、密码输入框左右对齐，高31px；

好了，记下以上的信息之后，有了标记线，就可以基本准确的画出原形图了，如下：

![format_png 5][]

### 三、原型交互步骤 ###

有了以上的原形，我们做一个简单的交互。交互需求：用户点击“登录”，跳转到正在登陆界面，正在登陆界面如下：

![format_png 6][]

这样看，这个交互就简单了，我们只需要将登陆界面转换为“动态面板”，点击登陆时，显示State2（正在登陆界面）即可。为了再复杂一点，我们设置用户名为“1234”，密码为“1234”，如下：

![format_png 7][]

F5预览，即可

备注：大家可以根据自己的需要，添加各种用例以备后续使用。

欢迎大家下载原形链接：[https://pan.baidu.com/s/1YtyC0q0-pr3V3w8cKg2apA][https_pan.baidu.com_s_1YtyC0q0-pr3V3w8cKg2apA] 密码：zvtm

## Axure案例：PC+APP ##

[https://www.axure.com.cn/78164/][https_www.axure.com.cn_78164]

![format_png 8][]

## Axure案例：工单管理系统 ##

1.  统一工单  
    无论来自哪个渠道的事情，都能用一张工单记录业务的详情，便于工作人员处理。
2.  自动分配  
    工单分配能够根据企业自行定制，自动将工单分配给制定的部门或者员工，让工单流向更加便捷和明确，让专业人员做专业的事情。
3.  一键流转  
    一键将工单流转到其他部门。从客服部门到销售部门，再到技术支持部门，无论业务多复杂，工单管理系统都能轻松应对。
4.  工单历史记录  
    从事情的开始，到事情的结束，记录所有的操作记录。清晰追踪事情进展，保障企业的业务稳定运行。

**功能介绍：**

*  工单中心
    
    1.  钉钉登录
    2.  我的工单
    3.  提交工单
    4.  我受理的工单
    5.  帮助中心
    6.  用户中心
 *  管理中心
    
    1.  组织架构
    2.  用户管理
    3.  角色权限管理
    4.  问题分类管理
    5.  工单派送管理
    6.  帮助中心内容管理
    7.  质检管理

附作品购买链接：[https://www.axureshop.com/a/696780.html][https_www.axureshop.com_a_696780.html]

演示地址：[http://a6daqq.axshare.cn][http_a6daqq.axshare.cn]

系统功能：

（1）工单处理流程图

![format_png 9][]

（2）工单转接流程图

![format_png 10][]

（3）系统实例

![format_png 11][]![format_png 12][]![format_png 13][]![format_png 14][]![format_png 15][]![format_png 16][]![format_png 17][]![format_png 18][]

## Axure案例：数据可视化设计 ##

作品链接：[https://www.axureshop.com/a/784113.html][https_www.axureshop.com_a_784113.html]

预览地址：[https://axhub.im/pro/06f71bd1a45d606a/][https_axhub.im_pro_06f71bd1a45d606a]

数据可视化组件库，包含柱形图类、折线图类、饼图类、散点图类、其他图类组件。组件使用图形和钢笔工具绘制，可编辑修改；颜色搭配合理，绘制精美；数量涵盖后台90%的可视化组件，基本满足产品可视化设计需求和高保真展示需求。点击下方链接查看作品详情：

<table> 
 <tbody> 
  <tr> 
   <td><strong>组件类</strong></td> 
   <td><strong>组件</strong></td> 
  </tr> 
  <tr> 
   <td><strong>柱形图类</strong></td> 
   <td>水平基本柱形图、水平胶囊柱形图、列表柱形图、分组柱形图、垂直基本柱形图、垂直胶囊柱形图、折线图、斑马柱形图、正负坐标柱形图</td> 
  </tr> 
  <tr> 
   <td><strong>折线图类</strong></td> 
   <td>区域图、基本折线图、双轴折线图</td> 
  </tr> 
  <tr> 
   <td><strong>饼图类</strong></td> 
   <td>基本饼图、单值百分比饼图、指标对比饼图、目标占比饼图、多维度饼图、带图饼图、多值百分比饼图、指标饼图</td> 
  </tr> 
  <tr> 
   <td><strong>散点图类</strong></td> 
   <td>散点图、气泡图</td> 
  </tr> 
  <tr> 
   <td><strong>其他图类</strong></td> 
   <td>基本水位图、雷达图、销售额动态看板、销售额静态看板（2个效果）、地图实时动态闪点效果、用户转化漏斗</td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvb255YQ_size_16_color_FFFFFF_t_70][]

其他附件：

[手机平板设计元件库][Link 1]

[完整版高仿真实战项目(UE&UI)原型设计(PC端+手机端)][https_www.axure.com.cn_78164]

[https_www.axure.com]: https://www.axure.com/
[https_www.axure.com.cn]: https://www.axure.com.cn/
[https_www.axure.com.cn_axure_course]: https://www.axure.com.cn/axure/course/
[https_www.axure.com.cn_axure_advanced]: https://www.axure.com.cn/axure/advanced/
[https_www.axure.com.cn_resource]: https://www.axure.com.cn/resource/
[http_www.woshipm.com_tag_axure_E6_95_99_E7_A8_8B]: http://www.woshipm.com/tag/axure%E6%95%99%E7%A8%8B
[https_www.axureshop.com]: https://www.axureshop.com/
[http_www.woshipm.com_rp_1245584.html]: http://www.woshipm.com/rp/1245584.html
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvc2hpcG0uY29tL3dwLWZpbGVzLzIwMTgvMDgvOXBrWW45bzZJSUpWVkVrdDFSOXoucG5nIXYuanBn?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvc2hpcG0uY29tL3dwLWZpbGVzLzIwMTgvMDgvV0lnWUY5MzJ1d3ljN1VNWXFUNHAucG5nIXYuanBn?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvc2hpcG0uY29tL3dwLWZpbGVzLzIwMTgvMDgvSjlHOVczRTdKTjJBZXV3T2l4bDIuanBnIXYuanBn?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvc2hpcG0uY29tL3dwLWZpbGVzLzIwMTgvMDgvRTRod1oxSnRTaEtkYWlUZmdINmgucG5nIXYuanBn?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvc2hpcG0uY29tL3dwLWZpbGVzLzIwMTgvMDgvZndnNTVKTm9pODcxbDEwM0N2elcucG5nIXYuanBn?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvc2hpcG0uY29tL3dwLWZpbGVzLzIwMTgvMDgvcEt2V0RTNlJxVndpSU5pUFNxczguanBnIXYuanBn?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvc2hpcG0uY29tL3dwLWZpbGVzLzIwMTgvMDgvTlNwYThKdEQxV2l1bHNVcXpuMjQuanBnIXYuanBn?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvc2hpcG0uY29tL3dwLWZpbGVzLzIwMTgvMDgvUmk1ZlRNc0dQRDlQV2FVR3RveXEuanBnIXYuanBn?x-oss-process=image/format,png
[https_pan.baidu.com_s_1YtyC0q0-pr3V3w8cKg2apA]: https://pan.baidu.com/s/1YtyC0q0-pr3V3w8cKg2apA
[https_www.axure.com.cn_78164]: https://www.axure.com.cn/78164/
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTgvMTAvMjAxODEwMjcxMjM1MTY4NS5wbmc?x-oss-process=image/format,png
[https_www.axureshop.com_a_696780.html]: https://www.axureshop.com/a/696780.html
[http_a6daqq.axshare.cn]: http://a6daqq.axshare.cn/
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ1NTg5My5qcGc?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ2MjQzNi5qcGc?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ3MTc2MS5qcGc?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ3MTcyMi5qcGc?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ3MTc1NS5qcGc?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ3MTEyNC5qcGc?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ3MTM2NC5qcGc?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ3MTE5NS5qcGc?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ3MTUzOC5qcGc?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9maWxlcy5heHVyZS5jb20uY24vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjAxOTA0MjIwNjQ3MjMyNC5qcGc?x-oss-process=image/format,png
[https_www.axureshop.com_a_784113.html]: https://www.axureshop.com/a/784113.html
[https_axhub.im_pro_06f71bd1a45d606a]: https://axhub.im/pro/06f71bd1a45d606a/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvb255YQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fca92b9bc45348c6894cce0215a063a1.png
[Link 1]: https://www.ui.cn/detail/198983.html