Axure实战06:创建一个AppleSymbol图标库网站

科技公元 工具 2022-05-07

在本章中,你将学会如何使用Axure中继器和内联框架创建一个AppleSymbol图标库网站。

项目背景

在我们开发iOS应用程序过程,常常会用到图标按钮,Apple提供了一整套官网的图标,开发人员可以直接使用Apple设计的官网图标快速开发App。

但遗憾的是,目前这套AppleSymbol图标库目前只有dmg下载安装的版本,这就对于非苹果的开发者、MacBook低储存用户非常不友好。

于是乎,我们看看能不能做个在线版本的AppleSymbol图标库,收录常用的图标供用户直接使用。

说干就干。

Axure实战06:创建一个AppleSymbol图标库网站

项目创建

首先,创建一个新项目,命名为AppleSymbol。

Axure实战06:创建一个AppleSymbol图标库网站

基础样式-侧边导航栏

我们先分析下AppleSymbol图标库网站的结构,它由一个侧边导航栏和内容展示区组成,当我们点击侧边导航栏的菜单时,右侧内容区域将展示不同的内容。

在这里我们使用到的组件是:动态面板、内联框架、中继器,分别实现侧边导航栏、内容区域、内容展示。

首先是侧边导航栏,我们拖入一个动态面板放在左侧,在样式工具栏中,设置它的位置为0,0,尺寸是256*955,并填充动态面板的背景颜色为#001529。

Axure实战06:创建一个AppleSymbol图标库网站

为了让侧边导航栏放在左边,我们需要固定侧边导航栏的动态面板。

我们在样式工具栏中设置“固定到浏览器”,设置水平固定为“左侧”,垂直固定为“顶部”。

Axure实战06:创建一个AppleSymbol图标库网站

接下来完成里面的内容。

我们双击动态面板进入动态面板内部,拖入一个矩形1组件,在样式工具栏中,修改它的位置为(13,20),尺寸为230*52,填充颜色为透明色,线段宽度为0;

双击矩形1,输入文字“导航菜单”,字体大小为14号字,字体颜色为#FFFFFF。

Axure实战06:创建一个AppleSymbol图标库网站

下面,我们添加交互样式。

在交互工具栏中,我们点击“新建交互”,选择“单击时”,选择“设置选中”,选中目标“当前”,值为“真”。

在下面“交互样式”一栏中,设置“鼠标悬停时”的交互为勾选“填充颜色”,设置颜色为#1890FF。

同理,设置“元件选中的样式”,勾选“填充颜色”,设置颜色为#1890FF。

Axure实战06:创建一个AppleSymbol图标库网站

我们复制6个“导航菜单”的矩形,修改里面的文字为“常用功能”、“增删改查”、“上下左右”、“收藏点赞”、“消息提醒”、“硬件设备”。

矩形居中对齐,间距为10,可自行调节矩形间的间距。

Axure实战06:创建一个AppleSymbol图标库网站

交互动作-侧边导航栏

为了实现单选的效果,我们需要选中一个侧边导航栏菜单时,选中单个。

这里引用“选项组”的概念,选项组中,交互唯一。

我们为每一个菜单都设置选中的时候加背景颜色,只需要把所有的导航菜单结合在一个选项组中,即可实现单选互斥选中的效果。

选中全部导航菜单,右键选择“选项组”。

Axure实战06:创建一个AppleSymbol图标库网站

给选项组命名为“导航菜单”。

这样我们就实现了侧边导航栏的单选效果。

Axure实战06:创建一个AppleSymbol图标库网站

我们点击预览看看效果。

Axure实战06:创建一个AppleSymbol图标库网站

基础样式-内容区域

下面,我们设计下内容区域。

这里我们用到的组件叫做“内联框架”,它可以链接展示外部地址网站,也可以链接内部创建好的页面。

我们这里有7个菜单,我们在“页面”工具栏中先创建7个页面。

Axure实战06:创建一个AppleSymbol图标库网站

然后还是在AppleSymbol页面中,拖入一个“内联框架”组件,把它放在侧边导航栏右边,尺寸设置为1350*955。

顺便设置它的样式,勾选“隐藏边框”,设置滚动模式为“从不滚动”。

Axure实战06:创建一个AppleSymbol图标库网站

交互动作-内容区域

我们希望点击侧边导航栏不同菜单的时候,内联框架展示不同的内容,而内联框架可以绑定我们已经创建好的页面。

下面,我们完成这一块的逻辑绑定。

示例:当我们点击侧边导航栏的“导航菜单”时,内容区域的“内联框架”应该展示“导航菜单”的页面。

我们双击侧边导航栏进入内页,选中“导航菜单”,在“交互”工具栏中,在“单击时”下点击“添加动作”,选择“在框架中打开链接”,选择目标为“内联框架”,选择链接到“导航菜单”页面。

Axure实战06:创建一个AppleSymbol图标库网站

同理,我们给每一个菜单都这么设置,这样我们点击单个菜单时,内联框架就会打开对应的页面。

同时,我们给第一个菜单,也就是“导航菜单”,添加一个“载入时”的交互,选择“设置选中”,目标为“当前”,值为“真”。

这样在页面每次加载的时候,系统会默认选中第一个菜单,同时内联框架页面打开第一个菜单对应的页面。

Axure实战06:创建一个AppleSymbol图标库网站

而且内联框架也需要设置默认的目标页面。

选中内联框架,在“样式”工具栏中,设置“添加框架目标”,选择链接目标为“导航菜单”页面。

Axure实战06:创建一个AppleSymbol图标库网站

我们在浏览器中预览下效果。

Axure实战06:创建一个AppleSymbol图标库网站

基础样式-内容

框架搭好了以后,我们来完成了单个页面的图标展示。

Axure实战06:创建一个AppleSymbol图标库网站

首先,我们需要在Apple官网上下载好所有需要的图标,目前Symbol3图标有3000+,这里其实我们用不了那么多,就挑一些自己常用的就行。

我们点击“页面”工具栏,打开“导航菜单”页面,设置页面的背景颜色为#F0F2F5。

Axure实战06:创建一个AppleSymbol图标库网站

拖入一个“矩形1”组件,命名为”name"。

设置大小为150*150,填充颜色为白色#FFFFFF,线段为0,圆角为8,边距(设置里面文字放的位置)设置为左右10,上100,下2。

双击输入文字为“图标名称”,设置字体颜色为#666666,字号为14。

Axure实战06:创建一个AppleSymbol图标库网站

再拖入一个“图片”组件,命名为“image”。

设置大小为60*60,把图片组件放在矩形组件的中间靠上的位置,上边距为20,左右间距一样就行就行。

Axure实战06:创建一个AppleSymbol图标库网站

这样,我们就完成了一个图标卡片的制作。

接下来,我们可以使用“中继器”组件,相当于List列表+ForEach循环,用来遍历一堆的图标卡片。

拖入一个“中继器”组件,把上面的name矩形和image图片剪切,双击“中继器”组件进入到它的内页,把“中继器”组件里面的矩形删掉,再把name矩形和image图片粘贴进去。

在“中继器”的内页,一定要保证组件的位置为(0,0)。

Axure实战06:创建一个AppleSymbol图标库网站

Apipost 私有化火热进行中

评论