*开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言

昨天我们对轩玖记账APP进行了初步的需求分析

获得了以下功能的需求表：

功能	功能描述	所需字段
每日流水功能	每日流水的增删查改、每项流水能够扣除固定账户的资金、自动添加日期以及主动修改日期、消费的详情信息、以及上传图片功能（毕竟我会懒得不想输入详情信息）	流水名称、流水金额、消费账户、消费详情、消费图片
APP功能设置	设置软件启动密码、设置是否隐藏首页金额功能、设置资产是否累计账户资金、设置负债是否累计账户资金	启动密码、首页金额、资产累计、负债累计
资产设置功能	资产的增删查改	资产名称、资产金额、资产月收益、资产月收益时间
账户设置功能	账户的增删查改	账户名称、账户金额
负债设置功能	负债的增删查改	负债名称、负债总金额、负债月还款金额、负债月还款时间

 

接下来我们将根据以上的功能需求表进行原型图的设计，在这里我们使用的是Axure RP软件，进行低保真原型图设计（这个软件DEMO部分，只做简单的低保真原型图设计，深入的交互等高保真原型图暂不涉及）。

 

*低保真原型图和高保真原型图有什么区别？

 

低保真原型图：一般只有线框组成的各个在客户端显示的元件

 

高保真原型图：展示了正常在客户端显示的画面，并且可以进行交互。*

 

正文

 

第一步：安装Axure

这里我在网盘链接进行了分享，如果没有该软件的可以下载安装一下

链接：https://pan.baidu.com/s/1-zIhx5AYVcrJAtzhyI0Zbw?pwd=yygo 
提取码：yygo

第二步： Axure 初步使用教程

打开Axure软件后界面如下：

 

关于这个软件，我们主要使用的就是一号区域的元件库、二号区域的菜单栏、三号区域的样式栏以及四号区域的画板（可能正常叫“主窗口”或者“工作区”之类的，但是我感觉更像画板，便这么称呼了）

 

基础操作一：拖放元件和设置元件属性

我们在元件库内可以拖出我们需要的元件在画板，并且在右侧的样式栏中可以设置该原件的各种属性。如下图示例：

基础操作二：更改两个元件的相对位置

当我们拖动的两个元件没有达到我们想要的效果怎么办？例如我想让以下的文字“轩玖记账”相对于外部的边框居中。

那么我们需要操作三个步骤

ａ、选择第一个边框作为父元素

ｂ、选择第二个边框作为子元素

ｃ、在２号区域的菜单栏单击“居中”功能按钮

这样便会发现我们想要的效果便以及完成

 

基础操作三：将多个元件进行组合

当我们操作一个一个元件太花费时间了怎么办？例如我想同时移动两个元件

那么我们需要操作两个步骤

ａ、鼠标左键单击画板，框选住我们想要同时移动的原件（或者按住键盘SHIFT键，依次单击某个原件）

ｂ、在２号区域的菜单栏单击“组合”功能按钮  

 

基础操作三：复制元件或者元件组

当我们想要这个原件复制一个，除了CTRL＿C、CTRL＿Ｖ之外还有没有更简单的方法？

当然有！这里只需要操作两个步骤

ａ、鼠标左键单击画板，框选住我们想要复制的原件（或者直接单击某个原件）

ｂ、按下键盘CTRL的同时，鼠标左键单击任意一个元件进行拖动。

这样我们便成功的复制了一个相同的元件了。

 

小技巧：按下CTRL键的同时如果再按下SHIFT键，就可以在相对于被复制元件的水平或者垂直方向进行复制了，如下图所示：

 

 

基础教程完毕。接下来就让我们用１、２、３、４号区域的功能完成轩玖记账APP的低保真原型图吧！

 

轩玖记账低保真效果图

通过以上的几种方法最终完成了该软件的低保真原型图（这里web端和Android端都使用相同的页面）

在我们下一步进行前端开发时，根据低保真原型图进行开发就可以了。

本篇就此结束，希望能对你有所帮助，当然如有表述错误，恳请指正。

我们下篇见~