添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

上一节我们学习了如何对一个矩形元件设置交互样式,我们完成了将元件设计为按钮,实现了鼠标悬停的交互样式和单击界面跳转的交互效果。

其实我们完全可以让我们设置的界面更加的美观。比如csdn的创作界面:
我们可以看到,在每个热区上面,在文字上方都放置了一个图标,让我们的界面看起来不那么枯燥无趣,这些图标的来源就是元件库里面的元件。现在让我们来学习一下如何添加这种有趣的图标。

方法很简单,我们只需要做一下三个步骤:

1.进入矢量库;

2.下载svg格式矢量图标;

3.拖动到Axure并将svg格式转换为形状。

接下来我们具体操作一下。

首先,我们进入一个矢量图标网站,这里推荐阿里巴巴矢量库: iconfont-阿里巴巴矢量图标库

也可以直接百度搜索阿里巴巴矢量库就可以进入网站:

在这个网站,有很多开源的图标供我们下载,比如我们现在就来画一下csdn的这个创作界面:

我们观察发现我们需要的图标,有“撤销”、“重做”、“标题”、“加粗”、“背景”等等。那么我们直接在阿里巴巴矢量库里搜索这些关键词即可。

比如我们输入“撤销”点击搜索:

网站就会提供一系列跟“撤销”有关的图标供你选择,我们选择一个,点击下载按钮:

点击“svg下载”:

下载完成后,点击这个图标把它拖动到你的Axure里面去,放到你的页面上:

这个时候你就得到了一个“撤销”图标,你可以对它进行大小的编辑,但注意,这个时候的“撤销”图标还只是一个svg图片的格式,不能对它进行填充色等样式的改变。

这时,右击"撤销"图标,选择“变换图片”—“转换SVG图片为形状”。

这个时候,“撤销”图标真正成为了你可以操作的元件,跟你元件库里的矩形一样,我们可以变换它的样式,比如我们可以把它填充色变为粉色:

我们按照同样的方式,添加其他图标(这里就不全部添加了,我们做一部分,操作差不多)。

我们先观察一下界面:

通过观察我们大致把页面分成两个区,下面这个区域被一条线分开 ,线上方是功能栏,线下方是创作区域,所以我们在画原型时候,需要两个矩形框和一条线段:

根据我们之前学习的内容,配置元件大小和样式:

按照我们之前学习的内容,从元件库中拖出7个矩形作为按钮,7个文本框作为文字说明,并将矩形边框设置为不可见,调整好大小顺序:

根据第二节学习的设置鼠标悬停样式,调整界面填充色和鼠标悬停填充色:

预览一下:

原界面对比一下(悬停到“背景”):

🆗,今天的学习到此结束,我们今天学习了如何给我们的原型加入一些更美观更多样的图标元件并对它们加以运用,自己动手试试吧!

我整理了一套产品经理学习大礼包福利。

含BAT大厂培训内部资料、PRD模板、面试真题。

微信公众号搜索“咸拾乱码”或扫描文末图片,关注公众号【咸拾乱码】发送【礼包】即可免费领取!公众号也会定期更新产品干货!

F:\ Axure \ Axure RP 9\DefaultSettings\Libraries 2.MAC系统加载 元件 库 将 元件 库复制到 Axure 根目录-Contents-Resources -DefaultSettings\Libraries 3.新加入一些 元件 库 直接复制后缀为. rp lib到Libraries文件夹 关闭重启 Axure 软件 目的:提高工作效率,可以直接拖拽已经设计好的内容到新页面中,继续修改或 添加 1、 元件 的概念 首先我们来认识一下 Axure RP 9 元件 元件 是组成我们原型的零件,也有人翻译成组件。 Axure RP 9默认给我们提供了三套 元件 库,默认 元件 库、流程图 元件 库、 图标 元件 库。可以根据自己的需要选择。也可以自己导入第三方的 元件 库使用。初学者我们使用默认的 元件 库就够用了。 元件 库在我们后面章节会仔细讲解,这里就不多说了。下面我们来看看如何使用... Axcure网站:http://www.i axure .com/ 其中一篇:https://www. axure .com.cn/1828/,是ios 元件 库下载文章,里面有下载地址。 将下载的 元件 库包,格式为Axcure RP Widget Library File的文件,放到目录“D:\Program Files (x86)\ Axure \ Axure RP 9\DefaultSettings\Libraries”下面。 重启Axcu 都怪我手痒痒把谷歌的游客账号给清除了导致我自此之前浏览器上所有的文件插件都没了~ 被自己蠢到生气 我需要看原型啊~~ 然后我一打开就要我下载插件(这里以360浏览器模拟,因为我的谷歌已经正常工作了) 没错啊你要找的这个扩展程序 其实在你的原型里面就有不用到处去找 打开你的原型找到resource... 文章目录前言: Axure 简介([来自百度百科](https://baike.baidu.com/item/ axure %20 rp /9653646?fr=aladdin)) Axure 下载安装 前段时间因为人手问题做了些产品的工作 工作中需要绘制产品的原型图所以上手了 Axure RP 9 发现相关资料搜索学习比较费劲,并且很多都是旧版本的 Axure 资料与现版本差异较大 所以决定做一版 Axure RP 9 的使用教程 在学习原型图绘制的过程中做了份笔记,希望能帮没有接触过 Axure 的同学快速上手使用 Axure RP 9是一款备受瞩目的产品原型设计软件,它可以让你在上面任意构建草图、框线图、流程图以及产品模型,还能够注释一些重要地方, axure rp 可支持同时多人写作设计和版本管理控制,这款 交互 式原型设计工具可以帮助设计者制作出高效率高水准的产品原型图,快速创建应用程序和网站的线框,广泛应用于各行各业!此次小编带大家了解下学习下 Axure RP 9基础功能的使用方法。 1、 添加 元件 到画布 https:// axure .cachefly.net/ Axure RP -Setup.exe 2.汉化 Axure ,汉化后更加简明易懂 ● Axure RP 9汉化文件下载地址:http://chanpinban.com/downloads/。一直next,finish即可。 ●下载后将lang文件夹和三个.dll文件放到 Axure 文件夹下代替原本的三个.dll ●重新...