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

前端框架需要考慮的事項：

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

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

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

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

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

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

必須可視化 且規范明確。

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

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

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

第 1 步, 定義 IA：

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

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

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

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

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

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

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

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

這也同樣適用于那些有多種狀態的組件，比如復選框（checkbox）。相應的命名規則為：

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

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

第 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。）

第 5 步，參考

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

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

共同的未來

轉載來自：github

本文地址：http://www.m.luhongsuye.cn/html/blogs/view-46.html

關于nicedesign奈思設計

nicedesign奈思設計是用戶體驗設計與數字化創新設計公司,為眾多企業創造了創新的設計解決方案,提供交互設計、UI界面設計、UI設計、網站設計開發、網站建設、移動界面設計、軟件界面設計、小程序設計開發、視覺創意等用戶體驗咨詢服務。

查看精選案例  | nicedesign服務體系   | 了解nicedesign動態