axure原型图案例模板(原型图axure教程)

axure原型图案例模板(原型图axure教程)第一期

axure原型图案例模板(原型图axure教程)

追梦来相聚,更求有进步

每一个做产品的人都不会陌生Axure软件,对于我来说学习它的当下阶段,来自于一个很强悍的领导和磨合成长的小组,发现自己以往的经验和能力大多时候无处施展。

多次的碰撞后,意识到了我对所处的行业,摄入太浅专业性相差太远,明白到无法短时间内学习行业里方方面面的知识,唯有从“合格的产品人”应该具备的自身能力去提升自己。

01软件页面介绍

1.首先来介绍一下软件的各个面板,上面一栏和我们通常所用到的软件一样,包含了所用到的一些【菜单栏】。

2.下面的话是一些【工具栏】,它里面包含了我们常用的一些工具。另外的话,工具栏中一些常用的工具,其实也是我们把【菜单栏】当中的一些东西,去浓缩之后,放到工具栏,方便去操作。

3.左边称之为【页面】,或者叫做【站点地图】不论有什么样的名称,它的意思都是一样。这里包含了我们创作当中的所有页面,比如首页添加的第一页、第二页,都是在使用当中逐渐用到的页面。

下面左边,是一个【元件库】这个也是Axure软件一个核心部分,这里包含了所应用到的所有【元件】。

下边,是一个【母版】,它相当于一个固定的模式,比如说我们设计一些页面的时候,有些固定的模板,可以直接去通过【母版】的方式实现。

4.中间空白处是主要操作的一个窗口,可以当成像PS当中的一个画布一样。

5.右边分为一些软件的【样式】、【交互】和一些【说明】,创建一些元件的时候,感觉像图层的一个方式,基本上是Axure软件所有的页面。

6.接下来为了能够深入的理解Axure这款软件,分解一个简单的操作案例,带领大家先了解一下。

可以采用一个登录的图片页面,来模拟下这个图片的效果。

首先要借助一些相关的【元件】。先拖入一个标题【元件】,改成图片最上面的文字(登录、注册),把字号改成18号,另外按住Ctrl键拖动,复制出一个,效果如下。

(笔者就是大致的演示一下,帮助初学者对这个东西有一个初步的认识。)

9.继续往下走,制作【验证码】,【获取动态密码】左边元件库拖入一个【矩形】图,然后【填充】上颜色。

10.继续往下走,制作【注册】,再次添加一个【矩形】的元件,这样基本上已经完成了。最后添加一个【同意】的效果,拖入一个【复选框】元件。

(基本上“低保真”的原型图,也就通过这样的方式去实现,主要是用到相关的一些【元件】,来实现这样的效果。)

11.本节内容小结

02熟悉元件库

1.左边工具栏里的【元件库】,一个是【基本元件】、【表单元件】这两部分比较常用的,另外一个是【菜单表格】、【标记元件】,特殊需求的时候会用到。

2.本节分享下常规使用的【元件】一些用法,拖入一个【矩形】的元件,它是一个单纯的矩形框。这个框,可以通过拖动改变它的一个大小。按着Shift键拖动,可以等比率去缩放它。

3.然后再拖进来后面那个【矩形2】,它和【矩形1】区别,只是单纯的填了一个深色的背景。【矩形3】同样的道理,只是填充的颜色更深一点。

4.继续拖进来【椭圆】的一个元件,它和【矩形】元件可以归为一类。基本上是一个基本的图形元件,让人看着非常的直观,这个四个都能实现最终想要的一个效果。

5.【图片】、【占位符】元件,这两个可以归为一类,图片元件其实就是代替占位符,也就是说我们没有明确具体的图片的时候可以用【占位符】来代替。

然后【图片】就是双击后在本地文件里面上传一张图片,可以作为一个替换,但是占位符无法实现替换,这也是它俩的一个区别。

6.继续往下是一些相关的【按钮】元件,其实它们的意义也是完全一样的,只是填充颜色的差别。

7.再往下走,是一些【标题】的元件,可以看到【标题1】、【标题2】、【标题3】,这三个标题的话没有多大的区别,唯一区别的话,就是大小的关系,这个三个标题在应用当中也是同样一个操作。

8.继续往下走,是【文本标签】、【文本段落】,双击后可以输入一些文字,单行文本和多行文本,其实也没有太大的一个区别,都是一个互通互用的元件。

9.继续往下走,是【水平线】、【垂直线】,这两条线在一些具体页面设计当中,会经常用到。另外它的一些表现形式,也可以适当的替换。比如说,可以增宽或者选择属性样式。

10.再往下是【热区】的效果,插入一个图片元件,放入一张图片,是可以触发它的一个范围,区域的大小可以手动的去调整。

12.整个【列边框】也可以添加多个列表,可以起到一个切换的作用。

13.【复制框】是勾选一些相关信息。【单选按钮】实现注册选择,【提交按钮】顾名思义。

14.示范一个相关的模拟,拖入一个公共的元件【矩形】和添加一些相关的元素效果如下。

15.本节内容小结

03元件页面属性修改

1.拖入一个【矩形】元件,给它填充个颜色,右边【样式】里的(X和Y)是控制这个矩形的“水平和垂直”的位置;后面的(W和H)是控制矩形的 “宽和高”。

3.Fitto Text、West(自动适合文本宽度、自动适合文本高度),也就是矩形元件里面添加文字后,对文字适配大小。

4.再往下看【Box 1*】这个是设置整体的一个样式,可以适当的切换观察,这个功能相对使用的不多。

5.继续往下【透明度】,就是控制整体矩形的,比如不透明度50%,它就会降低了透明度。

6.继续往下关于【字体】的大小、颜色、字间距、Aa(附加文本选项)项目符合、文字粗细,对齐,等等一个调试。

7.继续下面的【填充】→【颜色】、【图片】就是对【矩形元件】背景更换颜色;图片是对【矩形元件】填充成图片的功能。

8.继续往下走【线段】→【颜色】、【线宽】、【类型】。就是对边框颜色的变换、线条的粗细、线条类型的转换。

10.继续往下走【圆角】→【半径】、【可见性】比如说输入一个半径30,它会产生一个圆角。

11.最底部【边距】【左右、上下】是控制文字与【矩形】各个边的一个距离。

12.本节内容小结

04元件交互样式设置

1.本节通过两个案例来分解:先拖入一个【标题】元件,设置成当鼠标移入这个文字之后,文字会变色。

3.继续往下走【元件选中的样式】,添加一个【图片】元件,然后双击更换图片,【交互】→【元件选中的样式】→【图片】→【选择】上传一张照片,这里需要反复练习才能熟悉掌握。

4.本节内容小结

05布尔运算的使用

1.拖入两个基本的图形,比如一个矩形、一个圆形都填充上颜色。Axure布尔运算就像我们所有的三维软件。在我们两图之间进行一个相交或者相减、相加的一个过程。

4.同样的再来操作【相交】,就是它俩的一部分,被保留下来。

5.再看下【排除】,它和相交恰好是相反,它把公共的部分完全去除。

6.接下来再来讲【结合】,拖入一个【圆形】填充颜色,稍微放大,然后进行一个复制【Ctrl C、Ctrl V】复制,把它们按照同等比例缩放大致的去对齐居中,上下对齐……。

11.再做一个齿轮的图标,先拖入一个圆形,在拖入一个矩形,把它们旋转不同的比例放在一起,效果如下。

13.本节内容小结

06发布与设计

2.需要设置一个输出的路径,可以新建一个【文件夹】因为,它会有好多这样的一些文件。

3.打开后弹出这样一个窗口,是提示使用的浏览器缺少一个叫做“扩展组件”,就是扩展程序。

5.本节内容小结

07菜单及表格的使用

1.本节延续第3节讲的【元件页面属性修改】,继续分享的是【表单元件】。首先拖入的就是【树状菜单】,它是一个层叠和展开显示的菜单。

在页面设计当中,会用到一些展开关闭的层叠菜单。

3属性栏往下走,是一个【 -】、【三角形】两种切换模式,树状图默认的是△,如果切换会变成一个【-】号。

6.继续【表格元件】,这个大家非常熟悉,就像办公Excel软件一样,里面可以改变添加一些相关文件格式,只是它缺少了一项“合并单元格”这个选项功能。

7.要想合并单元格,要借助一些小的方法,比如说:拖入一个矩形,对表格进行一个遮盖,模拟一个假的表格状态,效果如下。

8. 继续【水平菜单】元件,这个会经常模拟一些导航内容。

9. 继续下面边的【垂直菜单】元件,它和【水平菜单】只是显示的方式不一样,但是它们是同样的道理。

做一些小的标签或一些相关的效果,能达到一个非常便捷的操作效果,不用太复杂的去搭建这样一个框架。这些内容尤其在做PC端网页设计的时候,会起到相当大的一些帮助。

10.本节内容小结

08内联框架的使用

1.在元件里把【内联框架】拖入,可以把它比作成一个大的容器,它可以调用Axure当中内部的一些文件,或者一些网络文件。

3.在配置1当中建立一个【矩形】的元件,预览可以得到一个滑动的影框。

4.然后,可以看下面链接到外部的一些文件,比如说外部的一些视频、图片等等。

假如,打开一段网络上的视频复制视频或图片(FIash)网址,预览播放。

5.继续看【样式】→【隐藏边框】就是可以选择显示/隐藏【内联框架】的边框;继续下面有【滚动】类型的选择;再继续是【预览】的效果选择,比如选择【视频】会出现一个播放视频的按钮外观样式,但它并没有太真实的意义,只是一个外观显示的方式。

6.本节内容小结

09母版的使用

3.然后拖入一个【矩形】,调整大小填充一个颜色。

4.保存关闭后,从【母版】里面拖入就可以直接用以上制作好的目录母版。

6.左上角添加【文件夹】可以作为一个管理母版的分类功能展示。右边【说明】可以添加一些【说明内容】。

比如【任意位置】可以随意去拖放;

【固定位置】就是不论你往哪个位置拖放,它始终在场景框最上面的位置,就是最初设置的位置固定下来;

8.本节内容小结

10动态面板的应用

1.在元件库中,拖入【动态面板】到场景中。可以看到【动态面板】是一个深灰色半透明的一个矩形,它的宽和高,可以手动拖动,改变它的大小。

2.关键在于理解【动态面板】的意义,以及它能起到什么作用?通过观察,也能看到,它是由三层叠加到一起而成。

所以,这个【动态面板】是由不同状态,不同层叠加到一起,用个最直接的比喻:把它比喻成“相册”。一本相册当中,可以添加很多张相片,当成一个整体的相册。

现在,来讲解相片怎么添加,首先双击它,打开一个叫【动态面板】状态管理的一个窗口。

然后在每一个相册,每一个相片里面都可以添加相关的内容。比如在状态1,添加一个矩形元件,填充颜色后当做相册。

接着讲,【动态面板】的边框作用,就是一张图片在边框范围内预览的时候能看到,在边框外的图片是不显示。

6.状态栏那里可以取名比如【状态1改成 前行】、【状态2改成 分享】、【状态3改成 善意】,另外在每个状态左边还有一个【重复状态和删除】按钮,删除就不用解释了顾名思义,【重复状态】就是在当前状态栏下面复制。

7.本节内容小结

初始认识Axure软件,讲解的都是枯燥和静止内容,可能读者朋友看着有点乏味,但是要认识Axure软件里面每个元件的功能,还是需要这些枯燥内容的。

发表评论

登录后才能评论