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

发布时间:2023-11-30 10:00

在本章中,你将学会如何使用Axure中继器和内联框架创建一个AppleSymbol图标库网站。
项目背景
在我们开发iOS应用程序过程,常常会用到图标按钮,Apple提供了一整套官网的图标,开发人员可以直接使用Apple设计的官网图标快速开发App。
但遗憾的是,目前这套AppleSymbol图标库目前只有dmg下载安装的版本,这就对于非苹果的开发者、MacBook低储存用户非常不友好。
于是乎,我们看看能不能做个在线版本的AppleSymbol图标库,收录常用的图标供用户直接使用。
说干就干。
\"Axure实战06:创建一个AppleSymbol图标库网站_第1张图片\"
项目创建
首先,创建一个新项目,命名为AppleSymbol。
\"Axure实战06:创建一个AppleSymbol图标库网站_第2张图片\"
基础样式-侧边导航栏
我们先分析下AppleSymbol图标库网站的结构,它由一个侧边导航栏和内容展示区组成,当我们点击侧边导航栏的菜单时,右侧内容区域将展示不同的内容。
在这里我们使用到的组件是:动态面板、内联框架、中继器,分别实现侧边导航栏、内容区域、内容展示。
首先是侧边导航栏,我们拖入一个动态面板放在左侧,在样式工具栏中,设置它的位置为0,0,尺寸是256*955,并填充动态面板的背景颜色为#001529。
\"Axure实战06:创建一个AppleSymbol图标库网站_第3张图片\"
为了让侧边导航栏放在左边,我们需要固定侧边导航栏的动态面板。
我们在样式工具栏中设置“固定到浏览器”,设置水平固定为“左侧”,垂直固定为“顶部”。
\"Axure实战06:创建一个AppleSymbol图标库网站_第4张图片\"
接下来完成里面的内容。
我们双击动态面板进入动态面板内部,拖入一个矩形1组件,在样式工具栏中,修改它的位置为(13,20),尺寸为230*52,填充颜色为透明色,线段宽度为0;
双击矩形1,输入文字“导航菜单”,字体大小为14号字,字体颜色为#FFFFFF。
\"Axure实战06:创建一个AppleSymbol图标库网站_第5张图片\"
下面,我们添加交互样式。
在交互工具栏中,我们点击“新建交互”,选择“单击时”,选择“设置选中”,选中目标“当前”,值为“真”。
在下面“交互样式”一栏中,设置“鼠标悬停时”的交互为勾选“填充颜色”,设置颜色为#1890FF。
同理,设置“元件选中的样式”,勾选“填充颜色”,设置颜色为#1890FF。
\"Axure实战06:创建一个AppleSymbol图标库网站_第6张图片\"
我们复制6个“导航菜单”的矩形,修改里面的文字为“常用功能”、“增删改查”、“上下左右”、“收藏点赞”、“消息提醒”、“硬件设备”。
矩形居中对齐,间距为10,可自行调节矩形间的间距。
\"Axure实战06:创建一个AppleSymbol图标库网站_第7张图片\"
交互动作-侧边导航栏
为了实现单选的效果,我们需要选中一个侧边导航栏菜单时,选中单个。
这里引用“选项组”的概念,选项组中,交互唯一。
我们为每一个菜单都设置选中的时候加背景颜色,只需要把所有的导航菜单结合在一个选项组中,即可实现单选互斥选中的效果。
选中全部导航菜单,右键选择“选项组”。
\"Axure实战06:创建一个AppleSymbol图标库网站_第8张图片\"
给选项组命名为“导航菜单”。
这样我们就实现了侧边导航栏的单选效果。
\"Axure实战06:创建一个AppleSymbol图标库网站_第9张图片\"
我们点击预览看看效果。
\"Axure实战06:创建一个AppleSymbol图标库网站_第10张图片\"
基础样式-内容区域
下面,我们设计下内容区域。
这里我们用到的组件叫做“内联框架”,它可以链接展示外部地址网站,也可以链接内部创建好的页面。
我们这里有7个菜单,我们在“页面”工具栏中先创建7个页面。
\"Axure实战06:创建一个AppleSymbol图标库网站_第11张图片\"
然后还是在AppleSymbol页面中,拖入一个“内联框架”组件,把它放在侧边导航栏右边,尺寸设置为1350*955。
顺便设置它的样式,勾选“隐藏边框”,设置滚动模式为“从不滚动”。

\"Axure实战06:创建一个AppleSymbol图标库网站_第12张图片\"

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号