sketch如何通過Symbol和library提升協作效率

語言: CN / TW / HK

一.為什麼要做組件庫

1.symbol和library分別是什麼?

相信很多執行層的小夥伴對symbol不會太陌生,symbol(組件)是sketch中自帶的一項功能,這個功能非常強大,可以對某設計模塊建立一個組件,建成後可替換裏面的元素,同時模塊佈局保持不變,只變內容,設計師通過高效複用組件可快速完成設計。

library是指由多個symbol組成的庫,是一個sketch源文件,這個源文件裏面包括了這個產品的所有常用組件,比如WeChat.library,Ios.library等

symbol是僅適用於文檔內部提升效率。如果設計團隊只有你一個人,只需要用symbol即可提升工作效率,而library則是適用於不同文檔,不同設計師間的協作,如果團隊人數超過2人(包括2人)負責同一個產品,還是建議通過library進行協作,因為如果產品需要更新某些組件的參數,可以在library中完成更新,即可完成全局更新。比如某品牌的主色是綠色,但是基本上每年或每兩年,這個綠色的色值都會有點微調,這種情況直接在library中把綠色的色值調整好,打開本地設計稿時,會在右上角收到一條更新通知,點開消息,會有窗口告知你library做了哪些更新,有新舊的對比圖,讓你確認是否更新,只要點了更新,這個設計稿裏所有原有綠色都會得到更新。

2.組件庫的作用

1.2.1.於個人,養成好的習慣,是合作的加分項

對於個人來説,學會用組件思維做設計,你的設計稿會非常整潔,不會再出來如下圖(1)這樣的文件命名,因為創建組件需要你對每個元素進行正確命名。

我曾經對接過一個設計專家,他的文件習慣非常差,文件裏從來沒有用過組件,也從來不對編組命名,可能有的命名也只是臨時為了作區分而命名,而且每次的過程稿都在同一個文件裏,過程稿是隱藏的,每次發給我的源文件都非常的大,一開始我不太明白為什麼每次打開他的文件都這麼卡,後來才發現他所有過程稿都在,而且嵌套在非常深的圖層編組裏,光是整理他的文件已經佔用我非常多的時間,試想一下,如果有兩個合作伙伴,一個設計稿非常整潔,一個設計稿非常亂,你更願意與誰合作?

1.2.2.於設計本身,查找快捷,全局修改,複用方便

查找方便:因為創建組件是通過原子理論進行的,所以組件庫裏圖層只要是可替換的,都會被做成組件,而skethc現在已經有組件管理功能,只要選擇左上角的控件畫布即可看到所有的控件,當然前提是命名規範的情況下,控件會進行自動分類。 

全局修改:這樣就可以通過篩選找到想找的控件進行修改。當然這裏如果是用library進行協作,還需要點開本地文件確認同步全局修改。

複用方便:當有新的需求進來時,會優先考慮現有的組件是否適用,如果適用可直接通過複製粘貼symbol進行復用,如果是團隊用了library協作,可直接通過”置入——某library“添加組件模塊。

1.2.3.於開發人員,減少開發時間,提升開發效率

開發完成一套組件庫的代碼後,往後如果有迭代需求,設計稿裏只要複用到組件的,開發人員可以複用相關代碼,而無需再重新編寫,從而減少開發時間,提升效率。

二.什麼時候做組件庫

2.1. 何時創建組件庫

組件庫會分兩部分完成

第一部分是App做第一批設計界面時,若設計師本身經驗較豐富,可邊做設計邊封裝,若設計的過程中,經常調整,我會建議你等第一批設計稿確認後(這裏説的確認能進入開發的設計稿,而且不是設計內部確認)再開始整理和封裝,因為進入開發後設計不再做大修改。如若這時發生大修改,整個開發時間會被拉長,影響整體工作流程。

此時的組件庫只是基於現有的設計稿,所以還不完善。而第二部分是做完App所有界面時,即可進行完善,形成完整的產品組件庫,為後續需求做協作準備。

以上説的兩部分是比較重要的兩部分,當然每個公司的工作流程都會有些差異,所以在完成第一步封裝後,可以根據產品進度,逐步做補充和完善,直到1.0的完成。

2.2. 組件庫包含哪些內容

組件庫的內容通常會根據產品的複雜程度會有一定的區別,以下是我整理出的一般產品都會含有的基礎部分

常規:文字,顏色,icon,按紐

導航:標籤頁,導航欄,側邊導航,標籤欄,氣泡彈出框,宮格等

數據錄入:表單,輸入框,選擇框,上拉菜單,下拉菜單,時間選擇器,日曆選擇器,步進器等

數據展示:單元格,彈窗,開關,列表,標籤,輪播,進度條,倒計時,空狀態等

反饋:對話框dialog,輕提示toast,通知欄,遮罩層,加載,下拉刷新等

以上是一個app常會用到的組件內容,可以根據自己產品的複雜程度進行加減。通常只要是能複用兩次以上的,都建議創建組件。

三.怎麼做組件庫

2.1. 瞭解命名,規範命名

組件庫是基於原子思維去創建的,那我們就要找到組件裏的所有最小的原子分別是什麼?最小的原子是文字,顏色,icon,按紐,圖片等,基本上界面中的模塊都是由這幾種原子組成,比如列表是由文字+icon,或者圖片+文字+icon組成等等,這裏就不一一舉例了,大家可以去看一下自己的產品的模塊對照一下便知。

在創建組件庫之前,我們先需要了解組件的命名規則,因為sketch裏會根據 “/” 斜槓自動分類文件層級,所以在命名的時,我們可以充分利用這個特性把組件做分類。

以下是我本人常用的命名方式,大家可以根據自己的產品特性做參考,命名本身沒有固定標準,主要目的是為了區分及查找方便,便於管理 下面是有讚的規範文檔中的命名,我截了幾張給大家參考下

2.2. 如何創建組件

在創建模塊組件時,我們應該先了解文本樣式,顏色變量,圖層樣式,還有“正在調整尺寸resizing”這些功能點用法,方便後續進行模塊封裝。

2.2.1文本樣式

案例一:如何創建文本樣式?如下圖

  • 1. 新建一行文本
  • 2. 點擊右側面板中的字符樣式“新建”
  • 3. 輸入命名,以“/”分類
  • 4. 在當前文檔中即可看到所有文件樣式按“/”分類,查看非常方便  

  • 上圖是文本樣式創建的流程,下面解釋一下“ 更新,解綁,更多 ”這三個功能用法。

  • 更新功能: 字符樣式是包括了這個文本的字符/樣式/字符選項,也就是下圖紅框裏的所有信息,所以只要更改了下圖中的任何一個參數,這個字符樣式命名處就會帶星號,如下圖,“更新”按紐變亮,這時如果點“更新”就會把原有的字符樣式覆蓋掉,參數也會以更改後的為準,如果點新建,會新增一個字符樣式,無論是新建還是更新,都別忘了命名也需同步修改,通常我會用這個方法一直新增新的字符樣式,這樣就命名時就不需要打很多字。

  • 解綁功能: 當你選擇了使用了字符樣式的文本,如果不想使用字符樣式,可以點解綁,重新編輯即可。

    更多功能: 點開“更多”,有“重設樣式”和“為樣式重命名”兩個功能,為“樣式重命名”的字面意思都懂了。“重設樣式”是指當 你使用了一種字符樣式,同時然後改了很多參數後,可能不記得了改了哪些,因為是命名處只加了個星號,不會反應你改了哪些,然後這時你想回到字符樣式再重新調參數,可以點重設樣式就回到原來的字符樣式。所以重設樣式相當於重置,只是回到的起點的是原本的”字符樣式“。

2.2.2 圖層樣式:

首先我們先了解一下圖層樣式包含哪些內容,如下圖,主要包含填充/邊框/陰影/內陰影/模糊五個模塊的內容,大家可以試着點一下樣式右邊的收起button,就知道樣式裏包括的內容了,在界面上操作一遍會更清晰點。

案例二:下面我來看試着創新一個卡片的陰影圖層樣式,如下圖

  • 1. 新建一個距形,調整好卡片陰影數值,這裏的顏色都可以使用顏色變量
  • 2. 點擊“新建”,並對圖層樣式用“/”進行命名,這裏可根據自己情況命名
  • 3. 多創建幾個後,在當前文檔即可看到所有的分類卡片會按“/”分類展示

更新/解綁/更多三個功能和字符樣式是差不多的,大家可以自己多操作一下,比看這個教程更容易理解。

2.2.3 顏色變量

顏色變量是sketch 69之後加的功能,所以如果sketch的版本比較低的需要升級才可以用這個功能哦。

案例三:下圖是在畫布中如何創建顏色的流程

  • 1. 首先,新建一個有顏色的形狀,選好顏色
  • 2. 點擊創建顏色變量
  • 3. 對顏色命名,用“/”做分層管理,點創建即可完成
  • 4. 點顏色色塊處,可以看到新建的顏色分類,不過這裏沒有按“/”做分類,只是以最後一個“/”做了簡單分類
  • 5. 點顏色變量圖——當前文檔,即可看到所有的“/”

目前顏色變量可以應用在填充/邊框/陰影/內陰影上,另外還有文本顏色都可以用顏色變量(如下圖)所以在創建組件庫上,只要涉及到顏色的,都可以直接調用顏色變量,真的極方便。

但目前變色變量只能針對純色值,漸變色還不能創建,希望後來的版本開發者可以把這個功能考慮進去。

以上是對“文本樣式,顏色變量,圖層樣式”三個功能點做了詳細的教程講解,這三個功能還可以統一在組件界面裏進行統一管理。如下圖

點擊左上角的組件圖標,進行組件視圖管理界面,這裏可以含概了“控件/文本樣式/圖層樣式/顏色變量四個模塊的內容,可點擊不同可以查看和管理。

在這裏可以對內容進行”置入/複製/編組/重命名/刪除/編輯參數”等操作,而且這裏編組可以直接進行框選,然後拖到右邊的層級列表中,這樣的整理方式很符合我們平時整理文件時的操作。這裏的操作就不一一講解了,大家可以多操作就明白了

2.2.4 正在調整尺寸(Resizing)

接下來我們看下“正在調整尺寸(resizing)”的功能,這個功能可以讓組件在不同界面裏進行適配,只要輕拉文件夾或者畫板即可。

“靠邊固定”是指圖層基於文件夾/畫板的位置

“固定尺寸”是指在適配拉伸過程中,圖層尺寸是否跟着拉伸變化

“預覽”是根據你設置的參數,可以看到適配的效果

案例四:設置一個圖文列表適配不同的屏幕尺寸,如何做呢?

  • 1. 首先設計好圖文列表的樣式
  • 2. 打成組,這裏要注意,“正在調整尺寸(resizing)”這個功能只有在組裏或者畫板中才可以生效,所以一定要Carl+G
  • 3. 編組再設置參數,
  • 4. 設置參數,參數設置如下圖所示,
  • 5. 設置完成之後,通過拉動組的寬度就可以輕鬆實現自適應。

  • 通過以上案例,可以發現“正在調整尺寸(resizing)”屬於被動佈局,即需要設置完所有參數之後,手動拖編組或者是畫板才可以實現自適應。

  • 2.2.5 創建組件

    創建組件方法很簡單,選擇圖層或文件夾,然後點擊“創建控件”,這時會彈出一個彈窗,可以對組件命名,還可以設置他的佈局。

  • 組件支持的佈局有7種,x軸上的“向右/居中/向左”佈局,y軸上的“向下/居中/向下”佈局,還一有種是無佈局。所以,組件佈局只支持x軸或者y軸上的一種佈局,不能同時支持兩個方向的佈局。

    案例五:下面我們來製作一個按紐:按紐根據按紐文案長度居中自動佈局

    • 1.首先把橢圓和文案命名編組
    • 2.設置“大號按紐”字符對齊方式為自動寬度+居中對齊
    • 3.點擊創建組件,命名,組件佈局選擇“水平居中佈局”
    • 4.這時在畫布界面的右側覆蓋層可以修改文案,即可自動佈局
  • 注意:文字的對齊方式,需要與組件的佈局方向一致。

同樣的方法可以試着做選項卡等,也可用組件套組件的方法做多個選項卡並實在自動佈局

如果需要按紐有最短的長度,可以在組件界面或者組件管理器中去設置最窄寬度(如下圖),同時如果想修改佈局也可以在這裏修改

2.2.6 正在調整尺寸(Resizing)與組件的結合運用

通過上面的介紹,正在調整尺寸屬於被動佈局,需要手動去拖動才會實在自適應,而組件佈局屬於主動佈局,會在組件元素變化時,仍然保持最開始設置的參數。那下面我們來看看這兩者結合案例。

案例六:做一個上面圖文列表+按紐的自適應,如下圖

  • 1. 首先在案例四基礎上加一個按紐,並把按紐編組加入案例四的編組裏
  • 2. 按紐的文案對齊方式調整為“自動寬度+居右”
  • 3. 按紐創建組件,佈局為“水平-居右”
  • 4. 設置按紐“正在調整尺寸”如下圖

  • 拖動整個編組區域即可得到以下自適應效果
  • 2.2.7 創建library

    如果是一個設計,可以把組件庫放置於本地文件夾中,如果是多個設計師協作,可以把組件庫存在雲端,可以實現多人協作。瞭解以上功能並創建好產品的組件庫之後,下面我們來看看如何添加library。

    首選項——組件庫——添加組件庫,即可添加完成。


  • 添加完成之後,打開sketch,置入——控件——Weui即可看到添加的微信小程序控件,

隨意添加一個控件,看到如下圖側邊欄中的控件標識與平時的創建組件不一樣 這裏可以看到library和正常組件icon是有區別的

四.總結

以上關於組件及library的協作功能已經基本介紹完了,總結大概是以下幾點需要弄清楚

1.明確symbol和library的區別,瞭解組件庫的作用

2.明確組件庫的內容及創建時間

3.定義組件的命名規範,熟練掌握文本樣式,顏色變量,圖層樣式,resizing的功能使用,學會結合resizing功能,創建組件和library,方便團隊協作。

行動:根據本文所教的方法,嘗試把自己的產品的規範命名重新整理,並創建成可複用的組件庫,在團隊裏進行復用。

附件上傳了有讚的組件庫規範,可以下載參考一下

Powered by Froala Editor