首页

设计的“整理术” —组件化设计思维沉淀

纯纯

『 写在之前 』


最近在阅读《佐藤可士和的超整理术》,书里讲述的是作者通过对空间、信息和思考的整理,来解决复杂问题,让工作变得高效。生活和工作离不开“整理”,好的设计也要从“整理”开始,组件化设计思维,也可以看做一种“整理术”。本篇文章将与大家探讨如何运用组件化设计思维去“整理”项目,并发挥更高的价值。

文章分为两个部分:

1. 组件化设计思维

2. 滴滴表单优化项目的沉淀总结:组件化思维的推动和执行



『 组件化设计思维 』


1. 什么是组件化设计思维

我们知道“分子是由原子组成的,分子分成原子,原子也可以重新组合成新的分子”。一个界面是由独立的分子组件搭建而成,分子组件由原子元件构成,这些原子可通过不同的组合方式,组成新分子组件,继而重组构成新的界面。

组件化设计思维是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,从而提升设计效能。


2. 滴滴运用组件化带来的收益

随着滴滴业务的飞速增长,组件化为滴滴带来了一致的设计语言和工作效率上的提升,因此滴滴在组件化道路上的决心愈发坚定。选择以组件化展开设计实践,带来的变化与收益主要体现在公司、项目和个人三个维度:


2.1 公司维度

一款产品的更新迭代是依附于产品、设计、开发、测试等多个团队协作进行的,随着产品功能的完善,背后支撑的团队也在不断壮大。以运用组件化推动的产品设计与迭代,可以使团队增效,降低成本。设计师可以只用几个小时设计出几十个页面,开发人员也可以通过查看prd文档,直接调取组件代码完成需求,使得我们的生产力产生质的飞跃。在保证数量和质量的前提下,原本200人的团队,可以缩减为100人,为公司节省了人力成本。组件化能让公司以更快的速度和更低的成本开发产品,也能对产品想法快速验证。


2.2 项目维度

● 从设计方案上

对于一些适用组件化的产品形态,我们可以运用组件化思维将其“化整为零”,对需求有更规范的统筹,理清框架,建立一个可复用的组件结构并持续优化,以保证交互和视觉的一致性。


● 从工作流程上

传统的设计流程大多是同属性多角色并行的,从需求到设计,从设计到前端的工作流程会涉及到不同的设计师及不同的前端工程师。相同角色间无交集、缺乏沟通会导致大量重复性工作,增加项目周期和管理难度。


而将组件化思维贯穿其中的设计流程,带来了工作流程上的创新。我们建立了一套设计组件库来提高协同效率,大量需求均通过需求评估来判断是否需要新增或复用组件,对于组件库里已有的组件,设计师可直接调取,组合构建出新页面。对于新增组件则经过常规设计流程后,归纳沉淀并由组件委员会审核通过后方可入库,以提升后续组件扩展能力,助力产品快速更新迭代。 


2.3 个人维度

利用组件化,设计师可以从低价值的机械式工作中解放出来,参与到设计创新中去,发挥更高的设计价值。

另外,在工作中运用组件化设计思维有助于设计师更完整的思考,培养全局思维的能力;也有助于我们专注于细节,提供个性化的创新方法,产出适应不同场景的最优方案。


下面用一款优秀案例来解析组件化设计思维


『 滴滴表单优化项目沉淀 』


1. 项目背景


1.1 为什么要优化表单

滴滴出行5.0版本从2016年11月上线至今,随着用户体验痛点不断增加,业务的需求逐渐多元化,我们希望对表单进行一次统一的整合梳理和升级。为未来更多业务发展提供快速支撑和拓展,同时也注重用户体验的提升。

滴滴出行作为出行服务类应用,精准的发单表达是触达用户进入服务流程的关键。每个业务在确认呼叫的节点上拥有独立的入口并满足不同的需求(如下图),确认呼叫页表单(以下简称表单)作为最重要的多功能、多信息载体,需要高效、精准的表达和流畅的体验。


1.2 跨业务共建

滴滴出行是涵盖出租车、专车、快车等多项业务在内的一站式出行平台,我们希望在保证全平台统一化的基础上,与业务寻求一种相辅相成的关系,并且在保证规范化输出的同时,展现出业务特色。在需求阶段,确定各业务接口人,收集需求,沟通评审促成各方达成一致目标。在方案执行阶段,平台设计师产出方案,与各业务线沟通并优化,1~2次循环后方案评审到最终确立。开发和测试阶段,各方验收通过后发版上线,上线后平台沉淀设计规范,完善组件库,跟踪反馈,推动体验优化形成工作流程闭环。 



2. 确立设计目标


项目初始,平台设计师需从业务诉求及用户诉求两方面着手,在收集到两方需求后,对其进行归类整理并定义优先级,从而确立设计目标,制定出具体的设计策略,提炼交互框架,再深入到细节的设计。 


在表单项目中,基于满足业务未来多元化及提升用户体验的需求,输出目标为:

1)兼容各业务需求,建立具有可承载多种业务共性及特性的组件能力框架;

2)主要信息及次要信息的合理化分布;

3)传递真实感及专业感,拉近用户体验共鸣。



3. 以组件化设计思维展开设计探索


有了明确的目标后,根据目标制定相应的方向策略,也便于我们在后续的设计工作中寻找发力点。和业务沟通后,明确整体方案的设计基调聚焦在“扩展性”“统一性”“逻辑性”“个性”四个方向上:

扩展性——组件化视觉表达,能够随着滴滴多场景、多业务需求的变化进行延展和扩充;

统一性——各业务信息归类统一、简化;

逻辑性——信息层级清晰,增强主焦点认知,次要信息弱化;

个性——设计个性化表达



3.1 以组件化思维进行框架探索

在方案构思阶段,我们是以组件化设计的思维方式先去全面的思考并分析问题,再进行拆解分类,最后归纳重组。


● 全面多维度分析问题

框架层:针对快、专、豪的确认呼叫表单的关键场景进行框架分析


因为业务不同,场景不同,确认呼叫这个流程触点在各业务中是具有共性和差异性的。我们重新梳理了确认呼叫页表单各业务的功能点(如下图),可见各业务表单虽有一致模块,但信息内容十分繁杂,层级区分无规律可循;操作区位置不统一,样式各异;框架的兼容性及扩展性不高。


表现层:在视觉表现层面上,也暴露了很多问题,如:不同业务的车型选择分别有各自的展示方式;价格区选中项的感知较弱且各业务的样式不统一;价格小数点展示位数不一致等等。


新增业务特性诉求:新的框架还需满足业务特性的诉求(如下图)。


● 拆解并简化

如何让新的框架既能满足越来越多的业务类型,保证体验的统一,又能体现出业务特性,平衡取舍促进产品更新迭代呢?

我们回归到本质,从以下四个方面对框架进行重新构思:

删除——去掉无用的功能点

组织——根据类别将这些功能点分解后重新划分成组

隐藏——突出主焦点的认知并隐藏次要信息

抽取——抽取共性,对比差异性

综上,即对框架进行简化,保证框架可灵活适配具有业务共性与特性的组件。 



● 重组

简化后的框架几乎可以覆盖所有必要功能点,有很强的适应能力和扩充能力,可以轻松应对未来多元化的出行服务及场景。


在共性中寻找差异性:全局操作、车型与价格、发单按钮是业务共性部分,除车型/价格区和发单按钮外,其余均可显示或隐藏,可根据业务特点灵活配置。 

在差异中寻找共性:车型与价格区所包含的服务选择与附属操作是业务差异部分,快车需要在一个卡片中呈现三个车型比价、需要有附属操作,专豪则需要强调车型图片的露出和服务配置。我们要找一个平衡去把这些差异点串联起来,确保用户拥有同样的感受,不仅是交互方式、动效流转,也需要关注同一层级信息的视觉表达。



3.2从框架层到表现层——从整体到细节的设计

● 视觉尝试探索

在交互框架明确后,便进入视觉设计阶段。平台设计师基于统一的的框架进行视觉风格探索,兼顾扩展性和逻辑性,同时不能忽视业务特性,从而迸发更加出彩的设计想法。设计师是界面的规划师,也是品质的把控者,大到页面布局、组件的组合方式、颜色定义,小到按钮在空间布局上的占比是否合理都要面面俱到。在这个过程中,不断打磨微调,进一步细化并且有针对性的进行动效设计,以呈现更完美的方案。


 组件化设计的细节打磨

在方案确定的同时,将模块再次拆分成组件,组件包含不同类型、不同状态的基本元件,进行深入打磨,从而实现与设计目标的高度吻合。


● 根据组件构建页面

表单运用了组件化设计方法,建立了可承载业务共性与特性的框架。通过设计评审敲定最终方案后,提炼规范,设定组件标准,提取组合用法以覆盖各业务场景。由于业务线设计师更了解业务的需求根源及业务流程,所以由其枚举场景并输出业务遍历图。

平台与业务共建的过程,可以更好的调动业务线设计师的积极性和参与度,也能从业务的角度验证组件的扩展能力;“共建”也能更快速的将组件规范推动落地,实现组件的复用、协调与升级,是快速搭建页面、促进产品快速迭代的重要因素。



4. 项目反思

表单在 2017年10月19日 随乘客端 V5.1.16 发布,我们通过数据分析来验证表单优化的合理性。(以ios为例,分析上线一周后10月25日-10月31日的发单率和发单时长数据) 



4.1 体验量化

- 新表单较老表单,发单量增加,发单率提升14.83%;

- 新表单较老表单的平均发单时间降低了2%

数据分析表明,表单的设计优化是成功的,是设计师运用组件化思维在自驱项目中的每一个环节发挥高价值的体现。


4.2 快速落地

“共建”和“组件化”是促成表单项目在短时间内达成落地目标的关键因素,平台与业务共建的工作方法也扩展运用到了更多项目中,是平台与业务之间迅速确立方案、搭建设计规范、推动体验优化和迭代的最高效路径。


4.3 设计研发一体化

不仅如此,表单优化项目取得成功,离不开“组件化设计思维”在设计全流程上的应用。我们坚信,滴滴将在组件化道路上继续前行,然而这条路任重而道远。就现状而言,我们的两个组件库——设计库和开发库仍需要分别维护,且设计和开发在沟通时成本较高。这使得我们需要创建一个能够同时面向设计师和开发人员的共享组件库,实现设计和研发一体化,让设计师面向开发,让开发贴近设计,减少设计及开发人员的额外工作量。我们设想,在设计和研发一体化的生态系统下,不论设计师或开发人员,通过搜索名称就可以从共享组件库中调取相应的组件进行设计,这些组件都有一对一的设计和开发数据,这会让工作变得十分高效。

在滴滴的未来,设计研发一体化是可以将代码实时渲染到设计软件中审阅设计的生态系统,且并不遥远。


作者:滴滴出行CDS       来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


组件化设计思维

周周

组件化设计思维,能够提升设计团队的生产力,让设计师专注于设计上的创意,同时让设计师完成更多产品需求和提升团队的沟通效率
 


 

 

写在前面 


组件化设计的流程,经过实际工作的锻炼和思考,具体可以拆分为 3 个方面:

 

1. 明确组件化设计的内容。

2. 场景设计走查。

3. 组件化设计验证效果。

 


 


一. 组件化设计的案例(界面展示篇)


  

  


 


 


 小结:

组件化设计,需要设计师要有一个整体性的设计思维,要有很强的设计能力和良好的沟通协作能力,同时设计师要深入理解业务,这样组件化设计才能很好的在团队内落地推行。

组件化设计的优点有很多,能够提升设计师的输出效率,让设计师更专注于设计上的创意思考,提升沟通效率。

二. 原子设计方法论

 

 

 

原子设计方法论是由国外设计师 Brad Frost 提出的,他从化学元素周期表中得到启发,发现原子结合在一起,可以形成分子,然后形成组织。

 

Brad 把原子设计的方法论应用到界面设计中,用心观察会发现,界面是由一些基本的元素组成,颜色、文字、图标等都是一个个原子。

 

原子设计方法论,是由原子、分子、组织、模版和页面共同协作,可以帮助我们创造出一套符合公司产品的设计系统。

 

 


 

 

原子设计方法论是为了帮助我们去建立设计系统,目前逐渐被国内外的一些大公司,应用于创建统一的公司产品设计系统。

 

接下来,我们以金融产品为例 ,对原子设计方法论进行拆解,深入思考原子、分子、组件、模块和页面在界面设计中的定义是什么,以及对应的元素是什么,元素之间又是如何组合的。

 

 

原子

 

用户界面设计中的原子,是构成界面的基本元素。是一个单独的元素,如图标、标题、色彩等以及原子之间组合形成的新的元素组合。

 


 

 

我们开展一个项目时,为了保证各个页面保持统一的设计风格,我们会制定一套视觉规范,定义的内容包括:字体、颜色、栅格和图标,这些就是界面中最基础的原子。在关键的设计元素上,保证各个设计师达成一致,这样就能很大程度的保证不同页面的设计风格统一,并在这个基础上去探索更有价值和创意的设计方案。

 

 

 

 

分子

 

两个原子即可组成一个分子,以按钮为例:包含了文字、色块、栅格。

文字传达含义,颜色定义了按钮的特性,栅格为按钮定义了一个尺寸和规范。

 

 


 

 

把单独的元素做一个简单的组合,是我们做界面设计的一种方法,组合的方式简单且可复用性很好,作为开发者可以根据规则进行编写代码,提升产品的迭代效率和产品的一致性。

 

 

界面设计中的表单为例,表单是一个非常常见的设计元素,一个表单分子由分割线、文案、Icon和分割线等原子组成。原子组合之后,可以得到是一个可以应用在功能模块的组合。

 


 

 

 

组织

 

我们把分子和原子做组合,就可以创建复杂的、可扩展性的模块,然后变成一个组织。

 

 

组件在提升设计师设计效率方面有着很重要的意义,设计师可以把界面中常用的组件模块进行分类整理,比如:图片、卡片、输入框等,可以解决设计师日常的设计需求。

 

 

以金融产品为例,基本分为 3 类 :内容、表单、卡片化的设计。

每个卡片化的内容设计尽量保持统一性,这样方便负责不同模块内容的设计师复用同一个组件,就可以完成不同页面的设计,提升项目的设计效率。

 


 

 

 

模板

 

模版一般应用在设计系统的交互阶段,保证原型阶段的多方案的展示;模版内容,后面可以优化,这样可以降低设计的成本。模版的价值可以让设计师,更专注于页面的结构化设计排版和对页面布局的思考。

 


那模版的原理是什么呢?

就是产品的原型图,就是组织和分子的组合,会先形成一个完整的页面框架,作为一个初步的设计方案,作为团队项目的前期沟通所用。

 


以教育和金融界面为例,如下图:

 


 

 

 


 

界面

 

界面设计是把占位符内容替换成产品设计需要的文案,在模板的组合上进行完善,会形成界面的设计方案。

 


界面设计是模板的具体的展示设计,是真实内容的设计方案。

 


通过图标和文字的组合,清晰的展示用户所需要的场景,加上内容,就会变成一套完整的界面设计方案。

 


如下图所示:

 


 

 

 

以金融产品的场景设计为例,有了实际的内容后,我们可以发现通过组合组件,就能很好的呈现界面内容。

 


如下图所示:

 


 

 


小结:

原子设计方法论为界面元素提供了应用规则和组织整理,原子设计方法论在建立设计系统、团队协作、产品迭代优化等方面,都有很好的价值和意义。

 

 

 

 

三. 组件化设计的流程 ?

 


 

 

设计规范和 Ui kit 是我们管理一个或多个App统一性和设计效率的工具,同时探索如何更有效的提升设计效率。像 滴滴等Ant Design 设计系统,他们的产品体验非常好,用户使用产品时能够有效的满足其需求,良好的用户体验背后都有着一套好的产品设计系统在运作。

 


如下图,国外的金融产品运用组件规范化后的界面设计展示 :

 


 

 

系统性的组件化设计思维的好处是 :

 

1. 产品设计迭代优化时,版本和版本之间的差异性就可以得到很好的解决。

2. 界面设计之间的设计风格和设计样式就会统一。

3. 界面设计的效率和质量会稳定输出。

 


在我们所经常使用的 App 产品中,如 苹果、Airbnb、自如、Ant Design 等,用户体验都非常好,用户使用产品时能够快速的解决需求,优质的用户体验背后都有着一套强大的专业设计系统所帮助。

 

 

 

 

思考:我们为什么需要组件化设计 ?

 


一. 统一产品设计体验

 

1. 以京东金融为例,在京东金融最近更新的版本中,我们看到财富界面和生活界面,同样的模块可以复用,对于复用性高的内容,应该提炼为通用组件,提高设计效率。

 


 

 

2. 如上图所示,对于会员专区或者热门活动是金融类产品中最为常见的产品形式,在京东金融的首页出现,布局往往是左右结构,或者上下结构;因为这类产品具有较强的引导属性,所以会把右侧的运营的插画设计相对突出,以吸引用户的注意力。会员专区的卡片化设计,具有较强的复用性,可以列为通用组件,这样就可以保证两个产品界面的卡片化的设计风格和样式上的一致性原则。

 

 

 

二. 提高团队协作效率

 

1. 面对相同的设计需求时,可直接调用相关组件,节省重复性的设计工作,提升沟通效率。

2. 借助组件化设计,可以快速开展工作,达到复用的价值。

3. 通过设计语言可以完成一个界面设计,在下面案例中,主要的元素由文字、栅格线、Icon 等组成界面结构,确定好排版布局和图标的设计风格后,完成产品的界面设计。

 


 

 

三. 降低开发成本

1. 在实际工作中,如果每次制作一个新页面都设计不同的组件,开发就要写新代码,增加开发时间成本。

2. 如果我们常用的模块作成组件库,开发遇到相同的组件时,可直接调用组件,复用相关代码,这样可以降低开发成本。


 


  

组件化设计流程,

经过实际工作的锻炼和思考,具体可以拆分为 3 个方面:


一. 明确组件化设计的内容

我们需要整体思考,明确可以复用的的内容、组件,以热销理财场景为例,金融产品都会需要用户进行选择理财产品,可定义为理财产品的卡片化设计组件,适合组件化设计的模块。产品已有组件的优化,设计师要具体分析,分析组件体验现状,发现问题然后针对性解决问题。


使用产品的场景设计、交互体验、设计风格三方面都要思考,推出更好的产品设计的解决方案。以京东金融的财富和首页的界面设计为例,应用的都是卡片化设计的理财模块。在开发新项目的时候,同样可以调用同一个理财产品的模块化组件,不仅能保证产品上体验的一致性,也能降低团队的设计成本。如下图所示:

 

 

二. 场景设计走查

 1. 全面体验走查线上的移动端产品设计,对用户的交互行为链路有一个清晰的理解,思考当前线上的产品体验。

2. 线上产品功能的迭代一般业务方都会有一个周期性安排,因此在走查时要及时和业务方沟通,在这个基础上再进行组件化的方案设计。

设计师使用金融产品,在设计的时候要考虑到每一个环节。

我们先来看下京东金融的案例,这两个闪屏运营弹窗除了场景不一样以外,其他元素都是高度统一的,组件化设计的优势在于,只需要改变组件的部分元素就能适配各种场景。如下图所示:

 


 

三. 组件化设计验证效果(如下图)

 


 

 

组件化的设计方案完成对接开发上线后,我们需要从两个方面来验证组件优化后的效果:

1. 组件化设计是否可以满足各业务方的需求和场景化的设计。

2. 通过定性数据追踪功能是否能促进业务的关键的设计指标的提升,这些数据可以是转化率等数据指标,用户的反馈也是一个很好的辅助验证方法。

 

四 如何建立组件化设计系统 ?

 


 

 

每个团队的体量和业务诉求不一样,个性化的组件化设计系统包含有设计原则、设计语言和组件库,这是一个争议的概念。

建立设计系统的原因:

1. 建立设计系统,可以方便团队协作,保证体验上的一致性。

2. 设计过程中,发现每个业务的形态,以产品的不同场景为出发点,使用一套设计系统,会提升用户体验。

3. 帮助产品的迭代和优化,同时提升产品和用户的体验好感度。

 

 


 1 设计原则(设计理念、品牌指导)


设计的本质是解决问题,制定设计原则时要建立在这个设计中心思想上。

 


苹果的设计系统:

 

把审美作为第一要素存在于设计原则中。

1. 创意审美的重要性。 

2. 隐喻的价值。 

3. 易用性原则。 

4. 及时的反馈。

  

安卓的设计系统: 

1. 跨平台的设计适配原则。 

2. 材料的设计价值思考。 

3. 图形、强调、大胆的设计语言。

4. 动效的服务设计价值。

 

 

 

2 设计语言(色彩、字体、栅格、图标)

色彩的视觉语言规范,我们需要定义产品的基础色板和中性色板,基本色板包含了产品的主题色和辅助色,生成每个颜色的亮色和暗色的衍生色。中性色板包含黑白灰,这类颜色在界面设计中使用,能让页面内容具有良好的层次关系,提升阅读的效率和用户体验。

 

字体规范是界面设计中的构成之一,用户通过文字来理解和达成目标,完整的字体系统能有效的提高用户的体验和理解效率。字体的规范定义需要从三个方面出发:字重、灰度色、字阶。


界面设计的排版布局一般使用的 8 栅格法,它能适配不同尺寸的屏幕分辨率,界面元素大小和间距都是8 倍数为基准。

图标设计,隐喻,保持图标之间一致的设计风格和表现形式。系统图标为例子:以1@x图为例子,常见的尺寸有: 16px、24px、32px、48px等。

 


 

 

 

 

3 阿里系团队,制作的 Kitchen 组件化设计系统 很好 :(如下图)

 

 

 


 

 


 


 



 


 


 


 


 


 

 

 

 

五.  Banner 组件化设计、B 端组件化设计等平面组件化设计的案例如下:

 

 

 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

总结 :

佐藤写过一本书[佐藤可士和的超整理术],里面讲述了他自己是如何通过整理自己的思路、对话、工作室、随身物品等设计来让工作变得并且最终对自我更加深入的了解 。


生活和工作离不开“整理术”,优秀的设计应该要从“ 整理和总结 ”开始,比如:组件化的设计思维,可以看做是一种 “设计的整理术” 。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档