背景:
因为公司内普遍输出的原型质量参差不齐,导致在实际沟通工作中效率较低。
目标:
一套高质高效的Axure元件库
前期准备:
调研了一些常见的元件库,开源的ant与element都缺失交互效果,仅拥有图片样式,核心效率问题并未彻底解决,华为的元件库拥有交互但视觉效果较为平庸;另有一部分采用了堆元件的模式,但实际使用中工作效率并不高。总结了市面上元件库的不足,在后期着手去做的时候针对性的避免以上这些问题,并基于公司设计系统的视觉样式从0开始设计。
难点:
Axure并不是常用软件,对于Axure的使用并不熟练,因此也买了专业书籍进行学习以及查找相关资料,例如三级导航的设计难度较高,当时也琢磨了很久,但最终还是实现了;
元件库完成之后是否好用,产品中常用的元件要进行筛选,分组是否合理,这背后也是一个复杂的过程。
过程:
前后共更新了三版
第一版完成了初步设计,基础视觉样式与设计系统中的组件库样式统一;
第二版添加了交互效果,并根据反馈提升了用户体验,例如删除了很多不必要的元件以及元件分组问题,体验问题看似较小但实际使用体验相差很大,优化之后效率也提升不少;
第三版添加了智能图表(图表使用了Axhub的),可根据中继器调整数据来改变图表本身样式,自定义程度更大,在2.0版本的基础上也进一步优化,使用体验更佳。
设计细节:
整套元件库基于1366*768的分辨率进行设计,在元件库中所有元件均符合在该分辨率下的尺寸。
例如卡片在1366的分辨率下,提前设定二等分,三等分等预设
自适应的按钮
三级导航
最终产出:
目前元件库3.0的迭代已经完毕,通过实际调研提升效率至少50%以上,使产品经理的原型图产出不论速度还是效果上,都有了质的改变,从而也提升了团队沟通效率。
另附上两张Axure元件库设计的页面截图
设计反思:
1. 常用页面没有完成,可能会在下一版本更新,这也是目前设计系统中所缺少的模块。
2. 从立项到后续迭代,主要由我一人负责,由于本职工作并不是产品经理,因此很少使用库进行完整产品页面设计,有机会将会尝试亲自完成一套。
3. 增加了横向能力,在一定程度上能够更容易产品经理所想表述的内容,在项目沟通中有所加分