QAX交互设计规范和组件设计

项目概述

平台中有20多个应用,在没有统一的交互和视觉规范时,设计师和开发人员会根据自己以往的经验进行设计和开发,导致不同应用的相同场景,使用的组件从样式到交互方式都不一致,这就造成以下几个问题:


keywords

主要职责

作为大禹平台设计规范第一负责人,我的主要负责是
● 规范的制定、落地和优化; 为了保证规范的质量,我会参加每一个应用的需求评审会议,review产品经理的原型产出,保证规范的使用正确性,引领产品经理使用规范;
● 每周召开规范宣讲会,灌宣规范使用流程和准则,号召进行交互原型自检;
● 收集设计规范相关需求,改进或迭代规范;

解决方案


设计依据

根据ETCG设计理念,我们将资产类型划分为通用组件(General Component)、业务组件(Business Component)、区块(Card)、模板(Template)四种;
何为ETCG原则?
ETCG 是 Ant Design 基础的设计模式,提供了从全局样式到组件再到模板的设计体系建设思路,E为范例(Example),T为模板(Template),C为区块(或Component/Card)、G为全局样式(GlobalStyle) 或交互规则( Guide);

设计成果

部分基础组件展示



部分业务组件展示


部分规范展示

经分析在平台中列表的整体占比最大,所以对重复度高的内容进行规范化设计,再由对应的用户根据规范分别输出对应的资源包。(Axure、sketch、和源代码)右图为Axure组件库设计资源。

收益

本次规范的建立共覆盖平台中14个应用,输出可供产品经理、设计师以及开发工程师直接使用的相关物料,大大提升了整个产品生产流程的质量和效率;


收益:

规范输出物可满足80%中台页面搭建需求;
实现从设计到开发的即拖即用;
沉淀出表格页、表单页详情页的应用场景设计;
衍生出相应的Axure和sketch组件库和开发制品包;

Contact

期待您的联系!

18601139493(微信同号)

中国·北京