使用Axure完成交互式UI设计

前期准备

页面逻辑梳理

这个需要结合小组成员开发前期的架构和设计，利用思维导图和用例图，以每一个功能为导图去设计梳理每一个需要用到的页面。比如在我们的项目中，我们需要主页面设计，由于主页面是链接各个子页面和功能的一个中心点，所以将主页面设置为完成功能中导图的第一级子集。由主页面出发，我们需要将：登陆注册、查看文章详情、查看个人页面以及发布活动这些功能串连在一起。登陆注册完成之后，需要再次回到已经登陆好的主界面上；查看文章详情页面还需要有加入该活动这个弹框；在个人页面中，需要展示本人参与和发起的活动，同时需要支持个人信息修改以及充值功能；在任务发布的功能中，需要让用户输入与活动有关的信息。
整理好需要的页面布局，这样可以方便后期在页面间交互和功能需求上的逻辑关系。

加入需要的元件库

加入元件库的目的是为了让我们的设计，与真实的前端开发会用到的控件想匹配，让前端和设计能比较统一。在前端设计中，我们已经确定了使用element-ui组件库，使用fontawesome中的icon完成前端需要，所以在UI设计时，我们需要向Axure引入强大的元件库。可以从官网中下载。对应网址如下：

• Element-UI for Axure
• Font awesome for Axure

正式工作

• 背景设置
  背景设置包括背景色，以及通过设置形状（无边框，填充颜色同背景色或透明）来设置背景。这一点主要是需要考虑在多种浏览器以及窗口大小变化这些情况。也需要考虑到一些部件是绝对位置还是相对位置等。

• 交互规则
  交互规则主要用到的有以下几个：1、下拉效果2、tab滑动效果3、hover选中4、面板切换推拉方式。这几种规则需要用到例如按钮、下拉选项中。所以需要尽可能的贴合用户的使用习惯选择

• 设计风格统一
  这里主要是字体、字号、颜色、形状、圆角等的统一

• 中继器
  由于在我们的web中，用到很多活动列表，这样就需要制作一个中继器出来，方便后期迭代的梳理和查找，能让页面生成的时候更加省事方便。

• 多层动态面板
  针对页面布局类似的页面，这里是采用多层动态面板的做法。比如在主页中，我们可以按照社团、时间等排序的去查找活动，如下图所示。
  

收尾工作

• 寻找还欠缺的部分功能
  这里需要利用Axure预览页面的功能，结合产品设计分析，找出在UI中没有完成的部分功能交互。
• 完善交互信息
  需要在设计分析的基础上，进一步完善前端页面的交互功能

总结

在本次UI设计的时候，我真的学到了很多关于Axure的知识，也结合了很多博客以及看了很多网站的设计，在Axure官方给的教程与商店中，学习了很多Element-ui风格的web页面。总的来说，UI设计其实没有什么灵感，最重要的是让功能简单，让页面简单，让交互和谐。