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

如何在Axure中从无到有创建原型呢?一般你是怎么做的呢?这里结合一位学员的学习过程,一起来看看。 先说一下做的内容是什么。这个产品是一个P2P网贷类的产品,有多种贷款模式,在选择其中的一种模式之后,系统会进行“是否登录/注册”的判断,是和否分别有不同的动作指向。 了解制作的背景之后,来看看这位同学是怎么做的。

 

1

理清逻辑,制作流程图 

同学在动手绘制原型之前,将前面说的判断过程先整体理清,清楚整个过程是如何的,每个步骤之间是如何连接在一起的,在什么地方需要做出判断,不同的结果分别是什么。 清楚了之后,画出了整个过程的流程图,将思路进一步清晰化,并且展示出来。

 

删除

(选填) 图片描述

 

2

根据流程图,整理结构框架

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

 

删除

(选填) 图片描述

 

3

确定页面布局

结构框架确定了之后,就需要对每一个页面进行元素的排版,排版之前,一般都会先对页面进行一个布局设计的考虑。 这里做的是一个APP,所以首先确定App的尺寸(尺寸规范可以参考往期的文章)。

 

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

 

删除

(选填) 图片描述

 

删除

(选填) 图片描述

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

 

删除

(选填) 图片描述

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

 

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

 

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

 

4

内容完善

页面布局布的就是内容块,当决定了某块内容的放置位置之后,就可以一块一块的完善设计内容,使其接近于最终产品的展示样式。 这时候我们就需要调整各个元素的样式、结构,最重要的是要进行交互的设置。还是以登录的页面来看。

 

这位同学在做的时候确定了有两种登录方式:短信快捷登录和账号登录。那么在登录界面上我们需要设置两种登录方式互相切换的交互,用的是动态面板。

 

删除

(选填) 图片描述

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

 

删除

(选填) 图片描述

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

 

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

 

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

 

(加微信:pexuepexue,小编邀请您进入全国产品经理交流群)

群内每日分享学习资料、重磅报告、面试问题、招聘信息、免费课程

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章