在第八周的课堂上,王文娟老师在校园系统上发布了对于自行选择的原型设计软件进行资料查找以及自学的任务。因为之前的课程学习需要,我们大概掌握了原型设计软件Axure的使用,下面是一些我们学习过程中的介绍

 

Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。

用户介绍:

首先Axure会要求每个用户有一个自己的账号,在日后的原型设计中,是可以通过不同个人账号,将同一个项目的更改权赋给不同的用户,并且同一部分同一时间只允许一个用户在更改,这就提高了一个团队之间很方便的线上作业效率

工具区分块介绍:

左边的pages分块是显示你目前的原型有几个页面,并且可以通过双击页面进行组件的编辑

这个分块是不同的组件,比如按钮(button)等,可以直接拖拽基本组件到上面指定的pages页面中进行布局和简单交互的实现,ALL LIBRARIES的下拉列表中则可以选择组件的类型,比如ICONS就是拖动一个图标

这个Inspector分块是每个组件的属性功能区,可以在这个区域里设置每个组件的简单交互,物理设置(比如大小,颜色,命名等)

最后我们在做好整个项目之后可以在顶端工具列表的publish下的preview中打开后,在网页中预览我们设计的原型。预览页面包括各个pages的显示交互,以及每个组件的简单交互功能

实例化教程:

下面我们来做一个简单的原型设计来看看效果:

首先在Libraries中拖进一个Box1到Home页面

在将一个Image拖进到Box1中

再托两个Label到Box1中,并更改其中的名字为(用户名和密码)

接着再拖入两个Text Field放在两个Label的后面

最后在最下面拖入一个Primary Button到Box1中并改名为(登录)

结果如图:

我们可以看到这个就很像大部分应用程序的登录界面

下面我们再双击Image给他选择一个合适的图片

并在Inspector中的PROPERTIES属性下的Hint给两个Text Field放入隐藏的提示文字

结果如图所示:

最后给登录按钮设置一个简单的交互,使得点击它可以跳转到下一个页面

我们选中这个button,在它的Inspector中的PROPERTIES属性下Interactions中选择OnClick

并在里面进行如下图设置,使他跳转到Page1页面

这样就能进行一个简单的页面跳转功能了。

自学感悟:

1)其实Axure中还有很多地方需要我们区深入学习,比如高难度的组件设置(下拉列表弹框,自动复位列表)等等

2)Axure RP,即Axure RapidPrototyping是最常用的快速原型设计工具之一,能够快捷而简便的制作产品原型,快速绘制线框图、流程图、网站架构图、示意图、HTML模版以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。 应用于产品设计包括Web/移动端/客户端的产品,支持多人协作设计和版本控制管理。将设计、研发、产品、用研融为一体的快速工具。

Axure原型设计介绍的更多相关文章

  1. Axure原型设计工具介绍

    Axure原型设计工具介绍 1759230茅杭斌 目录 1.前言 2.下载与激活 3. Axure相关功能介绍 4.Axure案例演示 5.结语 一.前言 在我们进行程序开发的时候,原型图是必不可少的 ...

  2. MockPlus原型设计介绍

    MockPlus原型设计介绍 在第八周的课堂上,王文娟老师在校园系统上发布了对于自行选择的原型设计软件进行资料查找以及自学的任务.因为之前的课程学习需要,我们已经大概掌握了原型设计软件Axure的使用 ...

  3. 从零开始学Axure原型设计(进阶篇)

    Axure不仅能制作静态的视觉稿.页面,还能添加交互动作,是进行原型设计的最佳软件之一.在认识了Axure的界面和部件库之后,我们可以用它来画线框图了,但是静态的线框图在表达上不如有交互的原型图来得直 ...

  4. 从零开始学Axure原型设计(入门篇)

    如果说Sketch是最美.最简洁的设计软件,那么Axure就是最强大的原型制作软件.Axure不仅能制作静态的视觉稿.页面,还能添加交互动作,是进行原型设计的最佳软件之一.虽然Axure的学习曲线比较 ...

  5. axure原型设计

    在上一个学期的学习中,我们已经初步学习了axure的使用方法,它可以为负责定义需求设计,功能和界面的人员能快速设计出所需产品. 引入:在我们想为软件设计原型的时候,纸质原型很难表达交互的界面,与此同时 ...

  6. 学习内容:Html5+Axure原型设计

    今日主要在http://www.runoob.com/html/html5-intro.html和http://www.imooc.com/learn/9网站上学习Html的知识,head.title ...

  7. Axure 原型设计工具画业务流程图

    加入人人都是产品经理[起点学院]产品经理实战训练营,BAT产品总监手把手带你学产品点此查看详情! 软件行业从业6年,流程图看过太多,大部分流程图是在考验阅读者的理解能力,近期在设计公司新版APP,对流 ...

  8. 从零开始学Axure原型设计(高级篇)

    如果你熟悉了Axure的部件库,那么你可以得心应手地画出心目中产品的线框图:如果你会用Axure的母版.动态面板功能,那么你应该能够画出一些简单网站的原型图:但只有你精通了Axure的条件逻辑.变量. ...

  9. 快速原型设计工具-Axure RP的介绍及简单使用(生产初期向客户展示设计产品的原型-也就是展示产品)

    啧啧~~ 给大家介绍一款超棒的原型设计工具--美国Axure Software Solution公司旗舰产品Axure RP 这款工具通俗的说呢,就是在项目整体需求考察后对整体设计一个简要性概括!设计 ...

随机推荐

  1. 优秀前端工程师必备: (总结) 清除原生ios按钮样式

    写移动端的web开发时, 需要清除IOS本身的各种样式: 1.消除ios按钮原生样式, 给按钮加自定义样式: input[type="button"], input[type=&q ...

  2. 上下文——webApplicationContext 与servletContext

    1.WebApplicationContext的研究 ApplicationContext是spring的核心,Context通常解释为上下文环境,用“容器”来表述更容易理解一些,Applicatio ...

  3. Android-AndroidStudio Run 'app'安装APK到设备的过程

    1.AndroidStudio 点击Run ‘app’. 2.点击Run ‘app’就会将所有.class文件用SDK工具集处理成.dex, 用SDK工具集将图片/资源/布局文件/AndroidMan ...

  4. Verilog MIPS32 CPU(五)-- CP0

    Verilog MIPS32 CPU(一)-- PC寄存器 Verilog MIPS32 CPU(二)-- Regfiles Verilog MIPS32 CPU(三)-- ALU Verilog M ...

  5. C++ 控制台编程

    播放媒体文件 #include<windows.h> #program <mmsystem.h> #pragma comment(lib,"winmm.lib&quo ...

  6. asp.net mvc+webuploader大文件分片上传

    首先是前端: var GUID = WebUploader.Base.guid();//一个GUID uploadereditsVideo = WebUploader.create({ // swf文 ...

  7. How to use the NFS Client c# Library

    类库下载 I add a wiki page that explains how to use the NFS Client c# .net library in your project. Neko ...

  8. 基于 ZKEACMS 的云建站 / 自助建站解决方案

    基于ZKEACMS的云建站 / 自助建站解决方案,一站式托管,解决企业建站需求,功能强大,高度自定义.用户只需在界面上输入一些基本信息,选择相应的主题 / 网站模板,然后就可以快速创建一个独一无二的网 ...

  9. MVVM Caliburn.Micro学习记录

    wpf中MVVM一直用的自己写的框架,最近试了试Caliburn.Micro. Caliburn.Micro可以通过x:name来进行属性和事件绑定. 比如 <Button x:Name=&qu ...

  10. table数据跑马灯效果

    1.使用marquee标签实现普通文本字符串跑马灯效果. <marquee behavior="scroll" scrollamount="3" styl ...