如何从零构建UI组件及设计规范(一):介绍篇

《如何从零构建组件及设计规范》共分为5个系列,分别为《一:介绍篇》、《二:设计原则》、《三:全局样式》、《四:基础组件》、《五:通用模版》

一、做什么(What)

  • 公司设计规范:我们对过去设计的这些产品进行思考和沉淀,抽象并形成了一些稳定且复用性高的内容,打磨出一套适合于公司产品设计模式及规范。
  • 全面的设计语言:设计规范从设计原则到页面布局,从交互到文案,从基本组件到模版页面…. 提供了产品设计上的解决方法。

在多数情况下可以指导设计、产品和开发可以快速找到相关的指导内容,有效地帮助完善工作并且提高效率。

二、为什么要做(Why)

分子是由原子组成的。分子分成原子,原子也可以重新组合成新的分子。一个界面是由独立的基本组件搭建而成,基本组件由基本样式、组件特性构成,基于不同的基本样式和特性再重组构成新的界面。

  • 保证平台一致性:加强产品与开发的沟通,解决多平台后期多而复杂页面带来的不一致性。用户用到一个新功能或者切换到另一个新平台,不需要再花额外的学习时间,所以保证一致性可以让用户形成习惯性路经思考。
  • 提升产品使用效率:组件化设计是通过对页面中元素的拆解、归纳和重组,并基于可被复用的目的,形成规范化的组件。再通过组合来构建整个设计方案,从而提升设计效能。所以组件化为产品带来一致的设计语言和工作效率上的提升,另一方面确保使用的客户或用户在很短的时间内使用平台。
  • 提升产品细节体验:当前的互联网产品发展到下半场,所有的产品在能用的基础上希望能够有良好的使用体验。美观的产品能够提升体验和激发愉悦用户的重要手段,这要求我们在产品设计时需要思考产品的细节美观等。

产品经理,产品经理网站

国外的一项数据研究:在保证数量和质量的前提下,运用组件化的设计推动模式,原本200人的团队,可以缩减为100人,能够为公司节省大量的人力成本。

组件化能让公司以更快的速度和更低的成本开发产品,在前期也能对产品的想法快速验证。

1)公司维度
通过组件化推动的产品设计与迭代,可以使团队工作增效,降低成本。产品或者设计可以在很短的时间内出十几个页面,前端开发人员也可以通过查看prd文档,直接调取组件代码完成需求;以此来提高开发效率加快产品的开发进度。

2)产品维度

  • 从设计方案上:对于一些适用组件化的产品形态,我们可以运用组件化思维将其「化整为零」。对需求有更规范的统筹,建立一个可复用的组件结构,以保证交互和视觉的一致性。
  • 从工作流程上:不同的产品、设计及不同的开发,相同角色无交集。缺乏沟通会导致大量重复性工作,又或因为大量沟通带来的资源浪费,因此会增加项目的开发周期和管理难度。

3)用户维度

帮助到客户和用户体验到优秀的产品,对产品的设计不仅仅停留在是能用,而是在能够用的基础上。让产品的细节更加优秀,体验更加智能、流畅,让使用者愿意使用产品以帮助到他们的工作。

三、怎么做(How)

1. 传统的生产页面模式

传统的页面生产流程是瀑布式的,从业务需求到产品设计,再到开发是一串的工作流程。

这样会导致重复性业务页面设计制作、反复低效率的沟通、纠结的还原度修复等。通过组件化设计我们可以将大量的页面进行整合设计。

产品经理,产品经理网站

2. 我们的做法

设计规范是建立一套基于业务的为基础的组件库,对于组件库里已有的组件,在产品设计时可直接调取组合并构建新的页面。

新增的组件则经过常规设计流程后,归纳沉淀并有产品组审核通过后入库,以提升后续组件扩展能力,助力产品快速迭代发展。每个组件模块基于复用为目的,通过标准的规范组合方式来构建整个设计方案,从而提升设计效能。

产品经理,产品经理网站

3. 组件化设计的关键点

基础组件:从需求出发,结合Element框架,拆解页面所需的基础组件。

模版页面:通用的组件的布局体系及替换规则。设计模式是设计过程中问题解决的核心方法,也是构建整个平台或框架所要遵循的基础和标准。

产品经理,产品经理网站

 

本文作者 @徐银高 。

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部