接着上一篇继续讲解产品经理基础教程之Axure RP 9 基础操作部分,本篇主要讲解如何使用第三方元件库,布局排布相关功能的使用,举例说明如何绘制草图,页面样式如何进行调整等内容。
(四)其它元件库
在网上有很多第三方元件库共享,我们可以下载使用。
元件库的文件名后缀为“.rplib”,可以通过元件功能面板的“+”按钮进行选择添加。
![0649ff9d33f0d3fa1e988f98e5591b08.png](https://i-blog.csdnimg.cn/blog_migrate/3baf7601b7a301bb217ae909d34c9142.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
也可以直接双击元件库文件进行添加,添加完成的元件库,就能够像自带元件库一样使用了。
![faeabbcc4da25fde6dbe1f2eaf8dec2b.png](https://i-blog.csdnimg.cn/blog_migrate/4ba1bd6c1c129396601c15f2c904b357.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
添加的外部元件库可以进行编辑与移除。
![8c693c73221e65137c9023b5b22af179.png](https://i-blog.csdnimg.cn/blog_migrate/1d3a457706fd21012cf84e899e574118.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
注:直接修改RP文件的文件名后缀为“.rplib”即可当做外部元件库使用。
(五)图片文件夹
除了元件库的添加,Axure RP 9同时也支持添加图片文件夹,作为元件库使用。
![f111a1da3a3fdcc4e42c999665e7d4b2.png](https://i-blog.csdnimg.cn/blog_migrate/665dcfad6d0a24e4c9f6b5c062929406.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
三、图标字体
除了常用的元件,我们在原型中还可以使用字体图标。实际上字体文件中所包含的文字都是矢量图形,所以字体文件中也可以包含图标。这里以比较知名的图标字体FontAwesome为例,Axure RP中Icons元件库里面所包含的图标元件,都是参考这套字体图标制作而成的。但是,和Icons元件库中的图标元件不同,使用图标字体需要先安装字体文件,并在安装字体文件之后重新启动Axure RP才能够正常加载字体。
字体图标资源下载地址:https://fontawesome.com/download
目前,FontAwesome已经商业化,如果未经购买,我们只能使用免费部分的字体。点击下载页面中的下载按钮,下载下来之后是两个ZIP格式的压缩文件。
![4415d0e3c41c2ad0a382884e16216766.png](https://i-blog.csdnimg.cn/blog_migrate/78452a0a26b4e05af3f485ecdd7cde3e.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
1、完成系统字体的安装
将“fontawesome-free-X.X.X-desktop.zip”(X.X.X表示版本号,目前是5.6.3)文件解压。
![3791ec29e566970e9bd509810bf4b1a1.png](https://i-blog.csdnimg.cn/blog_migrate/291bfc837706c5f7dd88890218c18996.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
“otfs”文件夹包含了字体安装文件,逐个双击进行安装。
![ba7e4112dcd3e2632490a4ca3c949844.png](https://i-blog.csdnimg.cn/blog_migrate/4572debadba8c0b3f9b73cdeb8d10871.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
另外,“svgs”文件夹中包含了所有图标单独的SVG文件,这些SVG文件和阿里巴巴图标库中下载的SVG图标一样,可以直接拖入或导入Axure RP元件库中使用。安装完三个字体文件之后,我们就可以使用这套图标字体了。但是,Axure RP中并不能直接使用这些图标字体,因为不能够直接输入。
2、借助Office软件完成输入
Word/Excel/PowerPoint中都带有插入符号的功能。
![6b775d68054e8d5c4baa4adf2df8dd76.png](https://i-blog.csdnimg.cn/blog_migrate/896cb88dd8d986f75486ae8b68ee10b6.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
打开插入符号的的面板之后,我们选择字体系列就可以在文档中插入这些符号。
例如,我们插入一个Windows的商标,需要先选择“Font Awesome 5 Brands Regular”字体系列,然后选中Windows图标,再点击【插入】按钮,就完成了图标的插入。
![d918cc968aeddc28f385f9b147a783b2.png](https://i-blog.csdnimg.cn/blog_migrate/9c5a416228c89690862ba1c8b7b52a2d.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
最后,我们可以在文档中复制图标,粘贴到Axure RP的画布中进行使用。
![825806c43fa7cd4bfba81f78f797b853.png](https://i-blog.csdnimg.cn/blog_migrate/0d03040759f8d4b66b09f92851ec8734.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
3、为图标字体添加Web支持。
因为,我们制作的原型如果发布给他人进行浏览,在他人的系统中也需要安装字体才能够正常显示图标。很显然这样显得有些麻烦。为了让浏览原型的用户不用任何操作就能够正常浏览原型,我们需要为图标字体添加Web支持。
Web支持可以通过以下方式添加。
(1)在线CSS文件
字体官网提供了在线的CSS文件支持:https://fontawesome.com/start。
页面中,我们能够看到代码中的CSS文件链接。
![1623cd82dfdd5143b1ea0a1ab55ce5f7.png](https://i-blog.csdnimg.cn/blog_migrate/b8ca907c6041e82178d3e8541ed8a5fe.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
将链接复制,然后打开Axure RP的HTML生成配置。
切换到【字体】设置面板,点击【+添加字体】按钮,输入一个自定义的字体标签,并将链接粘贴到下方的【CSS文件的URL】输入框中。
![fbc3f523c36cfc63c5c3bd40a6042f1a.png](https://i-blog.csdnimg.cn/blog_migrate/bcaf8211cc337474f06065f9cff11131.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
完成这个配置之后,只要浏览原型的用户网络畅通,就能够保证图标正常显示。
(2)本地CSS文件
如果不是在线发布原型,而是要把原型生成的HTML文件部署到自有服务器上,可以使用本地CSS文件。
在Axure RP的HTML生成配置中,【CSS文件的URL】填入CSS文件的相对路径“css/all.css”。
![a109a27a0769b205e86bcea4c580a01b.png](https://i-blog.csdnimg.cn/blog_migrate/fee451e2a593bd140f28718381539ca3.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
然后,生成HTML文件到指定的文件夹。
接下来,就需要用到我们下载的另外一个压缩文件“fontawesome-free-X.X.X-web.zip”。我们把压缩文件解压缩之后,将里面的“css”和“webfonts”文件夹复制到原型的HTML文件夹中,打开HTML文件,就能够正常显示图标了。
![cf0c5fdfb0ade5a1b03556ea9611b5dd.png](https://i-blog.csdnimg.cn/blog_migrate/81b320af34f8ea3a2760b38a5ff03738.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
(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');
完成设置后,生成HTML文件到指定的文件夹。
![cc31fc7f91169ff4bd016df71cfec96b.png](https://i-blog.csdnimg.cn/blog_migrate/78df23f439e73c62d3fc1997e67b848b.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
并且,将“fontawesome-free-X.X.X-web.zip”里面的“css”和“webfonts”文件夹复制到原型的HTML文件夹中。此时,打开HTML文件,就能够正常显示图标了。
四、元件样式
除了了解元件的基本用途,我们还需要了解如何编辑元件的样式。
例如,修改形状的填充颜色、修改边框的线段类型和改变文字字号等等。
不过不同类型的元件,样式设置会有一些区别。
![dce9a2a5d759e7f8060ef2b4c053d927.png](https://i-blog.csdnimg.cn/blog_migrate/6a72f2b112b40049cc21246af60e4176.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
样式的设置主要分为:
显示和隐藏:设置元件的初始可见状态。
位置和尺寸:元件的位置与尺寸,支持写入运算公式。
![4f9d74301c0b5e8f0660e059d6041120.png](https://i-blog.csdnimg.cn/blog_migrate/8158764ae0f109f4a29ab7c40b722c44.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
样式方案:创建新的样式方案和更新当前的样式方案。
透明:设置元件整体的透明度,包括元件与元件中的文字。
排版:设置元件上文字的样式,包括字体、字号、字色、文字阴影、粗体、斜体、文字下划线、文字删除线、文字下标、行列间距等。
填充:设置形状的填充颜色或填充图像,或者设置图片元件默认显示的图像。
线段:设置元件边框、线段元件以及连接线的线型、线宽以及线段颜色,还能设置线段两端的箭头类型以及元件四个边框的可见性。
阴影:设置元件的内部阴影和外部阴影。
圆角:设置矩形与图片的圆角,并可以单独取消部分圆角。
边距:设置元件中文字与边框之间的间距。
五、布局排列
每个原型都会使用到多个元件。
在编辑过程中让这些元件整齐有序的排列是非常有必要的。
在Axure RP的工具栏中,提供了一些实用的功能,帮助我们能够快速的完成功能元素的排布。
![7c6023519958f1d21a4dd45ea4041986.png](https://i-blog.csdnimg.cn/blog_migrate/0fe86c695f1c966a1dec7cf3d266f7f2.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
1、层级排序:工具栏中的【顶层】和【底层】按钮能够让我们快速的将元件置于顶层或底层,也可以通过快捷键和完成。
2、组合:元件可以组合到一起,方便统一的操作。工具栏中的【组合】和【取消组合】按钮能够让我们快速的将元件组合或拆分,也可以通过快捷键和完成。
3、对齐:工具栏中提供了多个元件的对齐功能,能够让多个元件快速的进行各个方向对齐或中心对齐。
4、分布:工具栏中提供了多个元件的分布功能,能够让多个元件快速的进行水平或垂直方向的等距分布。
六、绘制草图
绘制草图只是不同元件的搭配组合。
通过对元件和基础操作与功能的了解,我们应该可以完成这样的工作。
例如,知乎网站登录后的首页。
![96ed22343c1e4bd49a52af5ccf33d7e1.png](https://i-blog.csdnimg.cn/blog_migrate/9cc93adf76fd96fefdd543969299a0f9.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
案例:知乎首页草图
注:本示例只包含原网页上半部分内容。
我们先来看一下基本模块组成。
![9cc554316ce47d33d2b7a53782de9feb.png](https://i-blog.csdnimg.cn/blog_migrate/040aa13a31a0983e9e75c8d21956aa17.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
然后,就通过元件去完成每一个模块的组建。
![1364455b9177f35c59eb7b1d5d77055f.png](https://i-blog.csdnimg.cn/blog_migrate/d0488aa657794a09c580880de3aa973a.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
注:为了便于查看,截图中添加了灰色页面背景色。
线框草图一般通过默认元件库中的基本元件(形状、线段)与图标元件即可完成。
注:示例中原页面的部分图标使用了相似图标代替;非软件自带的元件库文件在随书资源中获取。
初学者可以从网络中选取一些内容简洁的页面,分析功能结构与元素组成,并模拟为线框草图。
本示例中使用了软件自带的默认元件库(Default)与FontAwesomeV5.5.0元件库。
七、页面样式
点击概要功能面板中的页面名称,或者画布的空白处即可切换到页面的交互、样式与说明的设置。
![5ab66bb90b5ab56a5b4a5ec420979cac.png](https://i-blog.csdnimg.cn/blog_migrate/8a4c6cf650d28e88af6940cf6e6640cf.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
在页面的样式功能面板中,我们能够设置查看原型时,页面整体内容的排列方式是靠左还是居中。
另外,在页面样式的设置中,还可以设置页面的背景颜色或背景图片。
例如,为我们之前做好的页面导航栏,添加一个顶部带有阴影效果的通栏背景。
![0f610ef1d72af1907466baf8700e9d83.png](https://i-blog.csdnimg.cn/blog_migrate/e0a15d8adf0169e6005aa8eb268814fc.jpeg)
产品经理、产品设计、原型设计、交互设计、axure
通过一个只有15像素宽的背景图片进行【填充】,【水平重复】后,横向铺满整个浏览器窗口的顶部。
![9e91e89e6e6b11c123ee1a270893439e.png](https://i-blog.csdnimg.cn/blog_migrate/2c34a1c687e21d79abbc67120a0ab194.jpeg)
产品经理、产品设计、原型设计、交互设计、axure