产品小白如何在Axure中从无到有创建原型

如何在Axure中从无到有创建原型呢？一般你是怎么做的呢？这里结合一位学员的学习过程，一起来看看。

 

先说一下做的内容是什么。这个产品是一个P2P网贷类的产品，有多种贷款模式，在选择其中的一种模式之后，系统会进行“是否登录/注册”的判断，是和否分别有不同的动作指向。

 

了解制作的背景之后，来看看这位同学是怎么做的。

1.理清逻辑，制作流程图 

同学在动手绘制原型之前，将前面说的判断过程先整体理清，清楚整个过程是如何的，每个步骤之间是如何连接在一起的，在什么地方需要做出判断，不同的结果分别是什么。

 

清楚了之后，画出了整个过程的流程图，将思路进一步清晰化，并且展示出来。

 

2.根据流程图，整理结构框

将这个过程中需要用到的页面整理出来，也就是它的结构框架。需要多少个页面，每个页面之间的结构是如何的。

3.确定页面布局

结构框架确定了之后，就需要对每一个页面进行元素的排版，排版之前，一般都会先对页面进行一个布局设计的考虑。

 

这里做的是一个APP，所以首先确定App的尺寸（尺寸规范可以参考往期的文章）。这里这位同学采用的是360X640这个尺寸规范。

 

由于同学在另外的页面中制作了一个手机壳，然后用内部框架制作了手机屏幕，内部框架与APP内容做了一个链接，所以这里页面尺寸与屏幕的尺寸也就是内部框架的尺寸应保持一致，同样是360X640。

 

接着以登录页面为例，需要哪些元素，我们先确定。手机的状态栏、页面名称、登录方式、对应的输入框、按钮等。先把大概的布局确定下来。

这里做一下扩展。

如果是web产品应该怎么做呢？通常会遵循一些已有产品总结出来的布局结构，比如三行三列布局，三行两列布局等，再如左导航右内容的形式，左内容右导航的形式等，这些都是大的布局结构，是整体页面的布局排版。

 

细分到具体页面内容的时候，就需要对每一个内容块的展示位置进行布局，如企业网站首页的一般内容有图片新闻，通知通告，公司新闻，产品介绍，产品展示等等，我们需要对这些内容块进行一定的设计布局，这里的布局结构取决于设计人员对内容编排的把握，不同的布局会产生不同的效果。

 

这种情况下，即对某一类产品的布局把握不好的时候，可以参照已有成熟产品的内容布局，因为它们已经有运营数据在支持。

4.内容完善

页面布局布的就是内容块，当决定了某块内容的放置位置之后，就可以一块一块的完善设计内容，使其接近于最终产品的展示样式。

 

这时候我们就需要调整各个元素的样式、结构，最重要的是要进行交互的设置。还是以登录的页面来看。这位同学在做的时候确定了有两种登录方式：短信快捷登录和账号登录。那么在登录界面上我们需要设置两种登录方式互相切换的交互，用的是动态面板。

 

又如最初在选择贷款模式的时候进行“是否登录”的判断，则是利用了变量的不同值去指代登录的状态，在设置的时候只需对变量的值进行判断即可。

 

这里用到的是Axure RP的核心功能，如组件的组合使用，动态面板的灵活应用等等，需要去发挥设计人员自己的想象力和创造力。世上本没有路，走的人多了，也就有了路。这里可以开辟自己的道路，如果还没有这个能力的话，也可以先走走先人开辟的道路。

 

如果你想做的跟这位同学不同，是一个完整的产品的话，就需要先确定产品的信息框架。好比建房子时先打好地基，画好建筑结构图。确定好产品的整体信息框架之后，剩下的内容就饿和我们同学做的一样了，一步一步将产品完善。

 

文章中的截图均采用自陪学网VIP学员学习成果，请勿任意转载。