在上一篇文章中跟大家分享了Axure7.0 的简介、基本操作和原型图的制作,主要是应用元件库里的原件进行界面元素的搭建,直至完成原型图,在最后给大家展示了高保真原型图效果。而在本次分享中,主要带领大家来实现高保真原型图的制作过程,同时介绍一些其他工具的使用情况。

在讲解之前先跟大家回顾下交互设计,什么是交互设计?

交互设计是指设计人和产品或服务互动的一种机制,以用户体验为基础进行的人机交互设计,是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。为此我们的Axure软件发挥着重要作用,作为专业的原型设计工具,它能快速、高效的创建原型,服务于我们的交互设计。

我们打开在上一章节完成的原型图,在它的基础上进行高保真原型制作。一开始介绍下母版的使用,母版主要应用于我们界面top和foot,更加方面二级页的调用。我们把top和foot做好的原型都选中,右击选择转化为母版,修改下名称为top和foot,这样母版就生成了,母版是可以再进行编辑的。

根据页面布局我们从上到下依次进行制作。

1、双击logo位置,直接就跳转到母版top的编辑,右击logo转化为图片,再双击,就弹出了图片的选择路径,选择logo图片,接着会弹出“自动调整尺寸对话框”,由于logo本身的属性,我们选择“是”,这样logo图片就导进来了。

依次同理把搜索图标和导航条色块导进来。这样top位置就完成了。

2、再回到首页面进行banner图制作,由于banner图要做交互效果,我们预留到最后讲解。

3、接下来制作关于我们栏目:用同样的方法把icon01转化成图片,双击选择切好的图片导进来。后面三个icon依次导进来图标图片。

在这里我们对每个图片做个鼠标悬停效果:

选中资质荣誉图标,找到右侧元件属性与样式,选择鼠标悬停,再选择image,导入图片即可。公司图片和员工风采同理可完成。

          

4、项目案例栏目:首先选择背景图,导入切好的图片,再依次导入案例三张图片,文字颜色改成白色,同样再做个鼠标悬停效果(方法与关于我们的图标导入、悬停方法一致)

5、新闻中心栏目:替换新闻图片,转化成图片,双击导入新图片即可

6、Foot替换方法与top一致

重点讲解Banner图制作:

1、把banner图右击转化为动态蒙版

2、双击动态面板,取动态面板名“banner图”,添加动态面板状态,state1,state2,state3

3、双击state1,进入状态页,拖动一个Image元件到状态1中,双击选择对应的banner图。选择自动调整图片大小,依次替换state2,state3。

4、拖动三个圆形放到banner图上方,双击第一个圆形,选择鼠标悬停导入圆图形。

5、选中第一个元件(添过图的),添加交互:鼠标移入时 —— 设置动态面板 —— banner —— State1。同步骤完成02和03.

最后生成原型,发布,查看效果!

高保真原型图:http://www.jredu100.com/web/prototypeHigh/index.html

交互软件Axure—高保真原型的更多相关文章

  1. ****如何优雅的用Axure装逼?高保真原型心得分享

    本文核心内容点:- 啥是高保真原型?(附简单说明原型)- Axure可以画出什么水准的高保真?(给示例,开启装逼模式)- 高保真原型图技巧:- 啥时候上高保真?适用场景 and 不适用场景 啥是高保真 ...

  2. AXURE在原型设计中的应用

    转: http://uedc.163.com/2248.html 前言 什么是原型呢? 产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块.元素进行粗放式的排版和布局,深入 ...

  3. 关于UI设计中的交互软件Axure7.0运用

    Axure RP是一个专业的快速原型设计工具.让负责定义需求和规格.设计功能和界面的人员能够快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档. 作为专业的原型设计工具,它能快速.高效的 ...

  4. 软件-Axure:Axure RP

    ylbtech-软件-Axure:Axure RP Axure RP是一款专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototypin ...

  5. Axure 简单原型设计

    简介 Axure RP是一个专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写. Axure RP是美国 ...

  6. 从零开始教你做高保真原型图+UI 设计规范

    编者按:<从零开始设计App>系列到这篇已经是第三期了,上期是低保真原型图,这期@Sophia的玲珑阁 聊聊如何从零开始制作高保真原型图和UI 设计规范. 往期回顾: <设计师怎样从 ...

  7. 用Axure进行原型设计

    用Axure进行原型设计   看这个视频 http://www.iqiyi.com/playlist409963402.html

  8. 使用Axure RP原型设计实践07,注册判断

    本篇实现注册页的一些功能.本项目是通过用户名和电子邮件进行注册的. 在本篇之前,在"使用Axure RP原型设计实践03,制作一个登录界面的原型"中已经对注册页做了基本的处理. 打 ...

  9. 使用Axure RP原型设计实践06,登录验证

    登录验证主要功能包括: ● 用户名错误,提示无效用户名,用户名和密码文本框清空● 用户名存在,密码错误,提示密码错误,密码清空,焦点进入密码框● 用户名和密码都正确,验证通过 本篇接着"使用 ...

随机推荐

  1. Codeforces.1041F.Ray in the tube(思路)

    题目链接 \(Description\) 有两条平行于\(x\)轴的直线\(A,B\),每条直线上的某些位置有传感器.你需要确定\(A,B\)轴上任意两个整点位置\(x_A,x_B\),使得一条光线沿 ...

  2. UVALive 6893 The Big Painting hash

    The Big Painting 题目连接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=122283#problem/J Descri ...

  3. 在阿里云里申请免费Https证书SSL

    在阿里云控制台:安全(云盾)->证书服务->购买证书里(地址:https://common-buy.aliyun.com/?spm=5176.2020520163.cas.1.zTLyhO ...

  4. JS实现各种复制到剪贴板

    一.实现点击按钮,复制文本框中的的内容                         <script type="text/javascript"> function ...

  5. TVB三个台

    翡翠台http://token.tvb.com/stream/live/hls/mobilehd_jade.smil 高清翡翠,http://token.tvb.com/stream/live/hls ...

  6. [转]过XX游戏驱动保护的代码

    这个是过TX游戏自我保护驱动的源代码.可以过qq堂.DNF.寻仙等QQ游戏. #include <ntddk.h>#include <windef.h>#include < ...

  7. C#编程(十五)----------只读字段

    只读字段 当字段声明中含有 readonly 修饰符时,该声明所引入的字段为只读字段.给只读字段的直接赋值只能作为声明的组成部分出现,或在同一类中的实例构造函数或静态构造函数中出现.(在这些上下文中, ...

  8. JavaScript 判断输入是否为中文的函数

    //---------------------------------------------------------- // 功能:判断输入是否为中文的函数 // 参数: // s // 返回值: ...

  9. 禁止浏览器backspace键(退格键)时跳转页面(extjs,javascript)

    Ext实现方式: //方法一  var key = new Ext.KeyMap(document,{   key: 8,   fn: function(obj,e){    var type = e ...

  10. ASP.NET MVC:Cookie 的过期时间在服务器端是获取不到的

    现状 一旦 Cookie 在服务器端设置后,在后续的请求中是获取不到过期时间的,因为:Cookie 是存储和过期处理都是由客户端管理的,在后续的请求中,浏览器向服务器发送 Cookie 的时候就不包含 ...