2023年主要工作回顾-中台组件建设

用户头像
东莞/UI设计师/2年前/625浏览
2023年主要工作回顾-中台组件建设
用户头像
LadyBOX
我过去两年的“中台组件建设”主要都在做什么?
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwNDQ=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
搭建中后台企业级设计体系
(规范背景)
G- Common
是面向企业“PHX计划”提供的一套中后台企业级设计系统,为PHX相关产品提供设计指导原则和工具,促进研发部门协作效率提升
G- Common 1.0
的基础建设:
主导中台Web端基础UI库的样式校验与封装,负责基础组件在企业内部业务应用场景的验证、探索等,通过完善中台组件库助力完成一套组件系统初步的雏形成果输出。
01
基础UI库的样式校验,及UI组件的补充
02
基础UI库的
.
Sketch Library 封装
03
基础UI库 VUE 2.0 &3.0的UI走查
04
中台业务色彩系统设计
G- Common 2.0
的升级建设:
因为
G- Common 1.0
只有基础组件库
,无法囊括
UED
中台的所有
UI
规范,且无法高效满足业务侧实际的组件调用诉求,故而开展的
G- Common 2.0
升级建设。
05
【模版库】区块组件的场景规范
06
【模版库】高级组件的设计提案
07
通用模版(区块&页面等)的指导规范
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwNDg=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwNTI=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
一、中台组件建设重点动作
基础
UI
库的
.Sketch Library
封装
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1MTY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
UI kits的资源库
.Sketch Library
封装的意义:
规范文档标准化:
主导完成中台两端基础组件的设计资源的封装,尤其是Web端 封装的组件基数大而全,且兼备智能布局的可响应能力(
组件布局的可动态响应覆盖率达一半以上
)… 属于组件库文档标准化的建设工作,通过优化组件库设计资源的调用方式,最终提高了设计资源文档的搭建效率和输出质量、升级了设计团队的协同方式;
组件规范的推广:
规范文档通过资源共享、调用实操演示等手段在设计团队中推广使用,提升了设计师的页面搭建效率;
封装资源的可用性验证
(个人评估):
通过真实的项目开展(可见下方项目 “ 软件IT G-Code Storyboard UED设计需求” )有效助力组件的可用性与影响力的验证,中台组件赋予了页面效果搭建设计师(UI)新的能力与角色升级:显而易见地提高了工作效率,释放更多精力投入到需求的梳理、业务场景/体验的优化上
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwNTY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwNjA=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
▲ 已封装的.Sketch Library封装资源库的调用演示
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwNjQ=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwNjg=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
二、中台组件建设重点动作:
线上基础组件库的
UI
走查中经历过的痛
Web
1.8.0
vue2.0
)迭代的
UI
走查范围:
1)组件内问题及G-Common官网的文档样式问题在
1.8.0
版本范围之内;
2)因G-Common-web端组件样式基于 “Element” ,样式细节并未强制要求100%对齐设计侧样式;
3)设计走查无法深入到每个组件,和所有组件内部的状态样式,需开发侧自行横向(类似组件&类似样式)、纵向(交互及状态样式)对齐;
4)组件间的嵌套、组合的统一UI无法明确走查,需开发自查
(如【多选选择器】嵌入的标签,是否对标/调用了【标签】组件)
走查方式:
UI肉眼、及典型的重要的线上文档可见的css样式走查
常见样式问题:
1) “字阶与行高的匹配对齐 ” 的问题,部分组件非表单信息类的文本未强制对齐文本的行高要求,如Web端【Radio单选框】【Checkbox多选框】等;
2)图标/文字图标(iconfont)的颜色与尺寸应用的统一性问题;
3)颜色(含颜色透明度)统一配置的能力;
4)样式污染等问题造成的组件样式上线效果不稳定的问题
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1Mjg=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
走查闭环难点:
缺陷的闭环问题:
反复走查四轮以上才勉强闭环
1)未修复的缺陷没有备注或知会,导致走查反复;
2)缺陷修复的不够细致,有些走查问题已经细化到色号或像素标注了,还是出现修复遗漏;
3)缺陷修复要对齐设计侧给出的整体摹客标注说明,诺亚缺陷描述仅作问题阐述,如部分组件走差只标出了单个组件样式,前端就仅修复单个,会出现同类型的组件样式修复遗漏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwNzI=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
走查方式优化意见(走查复盘建议):
优化背景:
GCom UI组件库UI走查过程中发现,已关闭的走查模块上线后会发现依然存在缺陷,UI和前端都无法有效追踪该缺陷的遗漏责任人。有可能是UI走查遗漏;也有可能是走查环境正常的功能/内容但反复上线迭代后出现新的异常(且非常常见)
原走查方式(在用):
仅记录存在缺陷的点。通过诺亚描述存在缺陷的具体内容,并尽可能地备注出优化内容或方向;
新走查方式(建议):
学习测试组测试规范,按照测试
/
走查清单输出测试
/
走查记录,
既记录未通过
(存在缺陷)的功能点和内容,
也记录已通过
的测试内容……
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1MzY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1NDA=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwNzY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwODA=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
三、中台组件建设重点动作:
区块
-
高级组件的设计提案及规范
组件2.0【高级组件】工作流节点规划
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1NDg=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
01 方向探索、案例收集
1)行内中台组件建设方向亮点收集/过滤
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1NDQ=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2)组件物料IT设计方案收集(“疯狂探索”阶段)
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1NTI=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1NTY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1NjA=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
基于行内竞品的优秀/典型的上线案例,梳理出一份【高级组件】和【特色组件】的功能建设清单:
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1NjQ=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwODQ=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
02 需求过滤
1)业务诉求过滤:各业务线对「高级组件收集案例」结合自身业务诉求进行初步过滤;
2)业务诉求收集:各业务线设计过滤、补充的业务诉求
3)前端诉求收集:各业务线前端另行补充的诉求 (缺失,缺少成熟的内部技术分享平台和社区,资讯能力差)
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1Njg=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
▲ 业务诉求过滤
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwODg=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
03 设计提案
因设计体量较大、设计交付紧急、诉求的时效性等,因此设计前的一系列动作,如“交付风险评估”、“人力评估”、“人力排期”、“评审持续跟进”、“定期复盘校验”等动作是必要的
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1NzI=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
▲ 交付风险评估
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1NzY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
▲ 人力评估
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1ODA=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
▲ 启动会正式对齐团队合作方式
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1ODQ=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
▲ 主设把控质量与进度
收藏
明确交付内容:
4
大类高级组件,含:
高级搜索/过滤、高级导航、高级表格、其他高级数据管理;
16
个大型组件,如:
标签选项卡、高级过滤列表、高级过滤抽屉、手风琴或二级菜单面板主侧导航、树结构、Hamburger、高级表格、手风琴折叠列表、数据看板、相册图集、甘特图等;
其中包含
60+
以上个功能点,大大小小细节功能已超
200+
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwOTI=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
▲ 高级组件UI样式预览
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgwOTY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
04 设计审查(略)
对标业务审查提案,会议通稿后公示
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgxMDA=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
05 开发跟进
/
推广
1
、高阶组件的开发落地资源争取前置工作:
GCom基础组件的使用情况调研
G-Com
在开发侧落地情况调研
-
访谈记录》
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY2MzY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY2NDA=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY2NDQ=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY2NDg=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2
、高阶组件的开发落地资源争取前置工作:
GCom高阶组件的前端调用诉求
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY2NTI=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
3、高阶组件的开发落地
高级组件的落地跟进:收集业务侧开发对高级组件的调用优先级诉求,开展G-Com 高级组件的设计提案的可行性落地跟进,初步评估结果为:
1)鉴于落地应用价值 及投入产出比预估,高级组件设计提案内容优先落地到规范文档;
2)部分内容
分阶段
有选择性
地落地到:
① 基础组件(如移动端的基础表格);
② 页面模版的低代码建设中;
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY2NTY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
4、高级组件的元件库搭建
(搭建人:nono,内容:略)
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgxMDQ=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgxMDg=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
四、中台组件建设重点动作:
页面
/
组件模板化的规范制定
略,请见上一篇《中台通用页面模板的指导规范(简要摘录)》:
https://www.zcool.com.cn/article/ZMTYwNzEyMA==.html
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1ODg=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgxMTI=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
2023年主要工作回顾-中台组件建设(图ZMTQ2NDgxMTY=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
年度总结:
2022年底到2023年是非常崩溃的一年,行业“卷”象之下,个人工作效果要求更高、工作量很大,工时管理的压力给到每一个涉及到项目统筹的人员… 很多企业内团队的矛盾会暴露出来!
这一年的成绩在企业可能未必多显性,但对个人来讲却是非常可观的!感谢陪我熬过夜的城市灯火,感谢唤我早起的鸟鸣,感谢迎我下班回家的夕阳与余晖,感谢有酒有花的桌上好友… 感谢一路的坚持!
为了致敬那个快崩溃的自己,2023年几度奔赴山海,去到高原、氧气缺失的地方,重新感受宁静与生命…
2023年主要工作回顾-中台组件建设(图ZMTQ2NDY1OTI=) - 观点 - 站酷设计师LadyBOX原创素材 - 站酷ZCOOL
收藏
然后… 一切刚刚好~
感谢~
11
举报
|
14
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
柠檬黄主题UI作品集模版
钱包ui模板
【新年UI图标】30个图标
【新年UI图标】家具icon
UI通用设计素材1
科技医疗透明柜UI界面设计
UI应用平面图标
UI_3D图标火箭炮<新春促销>
手表表盘UI系列
【新年UI图标】游戏/娱乐icon
高级表盘系列UI源文件
新拟态风格 UI设计组件库
新能源APP应用UIKit
UI_3D图标炮仗<新春促销>
高级感金属拟物 UI设计组件库
我的钱包-UI界面设计-app
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
盲盒APP UI设计
UI界面 组件
智能家居中心 简约 UI设计组件库
【新年UI图标】酒店icon
【新年UI图标】珠宝icon
【新年UI图标】美食icon
【新年UI图标】影音icon
你可能喜欢
相关收藏夹
大家都在看
登录注册