我們?yōu)槭裁匆⒔M件庫？
作為設(shè)計(jì)師我們都清楚創(chuàng)建組件庫是我們?cè)谧鯱I設(shè)計(jì)中一個(gè)重要的工作，一個(gè)合適的組件庫不僅能夠幫助設(shè)計(jì)師更高效的設(shè)計(jì)頁面，同時(shí)也可以提高開發(fā)者的工作效率，讓產(chǎn)品整體風(fēng)格更統(tǒng)一，一目了然，更便于日后維護(hù)、整體修改；特別是在多人合作時(shí)，一個(gè)合適的組件庫可以保證產(chǎn)品的統(tǒng)一性，不至于做到最后一個(gè)人一個(gè)風(fēng)格，所有頁面又需要從新調(diào)整統(tǒng)一，不僅費(fèi)事費(fèi)力、沒有效率，也讓加班沒有任何意義；由此可見在團(tuán)隊(duì)合作中，組件庫起到了相當(dāng)重要的作用。
下面我們就開始講講如何建立組件庫
定義顏色
一般情況下我們需要：
1、品牌色即主色調(diào)
Primary Color (主題色)
2、功能色（功能色代表了明確的信息以及狀態(tài)，比如成功、出錯(cuò)、失敗、提醒、鏈接等。）
Warning Color (警示色)
Success Color (成功色)
Danger Color (危險(xiǎn)色)
3、中性色（中性色主要被大量的應(yīng)用在界面的文字部分，此外背景、邊框、分割線、等場(chǎng)景中也非常常見。）
黑色：正文、標(biāo)題等
最淺灰：用做背景等
次淺灰：用作分割線 / 邊界線 / 斜線等
中灰：用作次標(biāo)題、輔助文字
深灰：用作主標(biāo)題、正文、深色背景
白色：字體、背景
定義字體
選擇合適的字體
選配合自己產(chǎn)品風(fēng)格的字體。用 不同大小、字重表現(xiàn)視覺層級(jí)。
所選字體要滿足：
易讀性：長(zhǎng)時(shí)間讀起來不累。
可縮放：在很大、很小時(shí)，仍易讀。
豐富性：至少有2種字重。
一般需要這幾種字體：
默認(rèn)字體：整個(gè)產(chǎn)品的標(biāo)準(zhǔn)文字。（一般瀏覽器默認(rèn)字體是16px，）
大一點(diǎn)的文字：用于大一點(diǎn)的正文。
更大的文字，用于次標(biāo)題。
再大點(diǎn)，用于標(biāo)題。
特大字，用于每個(gè)部分的標(biāo)題。
超大字，也許用于價(jià)格，舉個(gè)例子。
小字，用于更小的正文，輸入提示、次級(jí)輔助文字。
此外，還需要考慮字體的行高、字間距。
每種型號(hào)的文字，都需要設(shè)置一下幾種狀態(tài)：
Default （默認(rèn) ）：黑+白，透明度80-100%。
Secondary（次級(jí)）：黑+白，透明度50-70%。
Disabled（不可點(diǎn)）：黑+白，透明度20-40%。
Accent（帶顏色的）：主題色+功能色。
在下面我會(huì)介紹如何在Sketch中創(chuàng)建字體系統(tǒng)
定義圖標(biāo)
選擇合適的圖標(biāo)樣式
選配合自己產(chǎn)品風(fēng)格的圖標(biāo)
所選圖標(biāo)樣式要滿足：
統(tǒng)一性：線性的統(tǒng)一、圓角、直角的統(tǒng)一、風(fēng)格的統(tǒng)一等
差異性：在統(tǒng)一性的基礎(chǔ)上差異性越大，用戶越容易辨認(rèn)他所代表的不同功能，從而降低用戶使用時(shí)的辨別成本。
可識(shí)別性：一個(gè)一眼就能認(rèn)知的icon大大提升了用戶的操作效率，降低了用戶操作的辨識(shí)成本
趣味性：一組icon應(yīng)具備提升和側(cè)面?zhèn)鬟_(dá)產(chǎn)品的氣質(zhì)，體現(xiàn)產(chǎn)品的商業(yè)特性或?qū)傩?/p>
定義組件
1、陰影（一般需要4種陰影模式）
微微小陰影：表示一些交互組件z軸升高，增加可用性。
明顯一點(diǎn)的陰影：表示組件的 hover 狀態(tài)。
一個(gè)強(qiáng)烈點(diǎn)的陰影：表達(dá) dropdowns / popovers 等組件。
遠(yuǎn)一些的陰影：用于彈窗。
2、圓角
小圓角：用于極小組件，如checkbox，tags，lables。
中圓角：用于按鈕、輸入框，等。
大圓角：用于卡片，彈窗，等大組件。
3、間距
比如，頭像和名字的間距、dropdown和輸入框的間距等等
這些間距最好也都是8px的倍數(shù)。保持整個(gè)產(chǎn)品的統(tǒng)一
我們也可以根據(jù)這些間距，來定義一些組件的高度、寬度。
4、字間距
正如我之前提到的，字體大小不是我們定義文本組件所需的唯一樣式屬性。字母間距是另一個(gè)有用的屬性，我們可以用它來收緊大標(biāo)題或允許較小的標(biāo)題呼吸。
應(yīng)該有3或4個(gè)字母間距值。
讓我們從一個(gè)簡(jiǎn)單的按鈕開始
同樣的更多組件，也是根據(jù)這些顏色，字體大小，陰影和填充值，都是直接從我們上面預(yù)定義的樣式調(diào)色板中獲取的。
下面給大家介紹在Sketch中如何去制作組件和字體系統(tǒng)
組件制作方法
1、矩形工具（U）畫矩形，定義顏色；
2、創(chuàng)建矩形為組件，命名“color/主色“，最后我們可以在Symbols面板里看到，也可以在組件里查看調(diào)用；
3、將剛剛創(chuàng)建的顏色矩形復(fù)制一個(gè)，然后在創(chuàng)建一個(gè)矩形添加圓角半徑，再將圓角矩形作為蒙版；
4、把Button創(chuàng)建為組件（命名：Button/medium）
5、創(chuàng)建矩形 — 創(chuàng)建組件 — 制作出Button的幾種不同狀態(tài)（如下圖）
6、在Symbols面板下選擇Button按鈕，添加組件State/hover
7、在頁面創(chuàng)建一個(gè)Button，可見右側(cè)菜單欄中，我們可以根據(jù)不同場(chǎng)景去修改Button的狀態(tài)、顏色、文字
8、在Button上添加圖標(biāo)表示不同的狀態(tài)，首先畫如下幾個(gè)圖標(biāo)，按著上面的方法創(chuàng)建組件
9、如步驟6一樣，在Button里添加組件glyph/love；在頁面創(chuàng)建一個(gè)Button可以看見右側(cè)出現(xiàn)如下圖所示，可選狀態(tài)
10、好了我們可以做如下不同狀態(tài)的Button
好了方法教給大家啦，這里只是用Button做了示范，其他的組件整理方法也是一樣的
下面我推薦大家看一篇創(chuàng)建字體系統(tǒng)的文章，結(jié)合我所交給大家的組件的創(chuàng)建，相信大家可以在工作中節(jié)省一大部分時(shí)間，也可以應(yīng)對(duì)各種? 改? 改? 改
從0到1建立sketch字體系統(tǒng)
http://www.htnj110.cn/detail/366636.html
附件：sketch文件，僅供參考學(xué)習(xí)
歡迎大家有問題一起交流，我們共同學(xué)習(xí)進(jìn)步！
參考網(wǎng)站：https://www.youtube.com/watch?v=_bjqVF7Fvg4&t=905s
https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117
https://medium.com/sketch-app-sources/text-system-mastery-with-shared-styles-9931bea7d085
5
作品
58
粉絲
109
關(guān)注
分享能獲取更多贊？
密碼登錄
大牛，別默默的看了，快登錄幫我點(diǎn)評(píng)一下吧！:)
登錄 立即注冊(cè)