UI設計的團隊合作經驗總結

做什么:設計團隊的協同

為什么:無規矩不成方圓;確保設計團隊的同步,方便團隊內部工作的交接

什么時候:在設計開始之前

誰做:設計同學

在團隊合作的過程中,同步是最重要的也是基礎的知識。第一次和其他小伙伴一起完成工作,總結了幾項同步的知識點和方法。

第一項、命名規范

命名的規范包括了畫板、圖標和組建。

一、畫板的命名規范

在設計過程中,為了方便技術人員查看文檔和設計稿,我們在畫板命名時,以需求文檔里的模塊名稱為準。當需求文檔的劃分不夠細致,在需求文檔的標題后面+橫線+名稱,(如圖:命名-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也是團隊合作,文件同步的有效工具。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,041評論 25 708
  • 中小企業財務物流一體化MES系統 企業管理系統 項目的實施要求在較短的時間內,完成系統的快速上線,從而幫助企業規范...
    dw456閱讀 459評論 0 1
  • 相貌能夠決定一切嗎?這部電影《奇跡男孩》會告訴我們。 這部電影講的是一個天生殘疾的男孩,經過27次手術,但留...
    王子毅Theone閱讀 346評論 0 1
  • 見應老師在群里忙著給大伙兒做賀卡,我就想這項技能我得會,這樣可以美化和激活自己還有身邊人的生活,但是在百度里搜了很...
    雪紛閱讀 406評論 15 13
  • 舒婷的《致橡樹》看起來像植物園攻略,其實是說愛情的。 最近網上有人以花做比,描述愛情的分寸。大多數...
    Kristy洛洛薇閱讀 671評論 0 0