如何进行团队UI设计文件的管理

用户头像
深圳/设计爱好者/1年前/1158浏览
如何进行团队UI设计文件的管理
这次讨论主要是针对设计团队在figma、即时设计等在线协作平台的文件管理,其实这些内容互联网上面已经有很多大佬讨论过了,但是要么不够完善,要么就是在实操方面还是不够便捷,有优化的空间,今天就结合我自己工作中的经验来分享一下,不一定是最好的,但是目前来说是比较适合我们团队的。
先说一下我和我们团队的现状:
1.要找到之前某个时段、需求的设计文件简直大海捞针,新旧文件散落各地;
2.某个项目更新迭代比较块,UI画布也越来越多,导致满屏都是画布,严重影响加载速度;
3.每当有新的需求,就直接新加页面,没有做版本管控,导致同事互相协作成本增加;
4.组件也没有有效管控,没有形成规范的组件库,查找起来极其费时......
在我刚接手现在的项目时,所有页面、交互、归档文件、组件库文件全部都放在一个文件内,只对主要的功能进行了简单的划分,如下图:
如何进行团队UI设计文件的管理(图ZMTQ5NDI5MTI=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
明确需求和解决目标
列出问题之后,我们就要对其拆解并分析,可以得出我们的需求:
1.版本管控:更新要做到能被记录,可以随时追溯某个版本某个时期的需求;
2.要优化项目的层级,做到清晰有序,尽量减少单个文件内的画布数量以提升网页运行效率;
3.交互和UI尽量能够在一起协作,之前都是交互稿一个文件,设计稿一个文件,解决协作难的问题;
列出需求以后我们便可以开始着手管理规范的搭建了。在我接手的项目中,所有内容大杂烩式全放一起,有新增的就在原来的画布/页面中新增,只有版本完全更新换代才会归档。这种方法只是把Figma当作一个“大型的在线文件夹”,没有发挥出“团队功能”的特性,越屯越多就会导致开头我说的问题,因此我对项目整体层级进行重构。
如何进行团队UI设计文件的管理(图ZMTQ5NDE0MDA=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
在层级重构中,我把整体层级向上移动了一级,最重要的一点就是将需求、UI、规范这一层移动到了文件内,这样可以专注于某一个文件夹内的每个阶段需求,也可以减少每个设计文件内的画布数量,加快网页运行速度,接下来我们逐层拆分讲解。
1 团队层(Team)
我们原来会把所有的不同版本的APP放在这一层,迭代也放这一层,这就导致,虽然是服务于某一个APP,但是这个里面既有不同版本类型的分支APP,也有迭代过的APP,测试和开发人员经常提到找某个版本APP的具体页面很难。我们需要让团队单独服务于某一业务,就不要把其他业务放在单个团队内,应该新建一个业务线,重新规划项目文件层级。
如何进行团队UI设计文件的管理(图ZMTQ5NDI5MjQ=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
2 项目层(Project)
在团队层我们确定这个会专门服务于某一业务线APP,那么我们可以开始划分项目层的类型了。项目层是服务于某一业务线的全流程,那么项目层的分类依据我们可以按照以下类别:
1.业务线的功能模块:例如首页、我的、小首页、消息等
2.通用的项目资产:比如整个业务线的运营规范、通用的素材库(icon、字段、素材等)、整个业务线的视觉规范(垂类视觉规范可在其分类下新建)、用户调研等
3.归档文件:不会再进行更新的版本可以放到这里,避免和现有进行版本冲突
4.其他:例如外包需求、项目说明、PRD等等...
只要是服务于某一业务线的全流程,那么就可以在项目层这里进行分类。
如何进行团队UI设计文件的管理(图ZMTQ5NDE0MzY=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
3 文件层(Files)
在这一层我们主要服务于应用的功能模块,基本都是在处理功能模块的需求,所以我们可以围绕需求来展开。建议按照需求量更迭的时间线去分类,比如更迭比较快可以按照季度新建设计文件,更迭慢可以按照半年或1年的频次去新建文件。
同时在设计文件内建一个画板,规范好封面的类型和命名规则,用不同的颜色区分开,可以帮助项目同事快速找到需要的设计文件。可以参考以下我的分类,还可以在封面上加入设计师、PM等职位记录。
如何进行团队UI设计文件的管理(图ZMTQ5NDE3NzY=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
在项目层中我们还可以善用置顶文件功能,将当期进行中的文件置顶,方便团队快速访问。
如何进行团队UI设计文件的管理(图ZMTQ5NDE4NjQ=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
4 页面层(Pages)
页面层是设计文件打开后左侧的页面排序,这里先整理一下我们团队的工作流程。
如何进行团队UI设计文件的管理(图ZMTQ5NDE3MDA=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
根据流程我们可以按照这个思路来进行页面的分组,我是这样做的:按照需求开始和上线时间进行命名,这样就可以知道这个需求是什么时候开始,什么时候要上线了。然后在下面就是具体的需求类别,用🔨表示正在进行中的需求,用🎉表示已经完成的需求。如果有延期则在画布中标记(顺便吐槽一下Figma赶紧出一个分类折叠的功能吧,有的时候需求和页面实在是太多,得下滑好久)。
如何进行团队UI设计文件的管理(图ZMTQ5NDE4Njg=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
5 画板层(Frame)
到了页面层我们可以规划得更加详细,附上我们团队大概的流程和布局。
在处理需求时,可以在讨论区开始需求讨论,这里啥都能放,建议 、素材等。在确定之后会整理好更新到需求详情中去,交互和视觉稿尽量放在一起,方便对比。在下方可以放带遮罩的草稿和废稿,方便记录。
如何进行团队UI设计文件的管理(图ZMTQ5NDE5NzY=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
处理完需求需要把更新的页面
立即同步
到UI视觉设计文件中去,方便管理功能模块的整个页面。同时也方便团队成员的信息拉齐。
这里有一个注意的点,比如淘宝、京东那种首页的运营位,它们的样式变体极其多,每个运营位的算法推荐极其复杂,一般会有详细的说明文档,而且可能样式算法会新旧交替使用。我们可以这样管理:将首页和分页面详情按照权重分开,这样就方便团队成员查看首页有哪些组件样式或者分页面了。参照前文我讲的,也可以把交互放在这个画板旁边方便对照。
如何进行团队UI设计文件的管理(图ZMTQ5NDMwODQ=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
我们还可以通过Figma复制链接功能,将文档之间相互连接。这个功能不仅能在单个文件内画板之间相互运用,也能跳转至其他文件。比如在首页我想访问推荐页面的使用规范,我就可以通过点击说明文档的文字跳转至规范说明页面。(非常好用!推荐!)
如何进行团队UI设计文件的管理(图ZMTQ5NDMwODg=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
命名规范
这里再讲一下我对具体页面的命名规则,比如首页的设计文件命名为1,属于首页下的搜索画板就命名为1_1搜索,第一个数字是序号,这就相当于给模块分类了,以后大家看到1这个序号就知道这个画板是属于首页的。然后功能模块下的分页面,可以根据权重来进行排序,比如某宝首页搜索比扫一扫用的多,那么我们可以命名为:
1_1搜索;
1_2扫一扫;
再比如淘宝首页的商品详情有很多种不一样的,每个详情又有不同的状态(有评价、没评价),我们就可以这样命名:
1_3详情页1_1有评论
1_3详情页1_2没评论
1_3详情页2_1选中状态
1_3详情页2_2默认状态
同时,不同的页面我们可以横放,相同页面不同状态可以按照权重竖着放,这样其实也相当于在分类了,分类的原则是有新的页面就在名字后面加一层。命名最多保留4层,太多也会影响检索效率。比如:
1_1小首页_1小首页推荐_1默认推荐状态....
如何进行团队UI设计文件的管理(图ZMTQ5NDIwMjQ=) - 观点 - 站酷设计师叉烧鱼_原创素材 - 站酷ZCOOL
收藏
团队成员都会不定期去查看设计源文件,缺乏有效的命名体系会导致查看效率极其低下,一旦项目庞大页面过多,只能诶个查找,导致效率极其低下。正确且适合团队的命名规则可以极大程度提升我们的协作效率。
以上命名推荐也只是分享我们团队目前在使用的。不一定适合每个团队,只是分享一个思路,要用什么样的命名还是要和团队内成员商量并统一意见。
小结
本篇文章仅仅是分享我自己的文件管理心得。并没有什么管理方法是最好的,最适合团队的方案才是最好的,文件管理是一个需要全员参与和遵守的文化建设过程,规划时务必要考虑到和原来的工作流程,一个好的文件管理方案应该是符合团队实际需求、易于理解和执行,能随团队成长而调整促进而不是阻碍工作效率。
以上就是今天分享的文章~我们下期再见~
8
举报
|
11
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
户外旅行飞机情侣假日出行
拟物风质感写实UI卡片合集源文件
【新年UI图标】体育icon
【新年UI图标】30个图标
UI 登录界面设计模板包
3D渐变流体抽象矢量UI背景图
新能源APP应用UIKit
智能家居中心 简约 UI设计组件库
高级感金属拟物 UI设计组件库
新拟态风格 UI设计组件库
钱包ui模板
盲盒APP UI设计
【新年UI图标】汽车icon
【新年UI图标】钱包icon
手表表盘UI系列
【新年UI图标】旅行icon
【新年UI图标】会员icon
3D卡通UI界面图标可爱插画免扣素
Security Camera UI kit
科技医疗透明柜UI界面设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
UI界面 组件
你可能喜欢
相关收藏夹
大家都在看
登录注册