在第八周的课堂上,王文娟老师在校园系统上发布了对于自行选择的原型设计软件进行资料查找以及自学的任务。因为之前的课程学习需要,我们大概掌握了原型设计软件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. Open Type vs Open resource

    Open Type 可查询所有java 类型,包括.java .class Open Resource 只能打开 .java 等 ,不能打开 .class 相同点 都可以使用 ? * 通配符

  2. react+webpack基础学习配置

    最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目 ...

  3. 使用 console.time() 计算js代码执行时间

    console.time('hellor'); for(var i=0;i<100000;i++){} console.timeEnd('hellor');

  4. 布斯乘法 Mips实现 - Booth Algorithm

    看了很久网上没有现成的代码和好一点的图,因此当一回搬运工.转自stackoverflow 布斯乘法器的Mips实现方法: .data promptStart: .asciiz "This p ...

  5. WPF 控件库——仿制Windows10的进度条

    WPF 控件库系列博文地址: WPF 控件库——仿制Chrome的ColorPicker WPF 控件库——仿制Windows10的进度条 WPF 控件库——轮播控件 WPF 控件库——带有惯性的Sc ...

  6. WebService 常用的设置

    1.修改WebService接收长度 <binding name="IAuthServiceSoap11Binding" maxBufferSize="214748 ...

  7. 清除clusternode

    Import-Module FailoverClusters then clear-clusternode

  8. [Perl]Windows 系统 Unicode 文件名操作(新建、重命名、枚举、复制)全攻略

    [Perl] Windows 系统 Unicode 文件名操作(新建.重命名.枚举.复制)全攻略 环境 XP/WIN7 Perl v5.16 编辑整理:PerlMonk.523066680 常见的那些 ...

  9. CharSequence与String的区别

    CharSequence与String都能用于定义字符串,但CharSequence的值是可读可写序列,而String的值是只读序列. 原文: http://blog.csdn.net/joy_zha ...

  10. IO模型《三》非阻塞IO

    非阻塞IO(non-blocking IO) Linux下,可以通过设置socket使其变为non-blocking.当对一个non-blocking socket执行读操作时,流程是这个样子: 从图 ...