带你了解DEEPDesign设计系统经验/观点

企业智能事业部的前身是信息平台事业部,在2012年10月份成立,将阿里巴巴集团的信息系统统一起来,逐步取代购买的外部Oracle管理系统,逐步开始去PS(PeopleSoft)。此前,我们的绩效、薪酬、假期等使用的都是PS,随着去PS开始,当时的信息平台基本上要把所有的系统都翻一遍,这件事情直到2017年1月份最后一个应用(iHome)上线后,去PS才画上了句号。这期间,我们自主研发超过10个HR系统,仅薪酬核算的后台系统,就有50几个页面,而当时支持所有去PS项目的设计师只有2个交互、1个视觉,也是基于这个大背景,我们从14年开始就逐步建设面向中后台场景的设计规范。

继HR系统落地后,随着企业管理应用数量爆发式的增长,传统项目流程已经无法满足大量的开发需求,为应对这个问题,我们启用了“组件式开发”的解决思路,从而提高工作效率,并产生更加规范的应用。在这个土壤下为了让设计能够扩大规模,为了提供一种标准来供不同的设计者参考,DEEPDesign第一代设计资产开始成长。

5年的发展历程

2017-2018:完成基础设计资产建设

2018-2019:完善设计系统,完成设计管理闭环

这一年,横向拓展出了业务研发流程的“自交付”体系,比如在表单场景的设计解决方案沉淀就造就宜搭1.0版本的诞生,0代码平台让技术小白可以在线搭建出一个可用的网页;物料库存的增长也直接夯实了低代码搭建平台“乐高”能力的覆盖面;同时“体验+”的衍生让开发链路形成体验质检的闭环,形成了更完整的DEEP体验管理体系。

2019-2020:为业务提供多端一体化的交付标准

我们设计了一套多端响应框架,通过容器层实现不同屏幕尺寸的响应布局及默认样式的自动化转换。然后在基础组件层面联手Fusion对物料进行了多端样式转换的覆盖,接下来针对区块级的场景通过“适应式”方案生产业务组件补齐高频业务场景需求。实现了PC端为主业务场景下在“PC””Pad”“Mobile”3端的页面信息都可以得到体验更好的展示和操作

2020-2021:业务交付变革下的物料体系升级

通过“PC”“Mobile”“Charts”3类基础物料协助业务侧沉淀“组件”“区块”“页面”3类业务能力,所有设计输出在线DEEPDesign主站点,实现多站合一,同时与技术打通,打造【一站式研发平台】对设计产出的物料进行统一“生产”“管理”“消费”。设计物料最终转化为低代码组件,最终向我们的低代码搭建平台及在线设计平台持续输出:

BU内:服务企业智能在线设计及业务研发

集团内:打通D-One平台实现工具普惠

商业方向:服务“宜搭”外部业务场景

企业品牌下的视觉语言

以组织形象演化的视觉语言

颜色

品牌色彩是品牌识别系统中的重要组成部分。根据品牌的特点,品牌文化,指定某一特定的色彩系统,应用于所有的视觉传达设计当中,利用色彩所具有的视觉刺激及心理反应,体现品牌本质特点。

橙色是阿里巴巴的品牌色,是一种温暖、亲和的颜色。而企业智能是为阿里巴巴服务的,同时也依附于阿里巴巴,所以橙色代表了组织温度。阿里巴巴亦是一家科技公司,蓝色代表冷静、商务、未来、科技、安全,它是一种比较理智的颜色,这是工作需要的状态,所以蓝色代表了智慧办公。

品牌色是品牌识别元素重要的一部分,我们可以通过不同场景的设计输入强化品牌意识,在企业智能200+应用体量下,icon是一个强有力的抓手。将橙蓝两色融入到icon设计中,产出一套具有企业办公图标标准,让色彩语言游走与用户界面的字里行间。

图形

我们提取了品牌的视觉锤。企业智能品牌生于阿里巴巴组织&员工,DEEPDesign生于企业智能,通过“橙蓝箭头”这个视觉锤的运用,我们可以更好诠释品牌的内涵。

在为“企业智能事业部”应用打造的物料中,我门抽取了LOGO中中“箭头”“弧度”“三角”的形状。配置在「菜单」「按钮」「加载」「气泡」「选择器」等底层组件中,通过组件的引用的网状关系间接覆盖到了41%的基础组件样式,DEEP图形辨识度初步成形,使设计语言从线下到线上一脉相承。

以员工形象演化的插图物料

企业级产品场景中任务流页面占了90%以上,老司机可以几分钟快速撸出一个表单流程,但剩下的10%辅助用户观感体验的视觉插图工作量却一笔一画用掉了50%的总工时。它的价值远远低于业务逻辑,属于事倍功半的产出物,食之无味,弃之却又不可。

在阿里集团正式员工中设计师占比为2%,比如我们企业智能有13+业务线,187+产品,但设计师仅38人,这38人里能画插图的视觉设计师不到1/5,平均每个人要支持27+产品的图。别说996了,007都是画不完的!而且在阿里人才能力模型中,不会让一个设计师天天在那生产插图。怎么办呢?同样的资源下,只有重要的项目会投入视觉设计,被迫弃掉一些“不重要”的产品,或者花钱由供应商来外包,每年集团在这块的开销也不是一个小数目。

再者,插图是一个非常具有主观意识的艺术形态,「造型方式」「用色习惯」「画风特征」是插图的3个主要表现力。但这3个好东西往往会在协同上出问题,人多了产出一致性反而变得不可控。而企业级产品的用户往往是同一类,品牌化的观感是不可或缺的。

让插图变成普惠的艺术

艺术是独特,商业设计是普惠,普惠的艺术具备相对的通用性,且能拉高基础品质的水位。在200+产品的历史沉淀中,我们发现企业级产品的插图具备较高的同质化内容,它不会像电商大促的品牌KV那样标新立异,也不会像漫画具备细腻的表现细节,更多地是将商业行为朴实地图像化来补充产品UI中对用户的情感化体验。而且我们的业务场景面对的都是阿里员工,插图恰巧描绘的就是员工的日常工作行为。有了这个确定性,我们将团队内的视觉设计师拉到了一个虚拟小组中,定义了一套阿里人形象。从职能的差异性上有“设计师”“程序员”“运营”“产品”...从人物关系的维度上有“员工”“管理者”“供应商”“客户”...

“人物”是绘图中最复杂的变量,但人体结构具备标准的定量,我们将动画中的骨骼运用到静态的2D插图中(选择2D平面的风格是因其生产成本低,且其视觉表现足够朴实,不至于成为UI中的焦点)。设计一个人设即可快速拓展到多种姿态,将骨骼坐标结合技术,还可以在特定骨骼姿态中一键切换人设。

画面有了主角,在配合一些场景物品,就可以快速通过组合素材的方式“拼”出一张插图。在标准化插图素材生产中,我们依然是以中台的方式去解决问题,一来解放业务整体的绘图投入成本,一来让各个视觉设计师统一维护一套标准化物料能让图形资产不断的积累,提升新需求的支持效率,最重要的是让所有阿里员工在使用我们的产品时感知到一个贯穿始终的品牌形象。视觉虚拟小组第一阶段中优先解决设计师层面的协同问题,形成一个企业插画物料的设计标准,并在真实的业务场景中进行落地,同时沉淀该场景特有的图形元素反哺物料库存,以及场景化的方案。

降低获取插图的成本,提升生产插图的效能

达到以上阶段,仅是完成了设计师群体的协同和标准化,同时也是建立了插图生产的SOP,此时我们就可以结合一些技术的产品化,让生产插图这件事突破职能的边界。正版Photoshop6000一个,Sketch99$一年,OS系统还要买苹果电脑,而线上一个站点免费帮你搞定插图设计。在2018年末,我们在阿里内部提出了这套全新的插图生产方式,随之百花齐放有蚂蚁设计的Hitu,Iconfont的插画库,集团客服CCO的虚拟服务形象,AlibabaDesign正在以更简单的方式赋能行业,让商业美而简单!

企业数智化转型下的数据可视化

DEEPCharts是刚加入DEEPDesign的新成员,补齐这几年图表规范的缺口。在数据产品范畴,应用场景的不同导致不同的看数需求,DEEPCharts不是图表的基础规范,而是对基础图表库进行封装、专注在企业数智化管理场景的设计体系与解决方案,在服务管理者向下管理、员工自我管理、同事间横向协作时,提供良好看数体验的数据产品,支持他们进行复杂决策,进而提升整个企业的组织活力,并促进业务创新。

经过一年的业务实践,累计沉淀了17类组件、114个模板,覆盖了企业智能事业部20+业务产品。

在设计产出就绪后,我们将图表资产输送到我们的数据搭建平台(有数),进而对接低代码搭建平台(乐高)从数据的生产到应用赋能业务看数体验的升级,全程把控了图表的标准化生产到高效率使用。例如基于全局框架的「PageSection页面卡片」数据卡片对顶部扩展区域进行了定制化的衍生,使常规的页面内容随时可升级为数据卡片,且在整体框架的融合下,数据呈现也能实时响应多端的视觉展示。

业务拓张下的物料体系升级

随着业务的拓张“数量”和“深度”都在阶梯式的增长,定制化内容是每个设计系统的深水区,纵使业务设计使用的都是这一堆基础物料,依然无法把控用户去创造出千差万别的页面。所以这里就需要建立起物料的一个“生态”,这个生态主要包含3种供给关系:

?中台将物料供给到业务

?业务基于中台供给建立自身领域的业务物料

?中台将业务物料整合再次供给多个业务域,形成平台的服务化

中台将物料供给到业务

DEEPDesign的中台团队侧重于基础物料的维护,基础物料亦可被成为通用组件,它一定是有一个上限的。对其维护的重心在于拓展其能力以及将这个能力更好地传达给使用者。所以每一个基础物料都包含了3种产出物:“线上组件库”“本地Sketch组件包”“在线的设计指引及API文档”,来保障“输出“和“接收“之间的损耗尽可能降到最低。

业务基于中台供给建立自身领域的业务物料

中台将业务物料整合再次供给多个业务域,形成平台的服务化

2020年初在我们的平台战略中提到了业务中台的概念,因为我们的业务能力逐渐要供给给企业智能之外的生态化场景,这对我们的考验是要以平台化输出我们的积淀。没人能把业务中台是什么说清楚,在物料层,我认为业务中台其中一条策略就是由业务本身对不同时期不同场景的收敛,找到共性,有所沉淀,有所割舍。使其可以在面对新需求时不必重复0-1的过程,可以从0.4或0.6起步。结合上一段“业务物料”的成果,DEEPDesign将整合后的物料输送至UIPaaS(UIPaaS是为低代码平台开发者提供可视化搭建解决方案的平台),并通过“宜搭”(低代码平台)去支持外部的生态化项目。

业务交付方式变革下的“在线设计”

伴随着物料体系的升级完善,我们也在思考如何在业务中更高效地消费。传统方式设计输出一套统一的DPL,然后再根据不同角色、不同平台输出三个版本组件:Axure组件库、Sketch组件库、前端代码组件库,前两者主要面向产品、设计师,后面一个则是最终将页面线上化的代码物料。

除了协同成本外,由于设计过程大多是离线,带来的管理成本:产品和设计的工作过程不在线,工作行为数据沉淀不足,无法给大脑输送足够数据,实现数据化管理(此前设计在线率仅为55%,是兵力在线率最低的一个岗位)。另外,在线下的共创会时,也发现产品/设计/前端存在基于DEMO的协同割裂感强,有比较大的优化空间。

因此,我们希望基于企业智能已有的低代码技术储备,打造一个多角色协同的在线设计工具。

经过过去一年的努力,我们也在D-One上跨出了「在线设计」这一步,同学们可以点击这里体验:

?物料:支持VC物料体系(90+)、Fusion低代码物料体系(16+)、自然布局体系、100+模版/区块模版即将上线。

?引擎:接入UIPaaS,同时基于设计场景,提供页面管理、研发模式&设计模式切换、逻辑编排、多端切换等能力。

通过「在线设计」这个工具,我们初步实现基于同一个平台、同一物料,产出统一的交付物,最终实现基于同一产出物的多角色在线协同。在过去的一年中,我们落地了54个有效项目,创建737个页面、发布354个页面(仅统计企业智能中的PD、设计师产出的有效项目)。

常见的一些FAQ

设计系统限制了业务设计的创新?

只关乎设计,可由设计师独立完成?

对“设计系统”的另一个误读便是以为它仅仅是一些在设计软件中的可重复使用的“基础物料”,仅在设计阶段能发挥价值。其实物料的生产更多依赖于技术栈的架构以及更上层的中台管控,比如基于React的JavaScript是我们最底层的前端语言,和集团设计的Fusion平台对阿里全量设计系统的统一标准。每一个物料都需要横向和这些“约束”建立有机的联系,这需要中台团队的成员建立更紧密的信息和技术沟通,才能为“设计系统”建立起一条通畅的坦途。

基础物料做完就是大功告成?

既然基础物料是有上限的,那么是否只要做完就大功告成了?其实基础组件的维护只是无限让它趋近于一个更全面的能力,但来自于不同业务的诉求本身就会发生矛盾,想要“设计系统”获得认可,就需要像对待一个产品一样对待它。业务的发展在变化,侧重点也在变化,如从“研发效能”到“体验极致”的鸿沟,设计系统的项目团队应该定期收集项目组及用户的反馈,帮助用户形成最佳实践或直接引导业务建立自身的业务物料增量。

THE END
1.创客贴平面设计作图神器免费设计模板创客贴,极简好用的平面设计作图软件,在线图片编辑器,免费使用.提供免费设计模板,有海报、名片、公众号图片、PPT、邀请函等65个场景模板,一键搞定设计印刷https://www.chuangkit.com/
2.Speedesign快速在线设计–只为你,做出好设计运用AI人工智能技术重新定义设计流程,将低效、重复工作全部交由系统完成,全面提升设计效率开启便捷、高效、低成本的智能设计时代 专业设计算法精美设计, 轻松搞定 20年资深品牌设计团队全情跨界,以设计思维打造全新一代智能在线设计平台颠覆简单的作图工具,除了能轻松设计海报、新媒体、PPT等,复杂的画册设计同样驾驭自如,https://www.speedesign.cn/
3.用好这10款在线设计工具,你也能成效率王!效率为王的时代,在线设计就是设计的未来,它给设计者提供了更加省时、省力、省成本的解决方案。在线设计工具打开浏览器即可使用,而且大部分操作界面都比传统设计工具精简,入门门槛极低,此外还提供云存储的便利,让你即便居家远程办公也能无缝投入到工作项目中,团队成员使用不同设备系统也毫无影响,助力一体化作业。本篇文https://pixso.cn/designskills/10-online-design-tools/
4.即时设计—完美适应各种系统的一站式在线UI设计平台即时设计作为中国第一款支持在线协作的 UI 设计平台,能完美适应于各种系统,打开浏览器即可开始创作。今天为大家介绍即时设计的适用系统和有关产设研的一站式 UI 设计功能,如格式转换、多人协作、即时白板、即时上线。一篇文章带你全面了解即时设计这个能完美适应各种系统的一站式在线 UI 设计平台! https://js.design/special/article/instant-design-online-platform.html
5.2024年在线设计网站有哪些在线设计平台哪个好用十大品牌网CNPP重磅推出2024在线设计十大品牌排行榜,在线设计品牌排行榜前十名有稿定设计、可画、Fotor、码卡、图怪兽、爱设计、凡科快图、创客贴、来画、图司机。十大在线设计品牌由品牌数据部门通过收集整理大数据分析研究得出,旨在告诉消费者在线设计什么牌子好。https://www.cnpp.cn/china/list_10220.html
6.一站式AI在线设计平台,全嘲AI设计工具AI设计师是标小智旗下的AI在线设计平台,面向个人创业者、小商家、自媒体等群体, 提供AI抠图、企业VI生成、AI商品图生成、头像制作、AI海报设计等各种场景设计工具,一站式AI创意设计平台,让每个人都能享受好创意、好设计和好工具!https://www.logosc.cn/photo/
7.在线考试系统设计与开发论文无论是在学习还是在工作中,大家都接触过论文吧,论文是进行各个学术领域研究和描述学术研究成果的一种说理文章。还是对论文一筹莫展吗?下面是小编为大家收集的在线考试系统设计与开发论文,欢迎大家分享。 1前言 1.1背景: 网络化教育代表了教育改革的一个发展方向,已经成为现代教育的一个特征,并对教育的发展形成新的推https://biyelunwen.yjbys.com/fanwen/jisuanji/369079.html
8.基于Java的电影院在线购票系统设计与实现(附源码论文资料)基于Java的电影院在线购票系统设计与实现(附源码论文资料)-从零开始部署运行项目,学习环境搭建、项目导入及部署,含项目源码、文档、数据库、软件等资料-资料获取 文章目录 1.绪论 1.1.电影院在线购票系统的开发背景 1.2.设计目的与意义 2.系统需求分析 2.1.可行性分析 2.1.1 操作可行性 2.1.2 经济可行性 2.1.3https://blog.51cto.com/xiongmaoit/7733197
9.在线3D云设计系统{{ $t("Language.Unlimited")}} {{ $t("Language.OneHouse")}} {{ $t("Language.TwoHouse")}} {{ $t("Language.ThreeHouse")}} {{ $t("Language.FourHouse")}} {{ $t("Language.FiveHouse")}} {{ $t("Language.MoreHouse")}} {{ $t("Language.DuplexApartment")}} {{ $t("Languagehttp://www.ihouse3d.com.cn/
10.在线点餐系统设计与实现论文摘要.doc文档全文免费阅读在线看在线点餐系统设计与实现论文摘要.doc,在线点餐系统设计与实现论文 目录 1 引言 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理,这正是计算机被广泛应用于信息管理系统的环境。计算机的最大好处在于利用它能够进行信息管理。使用计算机进行信息控制,不仅提高了https://max.book118.com/html/2016/0225/35963508.shtm
11.美丽大师在线个人形象设计系统国内第一家美丽大师是一个在线量身定制您的时尚形象方案的系统,您只需点击鼠标,选择自己的形象特征,即可获取专业的整体时尚形象设计方案,这套方案完全是从您的个人风格(Style)出发为您量身打造的。它的特征如下: 根据您的个人风格,从头到脚,量身定制您的时尚方案。 http://www.meili6.com/
12.DIY设计平台在线自助设计系统尺寸: 三折页(285*210)三折页(297*210)二折页(285*210) 筛选: 全部科技教育健身餐饮医疗公益家居装修母婴美妆旅游金融产品介绍招生 排序: 最新上传最多浏览最多收藏最多使用 2P 照片14张 网站核心策划文字企业折页模板 模版编号:3295685 2P 照片5张 http://m-www.dpinin.com/
13.基于Vue+Java实现的在线聊天APP系统设计与实现基于Vue+Java实现的在线聊天APP系统设计与实现 一、需求分析 1.核心用户分析 在线聊天系统主要针对一些年轻用户群体以及因为工作需求而对于实时交流以及非实时交流有较大需求的群里。就青年群体而言,这一用户群体特征比较鲜明,其主要需求为基础聊天需求以及一些能够凸显个性的功能需求。在线聊天对于青年人来说也逐渐成为一https://blog.csdn.net/qq_46416934/article/details/123394299
14.程序设计在线评判系统程序设计在线评判系统 请登录程序设计在线评判系统或联系实验室管理员注册账号http://clact.jsnu.edu.cn/_t271/cxsjxlyksxt/list.htm
15.基于ZigBee的矿井通风机在线监测系统设计AET基于ZigBee的矿井通风机在线监测系统设计 摘要: 针对煤矿井下工作环境复杂、传统的有线监测系统存在布线复杂及数据传输可靠性不高等问题,提出了一种基于ZigBee无线传感器网络的矿井通风机在线监测系统。该系统以CC2430为主控芯片,采用ZigBee技术实现了对矿井通风机的实时监控,功耗低、成本低廉,具有良好的实用价值和发展前景http://www.chinaaet.com/article/3000003196
16.3D云设计3D家装设计在线家装设计在线室内设计系统浩思在线设计软件动辄千万研发投入 专业成熟稳定的方案直接布署 缩短周期 缩短研发周期 1-2个月完成在线设计系统布署 告别漫长研发周期 产品成熟 团队多年开发经验 产品成熟,功能强大,系统稳定 定制开发灵活 全程指导 全程培训指导 用户独立布署 提供技术培训 功能介绍 http://www.ihouse3d.cn/
17.用户反馈运营技巧(在线反馈系统设计五要素)?在线反馈系统设计五要素 编辑导语:在线反馈系统是企业中的一个底层支持系统,起着重要的作用,为了便于大家更好地理清需求,以便更好地进行设计,作者梳理了在线反馈系统设计五要素,希望对你有所帮助。 在线反馈系统作为企业必备的一个底层支持系统,在企业业务运转中起着不可代替的作用。有些公司可能会直接使用钉钉的https://www.niaogebiji.com/article-469924-1.html
18.简奈在线自助设计系统尺寸: PVC横版(90*54)PVC竖版(54*90)竖版(54*90)横版(90*54) 筛选: 全部高档纸美妆文化简约培训美容地产教育餐饮美食科技商务金融卡通中式家居家装招生医疗保健数码中餐制造化工汽车互联网创意快递欧式化妆品辅导班美甲机械保险时尚证券甜点药店水果婚庆美术贸易音乐维修养生母婴酒店旅游家政大气清新西餐扁平几何舞蹈微http://m-diy.xfni.cn/
19.Haiprint在线自助设计系统短信登录http://m-diy.haiprint.com/cooperation/loginByCode
20.基于客户和用户需求的B端产品系统设计编辑导语:基于互联网的发展,B端产品不断涌入市场,面对竞争,做好客户与用户需求这方面的工作就显得尤为重要。作者分享了自己在项目中的规划与设计思路,并对此进行复盘分析,希望对你有所帮助。 一、背景概述 随着产业互联网的大势愈发成熟,B端企业和产品需求越来越多。这个项目是集后台系统、APP、硬件为一体的系统项目,https://maimai.cn/article/detail?fid=1645337772&efid=bOdzRtXutjpD4KzP6xbhog
21.万字干货带你读懂并应用DesignToken优设网随着近几年 Figma 等一系列在线设计工具的崛起,相信设计师对设计系统的都有了更深的了解。其实设计系统的建设是一个非常庞大而复杂的工程。我们通过各种设计规范等对产研流程提效,但还是会经常遇到一些棘手的问题。 1. 开发用的颜色/字体样式/投影等与设计稿存在差距; https://www.uisdc.com/design-token-2
22.轻量级在线平面设计工具图帮主,设计小白最爱的懒人设计神器。拖拉拽,秒出图,轻松搞定平面设计,图帮主在线平面设计工具提供五大类50多个场景的海量模板,让创意不再受限于工具。https://www.tubangzhu.com/
23.尘埃粒子在线监控系统设计建议尘埃粒子在线监控政策解读及系统设计建议 1.背景介绍 法规背景:2010版GMP附录1对在线监控系统的一些要求: 第十条应当按以下要求对洁净区的悬浮粒子进行动态监测: (一)根据洁净室级别和空气净化系统确认的结果及风险评估,确定取样点的位置并进行日常动态监控。 https://www.chem17.com/tech_news/detail/1864652.html
24.《基于STC89C52单片机的控制系统设计》(陈中)简介书评当当网图书频道在线销售正版《基于STC89C52单片机的控制系统设计》,作者:陈中,出版社:清华大学出版社。最新《基于STC89C52单片机的控制系统设计》简介、书评、试读、价格、图片等相关信息,尽在DangDang.com,网购《基于STC89C52单片机的控制系统设计》,就上当当网。http://product.dangdang.com/23809435.html
25.report:springboot+vue在线报表设计和大屏设计系统gitee:https://gitee.com/springreport/springreport 简介 springboot+vue 在线报表设计和大屏设计系统 暂无标签 https://gitee.com/pospos/report Java 保存更改 发行版(2) 全部 新增报表下钻功能 3年前 report 开源评估指数 生产力 创新力 稳健性 协作 贡献者 软件 贡献者(1) 全部https://gitee.com/pospos/report/