Axure RP 9萌新修炼手册-第三章-基础应用(2)

AxureRP9教程 小楼一夜听春语 550℃ 0评论

(四)其它元件库

在网络上有很多第三方元件库共享,我们可以下载下来使用。

元件库的文件名后缀为“.rplib”,可以通过元件功能面板的“+”按钮进行选择添加。(图3-31)


也可以直接双击元件库文件进行添加(无论Axure RP 9是否打开都有效)。

添加完成的元件库,就能够像自带元件库一样使用了。(图3-32)

添加的外部元件库可以进行编辑与移除。(图3-33)

【提示】直接修改RP文件的文件名后缀为“.rplib”即可当做外部元件库使用。

(五)图片文件夹

除了元件库的添加功能,Axure RP 9还支持添加图片文件夹,作为元件库使用。(图3-34)

三、图标字体

除了常用的元件,我们在原型中还可以使用图标字体(也叫字体图标)。

实际上字体文件中所包含的文字都是矢量图形,所以字体文件中也可以包含图标。

这里以比较知名的图标字体FontAwesome为例。

Axure RP中Icons元件库里面所包含的图标元件,都是参考这套字体图标制作而成的。

但是,和Icons元件库中的图标元件不同,使用图标字体需要先安装字体文件,并在安装字体文件之后重新启动Axure RP才能够正常加载字体。

一般来说,我们在系统中只需要安装TTF或OTF格式的字体文件。

资源下载地址:https://fontawesome.com/download

目前,FontAwesome已经商业化,如果未经购买,我们只能使用免费部分的字体。

点击下载页面中的下载按钮(图3-35),下载下来之后是两个ZIP格式的压缩文件。


1、完成系统字体的安装。

将“fontawesome-free-X.X.X-desktop.zip”(X.X.X表示版本号,目前是5.6.3)文件解压缩(图3-36)。

“otfs”文件夹包含了字体安装文件,逐个双击进行安装。(图3-37)

另外,“svgs”文件夹中包含了所有图标单独的SVG文件,这些SVG文件和阿里巴巴图标库中下载的SVG图标一样,可以直接拖入或导入Axure RP元件库中使用。

安装完三个字体文件之后,我们就可以使用这套图标字体了。

但是,Axure RP中并不能直接使用这些图标字体,因为不能够直接输入。

2、借助Office软件完成输入。

Word/Excel/PowerPoint中都带有插入符号的功能。(图3-38)

打开插入符号的的面板之后,我们选择字体系列就可以在文档中插入这些符号。

注意,Word中通过上下文菜单也可以打开插入符号的面板;工具栏中点击符号按钮时,需要选择【其他符号】。

例如,我们插入一个Windows的商标,需要先选择“Font Awesome 5 Brands Regular”字体系列,然后选中Windows图标,再点击【插入】按钮,就完成了图标的插入。(图3-39)

最后,我们可以在文档中复制图标,粘贴到Axure RP的画布中进行使用。(图3-40)

3、为图标字体添加Web支持。

因为,我们制作的原型如果发布给他人进行浏览,在他人的系统中也需要安装字体才能够正常显示图标。

很显然,这样显得有些麻烦。

为了让浏览原型的用户不用做任何操作就能够正常浏览原型,我们需要为图标字体添加Web支持。

Web支持可以通过以下方式添加。

(1)在线CSS文件

字体官网提供了在线的CSS文件支持:https://fontawesome.com/start。

页面中,我们能够看到代码中的CSS文件链接。(图3-41)


将链接复制,然后打开Axure RP的HTML生成配置。

切换到【字体】设置面板,点击【+添加字体】按钮,输入一个自定义的字体标签,并将链接粘贴到下方的【CSS文件的URL】输入框中。(图3-42)

完成这个配置之后,只要浏览原型的用户网络畅通,就能够保证图标正常显示。

(2)本地CSS文件

如果不是在线方式发布原型,或者要把原型生成的HTML文件部署到自有服务器上,可以使用本地CSS文件。

在Axure RP的HTML生成配置中,【CSS文件的URL】填入CSS文件的相对路径“css/all.css”。(图3-43)

然后,生成HTML文件到指定的文件夹。

接下来,就需要用到我们下载的另外一个压缩文件“fontawesome-free-X.X.X-web.zip”。(X.X.X表示版本号,目前是5.6.3)

我们把压缩文件解压缩之后,将里面的“css”和“webfonts”文件夹复制到原型的HTML文件夹中,打开HTML文件,就能够正常显示图标了。(图3-44)

(3)@font-face

这种方式是使用代码完成Web字体支持,比较容易出错,所以不建议采用这种方式。

操作上也分为在线与本地两种,代码内容相近,只是代码中的字体文件路径(url)分别为网络路径和相对路径(本地)。

例如(相对路径):

font-family: 'Font Awesome 5 Brands';

src: url('webfonts/fa-brands-400.eot');

src: url('webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),

url('webfonts/fa-brands-400.woff') format('woff'),

url('IaxureTBG/fa-brands-400.ttf') format('truetype'),

url('webfonts/fa-brands-400.svg#Font Awesome 5 Brands') format('svg');

完成设置后(图3-45),生成HTML文件到指定的文件夹。

并且,将“fontawesome-free-X.X.X-web.zip”里面的“css”和“webfonts”文件夹复制到原型的HTML文件夹中。(图3-44)

此时,打开HTML文件,就能够正常显示图标了。

四、元件样式

除了了解元件的基本用途,我们还需要了解如何编辑元件的样式。

例如,修改形状的填充颜色、修改边框的线段类型和改变文字字号等等。

不过不同类型的元件,样式设置会有一些区别。(图3-46)

样式的设置主要分为:

显示和隐藏:设置元件的初始可见状态。

位置和尺寸:元件的位置与尺寸,支持写入运算公式。(图3-47)

样式方案:创建新的样式方案和更新当前的样式方案。

透明:设置元件整体的透明度,包括元件与元件中的文字。

排版:设置元件上文字的样式,包括字体、字号、字色、文字阴影、粗体、斜体、文字下划线、文字删除线、文字下标、行列间距等。

填充:设置形状的填充颜色或填充图像,或者设置图片元件默认显示的图像。

线段:设置元件边框、线段元件以及连接线的线型、线宽以及线段颜色,还能设置线段两端的箭头类型以及元件四个边框的可见性。

阴影:设置元件的内部阴影和外部阴影。

圆角:设置矩形与图片的圆角,并可以单独取消部分圆角。

边距:设置元件中文字与边框之间的间距。

五、布局排列

每个原型都会使用到多个元件。

在编辑过程中让这些元件整齐有序的排列是非常有必要的。

在Axure RP的工具栏中,提供了一些实用的功能,帮助我们能够快速的完成功能元素的排布。(图3-48)

1、层级排序:工具栏中的【顶层】和【底层】按钮能够让我们快速的将元件置于顶层或底层,也可以通过快捷键<Ctrl+Shift+[>和<Ctrl+Shift+]>完成。

2、组合:元件可以组合到一起,方便统一的操作。工具栏中的【组合】和【取消组合】按钮能够让我们快速的将元件组合或拆分,也可以通过快捷键<Ctrl+G>和<Ctrl+Shift+G>完成。

3、对齐:工具栏中提供了多个元件的对齐功能,能够让多个元件快速的进行各个方向对齐或中心对齐。

4、分布:工具栏中提供了多个元件的分布功能,能够让多个元件快速的进行水平或垂直方向的等距分布。

六、绘制草图

绘制草图只是不同元件的搭配组合。

通过对元件和基础操作与功能的了解,我们应该可以完成这样的工作。

例如,知乎网站(https://www.zhihu.com/)登录后的首页。(图3-49)

案例01:知乎首页草图

注:本示例只包含原网页上半部分内容。

我们先来看一下基本模块组成。(图3-50)

然后,就通过元件去完成每一个模块的组建。(3-51)

注:为了便于查看,截图中添加了灰色页面背景色。

线框草图一般通过默认元件库中的基本元件(形状、线段)与图标元件即可完成。

注:示例中原页面的部分图标使用了相似图标代替;非软件自带的元件库文件在随书资源中获取。

随书资源:关注微信公众号“”chanpinban”,回复“萌新手册”获取下载地址。

建议初学者从网络中选取一些内容简洁的页面,分析功能结构与元素组成,并模拟为线框草图。

本示例中使用了软件自带的默认元件库(Default)与FontAwesomeV5.5.0元件库。

各位读者可以下载随书资源,打开本示例源文件进行参考。

七、页面样式

点击概要功能面板中的页面名称,或者画布的空白处即可切换到页面的交互、样式与说明的设置。(图3-52)

在页面的样式功能面板中,我们能够设置查看原型时,页面整体内容的排列方式是靠左还是居中。

另外,在页面样式的设置中,还可以设置页面的背景颜色或背景图片。

例如,为我们之前做好的页面导航栏,添加一个顶部带有阴影效果的通栏背景。(图3-53)


通过一个只有15像素宽的背景图片进行【填充】,【水平重复】后,横向铺满整个浏览器窗口的顶部。(图3-54)


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

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第三章-基础应用(2)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 头像
    为啥现在拉长直线很费劲 是我没掌握什么便捷操作吗 求指教
    蜡笔2019-05-01 14:44 回复
    • 小楼一夜听春语
      按住Shift键
      小楼一夜听春语2019-05-02 12:02 回复