axure组件_Axure 组件重写之神奇的文本框和下拉框

现有的系统组件不够好用，加之我们能利用axure基本功能来实现更好用的组件，因此，就有了重写系列教程。

1. 什么是重写？

为了更好发挥产品原型在系统设计阶段指引、展示等需求，通过种种方式对原生组件进行优化/改造/替换，在保证原有功能基础上，实现更多可自定义的功能。

2. 为什么要进行重写？

(1)原生组件较低的可编辑性

对于大部分新系统来说，设计初期建立一套风格美观、交互完整的原型稿无论是对于系统展示，或是对后期系统迭代来说都有着一定分量的意义，axure提供的大部分满足基础功能的系统组件，往往只有较少的可配置项目，这显然无法满足我们的需求。比如说“下拉列表”，axure提供的可编辑样式，寥寥的只有长宽及位置xy。

(2)原生组件较高的视觉差异性

同样的一个原生组件，在不同浏览器中的形状、样式可能不尽相同(这与不同浏览器对基础组件的渲染策略有关)，比如再拿“下拉列表”说，同样的样式(虽然基本没样式可调…)在chrome和firefox中，视觉差异竟然如此巨大。

总而言之，就是现有的系统组件不够好用，加之我们能利用axure基本功能来实现更好用的组件，因此，就有了重写系列教程。

第一部分我们主要将从最基础的“文本框”开始讲起，之后我们再慢慢地扩展到“下拉列表”“树状菜单”等高级应用。

一、文本框

先来看看原生文本框的效果：

功能分析

(1)基础功能

文字增删改查。

(2)视觉功能

获得焦点时边框高亮，失去焦点时边框还原。

重写理由

axure给我们可编辑的属性中，只有文字、及文本框填充颜色，至于边框颜色及高亮时的边框颜色则无法修改，然而有幸的是axure很友好地提供了“隐藏边框”这一功能，某种程度上极大方便我们对文本框的重写，先来看看我们的目标效果：

重写原理

实现步骤

二、下拉列表

我们来看看原生下拉列表的效果

功能分析

(1)基础功能

下拉选中文字并将文字显示到下拉父菜单中。

(2)视觉功能

折叠时点击展开，展开时点击折叠，及过程中的其他样式效果。

重写理由

前面也提到了，axure给我们编辑的空间只有基础数据，至于样式和交互，还须由我们自己来定义~话不多说，先看我们的效果图：

由于本教程需要用到传说中的“动态面板”，因此顺道将动态面板放在前面讲一讲。

问：什么是动态面板？

答：动态面板就是PPT！

一个动态面板里面有多个状态，每个状态就可以看成是一张PPT页面，完成状态编辑后，我们通过动作绑定来触发PPT的播放，即动态面板状态的切换，我们来看下面这个演示：

是的，动态面板就是这么神奇，也是这么简单！话不多说，我们进入教程环节。

完成！

是不是觉得对“子菜单”的批量交互配置有些繁琐，也有些不好维护？没关系，下一节，我们引入axure的大杀器“中继器”，让下拉列表的重写秒变简单！尽请期待~