axure 组件_技巧分享 | Axure后台组件制作的全过程

点击上方蓝字,+关注行设视觉

a67736fb31e6e2634a9817a67825a217.gif

8a021e410a644327ebf39648e5e38a4f.png

黑马家族成员原创发布于行设视觉,转载请注明出处。

作者 | 时光若刻

http://www.woshipm.com/rp/2527010.html

大家好,前一段时间我刚刚分享了一篇《打造高品质Axure组件库就是这么简单》,意在分享给大家一个完整的打造axure组件的思维路径。本文着重于整体制作的技巧思路分享,希望大家通过本文的阅读能够学到对自己有用的知识。

7fd0d9de4001fd7574a0da9e3e213337.png

最终效果浏览

https://uedart.com/demo/templatesWebKit2/index.html

一、组件构建思路

1.1 确定模块

确定制作大模块类别,这边我将WebKit后台组件分为了以下9大模块:

e74a37d6848138225604ae3e80c58f15.png

1.2 细化各个模块内容

根据1.1定义的9大模块,对每个模块进行模块细分,这个结构定义就将作为后续我们制作导航的依据。

e09c1ef4362d7441a28f48dde5fbe53c.png

1.3 按流程执行制作

按照之前前端组件打造的流程依次进行以下流程的实施,接下去我将会着重对“框架制作”和“规范制定”的执行做深入剖析,为大家打开组件制作的神秘面纱。

8b6a1855e804f6a7d4bfa9e3c1dd6812.png

二、组件框架制作

如何使用Axure做自适应的框架适配不同的显示器屏幕,分为以下5个步骤给大家讲解如何快速只做一个框架层。

39f7e473d789cff5ee5a6ef8b0ee6ecf.png

2.1 框架界面布局

2.2.1 Axure 树形页面框架

按照1.2细化后的模块内容进行Axure整体页面的树形结构整理,用来指导后续的制作以及为下面制作框架页面的跳转提供对应的页面。

9abd67cae05325c149baba404571d810.png

2.2.2 展示框架界面布局

定义好框架界面布局指导后面的内容制作。

78c54fd712bd841a22a7e5e195ebd498.png

框架布局结果展示:

3cf50fe305bb282b7147fd02beb65b84.png

内容区页面布局结果展示:

ec46160655f45c4486d6b10c1eaf7a73.png

2.2 顶部导航母版制作

我们来讨论一下关于顶部导航的制作方式。

几个关键点:

  • 多页面统一

  • 导航自适应

  • 切换菜单

针对这几个关键点我们分别采取的方法是:

2.2.1 多页面统一

采用母版进行顶部导航的制作,这边我采用的是母版套动态面板的组合形式以达到导航栏的自适应长度变化。母版的好处是多页面使用时,如果需要改动元素,只需要改动母版即可,其他页面会统一进行变化,这一点和sketch软件的组件功能有相似之处。

2.2.2 导航自适应

采用动态面板的自适应100%对导航的背景层做自适应拉伸,这样就可以保持导航的满屏显示。

uedart logo固定在左侧,切换菜单动态面板估计在右侧。

ff410f50d63a464edf60e7ef008335ca.png

2.2.3 切换菜单

制作选项组,实现此5个菜单的切换选中效果,只有一个触发选中,并设置好所有子菜单的点击事件:点击触发选中和点击跳转页面。

然后选择所有子菜单一起设置对应的悬停与选中效果,这边我采用的变化选项为:字体颜色、填充颜色、不透明度。

3e31b79b514f942dff5740400297a043.png

2.3 左侧折叠导航制作

我们来讨论一下关于侧边导航的制作方式。

几个关键点:

  • 内容滚动

  • 折叠菜单

2.3.1 内容滚动

内容垂直滚动这样效果还是容易实现的,我们左侧的折叠导航采用动态面板的形式来制作,控制固定的高度,当动态面板里的内容超过固定高度即可实现滚动效果。

23ad0e43417064f9b7cfa214c0c37621.png

2.3.2 折叠菜单

折叠菜单的制作稍微复杂一点,但当我们将其拆解开来,你会发现其实一样,制作起来也是非常的so easy。

  • 折叠菜单的两种状态:展开、收起

  • 切换点击内容跳转事件

(1)折叠菜单状态的切换

这边我们仍然采用的是动态面板的制作形式(会发现动态面板在Axure制作中是非常好用的),动态面板我们设置两种状态的切换:一种是折叠菜单展开的形体,一种是折叠菜单收起的形体。

细节处理:两个动态面板直接留出1px的距离可以解决掉相关折叠动作操作后动态菜单移位问题。

c1a460dfb5964b6f5691aa4111ffdb18.png

(2)切换点击跳转

设置相关子菜单的选项组,这个在上面一步我们已经进行了相关设置,并设置了第一个子菜单的选中,复制做第二个模块的菜单时要讲其他的选中状态取消,侧边菜单选项组有且只能默认一个选中,如果预览选中效果出不来,可能的原因就是设置了多个默认选中。

设置每个子菜单的点击效果,这边因为内容区我们还没有制作,我们可以等待内容区搭建完成后进行此步的设置。

9777dd6ec65052d8ac5528c02ba9e73e.png

2.4 内容区搭建

内容区我们做的非常简单,采用了一个内联框架来做后续内容页面的加载。

内部的页面主要分为:标题栏、分割线、留白、主页面区。

标题栏、分割线的制作依然使用的是动态面板的制作思路,勾选100%宽度选项,即可实现适配不同网页宽度。后续页面按照制作好的标准页面模板进行复制制作。

0d4b0fb84127abee8c12ad8a4798550b.png

2.5 页面结构完善

以上4步我们已经将组件框架的大部分内容完成了,到达这一环节千万不要掉以轻心,我们要整体检查一次我们的模拟结果,我们会发现还有两处细节没有达成:

  1. 载入页面后各导航的选中状态处理

  2. 侧边导航已经内联框架的自适应

第1条的完善相对简单一些,置于页面后,设置页面载入选项,进行相关选中与内联内容区加载设置即可。

第2条的完善,我们将采用条件语句来进行判断不同情况下的适配参数调整,我们一开始的布局页面宽度是1440px,这里我们就采用浏览页面加载的宽度与1440px的大小关系来进行设置,这样可以适配大多数的笔记本与台式机的浏览。

5203b253e53d03f59fc624773f4415e4.png

三、规范制作

3.1 颜色规范制作

在之前的一篇文章《不只是“设计”,产品思维赋予设计新动力!》我有写到过关于情绪板提取色彩进行产品色彩定调的过程。

情绪板的提过程:关键词提取、关键词拓展、图库收集、颜色提取、颜色衍变。

d6139dc3a9326287f2d90941025dbe4f.png

UEDART的色彩主调也是通过这样的方式来提取实现并根据具体的模块加以排版的调整,形成了UEDART全套的色彩规划模本。

07107d4ba6eb13f1d54f30ceedf92452.png

3.2 字体规范制作

字体规范的制作,这个相对来说简单一些,UI设计中都会有一套完整的字体使用规范,我们也可以借用UI设计的规范来进行复用,将我们的字体也进行规范化的调整。

bc3033608db4452a4de2aac0b0bdbb4e.png

3.3 其他元素规范制作

其他相关元素的规范制作:尺寸规范、分割线规范、标注规范。

这里的规范主要是根据自己的所需自行定制自己想要的元素,并加以规范说明。

bf182d88206f3f4e9c479f8175d3558e.png

3.4 按钮规范制作

按钮的制作,将常用的按钮归类制作:

      a.按用途:焦点按钮、普通按钮、幽灵按钮、禁用按钮、功能按钮、危险按钮;

       b.按功能:操作按钮、带图标功能按钮、下拉展开功能按钮。

并制作相关悬停与选中效果,方便后面的复用。

bfb693020abbb82287c10f36f21c3779.png

3.5 图标规范制作

图标分为几大类:常用图标、面性图标、线性图标、品牌图标、Ant图标。

这里为了方便后续使用,我采用了svg格式的图标类型进行制作,图标大小统一48px的大小进行排布。

c70d562f722689f5a3a211d9cfa8daa1.png

为了后续图标库能够更好的应用,特此做了图标对应的Axure的rplib格式组件。

45eb9234723198274cafc79a87360a79.png

3.6 常用小部件制作

进行常用小部件的制作,输入框、选择器、选择控件、数据验证、滑块选择等,将此类小部件效果固化后,你会发现再去做其他页面的构建得心应手。

fac06ff3fe38edcb4599f19917f87440.png

3.7 其他页面的搭建制作

按照一开始定下的页面结构,加上定好的规范进行其他页面的逐步制作,这个过程是相对耗时的,我们可以给自己定一个计划,一天完成多少个页面(低保真),后面再来逐步调整对应的高保真效果,这样做起来会快速很多

结语

希望大家通过本文的学习,都能够快速搭建并且制作出自己的组件规范,活学活用,将知识真正的掌握起来。笔者也会继续努力前行,为大家分享更多更好的知识点。

相关阅读

《打造高品质Axure组件库,就是这么简单!》

《不只是“设计”,产品思维赋予设计新动力!》

感谢你的阅读支持 · 欢迎留言互动

-------------------------------------------

a67736fb31e6e2634a9817a67825a217.gif

多一点行动  ·  多一分设想

cc9a3610a757ce1b925be8986464d619.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/297532.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有没有测试人心里的软件,心理测评,认识自己的有效工具:(二)你做的可能是假的心理测试...

上一篇文章主要介绍了心理测评的基础知识,今天在上一篇的基础上,介绍下网上一些随处可见的心理测评,是如何的错误,以及怎么“迷惑”大家的?网上随便搜的一个阅读量超过10w的"心理"测试:测试他人会…

这相册一出手,哪个长辈搞不定?

1 这相册看着多喜庆看这花多美▼2 不会只有我一个人连最普通的都叠不好吧?▼3 真就史上最惨毕业生连毕业照都不配拥有吗?▼4 看起来经历了很严格的军训▼5 我闺蜜【偷】男票的钱给我买MAC air▼6 在台湾爸比和东北妈妈中间无缝切换▼7 先漱口、后…

医疗大数据:商业保险、移动医疗的崛起,正在形成闭环(二)

以下内容摘自华创证券分析师 吴晓雯、张伟光的《挖掘医疗大数据中的金矿》报告。 接上篇:医疗大数据:商业保险、移动医疗的崛起,正在形成闭环(一) 三、 商业保险、移动医疗等商业力量的崛起,加速医疗大数据…

WriteComponent,ReadComponent

WriteComponent,ReadComponent 代码 varForm1: TForm1; ms: TMemoryStream;implementation{$R *.dfm}procedureTForm1.Button1Click(Sender: TObject);varaBtn: TButton;beginaBtn :TButton.Create(Self); aBtn.Parent :Self; aBtn.Caption :Test; aBtn.Left :10; ms.WriteComp…

jquery 使用方法

jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术…

bread是可数还是不可数_雅思官方语法教程之——这个名词到底可不可数?

名词是否可数,是非常隐形的扣分点。考生很可能意识不到自己犯错了,毕竟这是中文里不存在的语法点。这类语法点更应该重点备考。越练习,越熟悉,犯错扣分的几率也就越低。OK进入主题↓语法解释官方对可数和不可数名词的解释如下&…

PostgreSQL 统计所有数据表各自的总行数

一般来说,可以使用 count(*) 来获取具体某张表的总行数:SELECT count(0) FROM t_user;如果想获得所有表的行数信息,可以使用以下 SQL 语句:SELECTrelname,reltuples FROMpg_classCLS LEFT JOIN pg_namespace N ON ( N.oid CLS.re…

google的api key调用次数是多少_Sprint Boot如何基于Redis发布订阅实现异步消息系统的同步调用?...

前言在很多互联网应用系统中,请求处理异步化是提升系统性能一种常用的手段,而基于消息系统的异步处理由于具备高可靠性、高吞吐量的特点,因而在并发请求量比较高的互联网系统中被广泛应用。与此同时,这种方案也带来了调用链路处理…

加密、解密以及Openssl建立私有CA

一、openssl简介 OpenSSL 是一个强大的安全套接字层密码库,囊括主要的密码算法、常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用。 SSL:secure socket layer 安全套接层协议 可以在internet提供秘密性的传输。…

密西根州立大学计算机qs分数,2020年QS世界大学排名密歇根州立大学排名第144

2020年QS世界大学排名指标1.Academic Reputation 学术声誉(所占比重为40%)这项指标数据来源于QS学术调查。搜集了80,000多位高校领域大牛对教学和科研方面的意见。这也是世界上类似调查中规模最大,覆盖面最广的。2.Employer Reputation 雇主声誉(所占比重为10%)考察…

全球2%高智商天才必测脑力题!却只有1%的人,能在5分钟内全部做对!

▲ 点击查看说起娱乐圈最“变态”的养娃爸爸,妥妥非吴尊莫属!上亿元的学区别墅、几十万学费1年的文莱国际幼儿园、一周7天辅导班、家教、每年1个儿童国际比赛、考证拿奖……1个吴尊绝对抵得上8个海淀妈。前段时间吴尊晒出neinei二年级毕业成绩单&#xf…

IBM软件OEM概览

http://files.cnblogs.com/menghe/IBM%E8%BD%AF%E4%BB%B6OEM%E6%A6%82%E8%A7%88.pdfmenghecn.ibm.com 转载于:https://www.cnblogs.com/menghe/archive/2012/01/26/2329712.html

如何优化 .NET Core 中的 lambda 查询表达式 ?

咨询区 Moutia AYED:我的项目需要构建几个图表,产生图表的 数据源 相对比较复杂,参考如下代码:var resultdb await _dbContext.TimeSheetElements.Where(t > t.UserId userId &&t.Date.Month month && t.Date.Year y…

asp.net中gridview 如果字数太多可以用此方法把字体变短+.....

首先启动一个RowDataBound控件里面在加上一个if ((e.Row.Cells[0].Text).Length > 6) { e.Row.Cells[0].Text (e.Row.Cells[0].Text).Substring(0, 6) "…";//截取文章主题 }//如果是第一列的话用cell【0】 if ((e.Row.Cells[1].Text).Length…

python数据整理_python数据类型整理

Python中常见的数据结构可以统称为容器(container)。序列(如列表和元组)、映射(如字典)以及集合(set)是三类主要的容器。 一、序列(列表、元组和字符串) 序列…

爬取三千条数据需要多久_存储-性能,IOPS,带宽,吞吐量,1TB数据需要多久写完...

让我们先看一下这三个概念:IOPS (Input/Output Per Second) 即每秒的输入输出量(或读写次数),是衡量存储介质性能的主要指标之一。IOPS是指每秒钟系统能处理的读写请求数量。 吞吐量(Throughput )衡量的是存储介质的数据传输速率&…

TortoiseSVN客户端重新设置用户名和密码[转]

在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么以后就不用每次都输入一遍用户名密码了。 不过,如果后来在服务器端修改了用户名…

这就是你们有钱人炫富的新方式吗?

1 真正的1秒可爱喷雾▼2 你们父子俩的脚咋回事啊?▼3 咦?影子动了!▼4 小姐姐,你这样就很过分了!▼5 宝宝发现了一个新玩具▼6 这就是有钱人炫富的新方式吗?▼7 单身久了,看两片茶叶转圈…

最新服务器处理器天梯,服务器CPU性能排行榜天梯图(双路/三路/四路)

排名多路处理器CPU性能分1[四路] Intel Xeon Platinum 8180 2.50GHz441392[双路] Intel Xeon Gold 6154 3.00GHz359483[双路] Intel Xeon Gold 6138 2.00GHz356594[双路] Intel Xeon Gold 6152 2.10GHz353685[双路] Intel Xeon E5-2699 v4 2.20GHz343306[双路] Intel Xeon…

centos 下 mysql 主从库搭建

作者:蘑菇 今天在本本上装了个mysql主从库配置,中间遇到了几个问题,不过经过搜寻资料,已经可以正常工作了。 过程写下来做个记录: 因为上次已经装过LNMP,所以只要再装一个mysql做从库就好了。重新编译mysql安装$ tar …