在线原型页面设计怎么做-如何利用AxureRP8搭建简易登录页面原型图？

最后半天心不在焉拖拖拽拽把各个部分都搭建好了,可是做出来的页面惨不忍睹,自己都没勇气打开。晚上回家后和邻居又讨论了三个小时,最后熬夜把原型图完成。虽然最后原型图也没有被采纳,但是这次原型图居然受到了表扬,领导说我的原型图有了提升。今天就写下这篇文章,为这段时间的工作做一个总结。原型设计前:①0202 重点突出内容:要清楚明了页面需要突出的内容是什么,这个在前期的讨论中一般就已经确定;②0202 第一功能目的:除了内容以外,功能方面需要突出的是什么?如引导注册或像下一级页面引导流量。③0202 如果是改版要考虑改版要解决的问题是什么?对于前一版页面存在什么问题 画原型图要考虑:④0202 内容板块如何划分,页面的内容主要分成几个模块,每个模块内存放的都应该是一些相近的内容;⑤0202 模块与模块之间的关联性:每个模块与其相近的模块之间应该有一些逻辑上的关联性,而不能随意的进行拼接;⑥0202 页面的流程:模块与模块的上下承接关系,模块与模块应该上下存在某些逻辑上的连接性。 页面完成后:完成原型图后一定要进行检查,主要从以下三个方面进行检查:⑦0202 内容是否完整:对比框架中的每一部分内容检查是否完整;⑧0202 第一屏是否把最重要的内容展现出来:页面第一屏以外的内容基本都是辅助内容,如果不能在第一屏就把内容全部展现,基本上就等于内容不完整;⑨0202 功能是否实现:想要表达的功能是否在明显的地方表现出来;⑩0202 流程是否顺畅:把相应的流程走一遍,看是否流畅。 注意tips:①0202 未完成的作品拿出来讨论页面不完整不代表思想不完整,即使是不完整的页面,里面应该也要有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再下手。②0202 理清自己的思路要有属于自己的清晰思路,对内容、功能和流程自己要先想明白,可以列举一些具体的问题来辅助理清自己的思路。③0202 坚持自己的想法每一个人都有自己的想法,只要你理清自己的思路,就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑,形成自己的思路。 关于工具和作图:之前花了很多时间去研究axure,是学会了一些作图的技巧,可是渐渐发现这些对页面的提高基本不大,我是觉得在掌握基本的工具使用时可以暂时忽略工具。页面最重要的是你的想法,等到想法成熟之后不妨慢慢的考虑工具的深入,太多的考虑技巧方面的问题反而会模糊视线。思考的过程和画图的时间可以在7:3都无所谓,前期的框架和流程思路想好后,后面的原型图也就水到渠成了。

利用AxureRP8来搭建原型图,就不得不提到元件库的使用,元件库对于Axure来说其实在某种程度上相当于工具栏对于平面设计,如果想要在页面上搭建一个简易原型,元件库中元件的使用时必不可少的,就像是搭建一个积木原型就必须要有积木的原理是一样的,好了,且看如何使用元件库当中的元件来搭建一个简易的原型图吧。具体步骤如下:

1、页面。在整个Axure中的左上角偏下的位置,即为页面的位置,一般系统默认是三个,当然也可以复制很多个页面,双击第一个页面,我们再当前页面进行简易原型的搭建。

2、在元件库当中选择矩形2的这一元件,拖动到画布当中,根据自己的要求的尺寸,画出相应的大小,这里选择使用1920*1080尺寸的,也是苹果手机plus版本的分辨率尺寸,可以在如图所示的位置进行相应的调整。

3、选择占位符。占位符一般代表的是原型当中的图片的位置,这里使用占位符代表登录页面当中经常出现的logo之类的信息,当然如果想要使得更美观一些的话,也可以选择使用图片。

4、选择矩形1和文本框两个元件,来进行登录位置的创建显示效果,具体,双击元件可以对矩形元件进行编辑,这里我们选择对矩形设置成登录的字样。

5、单击元件,同时按住Ctrl键,可以复制出一个元件出来,具体,使用这种方法,可以比较方便的创建出来密码的显示效果,具体。

6、创建关键按钮,也就是登录按钮。拖动完成之后,我们将其名称命名为立即登录。具体,创建完成之后,按下F5点击发布,我们就可以使用网页打开自己的原型来看一下展示的效果。

多学习,多练手

画好原型后

1.下载Axure

2.如果是给itouch或者iPhone用的,比较好办,直接用320×480的分辨率画好辅助线,然后画原型

3.按F5生成原型的时候,在“Mobile/Device”选项中可以设置适配移动设备的特殊原型

4.设置说明见下图:(页面大小显示我的这个设置是按320×480的大小,默认不缩放)

5.用你的移动设备访问你生成的原型链接(如本地服务器,或Dropbox托管)

6.把该页面创建一个桌面快捷方式7.完成(有icon,有闪屏)

另:想做鼠标动作或者复杂的页面交互比较麻烦,不推荐,尽量简洁。