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

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

作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理  。

首先为大家介绍下Axure 的工作界面:

1-主菜单工具栏:大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示。

2-主操作界面:绘制产品原型的操作区域,所有的用到的元件都拖到该区域。

3-站点地图:所有页面文件都存放在这个位置,可以在这里增加、删除、修改、查看页面,也可以通过鼠标拖动调整页面顺序以及页面之间的关系。

4-axure元件库:或者叫axure组件库、axure部件库,所有软件自带的元件和加载的元件库都在这里,这里可以执行创建、加载、删除axure元件库的操作,也可以根据需求显示全部元件或某一元件库的元件。

5-母版管理:这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素,可以绘制在母版里面,然后加载到需要显示的页面,这样在制作页面时就不用再重复这些操作。

6-页面属性:这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件onpageload。

7-元件属性:这里可以设置选中元件的标签、样式,添加与该元件有关的注释,以及设置页面加载时触发的事件;

A-交互事件:元件属性区域闪电样式的小图标代表交互事件;

B-元件注释:交互事件左面的图标是用来添加元件注释的,在这里我们能够添加一些元件限定条件的注释,比如:文本框的话,可以添加注释指出输入字符长度不能超过20。

C-元件样式:交互事件右侧的图标是用来设置元件样式的,可以在这里更改原件的字体、尺寸、旋转角度等,当然也可以进行多个元件的对齐、组合等设置。

8 动态面板:这个是很重要的区域,在这里可以添加、删除动态面板的状态,以及状态的排序,也可以在这里设置动态面板的标签;当绘制原型动态面板被覆盖时,我们可以在这里通过点击选中相应的动态面板,也可以双击状态进入编辑。

本次主要介绍元件库的使用,同时完成企业站-首页高保真的原型图

元件库:

企业站:

首先根据项目前期需求作分析,布局界面首页相关栏目,对界面进行整体把控,也可以前期手绘做个简单的原型图进行参考。

1、打开Axure7.0,在站点地图中添加页面index,再添加一个二级页-公司介绍页面备用。接下来就是运用元件库的组件在主操作区进行布局。

2、首先选择占位符,拖动至操作区,设置尺寸(280X100),双击输入文字logo,再选择矩形工具拖动至操作区,尺寸(220X25)输入搜索,调整文字位置,接着再添加一个占位符,作为icon的位置和大小。

再选择矩形,设置尺寸:1400x42,填充颜色#AEAEAE,把线宽选择“无”,选择一级标题,依次输入网站栏目名称,字号大小14点,微软雅黑。

这样界面header部分完成

3、banner位置:选择矩形,依次设置尺寸(1400x648)填充颜色#C9C9C9,标注上文字(banner:企业介绍、社会责任、企业文化、产品案例)

选择按钮形状,添加图片切换,右键选择形状——选择椭圆,设置尺寸(15x15),复制三个圆形。

4、关于我们栏目:首先选择一级标题,输入“关于我们”文字,字号32点,选择二级标题,输入“中国高端科技企业,技术先进 行业领先 绿色环保可持续发展,行业第一,造就知名品牌”文字,字号16点。

选择按钮形状,尺寸(158x158)填充颜色#C9C9C9,输入icon01,同样选择标题输入(公司简介和正文),做好一个,按住shift+control+alt键复制三个。

5、项目案例栏目:选择矩形,设置尺寸(1400x600)填充颜色#AEAEAE,输入文字(在这里可以直接复制关于我们栏目的一级和二级标题,再替换文字。)

选择占位符,设置尺寸(303x303)下面添加文字——项目案例A,同样再复制出项目案例B和项目案例C。

6、新闻中心栏目:同样复制上面的一级和二级标题,再替换文字。接着选择占位符,设置为新闻图片(412x297),添加一个矩形,颜色#BCBCBC,输入新闻标题,选择标题和文本标签输入文字,布局新闻条目。

7、Footer:选择矩形,尺寸(1400x300)填充颜色#BCBCBC,依次运用文本输入底部文字和logo位置,右侧放二维码和分享(同样选择占位符)

原型图地址:http://www.jredu100.com/web/prototype/index.html

高保真原型图:添加图片,丰富细节,美化页面。

选择占位符和矩形,右键选择——转化为图片,就可以双击,打开图片路径上传图片了。

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

涉及到交互设计陆续更新!

时间: 2024-10-13 02:29:03

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

浅谈UI设计中妙用无穷的深色系背景

英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# ------------------------------------------------------------------------------------- 又是一篇来自Tubik Studio 的文章,丰富的设计项目经验使得这家资深设计机构对于设计的每一个细节都有着独特而系统的见解.今天的文章聊的就是深色系背景在设计中的运用

UI设计要学哪些软件

准备做UI设计的或是已经在做UI设计的童鞋,哪些软件是我们要学习的重点,作者把UI设计分成了好几个不同的职业方向,从事什么UI设计方向,就学什么软件,这样针对性就很强了,无论怎么说,Photoshop绝对是放在第一位的. 文章来源:http://www.xueui.cn/experience/discussion/to-learn-what-software-ui-design.html

UI设计中主流椭圆矩形2钟标准绘制方法

目前在UI设计主流的一种图标绘制形状为介于圆形和圆角矩形中间的形状,然而绘画出标准美观和符合用户所喜爱的形状是很有技巧的.下面我来分享一下3种标准的绘画方法. 方法一: 新建600*600的画布,其他参数默认. 在工具栏的矩形工具中点击三角箭头切换成多边形工具 设置边为:4并且如下下图勾选平滑拐角 按住shift,按住鼠标左键在画布中央绘制 放大之后可以发现它的边缘是虚的像素,因此需要边缘对齐像素网格 打开首选项->常规 把矢量工具与变化和像素网格对齐勾选 设置好后,回到画布 Command+T

UI设计中的各种小控件

xib支持图形化操作,提供了几乎所有的控件可供选择,只需拖动到相应的位置即可,但是控件的后台代码仍然需要手动编写,一定程度上加速了前台的开发. xib快速开发程序,手写代码速度比较慢 xib适合做静态页面,代码适合动态复杂的页面 xib不适合svn/git代码管理,代码比较适合 xib不适合后期维护,代码适合长期维护 如果xib文件名与类所在的文件夹名相同,可以直接使用init方法,自动查找同名的xib资源文件 UISwitch 开关 设置显示时的开关状态 [mySwitch setOn:YES

Android UI设计中的三种特效

一.背景色渐变 背景色渐变可以通过在res/drawable中定义一个XML文件实现,gradient.xml的代码如下: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:startColor="#FFFFFF

Android UI设计中一些不错的示例及第三方控件

1.二级ListView自定义布局ExpandableListView http://pan.baidu.com/s/1mg01BRU 密码:jyl311 2.ListView实现各种动画效果ListViewAnimations 实现各种列表动画效果.包括卡片式列表(效果图1),Grid View列表(效果图2),列表item逐个淡入显示(效果图3),拖动列表item重新排序(效果图4),滑动删除列表item(效果图5),批量删除列表item(效果图6),展开列表item(效果图7)等等.   

UI界面中的文案设计有哪些注意事项?

在UI设计中,文字内容的表述也是需要设计师精心推敲,仔细设计的部分.清晰.准确.简洁的 文案 设计能够让界面拥有更好的可用性,同用户建立信任. 文案设计上的技巧很多,应当规避的误区也不少,今天为你总结16个常见的 UI文案设计的误区,帮助大家少走弯路. 1.尽量避免使用俗语和术语 未知的术语和俗语将会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇,使用常用和易于理解的词汇能够帮助用户理解. 下面就是一个典型的反例: 很难说清这种错误提示信息是给系统管理员还是办公室的文员看的. 2

UI设计---&gt;全心全意为人民服务的宗旨----&gt;注重客户体验---&gt;软件持久的生命力

UI即User Interface(用户界面)的简称.UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适简单.自由,充分体现软件的定位和特点. UI的设计关系到客户对产品的熟知的.认可度,软件的生命周期. 从我们现有的项目中思考UI设计,在AJZZ项目中,米总针对页面的设计提出了很多要求,原因我们的界面差很多,具体他的要求差远了(界面的美观.颗粒代码复用性等等)我们的代码复用性与开发效率上来说在现阶段已经是相当可以了,但

UI设计--大象无形

  UI设计,大象无形 UI设计,如同优雅的艺术品一样,优秀的UI设计也可以大象无形,大象无形的意思是有意化无意.大象化无形!就是不要显刻意,不要过分的主张,要兼容百态.无形态无框架才能容纳一切形体!最宏伟的形象就是没有形象.这个是小编对UI设计浅浅的理解,有不同意见的小伙伴欢迎讨论交流`(*∩_∩*)′! UI即User Interface(用户界面)的简称.UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单.自由