软件创新作业--原型工具初步使用

目录

• 0. 序言
• 1. 初步学习Axure
  • 1.1 软件安装
  • 1.2 界面介绍
• 2 简单例子
  • 2.1 准备网格
  • 2.2 使用基本图形实现占位
  • 2.3 使用合适的Widget替换占位符
  • 2.4 创建组件
  • 2.5 实现结果
• 3. 总结

0. 序言

这次的软件创新作业是对比介绍多种原型工具的优缺点, 或是较详细的介绍其中一种原型工具的使用. 其实原本想介绍多个原型工具的对比和优缺点的, 但老师提供的资料里, 已经对不同的原型工具进行了分析. 所以自己还是选择介绍其中一款原型工具, 我选择了Axure. 选择的原因很简单, 因为多人用, 资料什么的会更全. 据说Axure就像文档界的word, 图片界的ps.

1. 初步学习Axure

1.1 软件安装

官网Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool

这个到官网按步骤安装就好, 简单注册后就能够使用了

软件很小, 据说使用起来也很简单, 就像word那样比较容易上手

1.2 界面介绍

Learn & Support - Axure

学习路径是按照官网的Guide进行的, 内容很贴心.

学完的话, 基本的应该都会使用了

界面如下

1. 工具栏, 类似word的工具栏
2. 画布, 在这里设计UI
3. Page: 一个软件被分为多个页面, 一个页面也可以拥有多个子页面, 页面由Widget小工具构成, Widget包括Text文本, Button, Icon等各 种基本UI元素
4. Outline: 用来展示页面中Widget的层次结构, 在这里可以对Widget进行筛选
5. Libraries: 理解为Widget就好, 只是它是多个Widgets的集合, 也就是说你可以从网上下载更多的Widget, 甚至自定义Widget
6. Component: 将多个Widget封装为组件, 以实现复用的目的, 当该改变Component时, 它所有的实例都会一同改变
7. Style: 在这里调整Widget的样式
8. Interactions: 让Widget可以和用户实现交互, 它是通过事件机制来实现. 有Event, Action和Case三个概念, Event是事件发生的条件, Action是处理事件的行为, Case可以根据条件让不同的Action响应Event. 这部分比较难
9. Note: 类似注释

2 简单例子

由于本学期有android的课, 加上小组的小项目决定做android的app, 这个例子就是做一个简单的首页UI

我画了一个很简单的草图, 就按这个做

2.1 准备网格

• 新建一个项目之后, 点击Page栏里的默认Page, 将它改名为Home
• 在Style栏, 修改Page Dimensions

• 同时点击View->Ruler, Grid, Guide->Show Grid

• 同样的点击View->Ruler, Grid, Guide->Grid Settings, 调整参数为

结果如下, 自己比较喜欢有网格的, 毕竟有点强迫症

2.2 使用基本图形实现占位

我使用矩形, 原型等基本图形, 先把界面的布局划分好. 有点类似div布局方式

要使用基本图形, 点击Libraries栏, 在Default分类中, 有很多基本图形, 只要拖拽出来就好.

然后就是对Widget调大小和样式, 这个之后再做

结果如下

2.3 使用合适的Widget替换占位符

接下来就是使用合适的Widget替换掉基础图形, 同时修改合适的样式就好了

1. 左上角的头像, 使用Image的Widget来替换

​ 要想让Image变成圆, 按以下调整

2. 切换Libraries为Icons, Axure内置了一些Icons, 虽然不多, 但也足够了

​ 使用合适的Icon替换掉圆形

3. 其它Widget, 比如文本的样式, 字体大小, 对齐方式啊都比较简单, 稍微看会都能明白其中的含义, 这里就不赘述了

2.4 创建组件

组件的优点上面提到过了, 只要修改组件本体, 它的所有实例都会同步更改.

由于Home页面展示给用户推荐的多种食谱, 多个食谱条的样式都是相同的, 因此适合做成组件

• 要创建组件, 按住Ctrl, 选择要组成组件的Widgets.
• 鼠标右键, 选择Create Component

双击组件, 就能进入组件编辑的独立页面, 在这里不会受到其它无关组件的干扰

2.5 实现结果

3. 总结

• 受限于贫瘠的艺术细胞, 以及人比较笨, 比较懒的原因. UI多数使用的是纯色, 而不是图片, UI中组件元素也比较少
• 左下角的Category是自己画的, 只是想看一下导入自己的图片会怎么样.
• 制作组件时发现, 似乎无法在单独的实例中, 进行样式的重写操作. 这意味着组件的所有实体样式都是一样的, 不能够单独改变, 要想改变, 只能够全部一起改变.
• 能用Axure其实很简单, 只是想用好Axure不容易, 因为Axure不仅有很多提高效率的快捷键; 也有很多提高效率的工具和设置. 并且, 有一些美术能力, 感觉更能用好Axure
• Axure使用体验还不错, 其它原型工具没使用过, 不评价
• Axure是收费的, 新人有30天试用期
• 例子中没有使用到交互设置, 只是做了简单的UI界面