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

前端框架需要考慮的事項(xiàng)：

當(dāng)我們與一大群設(shè)計(jì)師同時(shí)推進(jìn)同一個(gè)項(xiàng)目的時(shí)候，要做到協(xié)調(diào)一致非常困難。而在面對(duì)有審美要求、對(duì)指定行為和互動(dòng)有明確要求的系統(tǒng)性項(xiàng)目時(shí)尤為如此。

我們可用于建立界面的標(biāo)準(zhǔn)化的手段之一就是定義一份風(fēng)格指南（純視覺角度），這樣可以幫助整個(gè)設(shè)計(jì)團(tuán)隊(duì)避免在未來可能出現(xiàn)的改動(dòng)帶來的不必要的工作時(shí)間，提高工作效率。讓我們可以把精力更好的集中在組件的行為和應(yīng)用中的交互上。

一份優(yōu)秀的風(fēng)格指南需要被團(tuán)隊(duì)全員采用，比如開發(fā)者、產(chǎn)品負(fù)責(zé)人、項(xiàng)目經(jīng)理，甚至客戶都要接受。這對(duì)各個(gè)成員之間的溝通與合作有極大裨益。我們稱這種“升級(jí)版”的風(fēng)格指南為前端框架(FEF)。

在開始動(dòng)手制作風(fēng)格指南之前，有幾條原則需要你牢記在心：

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

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

必須可視化 且規(guī)范明確。

必須協(xié)同，這樣每個(gè)成員都可以修改和添加新內(nèi)容。

必須隨時(shí)更新，所以它應(yīng)該放在一個(gè)特殊的庫里，無論是誰做了修改都得更新文件。

來開始動(dòng)手打造前端框架吧

第 1 步, 定義 IA：

第一步是定義內(nèi)容（根據(jù)項(xiàng)目，劃分如下）：

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

色彩然后在 sketch 里創(chuàng)建 shared style，以便在未來的設(shè)計(jì)工作中優(yōu)化工作流程。

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

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

對(duì)于版式，也是類似的步驟 ：

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

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

這也同樣適用于那些有多種狀態(tài)的組件，比如復(fù)選框（checkbox）。相應(yīng)的命名規(guī)則為：

這些都會(huì)顯示在頂部菜單的插入里

這樣，修改狀態(tài)就簡(jiǎn)單多了，有效地解決了設(shè)計(jì)中的不少麻煩。

第 3 步，創(chuàng)建組件：

在定義了通用樣式并且在 sketch 中創(chuàng)建 style 之后，開始忙活組件吧，它們會(huì)在整個(gè)應(yīng)用中不斷被重復(fù)使用 （比如像是主導(dǎo)航啦，下拉菜單啦，彈出框，數(shù)據(jù)網(wǎng)格，等等）。這主要就是為了在創(chuàng)建新的界面的時(shí)候能讓全體設(shè)計(jì)師保持一致。

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

工具提示，設(shè)計(jì)師要是想要改變背景色的話，就和在 style 中選擇相應(yīng)顏色一樣簡(jiǎn)單

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

每個(gè)組件都必須附帶一段說明文本（何時(shí)使用以及將會(huì)產(chǎn)生的反應(yīng)）。 必要的話，你可以在右邊指定一個(gè)部分來說明大小\邊距和樣式。

此規(guī)范的重點(diǎn)在于向開發(fā)團(tuán)隊(duì)提供信息，以便它們會(huì)被添加在同一文檔或者 Zeplin 中來作為溝通工具。這樣你就可以得到 css 值和下載組件了。

第 4 步，行為表現(xiàn)：

有些組件的大?。▽捄透撸┤Q于我們所使用的網(wǎng)格的大小，比如數(shù)據(jù)列表或數(shù)據(jù)網(wǎng)格。sketch 為這種類型的組件圖提供了一系列的選項(xiàng)，以便預(yù)定義每個(gè)元素的位置，這個(gè)表格將會(huì)是響應(yīng)式的。

如何實(shí)現(xiàn)響應(yīng)式效果呢？在 Sketch V39 中，添加了 4 個(gè)新的選項(xiàng)來實(shí)現(xiàn)這種效果。

選項(xiàng)如下：

Stretch （默認(rèn)）——在調(diào)整分組大小的時(shí)候浮動(dòng)調(diào)整圖層的大?。ù诉x項(xiàng)適用于分割線和每一行的矩形）。

Pin to corner?——?自動(dòng)將新圖層固定在最近的角落。在調(diào)整分組大小的時(shí)候不影響圖層的大小。（適用于圖標(biāo)右上和和復(fù)選框。）

Resize object?——?在調(diào)整分組大小的時(shí)候調(diào)整圖層大小并保持其位置的百分比。（文本框必須有這個(gè)選項(xiàng)，來保證它們的邊緣和左側(cè)的分界線。）

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

第 5 步，參考

最后，除了在所有應(yīng)用中維護(hù)一種設(shè)計(jì)語言之外，每個(gè)元素的結(jié)構(gòu)都可能隨著產(chǎn)品需求和需要而變化。

所以，建議創(chuàng)建最后一個(gè)章節(jié)，來展示組件如何依據(jù)功能需求來使用。這樣設(shè)計(jì)者們可以分析并學(xué)習(xí)如何在不同的架構(gòu)下復(fù)用樣式。

共同的未來

轉(zhuǎn)載來自：github

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

關(guān)于nicedesign奈思設(shè)計(jì)

nicedesign奈思設(shè)計(jì)是領(lǐng)先的用戶體驗(yàn)設(shè)計(jì)與互聯(lián)網(wǎng)品牌建設(shè)公司,為眾多企業(yè)創(chuàng)造了專業(yè)與創(chuàng)新的設(shè)計(jì)解決方案,提供交互設(shè)計(jì)、UI界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)開發(fā)、網(wǎng)站建設(shè)、移動(dòng)界面設(shè)計(jì)、軟件界面設(shè)計(jì)、互聯(lián)網(wǎng)品牌建設(shè)和用戶體驗(yàn)咨詢服務(wù)。

查看精選案例  | nicedesign服務(wù)體系   | 了解nicedesign動(dòng)態(tài)