axure网页模板.docx
- 文档编号:10417043
- 上传时间:2023-05-25
- 格式:DOCX
- 页数:11
- 大小:24.14KB
axure网页模板.docx
《axure网页模板.docx》由会员分享,可在线阅读,更多相关《axure网页模板.docx(11页珍藏版)》请在冰点文库上搜索。
axure网页模板
竭诚为您提供优质文档/双击可除
axure网页模板
篇一:
axure原型设计之页面视觉层次[免费]
axure原型设计之页面视觉层次
视觉层次是高效率网页设计的重要原则之一。
这篇文章将向大家介绍为什么设计一个具有视觉层次的网页是这么重要。
在了解这些原则之后,你可以在自己的基础设计练习中运用到这些知识。
作为核心:
设计整体就是视觉交流。
作为一个高效率的设计师,你必须有这个能力清楚地将你的设计思想传达出来。
人是易变的,如果你给了他们巨大的信息量,这有相当高的可能性100个人中99人都会厌倦去看它。
为什么呢?
因为人们都是天性的视觉欣赏者,而不是数据处理者。
要了解这个,知道一些人们如何看待事物的方法是很重要的。
人们并不等于所谓的“平等机会主义者”。
他们不仅仅是收集视觉信息和处理数据,于此同时,大脑还会整理他们看到的这些东西的“视觉关系”。
让我们看看下面两个普通的圆:
很大可能上,你并不把它们仅当做“两个圆”看待,而是将他们看做“一个黑色的圆和一个比较小的红色的圆”。
原因是非常简单的:
当呈现出某些像这两个圆一样简单的东西的时候,人们往往不仅仅看到两个普通的圆,他们将会搜寻这两个圆之间的不同点。
某个圆或许更大,或者更小,或者有颜色,或者其他的不同点。
这些不同点给予我们区别物体的信息并且给予图形特定的意义。
让我们来看一张更为复杂的图片:
增加的这些复杂成分强迫我们去分析他们之间的关系。
相同和不同点变成了我们思考这些问题的思维框架。
比例向我们传递了“一个物体相对其他来说离我们更近,或者是,这个物体起到一个相对其他物体而言的支配地位”;颜色的不同告诉我们每一个物体可能有自己独特的特点,这个特点将其与其他物体区分开来。
这样一个简单的图片用最基本的方法却向我们传达了如此多的信息。
…understandingthatpeoplewillseeourdesignsintermsofrelationshipsiscrucialtobecomingamoreeffectivedesigner.
让我们回过头来看网页设计;因为网页设计是有关视觉信息交流,明白“用户们将会自己组织设计内容的关系”成为我们高效设计的核心。
一次丢出大量信息的方式看上去已经没意思了,作为网页设计师,我们任务是将这些没有经过处理的信息划分成一块一块切题的美味以供用户们更方便的阅读。
更为重要的,我们需要明白:
信息的高效交流是网页背后的关键。
初看视觉层次有成千上百的解释说明人们为什么会根据关系来看待问题;如果你要追溯到人类学上去讨论它的话,你可能做出结论:
远古时代狩猎为生的人们在思维上引导现在的人类去关注这些事物之间的联系,这是一种生存技巧。
可能一个更便于理解的解释,这就是我们大脑整理信息的方式:
将相似的可视元素整理成一个组,将他们放进具有一定意义的类型当中就像人类固有的吃喝等习性一样。
换句话说,事实上大脑里的信息都是按照某种层次整理出来的,这样交流起来比没有整理信息要有效率的多。
看看下面的两张图片:
在上面的例子中,我们可以看到最基本的文本层次运用。
两张图片当中用到的例子内容上没有任何区别,但是它是如何戏剧化地让人们改变了理解方式并消化这些内容的呢?
当我们以文字排版为例讨论视觉层次的时,这就是我们要分析的问题。
文字组织的接近性、篇幅比例和相似程度使读者将下级内容自然地归入标题和分段。
层次给予标题更多的意义,不仅仅是信息,而且也使内容更容易被接受。
好,这只是一个最基本的例子对吧。
让我们更深入的讨论其他的例子,让大家明白如何运用这些最基本的守则,成为一个老练的设计师。
视觉层次非常重要,但是如何准确的创建层次效果?
我们寻找的“工具”正如木匠的工具箱——锤子、钉子、锯子等等——你如何运用它们才是最重要的。
1、大小
较大的物体具有更大的吸引力。
将尺寸的控制作为制造层次的工具是一个非常高效的方法去引导读者的视线。
在设计中将尺寸和重要性结合起来是非常关键的。
最大的元素大部分情况都具有最大的重要性,与此同时,最小的元素应该是最不重要的。
2、颜色
颜色是一个很有意思的工具,他可以在组织上和个性两方面起到作用。
醒目、对比强烈的颜色在特殊的元素中将会引起更大的关注(例如按钮、错误信息或者超链接)。
当作为一个体现个性的工具时,颜色可以延伸到体现更精练的层次感上;用到豪华、舒适的颜色将给页面带来感情上的吸引力。
颜色可以影响网页的每一个角落,从商标到形象。
色彩应用在视觉层次设计中可以做到信息分类的效果,就像下面的例子:
篇二:
axure详细教程
axure学习笔记
软件中有不完善的地方,要靠自己的经验来规避和克服,还算好用。
熟练了axure,对软件设计文档的编写大有帮助,因为可以有一些界面图出来。
画界面图时多用axure,画流程图时多用Visio,为的是熟练axure,并且axure画界面要简便许多,节约时间。
(四)范本复用
masters和sitemap面板很相似,文档操作也一样,它们的本质区别是,sitemap里的档是最终展示页面,masters里的文件却只是一个模块,是页面的一个部分。
masters的英文直译是主人或雇主,但是我认为这里可以叫做模板,或者复用模块。
masters的文件,是页面中重复的模块,由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑,然后在不同页面中进行调用。
这个功能类似于网页程序开发中的程序复用,不同页面中调用同一段程序,一般把这段程序单独做成一段页面程序,然后用include命令进行调用。
master的档就相当于这段被调用的页面程序。
dreamweaver也有类似的功能,就是template,可以参照理解。
一、功能条
master的功能条功能基本和sitemap一模一样,功能也基本一样。
唯一不同的是master可以创建档夹,可以通过档夹收纳不同的档,因此唯一不同的就是第一个功能按钮,功能作用是增加一个档夹。
behavior是行为的意思,这个功能是axure升级到4版本后加入的,是针对master的不同使用情况而添加的一个功能,也是要重点介绍的功能。
1、normal:
普通档。
就是一般的复用档。
是默认创建的复用文件。
2、placeinbackground:
定位的复用模板,这类模板的特点是定位于页面的底层,并且锁定模板中的widgets在他原来创建的位置。
这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。
3、customwidgetsbehavior:
自定义模块。
这类模块就类似于自创了一个widgets。
这类模块与其它类型的复用模块的不同在于,其它模块与复用到页面的模块是完全相同的,模块的功能设置是什么,功能说明是什么,页面中的模块设置和功能说明就是什么。
而自定义模块与页面中被复用的模块是母子关系。
自定义模块只决定了模块的功能和位置,但是进入到特定的页面中,模块中的各自部分的说明和功能可以重新定义。
充分理解三种不同类型的复用模块的区别,根据不同环境有效的选择,也是非常重要的。
四、右键单击文件——其它
1、2、3功能都是文文件文文件操作功能,和sitemap一样,分别是删除、重命名和编辑master。
4、5功能是对应的。
前者是将所选范本文件批量运用于页面,后者是将所选范本文件,批量从页面中去除。
通过选择此功能,会弹出sitemap文件的树形目录,你可以通过选择需要添加模板的页面,从而完成模板使用或移除。
checkall:
选择所有页面
uncheckall:
所有页面都不选择
checkallchildren:
选择所选页面以及其所有子页面
uncheckallchildren:
不选择所选页面以及其所有字页面
在4中有特殊的position设置和options命令,
position中有两个命令
placeinblackground:
将档至于页面背景
specifylocation:
是特殊定位,可以通过设置距离左侧和上边的距离,来将模板文件放入特定的位置。
options里的多选框的意思是“只有页面中没有此模板时才置入”,默认是选择的。
如果不选择而置入页面,就会出现如果页面中已经有模板,模板被再次置入的情况。
当然如果有特殊需要的模块,就可以这么使用了。
6、usagereport:
使用报告,点击后弹出面板,显示所有使用了此复用模板的列表,显示的是文件名称,通过双击文件名,可以在工作区打开,直接编辑。
(五)widgets工具-上
axureRp的widgets工具栏,就是我们用来画线框图wireframe、流程图flow的工具,也可以说是组成我们最终输出图表的零件。
好比我们小时候玩的组装积木,这些工具就是组装积木里的一个个小部件,组成什么?
组合得怎样?
完全依靠个人的经验和智慧。
因此,熟悉每一个工具的用法和用途,才能随心所欲的画出脑海中的图形。
widgets工具栏,下分两类工具:
wireframe线框图工具:
基本上对应着web页面中的各种图形。
针对页面中交互行为的表达,axureRp专门增加了imagemapregion图像映像区、dynamicpanel动态面版、menu(vertical/horizontal)水平/垂直菜单等几个特殊的工具。
Flow工具:
流程图所需的基本图形框架。
我们先谈wireframe线框图工具。
学习这部分工具,如果事先有html基础,或者对web页面元素有比较充分的理解,就很容易入手。
以下我根据图片中的编码,依次讲解。
1、image图片:
给wireframe中插入一个图片站位,也可以直接置入真实的图片。
2、textpanel文本:
插入文本。
相当于插入了一个标签。
是不带链接的文本。
但是其实也可以带链接,在interactions中我们会提到。
3、hyperlink超链接:
插入带链接的文本。
相当于插入了一段带卷标的文字。
但其实在axure中它与普通文本除了外型不同,没有本质区别。
之所以将两类文字区分开来,目的还是为了在视觉表达中让人直观的理解链接文本和普通文本,而这对于设计人员理解也非常重要,因此建议画图时尽量标准的区分链接文本和普通文本。
4、rectangle矩形:
插入一个矩形。
可以对其进行图形样式编辑。
此图形通常被用来表达板块的边界。
5、placeholder占位符:
插入一个占位符。
占位符通常用来表达在页面中某些特殊区域,比如情况复杂,或者在系统升级中不需要修改,又或者无关紧要的区域等等。
作者需要结合说明文字,进行对应的详细表达。
6、button按钮:
插入一个按钮,相当于卷标。
按钮一般结合窗体使用,当然也可以作为强化的提示链接使用。
7、teble表格:
插入一个表格。
axure的表格使用起来不是很方便,增加行、列,修改行、列宽度都不方便,算是一个败笔。
期待在下一个版本的时候能够有更好的进步。
与标准化制作网页一样,表格的使用在画wireframe的时候就应该明确其作用,是用来作为数据列表展示使用,而不是作为网页布局的控件。
8、textfield文本输入框:
结合窗体使用。
一般用作窗体中提交数据。
比如搜索框、用户登录框、注册信息填写框等。
用作字段提交或单行数据提交。
9、textarea文本区:
结合窗体使用。
一般用作大段文字编辑、提交。
比如文章编辑、留言等板块。
10、droplist下拉列表框:
结合窗体使用。
一般用作下拉菜单或者下拉列表选项,比如在搜索中,可以通过下拉列表框来定位搜索分类的范围。
也有人用它来做友情链接,可以通过下拉选择直接进行页面跳转。
11、listbox列表选择框:
结合窗体使用。
通过文本框列表选项,通常使用在多项列表选择,比如在填写简历表的时候,选择你所感兴趣的行业,会提供列表选择框。
不过列表选择框都会结合按钮使用。
12、checkbox多项选择:
多项选择通常使用在窗体中,以提供多项选择。
比如在有些有些注册要求用户选择兴趣爱好,会提供十多个选项,因为选项可以并列进行,因此使用的是多项选择。
13、raidobutton单项选择:
在一组选择中选择适合选项,选项关系非此即彼。
比如在填写性别的时候提供男女选择,用户非男即女,只取一项。
当然,不排除再多提供一个双性选择,这样就是三选一,但是同样是非此即彼的单一选择。
14、15、horizontalline水平线、verticalline垂直线:
用以分割页面中的不同板块区域。
由于web页面中只能存在垂直与水平线,为了系统生成用于演示的html档,特将两种线条分开
使用。
16、buttonshape形状按钮:
相当于图形按钮,多用于导航,或者多帧切换的版面切换按钮。
可进行边角编辑。
17、imagemapregion图像映像区:
它用于在web页面中制造一片不可见的区域,一般是图片的部分区域,相当于图片的热区,从而添加说明与互动。
在现实的网页中经常会有一张大图中有某个区域是触发按钮,而图像映像区就可以用来说明这个区域的的功能和互动内容。
18、inlineframe框架:
类似于html中的对象。
用于在页面中制造页面框架,每个框架中嵌入不同的页面。
我们经常看到后台系统分左右两栏,一般都是使用了框架,左侧加载的是导航页面,右侧是加载的管理页面。
axure的缺点是,暂时不支持百分比,因此iframe都是按像素度量的,和实际页面效果还是有差距。
19、dynamicpanel动态面版:
是axure为了表现多帧区域内容而制造的一个工具。
它的图标很形象的说明了它的结构。
它是不同的state迭加的一个动态区域,默认显示其中一个state,当用户触发按钮、图片或者下拉列表等时,可以设置相应动态面版切换到不同的state。
不同state的关系,类似于photoshop的层,也类似于html中的css属性layer。
我们可以通过右击dynamicpanel进行state编辑,然后通过打开对应state进行编辑,编辑方式和编辑页面相同。
20、21、menu(vertical/horizontal)水平/垂直菜单:
用于制作水平或者垂直的菜单,可以添加漂浮的的子菜单,添加方法很简单,就是选择所要添加的菜单项,添加submenu。
(六)widgets工具-下
对于画流程图,是我们经常会遇到的问题。
我们和程序工程师沟通,用再多的口水,也无法挑明的事情,画一张简明的流程图,就能很直白的说明关键问题。
有时候你可能会懊恼,因为程序员的思维犹如计算机,你告诉他为什么没有用,你就告诉他该怎么做,是左是右,是0是1就好了。
这个时候,产品经理需要的是理性思维,清晰的思路,如果你不清晰,工程师大多数会跟着你的思路乱做一团。
所以多画几个流程,多根据页面需求画清晰的流程,就能解决实际的问题。
话不多说,本章主要介绍flow里面的工具,因为图形其实很好介绍,简单的英文翻译就好了,所以也顺带说说这些图形在流程里的作用。
方式还和以前一样,编号,对号入座,咱们来一个萝卜,一个坑:
1、rectangle:
矩形
作用:
一般用作要执行的处理(process),在程序流程图中做执行框。
在axure中如果是画页面框架图,那么也可以指代一个页面。
有时候我会把页面和执行命令放在同一个流程中做说明,这个时候将两类不同的矩形做色彩区别,然后做说明就好了。
2、roundedrectangle:
圆角矩形或者扁圆
作用:
表示程序的开始或者结束,在程序流程
图中用作为起始框或者结束框。
3、beveledrectangle:
斜角矩形
作用:
斜角矩形我几乎不使用,可以视情况自行定义。
或者在其它的流程图中,有特殊含义,暂不知晓,也希望有识之士指点一二。
4、diamond:
菱形
作用:
表示决策或判断(例如:
if...then...else),在程序流程图中,用作判别框。
5、file:
文件
作用:
表达为一个档,可以是生成的档,或者是调用的档。
如何定义,需要自己根据实际情况做解释。
6、bracket:
括号
作用:
注释或者说明,也可以做条件叙述。
一般流程到一个位置,做一段执行说明,或者特殊行为时,我会用到它。
7、semicircle:
半圆形
作用:
半圆在使用中常作为流程页面跳转、流程跳转的标记。
8、triangle:
三角形
作用:
控制传递,一般和线条结合使用,画数据传递。
9、trapezoid:
梯形
作用:
一般用作手动操作。
10、ellipse:
椭圆形或圆形
作用:
如果画小圆,一般是用来表示按顺序数据的流程。
如果是画椭圆形,很多人用作流程的结束。
如果是在usecase用例图中,椭圆就是一个用例了。
11、hexagon:
六边形
作用:
表示准备之意,大多数人用作流程的起始,类似起始框。
12、parallelogram:
平行四边形
作用:
一般表示数据,或确定的数据处理。
或者表示数据输入(input)。
13、actor:
角色
作用:
来自于usecase用例,模拟流程中执行操作的角色是谁。
需要注意的时,角色并非一定是人,有时候是机器自动执行,有时候也可是是模拟一个系统管理。
14、database:
数据
作用:
就是指保存我们网站数据的数据库。
篇三:
axure基本使用指南
axure基本使用指南
目录
原型工具的选择...............................................................................................................1
axure文件的使用.............................................................................................................2
axure文件的制作与生成.................................................................................................4
文档管理(document)........................................................................................................6
模板复用(templates)......................................................................................................10
widget工具....................................................................................................................14
注释annotations.............................................................................................................19
交互interactions.............................................................................................................26
axureRppro5.5中文翻译教程....................................................................................30
原型工具的选择
纸笔:
简单易得,上手难度为零。
有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改。
但是保真度不高,难以表述页面流程,更难以表述交互信息与程序需求细节。
word:
上手难度普通。
可以画wireframe,能够画页面流程,能够使用批注与文字说明。
但是对交互表达不好,也不利于演示。
excel:
上手难度普通。
易于画表单类的页面,易于做批注,但演示效果一般。
ppt:
上手难度普通。
易于画框架图,易于做批注,也可以表达交互流程,也擅长演示。
但是不利于大篇幅的文档表达。
Visio:
功能相对比较复杂。
善于画流程图,框架图。
不利于批注与大篇幅的文字说明。
同样不利于交互的表达与演示。
photshop/fireworks:
操作难度相对较大,易于画框架图、流程图。
不利于表达交互设计,不擅长文字说明与批注。
dreamweave:
操作难度大,需要基础的html知识。
易于画框架图、流程图、表达交互设计。
不擅长文字说明与批注。
以上这些工具,都是产品经理经常会使用到的,但是从根本上来说,这些工具都不是做prototypedesign的专门利器,需要根据产品开发不同的目的,不同的开发阶段,选择不同的工具搭配使用,才能达到表达、沟通的目的。
比如使用纸笔,更适合在产品创意阶段使用,可以快速记录闪电般的思路和灵感;也可以在即时讨论沟通时使用,通过图形快速表达自己的产品思路,及时的画出来,是再好不过的方法。
而word则适合在用文字详细表达产品,对产品进行细节说明时使用,图片结合文字的排版,是word最擅长的工作。
而excel在处理表单类和包含计算公式类的报表页面时,较其它工具方便。
而ppt自然是演示时更好。
visio则可以适用于各种流程图、关系图的表达,更可通过画usecase获取用户需求。
ps/Fw是图片处理的工具,dw则是所见即所得的网页开发软件,这些是设计师的看家本领,对于普通的产品经理来说,需要耗费太多的精力去掌握。
axure文件的使用
一个最简单的axure原型可能会产生如图中所示的几个文件
点击红框中的两个文件都会打开同一个页面。
如下图。
由三个区域组成,1、文档结构区。
显示所有你设计的页面。
点击closeframes可以关闭。
2、主操作区。
所有的设计只能在在这个区域显示。
3、pagenotes。
对当前区域的解释说明,可以由用户自行添加文字,默认显示当前页面的名称。
一个设计实例
点击close
frame之后的效果。
当然,closeframe起到了个导航的作用,帮助你进行页面切换。
实际上,当你点击closeframe是跳转到了另外一个页面,一个非
index.html,和当前页面_start.html之外的页面,即当前页面.html
。
axure文件的制作与生成
你需要到axure的官网上下载一个最新的axure文件()目前最高版本5.6。
但是如果没有注册码,使用的版本只可以使用15天。
所以你还需要在网上搜索一个注册码,这个很多,而且一个注册码可以适用于多个版本。
安装过程很简单,下一步就行,有安装不上的朋友请联系我。
打开axure,你看到的界面上的区域可以如图从左到右,从上到下的被划分为:
1、工具栏
2、文档结构区:
以树形结构来表达层级关系
3、组件面板:
最常用的区域之一,所以的控件全部都摆放在这儿了。
你可以通过这个面板把组
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- axure 网页 模板