美文网首页
UI设计的团队合作经验总结

UI设计的团队合作经验总结

作者: 皇军_e332 | 来源:发表于2018-04-26 16:59 被阅读0次

做什么:设计团队的协同

为什么:无规矩不成方圆;确保设计团队的同步,方便团队内部工作的交接

什么时候:在设计开始之前

谁做:设计同学

在团队合作的过程中,同步是最重要的也是基础的知识。第一次和其他小伙伴一起完成工作,总结了几项同步的知识点和方法。

第一项、命名规范

命名的规范包括了画板、图标和组建。

一、画板的命名规范

在设计过程中,为了方便技术人员查看文档和设计稿,我们在画板命名时,以需求文档里的模块名称为准。当需求文档的划分不够细致,在需求文档的标题后面+横线+名称,(如图:命名-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也是团队合作,文件同步的有效工具。

相关文章

网友评论

      本文标题:UI设计的团队合作经验总结

      本文链接:https://www.haomeiwen.com/subject/fshphftx.html