![a3c4a2fa7420c7f686359a4b1f95c9fc.png](https://i-blog.csdnimg.cn/blog_migrate/7d3214705891a4339df1218e2455d11f.jpeg)
现有的系统组件不够好用,加之我们能利用axure基本功能来实现更好用的组件,因此,就有了重写系列教程。
1. 什么是重写?
为了更好发挥产品原型在系统设计阶段指引、展示等需求,通过种种方式对原生组件进行优化/改造/替换,在保证原有功能基础上,实现更多可自定义的功能。
2. 为什么要进行重写?
(1)原生组件较低的可编辑性
对于大部分新系统来说,设计初期建立一套风格美观、交互完整的原型稿无论是对于系统展示,或是对后期系统迭代来说都有着一定分量的意义,axure提供的大部分满足基础功能的系统组件,往往只有较少的可配置项目,这显然无法满足我们的需求。比如说“下拉列表”,axure提供的可编辑样式,寥寥的只有长宽及位置xy。
(2)原生组件较高的视觉差异性
同样的一个原生组件,在不同浏览器中的形状、样式可能不尽相同(这与不同浏览器对基础组件的渲染策略有关),比如再拿“下拉列表”说,同样的样式(虽然基本没样式可调…)在chrome和firefox中,视觉差异竟然如此巨大。
![b52fb0a93e8237ad8b17a48956e46ff6.png](https://i-blog.csdnimg.cn/blog_migrate/1cf30ea5b95078b6a7064267a1abc685.jpeg)
总而言之,就是现有的系统组件不够好用,加之我们能利用axure基本功能来实现更好用的组件,因此,就有了重写系列教程。
第一部分我们主要将从最基础的“文本框”开始讲起,之后我们再慢慢地扩展到“下拉列表”“树状菜单”等高级应用。
一、文本框
先来看看原生文本框的效果:
![c88fbe00e68b2f2a8384a059abc6be0a.gif](https://i-blog.csdnimg.cn/blog_migrate/f414606ea0821e3bb51d7037622a0f6c.gif)
功能分析
(1)基础功能
文字增删改查。
(2)视觉功能
获得焦点时边框高亮,失去焦点时边框还原。
重写理由
axure给我们可编辑的属性中,只有文字、及文本框填充颜色,至于边框颜色及高亮时的边框颜色则无法修改,然而有幸的是axure很友好地提供了“隐藏边框”这一功能,某种程度上极大方便我们对文本框的重写,先来看看我们的目标效果:
![b02793016c0d3279a36b34f02651f013.gif](https://i-blog.csdnimg.cn/blog_migrate/726d022349764462555b54bb12672c86.gif)
重写原理
![ad6794b645f59eb041a42ea9bf724810.png](https://i-blog.csdnimg.cn/blog_migrate/9fc20767ca92d1d9d5312353c3f88ea6.jpeg)
实现步骤
![9d819918f1aec4435fca45232be9c0c6.png](https://i-blog.csdnimg.cn/blog_migrate/7fb4748073ce8d7289bc42d4dd5861a2.jpeg)
![bf45af3565c17759e0a487c9a77d7d4d.png](https://i-blog.csdnimg.cn/blog_migrate/93b9bccb93318969b79e076221e253b5.jpeg)
二、下拉列表
我们来看看原生下拉列表的效果
![81271750ee478036f3d2cf9909b45f5a.gif](https://i-blog.csdnimg.cn/blog_migrate/98115292b868218846ede3cc2bfcc743.gif)
功能分析
(1)基础功能
下拉选中文字并将文字显示到下拉父菜单中。
(2)视觉功能
折叠时点击展开,展开时点击折叠,及过程中的其他样式效果。
重写理由
前面也提到了,axure给我们编辑的空间只有基础数据,至于样式和交互,还须由我们自己来定义~话不多说,先看我们的效果图:
![6eec8d907535fa8ff3ae525067f7fc97.gif](https://i-blog.csdnimg.cn/blog_migrate/6b7d53da13ecaaec138ecd9f9e0e661d.gif)
由于本教程需要用到传说中的“动态面板”,因此顺道将动态面板放在前面讲一讲。
问:什么是动态面板?
答:动态面板就是PPT!
一个动态面板里面有多个状态,每个状态就可以看成是一张PPT页面,完成状态编辑后,我们通过动作绑定来触发PPT的播放,即动态面板状态的切换,我们来看下面这个演示:
![696397304e5721ce3bd545308ebd8b24.gif](https://i-blog.csdnimg.cn/blog_migrate/b4d79430641dc98aedc907ea5f537d05.gif)
是的,动态面板就是这么神奇,也是这么简单!话不多说,我们进入教程环节。
![93dbfcf8530776e53ec8c829213409f4.png](https://i-blog.csdnimg.cn/blog_migrate/aafa116a59bbabe6a5283e1ccf0b2f06.jpeg)
![8f0d257fc5476bbf1cd441ef9847836e.png](https://i-blog.csdnimg.cn/blog_migrate/cea079e6e1cee971fe374e449341c0cf.jpeg)
完成!
是不是觉得对“子菜单”的批量交互配置有些繁琐,也有些不好维护?没关系,下一节,我们引入axure的大杀器“中继器”,让下拉列表的重写秒变简单!尽请期待~