Axure RP 8 入门手册 – 第3章

AxureRP8书籍 小楼一夜听春语 2928℃ 0评论

第3章         元件功能概述

第1节         鼠标的操作

第2节         元件的使用

第1节          鼠标的操作

u0麦子:老师,老师!

 

u2小楼:干吗,干吗?

 

u0麦子:不……

 

u2小楼:呃……

 

u0麦子:我想做一个页面,但是那些元件都怎么用啊?

 

u2小楼:点住了拖到画布里面用呀!

 

u0麦子:我知道是拖进去,但是我想要一个向左倾斜的圆形。

 

u2小楼:你是仇人派来玩儿我的吗?圆形怎么倾斜?

 

u0麦子:对不起,老师!少打个“椭”字。

 

u2小楼:艹。

 

 

在Axure中,如果需要一个椭圆形,可以放入一个矩形元件到画布中,然后,点击矩形元件右上角的圆点,在弹出的形状列表中选择圆形,就能够得到一个椭圆形。在这个列表中除了圆形,还为我们提供了很多其它形状。(图3-1)

%e5%9b%be3-1

(图3-1)

椭圆的宽高,可以通过拖拽形状的边缘节点调整。(图3-2)

%e5%9b%be3-2

(图3-2)

         如果想让一个形状倾斜或者说旋转一定的角度,如果不要求角度很精确,我们可以按下<Ctrl>键,同时,拖拽形状的边缘节点调整。(图3-3)

%e5%9b%be3-3

(图3-3)

u0麦子:对不起,老师!

 

u2小楼:怎么又对不起?

 

u0麦子:我其实想要个圆角矩形……

 

u2小楼:啊!!!!!

 

如果需要一个圆角矩形,可以直接使用形状按钮元件,也可以通过修改一个矩形为圆角矩形。在形状的左上角有一个三角形,水平拖拽这个三角形就能改变矩形的角部为圆角。在拖拽过程中,会时时显示一个数字。这个数字是圆角半径,一个圆角其实是四分之一圆,圆角半径指的就是圆的半径。(图3-4)

%e5%9b%be3-4

(图3-4)

u0麦子:对不起,老师!

 

u2小楼:(离线)

 

第2节          元件的使用

u0麦子:老师!老师!

 

u2小楼:怎么老是你!

 

u0麦子:老师你别发火嘛!我就再问一个问题就好啦!

 

u2小楼:快问!

 

u0麦子:元件库里那些元件,都是干什么用的?

 

u2小楼:你管这叫一个问题???!!!

 

 

一、使用软件自带元件库

在AxureRP8.0中,软件自带了三个元件库。分别是:默认元件库、流程图元件库和图标元件库。下面我按照次要到重要的顺序来介绍这几个元件库。

  • 图标元件库(Icons)

图标元件库是Axure团队基于FontAwesome图标字体中的各种图标制作发布的形状元件,直接拖拽到编辑区即可使用,无需安装FontAwesome字体文件。(图3-5)

%e5%9b%be3-5

(图3-5)

  • 流程图元件库(Flow)

流程图元件库,包含的是各种流程图的形状,通过这些形状可以构建流程图。(图3-6)

%e5%9b%be3-6

(图3-6)

关于流程图形状的各种含义如下。

矩形:一般用来表示执行;

圆角矩形:表示程序的开始或者结束;

斜角矩形:不太常用,可以自定义;

菱形:表示判断;

文件:表示为一个文件;

括弧:注释或者说明;

半圆形:表示页面跳转的标记;

三角形:数据的传递;

梯形:表示手动操作;

椭圆形:表示流程的结束;

六边形:表示准备或起始;

平行四边形:表示数据的处理或输入;

角色:模拟流程中执行操作的角色是谁;

数据库:指保存数据的数据库;

页面快照:引用项目内某一页面的缩略图。

图片:表示一张图片。

流程图在使用时,各个形状之间的连线,需要在快捷功能中选择【连接】,通过这个连线工具绘制形状间的连接线。(图3-7)

%e5%9b%be3-7

(图3-7)

在选择【连接】开启连线工具之后,将鼠标指针指向形状的连接点,按下鼠标左键然后拖动到另一形状的连接点松开,即可完成连接。另外,点中或者双击某个连接线还可以为线段输入文字。(图3-8)

%e5%9b%be3-8

(图3-8)

连接线可以改变线段与两端箭头的样式,这个操作也在快捷功能中可以实现。(图3-9)

%e5%9b%be3-9

(图3-9)

  • 默认元件库(Default)

默认元件库中包含了三种类型的常用的元件,在这里我做一下简要的说明。

  • 基本元件

基本元件是搭建页面内容的形状、图片、线段、热区以及容器元件。(图3-10)

%e5%9b%be3-10

(图3-10)

形状:形状元件包括各种矩形、形状按钮和文本,常用于页面中的一些背景形状、文字标题与按钮。图3-10中的第1、2行元件除了图片都是形状元件。这些元件可以通过改变属性与样式进行互相转换。如果需要编辑这些元件上的文字,双击这些元件即可进入编辑状态,如果只是添加文字,也可以点中该元件直接输入文字。

图片:图片元件一般用于在为页面添加各种图片或图标,双击该元件即可导入默认显示的图片。如果需要为图片元件添加文字,可以点中该元件直接输入文字。修改已有的文字可以在元件上点击<鼠标右键>,菜单中选择【编辑文本】的选项,即可进入编辑状态。

线段:包括水平线和垂直线,常用于页面中的一些分隔线。这两个元件可以通过改变角度互相替代。另外,线段与形状也可相互转换。

热区:热区是一个透明元件,我们最常利用的就是它透明的特性,比如在一张图片中的两个位置上添加点击的交互,就可以在这两个位置上放置两个热区,然后为热区添加点击的交互。

动态面板:容器类元件,在之后将有详细的说明。

内联框架:容器类元件,简称框架,可以在页面的某个区域嵌入项目中的其它页面或某个URL指向的网页,还可以嵌入一些多媒体文件,例如:MP3、AVI、SWF等文件。

中继器:容器类元件,在之后将有详细的说明。

基本元件使用非常广泛,常见的页面基本上都可以用这些元件完成搭建。

  • 表单元件

表单元件是用来获取用户输入的元件。在前端开发中,通过此类元件可以制作各类表单,并通过提交按钮,将用户输入的内容提交至服务器。(图3-11)

%e5%9b%be3-11

(图3-11)

文本框:单行文本框和多行文本框用于获取用户输入的文字。

列表框:下拉列表框和列表框用于获取用户选择的选项。元件默认的选项可通过鼠标双击元件,在弹出的窗口中进行设置。

单选按钮:具有选中与未选中两种状态。一般在使用中会有多个单选按钮,并属于互斥关系,只允许用户选择其一。

复选框:具有选中与未选中两种状态。可单独使用,也可多个一起使用,一般表示用户可自由选择或者取消选择。

提交按钮:在编程开发中,该元件被点击时,能够将用户填写完成的表单数据提交到服务器。但是,在原型制作中不涉及与服务器的交互,所以显得多余,特别是它的样式不能调整又只有几种简单的交互触发,所以一般我们都会用基本元件中的形状按钮或图片按钮来代替它。

  • 菜单与表格元件

菜单与表格元件在搭建对样式无要求或要求较低的线框图时,使用起来比较方便。(图3-12)

%e5%9b%be3-12

(图3-12)

                   树状菜单:垂直方向的菜单,节点可以展开与折叠。

表格:可以添加行与列,但不可合并多个单元格。

水平菜单与垂直菜单:可以添加菜单项和子菜单项。

菜单与表格元件的常用操作,例如添加删除行、节点或菜单项等,可以在节点、单元格、或者菜单项上点击<鼠标右键>,在弹出的菜单中完成。

  • 标记元件

标记元件主要是用来进行功能标注或者展现界面业务流程的元件。(图3-13)

%e5%9b%be3-13

(图3-13)

                   页面快照:能够指向项目中的某个页面,呈现该页面的缩略图。

除页面快照之外的元件都是形状或线段元件,这些元件均可使用基本元件通过改变样式制作出来。

u0麦子:老师,我大概对这些元件有了些印象,但是怎么通过这些元件搭建页面还是没有什么概念。

 

u2小楼:好吧!我来找个页面,指出里面都能用哪些元件来完成页面的构建,给你参考。(图3-14)

 

%e5%9b%be3-14

(图3-14)

 

u0麦子:老师,为什么中间那么粗啊?

 

u2小楼:什么中间那么粗?你……你怎么知道的?

 

u0麦子:我是说,为什么两个矩形并排放一起中间那么粗啊?

 

u2小楼:吓我一跳……这个跟元件的边框对齐设置有关系。

 

如果发现并排的形状或图片元件之间的边框比较粗。可以在导航菜单【项目】的选项列表中,选择【项目设置】,在弹出的窗口中,将{边框对齐方式}选择为【边框重合】。(图3-15)

%e5%9b%be3-15

(图3-15)

二、使用自定义元件库

u0麦子:老师,老师!

 

u2小楼:您好,我现在有事不在,一会再和您联系。

 

u0麦子:老师,老师!我知道你在呢!我看见你在另外一个群说话呢。

 

u2小楼:女侠,你就放过我吧!

 

u0麦子:老师,你别这样嘛! 我就是想问问你怎么用别的元件库。

 

u2小楼:点这里,想用哪个选哪个!(图3-16)

 

%e5%9b%be3-16

(图3-16)

u0麦子:老师,这个我会! 我是想问问你怎么用别的元件库,比如你网站上分享的那些。对了,就像你截图中后一个元件库,是怎么弄到软件的元件库列表中的?

 

u2小楼:这个只需要载入就可以啦。

 

如果需要使用其它元件库,可以在元件库面板中点击功能列表按钮,在打开列表中选择【载入】元件库。(图3-17)

%e5%9b%be3-17

(图3-17)


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,全新的套路,经典的姿势,更舒爽,更润滑,更紧致,更销魂,想体验这种欲罢不能的学习感觉?快从下面进入!

《AxureRP 8 入门与实战 - 入门篇》------从零入门的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 8 入门手册 – 第3章

喜欢 (28)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. get
    猫小咪11号2016-12-05 16:36 回复