Axure元件库设计总结

背景：

因为公司内普遍输出的原型质量参差不齐，导致在实际沟通工作中效率较低。

---

目标：

一套高质高效的Axure元件库

---

前期准备：

调研了一些常见的元件库，开源的ant与element都缺失交互效果，仅拥有图片样式，核心效率问题并未彻底解决，华为的元件库拥有交互但视觉效果较为平庸；另有一部分采用了堆元件的模式，但实际使用中工作效率并不高。总结了市面上元件库的不足，在后期着手去做的时候针对性的避免以上这些问题，并基于公司设计系统的视觉样式从0开始设计。

---

难点：

Axure并不是常用软件，对于Axure的使用并不熟练，因此也买了专业书籍进行学习以及查找相关资料，例如三级导航的设计难度较高，当时也琢磨了很久，但最终还是实现了；

元件库完成之后是否好用，产品中常用的元件要进行筛选，分组是否合理，这背后也是一个复杂的过程。

---

过程：

前后共更新了三版

第一版完成了初步设计，基础视觉样式与设计系统中的组件库样式统一；

第二版添加了交互效果，并根据反馈提升了用户体验，例如删除了很多不必要的元件以及元件分组问题，体验问题看似较小但实际使用体验相差很大，优化之后效率也提升不少；

第三版添加了智能图表（图表使用了Axhub的），可根据中继器调整数据来改变图表本身样式，自定义程度更大，在2.0版本的基础上也进一步优化，使用体验更佳。

---

设计细节：

整套元件库基于1366*768的分辨率进行设计，在元件库中所有元件均符合在该分辨率下的尺寸。

例如卡片在1366的分辨率下，提前设定二等分，三等分等预设

自适应的按钮

三级导航

---

最终产出：

目前元件库3.0的迭代已经完毕，通过实际调研提升效率至少50%以上，使产品经理的原型图产出不论速度还是效果上，都有了质的改变，从而也提升了团队沟通效率。

另附上两张Axure元件库设计的页面截图

设计反思：

1. 常用页面没有完成，可能会在下一版本更新，这也是目前设计系统中所缺少的模块。

2. 从立项到后续迭代，主要由我一人负责，由于本职工作并不是产品经理，因此很少使用库进行完整产品页面设计，有机会将会尝试亲自完成一套。

3. 增加了横向能力，在一定程度上能够更容易产品经理所想表述的内容，在项目沟通中有所加分