Sketch 進階教程!利用Symbol 建立一套設計規範組件庫? 這是一篇 Sketch 進階教程,讓你學會利用 Symbol 建立一套設計規範組件庫。 文章目錄 寫在前面 基礎規範 圖標規範 組件規範 寫在後面 為保證更好地理解文章內容,你需要對以下知識點有一定的了解(部分內容已附註釋)。1. Text style 1 △ 圖片來自Sketch手冊在設計包含大量文本的界面時,許多圖層擁有相同的文本屬性。將它們保存為 Text Style,即可復用這些文本屬性,無需逐一設置。Text Style 用於設置文字規範,涵蓋字體、字型大小、字重、顏色、字間距、行高2 、段間距等內容。 1 Text Style:https://sketchapp.com/docs/text/text-styles2 行高:參考知乎專欄《聊一聊 Sketch 與 iOS 文字的行高》2. Layer style 3 △ 圖片來自Sketch手冊將一組風格元素保存為 Layer Style,這些元素便可復用在文檔中的任何圖層。Layer Style 用於製作顏色規範,涵蓋填充顏色、描邊顏色、內外陰影、模糊效果等內容。 3 Layer Style:https://sketchapp.com/docs/styling/shared-styles 3. Symbol ? △ 圖片來自Sketch手冊作為 Sketch 的一項主打功能,Symbol 可以在畫板、頁面甚至其他 Sketch 文件中復用。Sketch 52 後,新功能令 Symbol 更加靈活化、輕量化。 可復用:支持畫板、頁面、多個文檔間的復用 可嵌套:Symbol 內可以嵌套多個 Symbol 可替換:Symbol 可替換為同組的其他 Symbol △ Symbol替換 ? Symbol:https://sketchapp.com/docs/symbols4. 英文命名之所以使用英文命名組件,有以下幾點原因: 方便設計師後期修改、整理文件 團隊內部易達成共識,方便協作 節約開發成本,減少不必要的溝通與重新切圖情況 5. 組件庫的構建思路建立組件庫之前,先來談談構建思路:解構、拆分、重構。「 解構 」通用類設計規範包含:基礎規範、圖標規範、組件規範,第一步,將這三類規範一一解構。例:基礎規範解構為文字規範、顏色規範、布局規範…「 拆分 」將解構後的規範拆分為最基本的元素 Symbol,基礎規範與圖標規範到這一步就完成了。例:文字規範中,拆分為標題、副標題、正文、輔助文字、標籤文字…「 重構 」 重構或稱為 Symbol 嵌套? 。用於製作組件規範,將拆分後的元素 Symbol 組合為模塊 Symbol,再將模塊 Symbol 組合為組件 Symbol。? Symbol嵌套:https://sketchapp.com/docs/symbols/nested-symbols6. 利用Symbol組件庫建立設計規範其實,一套優秀的Symbol組件庫 = 一套簡潔易用的設計規範。組件庫中不僅涵蓋了常用組件,同時也包含 Text Style 與 Layer Style,三者共同組成了一套設計規範。先來看看優秀的 Symbol 組件庫(常用組件規範)是什麼樣子的: 圖示內容為 Ant Design 團隊出品的 Web 端組件庫? ,使用 Symbol Manager 插件預覽。? Ant.Design.Components.Beta.3.10.5.sketch:https://ant.design/docs/spec/download-cn 根據上文的思路,我們將基礎規範、圖標規範、組件規範解構並將部分拆分為基礎元素,得出以下內容: 基礎規範 1. 文字規範(創建為Text Style) ? 標題(Titile) ? 副標題(Subtitile) ? 正文(Body) ? 次要文字(Secondary) ? 標籤文字(Tags) 2. 顏色規範(創建為Layer Style) ? 主色調(Primary)包含主色調的類似色,用做不同狀態 ? 功能色(Fuction)成功、失敗、警示、不可用等狀態的顏色 ? 漸變色(Gradients) ? 背景色(Background) ? 字體顏色(Text) 3. 布局規範 ? 分割線(Dividers) ? …… 4. 標籤規範? ……5. 其他樣式 ? 圓角規範(Radius) ? 陰影規範(Shadows) ? …… 基礎規範中的主要內容為文字規範與顏色規範,將文字規範中的元素創建為 Text Style,顏色規範中的元素分類後創建為 Layer Style,其他元素根據不同情況進行調整即可。 圖標規範 圖標規範中,可根據圖標尺寸、業務場景、圖標功能等進行層級區分,筆者根據圖標尺寸來區分層級(暫不考慮最小可交互區域): ? 48px(Tab欄圖標、金剛區圖標、吸底按鈕圖標等) ? 40px(使用場景:標題圖標、個人中心列表圖標等) ? 30px(使用場景:輔助圖標) 在製作圖標規範時,需要根據設計師自身情況作出相應調整。但在設計圖標時,以下幾點是共通的:「 構成簡單 」根據簡潔法則我們知道,簡潔圖形的識別需要用戶最少的認知和努力。對於通用規範中的圖標來說,儘可能的簡潔以保證用戶的辨識度。當然,像 TabBar、金剛區等特殊區域的圖標,需要我們在工作中單獨設計。「 視覺尺寸統一 」 使用圖標盒子作為設計時的參照,保證整套圖標在視覺大小上的統一。當然圖標盒子並不是一個定死的數值,日常工作中需要根據圖標形狀進行微調。 「 像素對齊 」 對齊像素網格,路徑錨點的位置使用整數,避免虛邊情況的發生。在 Sketch 中,可以通過打開像素模式或使用自動對齊像素功能來進行像素對齊。「 使用偶數 」適配原因,尤其在@2x的情況下作圖時需格外注意。 「 矢量形狀 」使用 Convert to Outlines 與布爾運算功能,將圖標轉化為矢量形狀。TIPS:在矢量形狀上套用 Layer Style 中的任意顏色,在之後的 Symbol 嵌套中就可以更改圖標的顏色了。 組件規範 由於篇幅有限,本文只介紹通用類組件,解構並歸類後,得出以下內容(設計師可以根據項目情況自行補充) 但僅僅解構分類是不夠的,想要完成一整套 Symbol 組件庫,還需要將解構後的組件拆分為單獨的元素 Symbol,以方便嵌套並組成 Symbol 組件。篇幅有限,我們通過 List 組件舉例分析: 同上文製作 Symbol 組件庫的思路一樣,對於單一組件,同樣運用解構 → 拆分 → 重構的思路。不同的是,單一組件需要考慮到組件的不同形式 / 狀態。「 解構為模塊 」將 List 模塊化解構,得到 背景 Background、分割線 Divider、左側內容 Left、右側內容 Right「 拆分為元素 」左、右兩側內容還可以繼續拆分,得到 圖標 Icon、標題 Title、文字 Text、箭頭 Arrow「 添加其他形式 / 狀態 」僅涵蓋一種形式 / 狀態並不能稱之為完整的規範,我們需要考慮到List常見的所有形式 如圖,分割線的各種狀態,左右側內容的各種形式都需要考慮在內。對比前文拆分的結果,去除重複項,你會發現多出了一個開關 Switch 元素(Arrow、Check屬於Icon類),把它加入列表,就得到了構成 List 組件的所有元素 Symbol。 是不是有點眼熟?沒錯,這些元素 Symbol 正是基礎規範與圖標規範中的內容。「 Symbol嵌套(重構)」 反向進行上面三步的思路,進行 Symbol 嵌套:首先將最基礎的元素 Symbol 組合成模塊化 Symbol,然後將模塊化 Symbol 組合成為 List 組件。由於使用了 Symbol 嵌套,所以最後組合而成的 List 組件可以在右側的 Overrides 中進行各個模塊與元素的設置。重複利用解構為模塊、拆分為元素、添加狀態/形式、重構(元素 Symbol → 模塊 Symbol → 組件 Symbol)這 4 個步驟,完成組件規範列表中的所有組件,這套利用了 Symbol 功能製作的通用規範組件庫就完成了。 寫在後面 1. 如何將Symbol組件庫運用在設計稿中? 將製作好的 Symbol 組件庫保存為 .sketch 文件,在 Sketch 上方菜單中找到:Sketch—Preferences—Libraries 中,點擊下方 Add Library… 按鈕,將 .sketch 文件導入即可。2. 如何規範化管理Symbol組件庫? 當 Symbol 名稱中存在 「 / 」 符號時,Sketch 會將他們作為組獨立對待。舉個栗子:兩個 Symbol,一個名為 「 Button / normal 」,另一個名為 「 Button / pressed 」,這兩個 Symbol 將被歸類在 Buttom 分組中。當然,也可以使用 Sketch Manager? 插件來幫助你規範化管理你的 Symbol。 ? Symbols Manager插件:http://sketch.cm/plugins/114相對於 Sketch 那死板的修改名稱管理 Symbol 組件庫的方法,Symbols Manager插件能夠以類似Finder的形式來幫助你查看、修改、刪除你的組件庫。當然,9.99 刀買斷的價格、加上只有搭梯子才能正常使用的限制也許會讓你望而卻步。然而我們相信,正版意識、英文化組件管理、以及為優秀內容付費的概念會慢慢滲透到每個設計師的潛意識當中。3. 如何令Symbol組件更加靈活? Resizing 智能縮放是 Sketch 39 中加入的新功能,有多智能呢?看看 Sketch 官方的答案 https://sketchapp.com/docs/layer-basics/constraints如何在 Symbol 組件庫中運用呢?舉個栗子: 將 Tabbar 解構,我們得到 N 個相同的 Tab 模塊;然後將 Tab 模塊拆分,得到 圖標 Icon、文字 Text、分割線 Divider、背景 Background 4 個元素。 分別設置這 4 個元素的 Resizing 屬性,Tab 模塊即可做到橫向自由拉伸且不打亂布局。通過橫向拉伸尺寸,就可以得到 3-5 個 Tab 的 Tabbar 了。 可運用 Resizing 的類似組件還有很多,在製作 Symbol 組件庫中稍加留意,就能讓你的 Symbol 更加的靈活易用。4. Symbol的拓展使用Humaaans 是由 Pablo Stanley 提供的可免費用於商業或個人的插畫圖庫。你可以替換人物的髮型、膚色、上衣、褲子、鞋子…也可以旋轉各元素的方向,再添加一點氛圍,它便是能適用於各種場合的插圖。 △ 內容來自網路,官網鏈接 https://www.humaaans.com/ 推薦閱讀: 相关文章 {{#data}} {{title}} {{/data}}