【华为云技术分享】Sketch插件技术 — 让研发和设计高效协同
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师。
官方网站:
https://devui.design/
Ng组件库:ng-devui(欢迎Star)
https://github.com/DevCloudFE/ng-devui
引言
本文源自于DevUI团队内部敏捷设计实践。
Sketch是轻量级的设计软件,能够快速画一些原型和设计稿,并且还能够生成标注设计稿,利于设计与开发的沟通。但设计价值不仅仅于此。本文从设计价值、设计效率问题、如何提效三个方面去讲DevUI团队实践,最后做一些简单呈现。
通过阅读本文,你将收获:
1、设计困境:当前科技产品设计所面临的效率困境;
2、设计提效:DevUI团队是怎么做设计提效;
3、设计创新:DevUI团队敏捷设计创新实践;
4、产品演示:最后一些产品演示;
设计价值
设计价值趋向于赋能和牵引。在现代互联网产品竞争中,功能同质化越发严重,细节决定成败,所以设计的作用越发显得至关重要。设计价值逐渐从支撑转移到赋能,参与到产品的讨论中。
产品体系庞大,产品持续扩充,人员扩充,角色扩充,设计跟不上产品演进速度。
如果设计师价值仅仅是支撑,已经是无法跟上现代化产品研发节奏,形成一个瓶颈,并且产品比拼中无法获取优势。
设计所面临效率困境
当产品规模化时,设计资产繁重
华为云应用研发管理平台包括DevCloud、PaaS、云龙等很多产品线,上百个微服务。几十名设计师,每天都在产出大量的设计资产,产品的设计、组件的设计、图标的设计,而且不同设计资产有大量的版本,长年累积。这么多资产的管理,是一件十分令人头疼的事情。
我们再设想一个场景,产品设计稿演进了10个版本,设计师小A在原有的稿上不断修改,可能演进到最后跟第一版天壤之别,到最后,领导或产品经理PD又觉得第一稿比较好,但设计稿不像代码,还有github仓库,怎么办?设计师是不是要疯掉了。
产品敏捷迭代,产品设计,规范,组件设计等同步问题,令人十分头疼。
随着公司产品面不断扩大,产品功能增多,团队成员增长,角色增多,大家的协同是低效的。因为不同的角色有一套自己的工具,理解方式。当然产品从0到1的过程中,大家合作还是比较愉快的。
那么问题就是产品不总是0到1,而是在原有的功能新增、改变、替换等等,这样就会导致各个角色之前累积的资产之间数据的交换、信息同步,这块往往很难达成一致。另外因为团队之间存在地域隔阂,时间隔阂,目标隔阂,导致很多人不想不同步老的资产。随着时间的流逝,就会导致信息不对称,进而导致沟通障碍。这个问题在设计与开发团队之间尤为突出。
比如按钮视觉,我们组件库最初的版本,按钮是圆角,颜色是绿色,那在18年的时候,我们按钮圆角变化了,颜色也变化了,那在20年产品的按钮又会有一些变化。如下图所示:
如果我们的设计规则变化了,设计师要花不少的时间精力去画稿,校对,这个工作量大但设计价值不高,但又不得不做,即便花了很多力气做了,可能还是有一些不够精确的地方。
视觉总会跟随时代进步不断改进,以满足用户需要。
冗繁、重复的设计工作,占据大量设计时间,导致产品创新乏力
互联网时代,产品百花齐放,往往成功的只有老大。老大吃肉,后面的都只能喝汤。所以更新快是产品研发过程中的一个显著特征。所以整体流程的效率提升就变得至关重要。
整个流程效率提升,由于DevOps的理念深刻实践,在产品、大前端、后端开发、监控、运维等不同的阶段已经流水线化、工具化,效率得到极大提升了。研发效率的极大提升以及资产的快速累积以及可继承,导致产品的功能极大丰富。功能的极大丰富,导致业务功能已经无法形成一些竞争力。
我们的的核心竞争力在产品功能层面上,往往竞争力无法凸显。这里带来的问题就是设计标准不统一,工作流冗繁,最终导致体验差,质量问题严重。
设计稿版本化问题
我们总是在不断做选择,比较,然后选择最优的。所以对资产进行版本化是十分必要的。版本化在文档和代码类的资产非常常见。
问题小结
1、如何面对产品规模增长的设计资产管理问题?
2、如何解决人员增长、角色增多,产品、设计、工程师等角色协同问题?
3、如何解放设计生产力,让设计脱离重复工作,聚焦设计对产品赋能?
怎么提效
Sketch主要针对互联网产品设计团队,做 UI 图、画原型时用的多,十分很方便,是设计师钟爱的一款设计软件。
代码维护设计资产
设计与开发属于不同领域,我们所期待的协作与沟通方式是明确而不存在歧义的,从而达到提效。我们先梳理下平常设计与开发沟通内容,无外乎针对设计稿开发工程师经常向设计师确认以下几点。
属性 |
颜色值 |
字体大小 |
用什么字体 |
圆角值 |
边框宽度 |
阴影值 |
间距 |
... |
我们经常听到的沟通内容是,开发问设计师,说我们规范是A,设计稿怎么是B呢,此时设计师说,细节方面没有特别注意,所以设计稿100%还原其实是做不到的。
所以,进一步思考,如果设计稿能抽象成各种各样的基本数据,用数据来约束设计,用数据来约束开发,那是不是就可以解决这样的问题。开发天然对数据敏感,而设计师对这些设计数据也不陌生。
所以设计协同,本质上是数据协同
JSON数据格式是解决协同效率通用格式
产品开发里有前端和后端的分离,前端和后端之间的交互语言是json数据,json数据是能够被前端和后端都易懂的格式,这种约定俗成的格式提高了前后端沟通的效率,只要一开始把交互数据的格式给定义出来。
在监控产品中有一种录屏功能,它的原理是,把用户的操作和DOM的变化转化成json数据,传到后台,再通过这些数据呈现出用户的行为。
设计协同,设计所使用的Sketch,最基本的就是几种图形,Sketch通过API封装把图形转化成json数据格式,传递到上层,那js就完全可以处理这些json数据。
Sketch是设计师钟爱的设计软件,是因为其简单易学,并且能够高效进行设计。Sketch在49版本开放了底层API。
通过这些API,设计稿最终转化成了JSON数据。有了JSON数据,我们就可以为设计师、开发者、产品经理等角色更好的协同做一些工作。如下图所示:
这里列举一个按钮例子,我们先抽象出我们关注的一些属性:
最后我们再总结下带来的价值。代码维护设计资产带来两大价值:
价值之一:减少设计重复劳动,极大提高设计效率,给设计创新腾出时间进行创新设计,甚至开发人员都可以对设计稿进行维护;
价值之二:代码所维护的设计资产是精确的,避免前端开发不断指引设计稿间距、边框、颜色跟规范不一致。
当交互设计稿设计好之后,如果后续在视觉方面需要修改,我们不希望还要针对性的去调整设计稿。而是修改数据就可以批量完成,如下图所示:
设计资产版本化,选择最优版本
对于同一个Feature或者组件的设计,几易其稿是经常的事情,版本化管理是必然的。先看看DevUI对设计稿版本化历程。
设计协同创新
协同创新,本质上还是在于人与人如何快速沟通,火花碰撞以及形成成熟的观点。传统的沟通方式是,产品与设计通过面对面或者电话沟通,沟通完设计进行几天时间设计,再与产品经理进行沟通,再优化,这样不断重复,最终得到确定的设计稿。这样的方式还有一个缺点就是,整个沟通过程是没有被沉淀的。
我们在实践中由于产品规模特别大,设计师人员跟产品人员数量不匹配,导致这种方式特别低效。我们尝试一种用线上协同的方式。
1、产品经理与设计师初步沟通之后,设计师对其中一个页面进行设计或者是初步的想法,完了之后就通过sketch插件上传到DevUI文档。
2、产品经理或者是工程师针对设计稿关键点进行评论,反馈给设计师,甚至可以对设计稿每一个区块进行评论。
3、设计师得到反馈之后,做一些探讨和回复,针对性的进行修改,再上传,DevUI文档会对这些设计稿进行版本化,
设计师和产品经理不用担心设计稿会被覆盖。这种整个协同过程都被记录下来了。
产品演示
画板分类列表
新建画板分类
画板类表
设计稿上传
设计稿查看
总结
科技产品竞争日趋激烈,设计的牵引价值凸显。认识到设计的价值,DevUI团队从一年前就开始探索如何提高设计效率,设计师与工程师、产品团队的互动协同来进行产品创新,以及设计如何敏捷迭代也进行了探索和实践。最后通过DevUI文档去沉淀这些设计资产以及设计迸发的灵感和沟通。
【华为云技术分享】Sketch插件技术 — 让研发和设计高效协同相关推荐
- 华为云数据库亮相下一代数据技术发展论坛,助力“数字一带一路”
2019年11月15日,在河南省教育厅的指导下,由中国计算机行业协会与河南省大中专学生就业服务中心联合举办的"下一代数据技术发展论坛暨IT名企专场招聘会"在郑州隆重举行.华为云数位 ...
- 百度云生态分享日| 网络技术及应用主题沙龙圆满落幕
大数据.移动互联网的兴起,对信息技术和通信技术的基础架构都提出了更高的要求,需要能提供随需而变.按需供给.灵活稳定的网络服务:信息产业和通信产业也进入共同发展的时代,NFV作为跨界技术应运而生. 承载 ...
- 反流技术之IE插件技术研究
申明: 本文涉及到的技术只供参考研究之用,不可用于非法行为,本人不负责. A. 写在开始: 继写了木马技术研究第一部分后, 我发现我的blog,PageRank上升了.最终发现中国的很多网站上摘抄我 ...
- 大表与大表join数据倾斜_技术分享|大数据技术初探之Spark数据倾斜调优
侯亚南 数据技术处 支宸啸 数据技术处 在大数据计算中,我们可能会遇到一个很棘手的问题--数据倾斜,此时spark任务的性能会比预期要差很多:绝大多数task都很快执行完成,但个别task执行极慢或者 ...
- 打破“双十定律”,华为云AI推动超级抗菌药Drug X研发加速
摘要:学科交叉已经逐渐变成了科技创新的一个主要源泉,成为这个科学时代一个不可替代的研究范式.在科技与技术合力赋能之下,中国科研人创新奋斗再出新成果,人类与病菌的博弈因此有了新武器. 本文分享自华为云社 ...
- 【华为云技术分享】基于华为云IOT及无线RFID技术的智慧仓储解决方案最佳实践系列一
摘要:仓储管理存在四大细分场景:出入库管理.盘点.分拣和货物跟踪.本系列将介绍利用华为云IOT全栈云服务,端侧采用华为收发分离式RFID解决方案,打造端到端到IOT智慧仓储解决方案的最佳实践. 仓储是 ...
- 华为云数据库亮相2021PG中国技术大会并斩获4项大奖
1月7日-9日,以"开源论道·数据驱动·共建数字化未来"为主题的第十一届PostgreSQL中国技术大会隆重举办.华为多位数据库专家出席并发表了重要演讲,分享了华为云数据库最新技术 ...
- 百度云生态分享日 | AI技术实践与应用沙龙活动成功举办
2017年7月29日,百度云生态分享日首场活动,以"百度云AI技术实践与应用"为主题的沙龙活动在北京车库咖啡成功举办.300多位企业CTO.CIO及开发者参加本次活动,聆听并积极与 ...
- 新数科技入驻华为云严选商城,以技术创新驱动企业云化升级
近日,北京新数科技有限公司旗下核心软件产品ShinData DMP数据库云管理平台.ShinSight Pro监控和性能分析软件在华为云严选商城正式上架.两款产品完成和华为云GaussDB数据库的兼容 ...
最新文章
- 兄弟们,快醒醒,我们的跑马灯不跑了。
- git推送本地分支到远程分支
- GARFIELD@12-20-2004
- 让你编程能力秃飞猛进的好习惯
- AD灾难恢复情景及方案
- [转]iPhone发邮件编程
- Oracle标准建表语句
- 常用html标签及其属性
- 计算机网络——常见协议
- 支付交易相关接口文档对接
- 局域网内ip冲突引起的怪异现象
- 卡内基梅隆计算机金融,大神offer|恭喜四位再来人学员斩获卡内基梅隆大学-计算金融硕士...
- 全国计算机等级考试 和ccf,【我与CCF】我与CCF的不解之缘
- 成都二手房长啥样 —— 基于链家数据
- [博弈论]移棋子游戏
- PyQt5实时汇率查询
- 2023上半年软考高级哪个好考?-信息系统项目管理师
- [转]嵌入式Web服务器
- div css实现进度条
- 数据查询和业务流分开_内销业务管理解决方案
热门文章
- 视觉SLAM笔记(36) 3D-2D: PnP
- php多个请求只执行一次,php使用redis的blPop/brPop,一台服务器多个并发,也只能一次一次执行?...
- c jni 调用java_如何使用JNI从C调用JAVA方法
- PHP中如何判断属性类型,php – 如何获取doctrine实体属性的类型
- 软考5个高级中哪个好考_请问:计算机软考中、高级,哪个好考些呢?
- python的文件读取方式_python中文件读取方式
- PICKIT 3 烧录hex文件
- cropper+pillow处理上传图片剪裁(一)
- 阿里Java研发工程师实习面经
- 大话设计模式读书笔记(十三) 状态模式