重要的不是决定，而是决定背后的动机。——我们今天为什么要谈论这个？
“很久很久以前，有一种东西叫做“书”。你还记得它们吗？这些用死树的纸浆做成的玩意，又重又厚。书里面的东西，被称做“页” 。当你翻书的时候，这些书页还会时不时割到你的手指。
真是讨厌的玩意！我现在很庆幸，手边不再有书和像刀片一样锋利的纸页了。”——摘自《原子设计》，作者：Brad Frost
“页面”的概念，从7万年前的“认知革命”（Cognitive Revolution）开始到4000多年前的粘土书再到最初互联网科技形成之时，便被刻板的印到了大众的内心里。如今，这样以“页面”为单位度量网站建设的概念已经不是主流了，但我们依然在协作中经常会听到这样的话，比如：“这次需求一共有26个页面，你大概什么时候可以交付？”“我们怎么可能把这个有2000多个页面的系统进行体验一致性的升级呢？”“A需求有10个页面，B需求有15个页面，为什么你的预估工时A要比B多？”……
最初，我们拿页面概念来统一不同协作角色中的语言是为了便于沟通。但互联网发展了30多年，我们愈发意识到要建立适配多端系统的设计方案，需要摒弃传统思维，建立属于我们设计系统的“智人”时刻到了。
在过去几年里，搭建设计组件系统已经成为设计圈乃至互联网行业内的热门话题。许多企业都在持续搭建拥有自己基因属性的设计组件系统，不但可以提升用户体验，还可以减少设计负担，提升设计效率， 同时在行业内树立起品牌知名度，传达设计价值观。
找到新视角新愿景——建立可以生长、包容、联接的Ke.Design设计系统
图示1 新视角新愿景
在开始介绍什么是Ke.Design之前，我们先来聊聊贝壳的行业属性和它面临的几个问题：
1.新居住的地产服务行业带来的机遇与挑战并行，业务复杂并发频繁：B端产品⻚页⾯量级⾮常⼤且功能复杂；
2.多条业务线并⾏设计，在我们团队内部，设计师与PM的⽐例是1:20，每位设计师身兼多条业务线，每条业务线需要设计师单独维护⼀种页⾯风格；
3.传统产研模式需要经历5个节点，PM-UE-UI-FE/RD-QA，⼯作流程是瀑布流式的。部分项⽬在时间紧张的情况下会出现分批交付并⾏开发的情况、如此多的角⾊共同参与⼀个项⽬下，合作⽅如果没有紧密咬合、⾜够的沟通，将会导致⼤量重复性的⼯作，增加项⽬周期、管理难度；
这样的⼯作模式引发的副作⽤：“体验⼀致性差”、“设计效率低”、“还原度不可控”的问题，变成⼀个急待解决的课题。
这些问题和公司高速发展的速度使我时常感到挫败并自问“我是一个糟糕的打工人吗？”。
我在自问的同时也在思考，比如：
- 如果我们想要通过搭建UI一致性方案来解决上述问题，那么它需要具备的诀窍有哪些？
- 正确的解题思路是什么？
- 团队或公司需要的是怎么样的设计体系？
- 我们的设计体系与行业内其他团队的设计体系有什么共性与不同？
- 如果我们想要通过搭建UI一致性方案来解决上述问题，那么它需要具备的内核有哪些？
- 验证它的方式是什么，能否在投入其中的同时实现创造自我价值？
想要使设计体系能够伴随我们走得更长，不是去画出它的皮囊，而是去找到属于贝壳设计体系的内核，它需要具备以下品质：基因属性、轻巧灵活、拥抱变化、包容万物。于是我们找到了自己方向——建立可以自然呼吸生长的Ke.Design设计语言。
Ke.Design设计关键词，生长、包容、联接
图示2 设计语言关键词
生长
乔布斯提到：
“Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.” — Steve Jobs
“有些人认为设计就是看起来长什么样。但是如果你深入挖掘就会发现设计更关乎如何运作。”
在传统的设计语言中，设计团队通过搭建一套自己的设计规范，来解决设计产出的一致性，提升设计的效率。但是随着产品量级增大，组织内多线程合作，用户角色与行为越来越复杂，不太灵活的设计规范就有了局限性，设计组件往往变成了产品的天花板；一套设计组件一旦无人维护，就会变成一件老旧的摆设被人束之高阁。
所以适应不断变化的产品与环境，设计语言的覆盖率与灵活性也变成了考核一套设计语言是否好用的有效评判标准。
Ke.Design的设计语言中“生长”作为一个很重要的关键词，生长代表：遵循本能，在一定规则下无限延伸，营造贴近自然的产品体验，保证其足够的灵活、可拓展，充满活力。通过变换样式、多维度定制组件交互形式，生长出符合各类业务场景的设计形态，覆盖更广泛的用户群体。我们提供了一套标准化的模板与组件，并支持使用者在设计规则指导下扎根于业务，生长出更符合业务的组件。
生长不只代表了组件能在业务中有生命力的自我迭代，更代表了这套设计语言是能够影响并让业务线和谐有序运转，助力整个产品的生态搭建。
我们不妨将设计语言的搭建想象成建造一座大厦，大厦的外观是浅显易见的；除了我们所能见的大厦本身；大厦的选址、大厦的地基、大厦的空间规划都是相对隐性但至关重要的，设计语言的搭建和盖一座稳固等大厦一样，设计地基至关重要，而让“大厦”稳固则要把控以下三个关键点：锁定目标、穷举元素、建立规则。
图示3 组件拆解关键点
1.锁定目标
在设计语言搭建之时，首先明确你所建立的资产是要解决什么问题？每个模版/组件间是否有唯一性？模版内部容器与内容是否有一个清晰的组合逻辑？
我们对现有房源、客源、签约、店东、CA等10+典型业务线，进行了200+的页面汇总，抽离出业务线中关键角色的需求特征；以复用率为抽离标准以页面类型复杂程度为标尺抽离出了6大典型场景：工作台、列表类、表单类、详情类、结果类、异常类，同步对不同的类型做不同复杂程度的模版收拢，我们的目标是通过组件覆盖80%的基础场景，确保产品基础体验的统一。
图示4 场景收拢抽离
2.穷举元素
在完成类型的递进拆分之后，我们按照不同的角色要求、页面复杂程度针对每个区块做了模块的穷举，最小颗粒的去拆解每个可能出现的组件。设计组件不是把UI元素统一收集起来，然后集中复用这么简单。组件搭建过程中的拆解逻辑要遵循唯一、多元。目标就是尽可能让组件保持唯一性，同时具备多维度的状态来构成完备的组件形态。
【唯一】：每一个组件都需要有它的不可替代性：组件库并不是数量越多越好；在拆解组件的过程中首先要保证拆解到最小颗粒度元子以降低组件中的耦合度，同时考虑每个元子/组件是否代表唯一的功能与使用场景。每个元子/组件的存在都应该是反复斟酌后的结果。
【多元】：每一个组件都是由多元状态的组成的，要考虑组件的响应状态：如空状态、极端情况；行为状态：如组件与用户行为的交互及数据状态。在组件设计时尽可能的考虑未来可能出现的业务形态，把组件接口做灵活以尽可能适应多场景。
3.建立规则
我们常常把组件层的设计比作“容器”，而容器一定有“容”的部分，也有“器”的部分。就像水晶杯，“容”的部分在于对酒体色彩、质感、甚至是香气的衬托和突显，“器”的部分在于杯体自身工艺的精巧和标准化。
我们倡导的是一种标准化下的自由，简单且灵活；在确定页面边界、元素穷举之后同步建立容器与内容组合约束规则，组件间的组合逻辑。只有在模板与模板之间建立明确的边界、模板与内容之间建立明确的层级关系与组合标准才能保证组件替换拼装的灵活度与标准化程度。除了组件之间的组合规则我们还从视觉、模式、布局、内容策略等多个维度进行规则制定来保证产品内的一致性。
以上通过锁定目标、穷举元素、建立规则三个关键词简单阐述了自生长的设计语言搭建过程，设计语言未来会是一个不断变化成长的过程，我们力求通过探索边界、建立规则创造一个外在美且统一、内在生机且有趣的产品生态。
图示5 建立标准下的规范体系
包容
身为人类，我们不可能脱离想象所建构出的秩序……想象构建的秩序塑造了我们的欲望。
—摘自《人类简史》，作者：Yuval Noah Harari
作为设计语言的建设本身也是对企业级产品秩序之美的一种塑造，秩序美体现之一在我们对与原子、分子、有机体、模版、页面的基础规范遵循，还体现在我们的对于设计边界性不断包容拓展上，我们以关注主流⽤户为前提⾃下⽽上的设计过程，⼒求提升设计对特殊⽤户群体的适⽤性。
包容性设计是“一种不需适应或特别设计，而使主流产品和服务能为尽可能多的用户所使用的设计方法和过程。”
包容性设计在指导Ke.Design的搭建过程中，其实是融合了2种思维的共性特征：
【通用】：考虑平均用户：基于用户群体/场景的多样，前瞻性思考提供一种普遍适用的解决方案；
【无障碍】：考虑极端用户：充分认识用户群体的多样性，针对每个问题提供不同的解决方案。
Ke.Design包容性设计原则的2个维度：
1.包容用户
从正常人优先到“无障碍”优先，针对多样性人群及场景设计。无障碍优先不等于为残疾人设计，所有人在某些时候都是残疾人。
在无障碍设计领域中，业界现有的权威设计指南是W3C的正式推荐标准《Web内容无障碍指南》（WCAG 2.1）。这份指南涵盖了一系列能使更多残障人士更容易访问Web内容的指导标准，分为A、AA、AAA三个等级，无障碍对于体验的优化并非是一味的提高某项参数，无脑的将可见的变化铺在明面。而是经过权衡之后的合理取舍。
无障碍设计思考方式，代表着把残障人士遇到的问题作为最高优先级问题，当我们用无障碍优先的思路去做产品，也许我们就会发现一些大家都会遇到但是未被解决的问题，发现一些从未考虑过的潜在使用场景，给自己的产品增加竞争优势。
在组件搭建过程中不得不考虑的是多端多系统多场景多环境的复杂性，由于我们使用者的特殊性，我们在设计过程中会考虑到XP系统的交互⾏为，显示限制（如圆⻆、阴影）；显示器分辨率差导致的显⾊问题，我们在组件的设计过程中实际上是估计把组件做“丑”，摒弃设计追求的细腻变化，拉⼤元素间的⾊彩反差，外置关键元素。如输⼊框，我们会避免将输⼊辅助信息放⼊输⼊框内，同时加深提示输⼊的辅助信息，保证关键信息的准确显示。在模版的基础宽度上也考虑到作业电脑的⼩屏占有率偏⾼，以1200宽800⾼为基准进⾏向上适配，保证90%的电脑避免出现⻚页⾯横滑的情况。在框架的交互⾏为上也会基于环境与安全性能的考虑做场景化设计，如经纪⼈群体在店内注重⾃⼰的房客源隐私，店内作业时⼜经常会被打断由此我们针对这种流动场景，做了防⽌信息外露⽽设计的锁屏功能。
当我们谈无障碍对于底层组件的加持时候，我们更多谈的是对于细节调整的苛求。无障碍对于组件的视觉及交互的影响，是隐秘的是悄无声息的。
图示6 分端多系统多设备适配
2.包容业务
满足多产品线接入诉求-承载自营产品体系、加盟产品体系下的业务需求。
产品的信息架构、导航框架和⻚页⾯布局需要满⾜业务的扩展需求，并且能够针对不同权限的使⽤者进⾏⻚⾯配置，保证业务模块的灵活展现。根据使⽤者权限及场景，导航的菜单及⻚⾯内的内容模块需⽀持灵活配置。在某些功能和内容不可见的情况下，产品的形态不应发⽣重⼤改变。这对组件的灵活性提出了更⾼的要求。
在组件的包容性上除了特殊场景和满足多产品快速接入的标准下，还要关注⼀些特殊业务。
如财务/CA系统中经常会出现录⼊信息的表单页⾯，针对⼤量数据录⼊的情况，我们沉淀出分布录⼊的交互模式。同步考虑录⼊信息超长时候的展示⽅式，极端情况下标题名称会超过15个字；15字标题会和2字标题出现在同⼀个⻚⾯，就需要有⼀种输⼊承载⽅式能兼容两种极端情况。
图示7 元素灵活运用包容业务场景
基于包容性设计原则让组件能够满⾜各个产品线与各业务线的需求，除了通过组件改变原有⼯作流程解放⼈⼒之外；组件能够尽可能多的覆盖更多需求才能让组件推⾏下去，好⽤才会让⼤家更积极的参与进来。
联接
Ke.Design设计语言的初衷并不是希望做一套简单的代码化组件，而是希望通过融合智能技术，联手工具，构建高效的工作方式，相互协同的设计模式让多角色的互动更加紧密。
基于长期积累的实战经验，共同打造稳定、高效的服务平台，提供从基础元件的管理，到上层应用开发全流程的的支撑，对业务发展高效力赋能。通过Ke.Design的设计语言衍生出更多高效的合作模式，让更多的角色参与进来。为多角色提供标准化的能力。同步制定标准化的合作流程SOP让使用者清晰明确的了解流程规范。建立组件中台，保证组件迭代的正常流转与质量审核，发生沟通问题时统一不同方向的接口人来保证问题有人解决、高速流转。
通过Ke.Design改变传统的合作方式，连接更多的使用者，实现更加高效的协同。在设计规范和基础组件的基础上，继续向上向下构建，提炼出典型模板/业务组件/配套设计资源。拉平从PM-UX-FE间的语言。致力实现“从需求设计”到“开发上线”的端到端模式，100%代码组件调用+0设计资源介入=90分平均体验水平的工作模式。
图示8 服务蓝图
服务设计下的设计语言
想必给大家介绍了以上标准化的组件能力之后，大家可能会有一个疑问：当我们提供如此标准化的能力之后，设计师的价值是？Ke.Design的初衷是解放设计师的双手，去创造更多的价值。过度的依赖工具只会打造平庸的设计。我们希望能将设计师从需求中解放出来，将大量的时间和精力用作洞察理解业务场景，更好的挖掘角色和行为特征，针对性的进行设计探索。众所周知贝壳所做的行业是一个典型的服务型产业，通过优质的服务连接交易中的关键节点。同理Ke.Design的目标并不是打造一个简单的协作工具，提升整个产品的体验下限。而是在做服务领域下设计语言的搭建与升级。通过把握房产交易过程、房产信息交换链条中的关键节点提供更有贝壳属性、更符合贝壳产业链条中使用者的设计服务。贝壳的服务链条长、涉及角色多样、服务涉及线上线下等等，也就要求我们把握复杂设计下的关键节点，结合不同人群的差异性与共性做产业互联网下的特色服务设计组件。
以B端特色组件设计为例、B端使用者中一个很大的群体就是经纪人，这个群体的特征在于：强管理、强激励、能力方差大、多场景作业等特征。围绕这些特征我们从时间、空间、感官三个关键词系统的梳理了我们所能提供的设计能力。
【感官点】：引入“微笑”的概念，更统一的设计符号贯穿组件设计，在首页建立对话感设计与用户建立情感连接；
【空间点】：将平面转化为立体-将复杂的信息数据可视化的呈现；从室内作业延展到室外作业-考虑到移动场景下的作业需求，提供语音录入、日程看板等组件；
【时间点】：建立时间线，在时间线上提供初见体验的新手引导、等待点中的告知提示；挫折点前中后的容错机制、安抚设计、帮助中心；完成点上放大峰终体验打造成长体系等。
通过时空感三个设计方向让使用者在不同作业环境、不同认知水平、不同能力下都能轻松作业。
Ke.Design设计语言平台
至此Ke.Design设计系统已经初见雏形，我们致力于搭建设计解决方案与知识共享平台，将无形的经验资产有形化，后续设计平台将会跟大家见面，平台包含了：
图示9 Ke.Design设计平台
设计语言
生长、包容、联接的设计原则。产品原则、色彩规范、图形规范……帮助更多人了解我们的设计理念与产品理念，并遵循这个原则下保证设计组件的迭代升级。
设计&产品工具
产品、设计直接可用的工具/插件，涉及PC/APP两端包含UI组件库/UE交互模式库的 Axure&Sketch Library 文件，方便直接拖拽修改输出设计稿，以及可以本地保存的设计指南-帮助新手快速了解产品的组件使用说明。
知识库
项目中沉淀下来的设计思考与模式库分享，让你更加了解房产行业下的服务设计实践。
可视化的代码平台
用户可在平台浏览可交互的代码化组件。
结语
对于我们来说，Ke.Design在打造垂直领域的设计语言上才刚刚迈出了第一步。未来还有很长的路要走，还需要沉淀出越来越多的最佳实践来反哺和推动设计语言的进一步升级。
一切才刚刚开始，未来的样子充满了未知与不确定。
但就如亚伯拉罕·林肯所说“预测未来的最好方法就是创造它”。
我们一直在路上，也期待同行有你。
