做什么:设计团队的协同
为什么:无规矩不成方圆;确保设计团队的同步,方便团队内部工作的交接
什么时候:在设计开始之前
谁做:设计同学
在团队合作的过程中,同步是最重要的也是基础的知识。第一次和其他小伙伴一起完成工作,总结了几项同步的知识点和方法。
第一项、命名规范
命名的规范包括了画板、图标和组建。
一、画板的命名规范。
在设计过程中,为了方便技术人员查看文档和设计稿,我们在画板命名时,以需求文档里的模块名称为准。当需求文档的划分不够细致,在需求文档的标题后面+横线+名称,(如图:命名-01)
命名-01
将命名好的画板上传至蓝湖,然后排序排好,并按照模块分好类别,方便其他的设计小伙伴查看和修改,也方便技术人员查找。
二、图标的命名
1.实心和描线图标保持同名,用【-o】来区分,比如【question-circle】(实心) 和【question-circle-o】(描线);
2.有无-circle/-square区别于边框和非边框,有无-o区别于实心和空心(如图:命名-02)
命名-02
3.命名顺序:【模块】-【图标名】-【形状?】-【描线?】-【方向?】。
1)模块,例如左侧导航栏模块的图标比较特殊,图标名前可加【sidebar】,常用模块英文:顶部导航栏【navbar】,底部导航栏【tabbar】,自定义模块命名根据实际需要选择性添加
2)图标名,常用的图标命名用习惯的英文单词命名,非常用和自定义的图标命名可用拼音,多参考其他网站的命名方式图标命名参考网站
3)描线,只在区分同一个功能的图标描线和非描线状态下使用,如果图标风格就是描线,不用每个图标后面都加此后缀
4.字体库的命名与运用
图标的托管网站是iconfont,在建立自己的项目时,电脑端的输入前缀【pc】,手机端输入前缀【mb】,fontfamily以公司名命名(如图:命名-03)
命名-03
关于iconfont网站的字体库制作,可参考我的第一篇文章字体库制作,里面详细介绍了制作过程和使用方法。
三、组件的命名与样式的命名
基于sketch软件的命名规范
关于symbol 是什么,有什么用,怎么制作,可以参考夜雨y的这篇文章,这里主要介绍命名规范
1.组件的命名
组件的命名是要用英文输入法的 / 作为分割,如果一级为最小级,一般命名是三级/二级/一级。这里可以参考微信小程序的UI组件命名
小单位的组件,比如按钮的命名顺序:【模块】-【形状?】-【颜色?】-【状态?】。(如图:命名-04)
命名-04
2.样式的命名
1)图层样式的命名也是用英文输入法的 / 用来分割父子级,命名规范:【模块】-【颜色?】(如图:命名-05)list/line则是父子级
命名-05
2)文本的样式命名规范:【字号】-【备注?】(如图:命名-06)
命名-06
第二项、组件共享
1、先把做好组件库保存
2.打开sketch-preferences-libraries-add library 添加保存的组件库即可 (如图:共享-01)
共享-01
3.修改组件直接双击,点击弹窗最右边按钮>>修改完组件库保存>>在设计稿点击紫色按钮同步组件库即可(如图:共享-02,共享-03)
共享-02
共享-03
当然想要团队合作更方便,可以借助蓝湖这类的软件,nans也是团队合作,文件同步的有效工具。
作者:皇军_e332
链接:https://www.jianshu.com/p/ebbe75e99b13
來源:简书