从0-1，搭建高利用率、扩展性强的交互组件库（一）

░ 组件库的概念和意义

“一个软件通常由非常大规模的团队共同研发完成。当团队人数不断增长时，建立起一致性的难度也呈几何级别地增长。随着时间流逝，不管最初的团队规模多小、输出物多么一致，不同的员工会给产品带来新的解决方案和新的模式，最终体验开始慢慢分化。”

《建立统一的视觉语言》Karri Saarinen，air bnb 设计系统的创立者和设计总监。

关于组件库的概念和意义，qinsman前辈的博文已经写的非常详尽，下面仅简单说一下我个人的理解：

△便于协同

就各组件的设计尽早达成一致，再由基础组件慢慢扩展。减少设计协同过程中不必要的沟通成本和摩擦。

△提高效率

对设计师个人而言，减少逐一绘制组件、或对组件素材进行一一调整的时间，最大化低/中保真原型图绘制过程中的效率。打开脑洞、解放双手，是每一个设计师都期望的状态。

△统一风格

形成团队输出物的统一风格，对外建立起品牌形象，对内有利于增加上下游协作方对于文档专业性的认可。

△降低开发成本

░ 工具的选择，Sketch vs Axure

国内目前最常见的原型工具即sketch和Axure，两者不仅在功能定位上不同，所处平台也不一样。具体的选择往往不是我们设计师说了算，而要看团队习惯以哪一种工具进行协同。如果能够依据具体的需求和场景来选择合适的工具，自然是最好的。下面先对比一下这两种工具的异同：

△工作系统

Sketch的文档是Pages—>Art boards的两级结构，因此不适用于搭建信息架构复杂的文件( 例如整体的web界面文档），对于大型项目而言，往往需要按功能模块分成多个sketch文件来绘制；

Axure的文档是基于一个树形导航结构来进行组织，可以随时调整页面间的逻辑关系，除此之外Axure拥有强大的团队文件功能，可以实现大型文档的协同编辑。

文档结构对比

△组件库搭建

具体到搭建组件库这一任务，会用到Sketch和Axure两个相似但各有特色的功能： Sketch的组件（symbol）/嵌套组件（Nested Symbol）以及Axure的母版。

Sketch的创建Symbol和Axure的新建母版功能都会产生一个母元件，不同之处在于Sketch的Symbol同时还创建了实例（instance）这一状态，我们可以通过overrides功能调整实例的参数以适应页面的不同需求，调整后它仍然保持母元件的骨骼和架构。（详见一个故事理解Sketch组件嵌套（Nested Symbols） ）

通过Axure母版创建的母元件只有一种状态，“牵一发而动全身”。但在Axure中可以通过页面参数的联动来达到调整母版内容的效果。只不过这种方法与sketch的一键切换相比，学习曲线陡峭很多，且函数调试需要一定的时间（随着使用场景调整，函数也要跟着调整），复用性不高。如果你告诉其他的设计师，要对这么长的列表参数进行调整才能达到目的，相信大家都不想去尝试…

例如某原型中，希望页面载入时，导航中的相应按钮处于选中状态，所设置的交互用例

Axure当中，如果也需要编辑大量格式重复但内容不同的模块（如网格、表格、列表），有种元件也能实现和overrides相似的功能——中继器，只不过它独立于母版功能之外。

与overrides一样，中继器实现的也是在相同的元件结构下，对内容参数进行调节的功能，只不过编辑中继器的操作过程更符合工程师思维（新建变量—>录入数据组—>关联变量与数据组）（见下图），而Sketch新建Symbol的过程无疑更符合设计师的思维（画出组件—>由程序识别变量—>我来调节）。

中继器功能简图（笔者自绘）

△小小的总结：

Axure和Sketch是性格迥异的两款工具，Axure更像一个工程软件，有明了的树形导航，可利用SVN进行多人协同，同时适用于windows、mac系统等特点，对于管理长期、复杂、大型的多人协同项目而言，有着毋庸置疑的优势。而Sketch是纯纯的设计软件，学习曲线平缓，一旦有了通用的规范和组件库，其Symbol功能能够大大缩减设计师实现方案的时间，在规模相对较小、周期较短、参与人数有限的项目中，能够极大的提升工作效率。最后一点，由于产品定位的差异，用Sketch画图更容易注意到页面细节和视觉效果，出图往往会更好看；用Axure更容易集中注意力于页面结构与交互逻辑，文档往往会更连贯而清晰。

下文中使用的是Sketch，在axure中也可用相同的逻辑进行搭建，它们适用于不同的场景，对于需要接触不同类型项目的设计师来说，有备无患。

从0-1，搭建高利用率、扩展性强的交互组件库（二）