[譯] 如何用 Sketch 打造「前端框架」

• 原文地址：How to create a FRONT END FRAMEWORK with Sketch
• 原文作者：Seba Mantel
• 譯文出自：掘金翻譯計劃
• 譯者：Ruixi
• 校對者：marcmoore , AceLeeWinnie

前端框架

需要考慮的事項：

當我們與一大群設計師同時推進同一個項目的時候，要做到協調一致非常困難。而在面對有審美要求、對指定行為和互動有明確要求的系統性項目時尤為如此。

我們可用於建立界面的標準化的手段之一就是定義一份風格指南（純視覺角度），這樣可以幫助整個設計團隊避免在未來可能出現的改動帶來的不必要的工作時間，提高工作效率。讓我們可以把精力更好的集中在組件的行為和應用中的交互上。

一份優秀的風格指南需要被團隊全員採用，比如開發者、產品負責人、項目經理，甚至客戶都要接受。這對各個成員之間的溝通與合作有極大裨益。我們稱這種「升級版」的風格指南為 前端框架(FEF)。

在開始動手製作 風格指南 之前，有幾條原則需要你牢記在心：

必須可用 且必須易於融入不同的工作流之中。

必須有教育引導的作用 且需要包含可以幫助我們創造新的組件和交互的樣板。

必須可視化 且規範明確。

必須協同，這樣每個成員都可以修改和添加新內容。

必須隨時更新，所以它應該放在一個特殊的庫里，無論是誰做了修改都得更新文件。

來開始動手打造前端框架吧

第 1 步, 定義 IA：

第一步是定義內容（根據項目，劃分如下）：

1. 樣式： 色系，字型字體，icon。（這裡 font family 和 typography 的含義比較接近，於是對字體類型的選用和對字體本身的格式要求做了合併，另附參考文章，譯者注）
2. 版式布局和頁面模式 不同的組合元素，網格和主導航。
3. 導航元素： 鏈接，標籤和分頁。
4. 模態對話框： 彈出框，工具提示（提示框），下拉菜單，消息對話框。
5. 文本輸入： 表單。
6. 組件

第 2 步， 創建前端框架內容:

樣式—?首先需要定義主色，次色和其他輔助色，並指定其所適用的 RGB 色值。

色彩

然後在 sketch 里創建 shared style，以便在未來的設計工作中優化工作流程。

創建新的 shared style 在前端框架中合理的組件命名會使 sketch 中的樣式表更加有條理。

這樣，在我們想要快速更改一個組件的顏色的時候，只需要在 style 中進行更改，而且可以確保不會混入其他的色彩。

對於版式，也是 類似的步驟 ：

1. 詳細定義將會在設計中使用的字體，主要的和次要的。

2. 和顏色類似，在 sketch 中創建 style。

   

在創建字體和色彩的樣式之後，添加將要用到的全系列 icon ，並將其轉化為 symbol。這樣，如果有人更改它們的話，凡是用到它們的地方都會同時修改。

Tip: 創建同一 icon 的不同狀態，將其按照 組件名/狀態/子狀態 的規則命名。這樣我們就可以輕易地從主菜單訪問到所有狀態，不必再去修改原來的 icon 了。

這也同樣適用於那些有多種狀態的組件，比如複選框（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

這些都會顯示在頂部菜單的 插入 里。

這樣，修改狀態就簡單多了，有效地解決了設計中的不少麻煩。

第 3 步，創建組件：

在定義了通用樣式並且在 sketch 中創建 style 之後，開始忙活組件吧，它們會在整個應用中不斷被重複使用 （比如像是主導航啦，下拉菜單啦，彈出框，數據網格，等等）。這主要就是為了在創建新的界面的時候能讓全體設計師保持一致。

我很喜歡用這些組件來舉例子：

工具提示，設計師要是想要改變背景色的話，就和在 style 中選擇相應顏色一樣簡單。

表單 — Tip : 通過將文本框作為 symbol，可以在 sketch 中不訪問 symbol 本體的情況下修改內容。*

每個組件都必須附帶一段說明文本（何時使用以及將會產生的反應）。 必要的話，你可以在右邊指定一個部分來說明大小邊距和樣式。

此規範的重點在於向開發團隊提供信息，以便它們會被添加在同一文檔或者 Zeplin 中來作為溝通工具。這樣你就可以得到 css 值和下載組件了。

第 4 步，行為表現：

有些組件的大小（寬和高）取決於我們所使用的網格的大小，比如數據列表或數據網格。sketch 為這種類型的組件圖提供了一系列的選項，以便預定義每個元素的位置，這個表格將會是響應式的。

如何實現響應式效果呢？在 Sketch V39 中，添加了 4 個新的選項來實現這種效果。

選項如下：

Stretch （默認）——在調整分組大小的時候浮動調整圖層的大小（此選項適用於分割線和每一行的矩形）。

Pin to corner?——?自動將新圖層固定在最近的角落。在調整分組大小的時候不影響圖層的大小。（適用於圖標右上和和複選框。）

Resize object?——?在調整分組大小的時候調整圖層大小並保持其位置的百分比。（文本框必須有這個選項，來保證它們的邊緣和左側的分界線。）

Float in place?——?在調整分組大小的時候圖層大小不變，但其位置按照百分比縮放。（適用於必須在列中居中的 icon。）

想要了解更多關於此類表格創建的信息，推薦以下文章： https://medium.com/sketch-app-sources/https-medium-com-megaroeny-resizing-tables-withsketch-3-9-2e02e6382d3d#.fsx0udd9v

第 5 步，參考

最後，除了在所有應用中維護一種設計語言之外，每個元素的結構都可能隨著產品需求和需要而變化。

所以，建議創建最後一個章節，來展示組件如何依據功能需求來使用。這樣設計者們可以分析並學習如何在不同的架構下復用樣式。

共同的未來

在一個複雜的項目中，將團隊全體成員的工作建立在一份風格指南之上可以大大提高工作效率，這種協調可以有效避免類似「某個組件在較小解析度下的行為是什麼」的問題。

大多數情況下，我們總是著力於盡快推出最初的版本，因此，問題是隨著產品的產生而出現的。在這種情況下，前端框架可以有所作為而且避免一系列讓人頭疼的問題。

這裡是 sketch 文件，可隨意下載。

https://www.dropbox.com/s/kknipcg3u0e69ds/FEF.sketch?dl=0

推薦閱讀：