实例学Axure7.0简约教程 产品原型必备技能

axure

首先我们要知道Axure是产品经理、原型师经常使用的原型设计工具,能快速地把自己想要的方案展示出来,给程序、美工参考。加快产品开发进度及工作效率,弥补了返工重做的机率。

我们打开Axure,把我们想要的产品方案以图文和清晰的逻辑关系表达出来。

因为我们这里是快速学习的一个教程,所以我们就参照百度首页的布局打造一个Axure的原型方案。

左上角以4个文本及小图标表示天气状态,右上角是用户名、搜索设置、传统首页的3个文本标签。下面我们就用Axure先把这7个文本及1个图片实现。

1

拖进工作区7个文本标签及1个图片标签,并按下图的方式排列好。

2

再加入百度首页的图片bdlogo,并填加图片阴影。

3

然后我们再做搜索框的相关内容,填加9文字标签,1个矩形输入框,1个矩形按纽。工具箱里的工具很多,如果要熟悉,需要多次操作几次。如下图设置:

4

拉动工具箱的滚动条向下拉,找到button,并双击编辑按纽的文字。

5

最后把百度下面的相关内容加入到网页面底部即可。需要一个播放器,一个图片和若干个文本。这里就不一一演示。相信你已经学会基本的网页面的造型设计及相关简单的网页布局设计了。期待你的设计方案更精彩。

6

最后看一下整体的效果:

如下图,按F5进入页面预览,看一下我们的原型效果吧。

7

最后预览的效果会在浏览器中打开。Axure是最适合做网页策划、页游策划及各类网页产品经理的原型利器。希望你能学的更快更好。谢谢!

8

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/883/

(0)
iouedioued
上一篇 2014-09-28 16:17
下一篇 2014-09-28 19:32

相关推荐

  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • 盘点3款原型工具的部件样式

    使用样式是集中管理整个项目的外观及感受的最优方法,通过部件样式可以像word一样对组件进行快速方便的样式设置,大大提高了制作原型的效率。当项目要更新视觉设计时,使用样式不但可以节省时间,还能帮助你统一和…

    2023-03-03
  • 交互设计前的预备知识

    进行交互设计之前需要一些预备知识: 预备知识一:能看懂思维导图:下图是艾欧学堂的思维导图 在思维导图中可以清晰明确的看到我们的栏目规划,和内容方向那么原型设计基于此开展设计,如果有一份完整的需求说明书…

    原型设计教程 2014-09-27
  • Justinmind权威指南:基础-Justinmind 6.x工作界面与机制

    ​这一篇也是仅作了解熟悉,方面大家后面快速上手,先来看一看工作界面以及各个功能的入口。然后再来了解一下工作方式。 Justinmind的主界面简介 主要分为几个区域:导航栏、工具属性栏、元件区、交互事件区、数据源…

    2015-08-05
  • Mockplus原型交互跟我做之12–使用滚动区组件实现页面滚动

    Mockplus使用滚动区组件实现页面滚动

    2016-07-18
  • Justinmind权威指南:​基础-Justinmind基本元件的使用-2

    ​上一节说了文本、多行文本、图片、线段元件的使用方式,这一节会讲解最常用的矩形、椭圆、三角形、标注 矩形 这个是最常用的没有之一,原因是因为我们设计产品的基本架构都是方形的,这个大概与硬件的制约有关系,…

    2015-08-31
  • 交互设计师推荐APP产品原型设计工具 |UE网交互设计学堂

    最常用的才是最靠谱的,有些文章里说的很多但是我作为一个交互设计师几乎都没使用过原因很简单,用不到那么多。 1.Visio 2013 推荐指数  ✦✦✦✦✦ 原因:线框专业户,灵活,Office使用习惯接受程度较高。支持各种平台…

    2015-07-01
  • 018. 内部框架——axure线框图部件库介绍

    网页框架代码<iframe border=0 name=lantk src="要嵌入的网页地址" width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe>      看到上面这段代码,很多人肯定认出这是htm…

    2014-09-12
  • 【Mockplus教程】表格

    Mockplus对于表格的控制,采用的是通过文字来控制外形和数据的方法。稍微熟悉后,你会发现,这种方式可以很快地组装表格。 如图,这里是一个表格: 双击这个表格,进入编辑,看到如下的文字: 好像很难? 别急,我…

    Mockplus 2015-10-17
  • 【Mockplus教程】备注

    每个页面都可以添加备注信息,打开需要添加或者查看备注信息的页面, 在页面节点上面鼠标右击,弹出菜单中选择“页面属性”一项,如下图: 在弹出的对话框中,即可查看备注或者编辑备注,编辑好备注之后点击“应用”按…

    Mockplus 2015-08-31