做什么:設計團隊的協同
為什么:無規矩不成方圓;確保設計團隊的同步,方便團隊內部工作的交接
什么時候:在設計開始之前
誰做:設計同學
在團隊合作的過程中,同步是最重要的也是基礎的知識。第一次和其他小伙伴一起完成工作,總結了幾項同步的知識點和方法。
第一項、命名規范
命名的規范包括了畫板、圖標和組建。
一、畫板的命名規范。
在設計過程中,為了方便技術人員查看文檔和設計稿,我們在畫板命名時,以需求文檔里的模塊名稱為準。當需求文檔的劃分不夠細致,在需求文檔的標題后面+橫線+名稱,(如圖:命名-01)
將命名好的畫板上傳至藍湖,然后排序排好,并按照模塊分好類別,方便其他的設計小伙伴查看和修改,也方便技術人員查找。
二、圖標的命名
1.實心和描線圖標保持同名,用【-o】來區分,比如【question-circle】(實心) 和【question-circle-o】(描線);
2.有無-circle/-square區別于邊框和非邊框,有無-o區別于實心和空心(如圖:命名-02)
?
3.命名順序:【模塊】-【圖標名】-【形狀?】-【描線?】-【方向?】。
1)模塊,例如左側導航欄模塊的圖標比較特殊,圖標名前可加【sidebar】,常用模塊英文:頂部導航欄【navbar】,底部導航欄【tabbar】,自定義模塊命名根據實際需要選擇性添加
2)圖標名,常用的圖標命名用習慣的英文單詞命名,非常用和自定義的圖標命名可用拼音,多參考其他網站的命名方式圖標命名參考網站
3)描線,只在區分同一個功能的圖標描線和非描線狀態下使用,如果圖標風格就是描線,不用每個圖標后面都加此后綴
4.字體庫的命名與運用
圖標的托管網站是iconfont,在建立自己的項目時,電腦端的輸入前綴【pc】,手機端輸入前綴【mb】,fontfamily以公司名命名(如圖:命名-03)
關于iconfont網站的字體庫制作,可參考我的第一篇文章字體庫制作,里面詳細介紹了制作過程和使用方法。
三、組件的命名與樣式的命名
基于sketch軟件的命名規范
關于symbol 是什么,有什么用,怎么制作,可以參考夜雨y的這篇文章,這里主要介紹命名規范
1.組件的命名
組件的命名是要用英文輸入法的 / 作為分割,如果一級為最小級,一般命名是三級/二級/一級。這里可以參考微信小程序的UI組件命名
小單位的組件,比如按鈕的命名順序:【模塊】-【形狀?】-【顏色?】-【狀態?】。(如圖:命名-04)
2.樣式的命名
1)圖層樣式的命名也是用英文輸入法的 / 用來分割父子級,命名規范:【模塊】-【顏色?】(如圖:命名-05)list/line則是父子級
2)文本的樣式命名規范:【字號】-【備注?】(如圖:命名-06)
第二項、組件共享?
1、先把做好組件庫保存
2.打開sketch-preferences-libraries-add library 添加保存的組件庫即可 (如圖:共享-01)
3.修改組件直接雙擊,點擊彈窗最右邊按鈕>>修改完組件庫保存>>在設計稿點擊紫色按鈕同步組件庫即可(如圖:共享-02,共享-03)
當然想要團隊合作更方便,可以借助藍湖這類的軟件,nans也是團隊合作,文件同步的有效工具。