「後台產品」 UX & UI 設計總結（下）- Style Guide 製作

下篇：主要分享 Style Guide 製作的相關內容——原理、方法、推薦的 sketch plugins。

上篇鏈接：「後台產品」 UX & UI 設計總結（上）

Style Guide 製作

設計規範，就是一個管理產品每個組件的、不斷更新的規則。

Atom design（原子設計）

首先介紹一個概念：

原子設計，是分層級、有條理地創建設計系統的方法，由五個階段組成：

1. Atoms（原子）
2. Molecules（分子）
3. Organisms（組織）
4. Templates（模板）
5. Pages（頁面）

（Atomic Design Methodology | Atomic Design by Brad Frost）

「原子設計」借用化學概念，說明設計系統元素的組成方式。和「組件化設計」原理差不多。

就是將各個元素組件定義好，然後用組件一步步拼成最終頁面，以保持設計的整體統一。

（《 Atomic Design》The Atomic Workflow | by ：Brad Frost）

• Atoms（原子）界面中小到無法再拆分的元素，是建造建築的磚塊。比如： buttons, links, inputs, drop-downs 等。每一種都附帶所有狀態，如： hover, focus and disabled 的按鈕。此外，色板、字體這些內容，也算「原子」。

(《Atomic Design Methodology 》 Atomic Design， by ：Brad Frost)

• Molecules（分子）是原子的組合。如：input組件。

(《Atomic Design Methodology 》 Atomic Design， by ：Brad Frost)

• Organisms（組織）是分子組合成的頁面中的獨立部分。相對複雜一點。如：導航欄、卡片。

(《Atomic Design Methodology 》 Atomic Design， by ：Brad Frost)

• Templates（模板）將組織放在頁面布局中，重點是確定頁面的結構。而非具體內容。這個階段需要確定的是圖片大小、標題長度、正文文字面積大小，等。

你可以在不知道具體內容的情況下仍創造良好體驗，然而不可能在不確定頁面結構的情況下創造良好體驗。

良好體驗，是頁面的骨架結構決定的，而非具體內容。

——Mark Boulton

(《Atomic Design Methodology 》 Atomic Design， by ：Brad Frost)

• Pages（頁面）這是一個往骨頭上加肉的過程，要顯示頁面的最終真實樣子。Pages是檢驗 design system 會否合理的有效方式。

舉個例子：購物車有東西和沒東西的兩種情況；購物車1個東西和10個東西時的情況；標題40字和340字的情況。——這些不同情況的pages也許都是用同一個template，但最終頁面效果都有差別。這些差別會反過來檢驗之前設定的原子、分子、組織、模板是否合理、有彈性。

(《Atomic Design Methodology 》 Atomic Design， by ：Brad Frost)

Style Guide 製作步驟

Style Guide 就是按照 Atom Design 的理論，一步步定義從簡單到複雜的內容，最終成頁面。

什麼時候適合建立 Style Guide？答案是：Now。

（The basic structure of a Design System，from：《Design Systems Sprint 1: The Interface Inventory》，by：Marcin Trede）

▲ 建立好文件夾（我是認真的）

命好名，分好類。將所有文件有組織有紀律地放好。

（《Setup a design system》by：Marco Lopes）

▲ 定義樣式

• 顏色

推薦工具：Coolors.co

一般至少選5個顏色：

• Primary Color (主題色)（有時還需要一個Secondary color）
• Warning Color (警示色)
• Success Color (成功色)
• Danger Color (危險色)
• Black Color (黑色)

通常我們至少還需要幾種灰色：

• 最淺灰：用做背景。
• 次淺灰：用作分割線 / 邊界線 / 斜線等。
• 中灰：用作次標題、輔助文字。
• 深灰：用作主標題、正文、深色背景。

（《How to construct a design system》，by：Colm Tuite ）

• 陰影

一般需要4種陰影模式：

• 微微小陰影：表示一些交互組件z軸升高，增加可用性。
• 明顯一點的陰影：表示組件的 hover 狀態。
• 一個強烈點的陰影：表達 dropdowns / popovers 等組件。
• 遠一些的陰影：用於彈窗。

（《How to construct a design system》，by：Colm Tuite ）

• 圓角

一般需要這幾種圓角大小：

• 小圓角：用於極小組件，如checkbox，tags，lables。
• 中圓角：用於按鈕、輸入框，等。
• 大圓角：用於卡片，彈窗，等大組件。

（《How to construct a design system》，by：Colm Tuite ）

• 間距

比如，頭像和名字的間距、dropdown和輸入框的間距……

這些間距最好也都是8px的倍數。保持整個產品的統一。

我們也可以根據這些間距，來定義一些組件的高度、寬度。

（《How to construct a design system》，by：Colm Tuite ）

元素建立示例：

（《Making Stylesheets in Sketch》，by：Jon Moore）

• 選擇合適的字體

選配合自己產品風格的字體。用 不同大小、字重表現視覺層級。

所選字體要滿足：

• 易讀性：長時間讀起來不累。
• 可縮放：在很大、很小時，仍易讀。
• 豐富性：至少有2種字重。

一般需要這幾種字體：

• 默認字體：整個產品的標準文字。（一般瀏覽器默認字體是16px，）
• 大一點的文字：用於大一點的正文。
• 更大的文字，用於次標題。
• 再大點，用於標題。
• 特大字，用於每個部分的標題。
• 超大字，也許用於價格，舉個例子。
• 小字，用於更小的正文，輸入提示、次級輔助文字。

此外，還需要考慮字體的行高、字間距。

（《How to construct a design system》，by：Colm Tuite ）

每種型號的文字，都需要設置一下幾種狀態：

• Default （默認 ）：黑+白，透明度80-100%。
• Secondary（次級）：黑+白，透明度50-70%。
• Disabled（不可點）：黑+白，透明度20-40%。
• Accent（帶顏色的）：主題色+功能色。

（所有文字樣式列舉，《Making Stylesheets in Sketch》，by：Jon Moore）

若有不同對齊排版需求，也可將不同對齊方式的文本設置成不同 style。

命名方式：Font name/Alignment/Color

（from：Text system mastery with shared styles）

將所有設置好樣式、命好名的 text layer 自動轉變成 text style，可以使用這個插件sketch styles generator. 都設置好，就可以按下圖這樣使用style了。

（from：Text system mastery with shared styles）

還可以使用Shared Text Styles 導入或導出 text style。

• 設定柵格

目的：保持設計的一致性。

數值：一般用8px的倍數。（強烈推薦一款有用的插件： Nudg.it ，可以設置成以8px為單位移動。）

（《A Step-by-Step Guide for Starting a New App Design Project in Sketch》，by：Jon Moore）

柵格公式：(12 columns * Width) + (11 Gutters * Width) = Total Layout Width

Sketch里可直接設置柵格：View—Canvas—Layout Settings…

（按照柵格布局排版，《Making Stylesheets in Sketch》，by：Jon Moore）

等到真正作圖的時候，轉換成高保真圖步驟：

• 把所有文件，都歸類到正確的文件夾里。
• 只用色板里有的顏色。
• 只用規定好的字體樣式。
• 遵循柵格排版。
• 做每一張新頁面前，要先擺出大框架之後再細化。
• 利用每定義好的「原子」、「分子」，組合成「組織」「模板」，最後輸出「頁面」。

（最開始先擺出元素大致布局，別糾結細節。《A Step-by-Step Guide for Starting a New App Design Project in Sketch》，by：Jon Moore）

組件舉例：下圖的按鈕「分子」，顏色、字體、尺寸、陰影、圓角，全部都是用的 Style Guide 預先定義好的「原子」。

（《How to construct a design system》，by：Colm Tuite ）

製作感受

▲ 規範的製作的必要性：

• 能讓產品整體元素的統一，一目了然，有邏輯性。便於日後維護、整體修改。
• 方便前端小夥伴們製作組件庫。
• 如果有第三方介入產品開發，為他們提供一份規範，保證產品統一。

▲ 設計vs語言學：

一個很強烈的感覺，設計和語言學有太多共通之處。

（來源：自繪）

▲ 建立的時間點：

個人感覺宜早不宜晚。最好開始視覺稿時，就開始製作Style Guide。做原型、勾草圖時，就開始想風格。

風格有了方向之後，在項目開始，就將 Style Guide 和 Symol 結合著一起製作。邊製作，邊完善。

好處：

• 建立好的Symbol就可以直接拖來用了；省時。
• 修改時，也可以改一個symbol，所有頁面的組建都一起被修改。省力。

▲ 需要注意的點：

• 常見問題：前後矛盾。1個月前的頁面菜單，hover時是綠色A；1個月後的，就用成了綠色B。
• 解決辦法：一邊做一邊建立 Style Guide，每增加一種新組件，就拖進 Style Guide里，分門別類擺好。等做完，所有組件擺一起時，就很容易發現不統一的地方。

• 常見問題：層級錯亂。隨著產品體量的逐漸增大，可能隨時需要增加新元素。比如按鈕形式，加著加著，可能就無形中弄出了許多種按鈕，層級也越來越亂，每種形式的交互方式可能還互相矛盾。
• 解決辦法：隨做隨整理每種元素的層級關係。像按鈕，層級+狀態都要展示。並附上每個層級的定義、交互方式的簡要說明。要不做著做著容易自由發揮。再比如，不同深度的灰色，也最好在旁邊簡要表明主要用於什麼地方，要不5種看上去差不多的灰色，每次選之前都要回憶回憶，不如看說明來得快。這樣也有助於前後統一。

• 常見問題：修改不便。用嵌套組建建立symbol時，精細程度掌握不好，要麼太細緻，要麼太粗獷。導致日後修改時，還是得一個一個修改symbol。
• 解決辦法：Style Guide 和 Symbol 配套一起建立。每添加一個symbol之前都要好好想想，這部分日後可能會怎麼修改，如何用最少的symbol，滿足日後的修改。Symbol製作的方式和精細程度，和團隊項目、工作方式有關。需要經驗積累以不斷完善 。更好的方法，我也還在探索中。此外，製作時還要想好哪些元素是重複使用的，哪些是不重複的。

總的來講，感覺，Style Guide 的建立過程，需要大量嚴密思考。經常一個地方改進了地方卻發現和另一個地方矛盾了。

但如果建立科學，會大大加快日後的工作效率。

（《Setup a design system》，by：Marco Lopes）

幾個不錯的style guide 參考網站：

?? Material Design

??Ant design

?? Carbon Design System

Grid System

Lightning Design System

Lonely planet Travel Guides and Travel Information

Bootstrap

Teambition

Atlassian Design

UIkit

Harmony Design System

Vue-Blu

視覺規範匯總

Style Guide 參考文章：

• ??《Atomic Design》（by：Brad Frost）系統講解「原子設計」原理方法。
• 《How we』re using Component Based Design》（by：Lewis+Humphreys）舉例說明「原子設計」的步驟。
• ??《Setup a design system》（by：Marco Lopes）這篇講得超全面！幾乎囊括所有相關內容。
• ??《A Step-by-Step Guide for Starting a New App Design Project in Sketch》（by：Jon Moore）
• ??《How to construct a design system》（by：Colm Tuite）
• ??《Setting Up a Design System》（by：Bunin，2017.9.8）全面講解了style guide 建立的步驟、需要搭建的內容。
• ??《Text System Mastery with Shared Styles》（（by：Bunin，2017.8.21）專門講了 style guide 中的文字部分。
• 《5 THINGS TO DO BEFORE STARTING YOUR NEXT DESIGN FILE IN SKETCH》（by：Jon Moore）：Jon2016年的文章，沒有前幾篇的深入，可做查缺補漏。
• ??《Making Stylesheets in Sketch》（by：Jon Moore）：從操作層面上講如何建立一套完善的視覺樣式，方法實用！
• ??《How to create a FRONT END FRAMEWORK with Sketch》（by：Seba Mantel）：講了Style Guide需要放那幾部分，以及實用的製作方法、技巧。非常實用！
• 《The unicorn workflow: design to code with Atomic Design principles and Sketch》 - InVision Blog
• 《How we』re using Component Based Design》by：Lewis+Humphreys
• ??《在整理設計規範中變強 》（by：雪糕 @ISUX）
• 《化整為零！關於組件化設計升級的一些思考 》（by：鴻影）
• 《我在製作 Sketch 組件庫時學到了一些東西 》（by：Beforweb）
• 《Design Principles: Introduction To Hierarchy》（by： Kent Mundleh）：科普下都可以從哪幾方面表現視覺層級：顏色（顏色是潛意識最直接的交流）、大小（最重要的最大）、排列（重要的元素放中間，或單獨不規則排列）形狀（可以直接賦予元素性格or意義，比如like的心形），動效（一組元素中，動的那個立刻吸引注意力），音效。
• 《Design principle: Consistency 》（by：Anton NikolovFollow）：建立 Style Guide 首先要理解產品設計的統一性。這篇文章就論述了保持統一性的好處，哪些方面需要注意，以及迭代時如何保持統一性。最後提到：如何在保持同一性與產品迭代之間保持平衡？迭代一定要一點點迭代，不要一次迭代太劇烈（keep bending, not break）。 改變的關鍵，是了解用戶，了解他們想要的需求之後，再做決定。Create consistency to improve usability and to create delight by reducing unwanted surprises.

Sketch技巧

嵌套組建

嵌套組件可以直接應用「原子設計」理論。

先將「原子」製作成 Symbol，再將「原子 Symbol」 嵌套成「分子 Symbol」，在組合成「組織 Symbol」最後逐步組合成模板、頁面。

Sketch 嵌套組件內的內容可以方便根據實際需求替換。舉個例子，效果如下：

（《This is, without a doubt, the coolest Sketch technique you』ll see all day》，by：Jon Moore）

拆分看每個list單元，都分成左邊圖層區那樣一列組成元素symbol。

（《This is, without a doubt, the coolest Sketch technique you』ll see all day》，by：Jon Moore）

先來單看頭像的 Symbol：是把每個狀態的頭像，分別建立symbol。注意滿足如下條件才能生效：

• 命名格式要統一成：Avatar/xxx，
• 尺寸大小要一致。

（《This is, without a doubt, the coolest Sketch technique you』ll see all day》，by：Jon Moore）

更換頭像時，就可以從2個製作好的symbol中選擇。

（《This is, without a doubt, the coolest Sketch technique you』ll see all day》，by：Jon Moore）

看到這，也許會產生一個疑問：那頭像圖片都是不同的，咋辦？

我嘗試著增加一層symbol——把頭像圖片也做成symbol，結果可以實現自由替換頭像圖片了。

首先，symbol的嵌套關係如下，將之前「Avatar/image」中的image，也做成symbol：

（來源：自繪）

然後回到page，選中一個帶頭像的list單元，右側就會顯示「choose image」——然後就可以自由選擇其他圖像了。

（來源：自繪）

不過有一個問題沒解決，就是圖像比例必須一致，否則會拉伸。:(

文字替換同理，把可選擇的文字樣式都做成尺寸一致的symbol。切換文字樣式時，可從列表中選擇，然後輸入不同文字內容。

（將文字分別製作成symbol。《This is, without a doubt, the coolest Sketch technique you』ll see all day》，by：Jon Moore）

這樣可以方便地更改文字樣式、輸入不同人名：

（《This is, without a doubt, the coolest Sketch technique you』ll see all day》，by：Jon Moore）

參考文章:

• ??《This is, without a doubt, the coolest Sketch technique you』ll see all day》（by：Jon Moore）：全面細緻講解嵌套組件製作方式。
• 《A Better Way to Make Buttons in Sketch 》（by：Jon Moore） ：專門講解按鈕的嵌套組件如何製作。但我實際感覺如果所有按鈕都做成一個組件，雖然symbol是簡單了。但比如，我想替換所有primary color 的按鈕顏色，就悲劇了。所以我覺得還是有必要把每一個狀態的按鈕，都建立一個symbol。這樣更方便批量更改。
• 《Creating a Button System with Nested Symbols on Sketch App》（by：Sketch Together @YouTube）：以按鈕為例，視頻就嵌套組件按鈕的製作。
• ??《Setting Up a Design System》：完整講述建立 style guide 的過程，有現成模板 Frames Design System 可供下載參考。（免費版可使用一部分）
• 《Text System Mastery with Shared Styles》專門講解style guide 中 文字系統的建立。

表格縮放

後台產品有數量龐大的表格，需要一個便捷的修改方法。

原始的表格縮放，一般會遇到以下問題：整體元素的寬度（比如☆）比例都被壓瘦了。

（《Resizing Tables with Sketch》，by：Reony TonneyckFollow）

如果只想讓整體寬度變化，五角星比例不變，每列文字的padding固定，怎麼辦？？？

隆重介紹：Sketch的Resizing功能~！

當選中一個group中的某個 layer/group 時，右上方菜單會出現一個 Resizing：

（《Resizing Tables with Sketch》，by：Reony TonneyckFollow）

它可以為選中元素，調整不同變換方式：

• Stretch（默認）：形狀、位置都隨著整體group的拉伸而改變。
• Pin to corner：保持最近邊距不變，形狀不變。（如果元素垂直/水平居中，那麼拉伸後仍然水平/垂直居中）
• Resize object：改變該元素尺寸，但相對位置不變。
• Float in place：元素尺寸不變，位置始終保持在變化大小的一個固定百分比處。

推薦一個2分鐘的視頻《Group and Symbol Resizing》（Sketch @YouTube ）：非常直觀到位地講了Resizing 的功能特點。

分別給表格中的每個元素設定好規則，如：

• 文字設置成 pin to corner, 可保證拉伸後距離表格左右間距恆定；
• 五角星設置成 float in place，可讓它拉伸後不走形，同時處於單元格左右居中的位置。

設置好後，就完美地實現了如下效果：

（《Resizing Tables with Sketch》，by：Reony TonneyckFollow）

更詳細的操作，可參考這兩篇文章：

• 《Resizing Tables with Sketch》（by：Reony TonneyckFollow）：詳細講解表格如何縮放，很實用！這篇文章簡直就是我做table時的救星！
• 《How to create a FRONT END FRAMEWORK with Sketch》（by：Seba Mantel）

此外，還可以搭配一個強大的插件使用：Auto Layout。可以設定表格四周邊距、是否居中對齊等，功能強大。對於做移動端不同屏幕適配也很有用。

戳此觀看Autolayout 官方演示。

《Auto Layout Plugin for Sketch App》（by：Sketch Together @YouTube）7分多，很直觀的視頻講解。

201.9.29 更新：

Designing Data with Sketch：介紹幾個有用的介紹 pie chart、line chart、table 的繪製技巧 & 插件。

?? Hacking Tables in Sketch App，by：Bunin，2017.9.25：講了非常全面的用嵌套組件製作table的方法，棒棒的！！！（其中附有table template 下載，推薦了duplicate plugin）

命名技巧

命名方式用斜杠，在菜單中會按層級顯示。例如：

• Icons：icons/interface/state/name of instance
• Colours：Primary-Accent/(colour name)
• Symbols：Buttons/Btn50px/teal/icon-right/hover
• Component：ComponentName / state / sub-state

（《Setup a design system》，by：Marco Lopes）

舉例說明。樣式組件中，checkbox命名用如下方式：

1. checkbox/normal
2. checkbox/hover
3. checkbox/focus/minus
4. checkbox/focus/check
5. checkbox/pressed
6. checkbox/disabled/check
7. checkbox/disabled

調用的時候，尋找組件，就會顯示為層級菜單：

（《How to create a FRONT END FRAMEWORK with Sketch》，by：Seba Mantel）

替換修改起來，也更方便：

（《How to create a FRONT END FRAMEWORK with Sketch》，by：Seba Mantel）

參考文章：

??《How to create a FRONT END FRAMEWORK with Sketch》（by：Seba Mantel）：

Sketch插件推薦

• Auto Layout：前面提到的，排版對齊插件，非常適合移動端屏幕適配。
• Renameit：分分鐘讓圖層命名井井有條。
• Sketch Styles Generator：將設置好的 text、shape 樣式，一鍵生成style。
• Nodg it：可以設置成以8px為單位移動。
• User Flows：方便畫原型圖，梳理邏輯關係。
• Shared Text Styles ：導入/導出 text style。
• IconFont：如果前端小夥伴使用iconfont，這是個好工具。也可以作為原型階段佔位icon用。內置 material、FontAwesome、iconicons、simple-line-icons，全面滿足需求。
• Artboard Tricks?：將散亂的畫板排規整。

參考文章：

• 《My favorite Sketch Plugins 》（By：Sketch Together @YouTube ））講了幾個常用的插件：Clipboard fill（插入圖片巨方便）, Iconfont（直接用圖標）, Magic Mirror(作品集有用):
• 《16 Pretty Useful Tools & Tricks for Sketch 》（by：Hardik Pandya）
• ??《 Sketch Tools for Managing a Design System 》（by：Bunin，2017.11.6 ）介紹了諸多建 style guide 時，有用的插件們！

最後

做過 to C 產品設計後，再接觸to B ，有種另一番天地的感覺。

也許，對於一些適合的人，相當於打開了另一扇窗。

無論如何選擇，選擇之前，了解自身，了解選擇對象，都是必要做的功課。

以上。

PS:

「後台產品」 UX & UI 設計總結（上）：主要分享後台產品各部分的設計要點。

推薦閱讀：