中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

組件庫是設計系統中的一個重要分支，如何建立合適的組件庫呢？

組件庫是設計系統里的一個重要分支，我們應該不會陌生。一個合適的組件庫可以幫助設計師和開發者提高工作效率且讓產品的可用性更高、風格更統一等等，那么今天我們就來聊聊應該如何建立適合的組件庫。

發現問題

首先思考一個問題，什么樣的情況下會需要建立組件庫呢？建立組件庫的目的是什么？帶著這兩個問題我們來看看下面的工作場景：

• 設計師：xxx把你之前的設計稿發我下，我要用里面的一個組件。
• 設計師：xxx為什么你的稿子里的顏色和我的不一致，到底應該以哪個為主？？？
• 設計師：xxx為什么組件不統一？？？
• 設計師：多個稿子用到了同一個組件，想做修改但是工作量很大怎么辦呢?
• 產品經理：這次需求跟上次沒有什么大的變化，很多組件都可以復用，為什么設計師需要那么多的時間？？？
• 開發小哥：為什么每次給的設計稿樣式，顏色，組件都不同，我又要寫新的樣式表進去。
• ……

想必上面的場景我們很多同學都很熟悉，是我們以前或現在正經歷著的，通過上面的場景我們不難總結出一些問題來，例如：

• 設計師的效率變低，設計稿可控性差，設計師缺少規范指導等;
• 設計師以及開發者團隊協作效率低，問題多等；
• 開發者抱怨開發工作量增加，覺得設計師不專業等；
• 產品經理抱怨設計師進度太慢，等等一系列問題；
• ……

分析問題

這些問題會讓人頭大，上面的問題我們可以通過建立適合的組件庫來解決（因為文章標題已經告知了答案，所以不做過多分析）。那么如何建立組件庫呢，我們通過參考多個大廠的設計組件庫先來看看他們的差別：

例如IBM Carbon 的組件庫有 32 個組件，Element 有 11 個，UWP有12個等等。然而看完之后還是一臉懵逼。到底有多少個組件才算是一個完整的、成熟的組件庫呢？組件太少，沒存在的必要。組件太多又會造成設計系統龐大繁雜，不利于擴展維護以及多方協作。

那么一個組件庫到底有組件多少對的呢？答案是：“合適”，庫里面的組件不能太多也不能太少。關于這一點《設計系統的組件庫，究竟是應該大而全，還是小而美？》這篇文章可以給你詳細的解答，在此就不做過多贅述。

那合適的組件庫是什么樣的呢？這個問題就像找對象一樣，每個人的要求都不盡相同，但是有一些基本的要求是必不可少的，例如做人做事要實在、有包容心、有孝心、懂得尊老愛幼、為人正派、有愛心等等。

同理，組件庫也有一些最基本的要求，例如組件使用率要高、擴展性要高、方便團隊設計師協作、風格以及命名要統一、以及要輕量化等等，所以不用太糾結，適合你自己的就是最好的。

可能很多小伙伴還是一頭霧水還是不知怎么樣做，如果遇到這樣的情況呢告訴你們最簡單的辦法，那就是從最小的、最常用的組件入手，然后快速征集意見更新，然后逐步完善起來。

解決問題

我們先來歸納下常規的組件庫里面都會有那些常用的組件存在：顏色、列表、文字、圖標、彈層、按鈕等等，這些最基本的都是組件庫必不可少的組成部分。我們通過Sketch的Symbol功能進行組件設計，利用Libraies進行團隊協作。下面我針對幾個最基本的組件模塊教大家如何設計組件庫：

顏色：

顏色就是產品的氣質，賦予什么樣的色彩就會傳達出什么樣的氣質，一般來說每個產品會有一種主色、3-5個輔助色、再加上文字的顏色 、背景色、分割線顏色等構成產品的設計系統。

上圖就是組件庫內的顏色模塊，是不是感覺和平時的設計文件差不多，其實它就是一個普通的Sketch文件，跟日常的設計稿沒有區別。

下面我們在看看她們Symbol里面是怎么樣的：

需要注意幾個重要的點：

1. 組件庫本身就是一個Sketch文件，但是組件一定要使用Symbol來制作（很多設計師并不用Symbol），重點 重點 重點，不然組件是不可用的；
2. 組件命名以及排列要規則有序，方便小伙伴們查找對應的組件；
3. 一定要考慮到響應式解決方案，這會用到另一個小知識，在列表模塊會詳細解釋；
4. 組件之間的元素是可以互相替換的，例如按鈕的顏色，文字顏色都可以根據場景不同選擇對應的方案，圖標可以根據場景替換對應的顏色或者其他圖標等等，這個在按鈕模塊會提到。

列表：

列表基本上應該是所有產品里面最常用的組件之一了，它的使用場景是多的，它當然必不可少。

列表組件在Symbols里面的呈現是這樣的：

在建立列表組件的時候我們要充分考慮使用場景，列表的使用場景太豐富。還要考慮響應式的方案，因為一個列表可能在ios端 、安卓端、 ipad端以及其他端都會使用，所以在做列表的時候我們要用到Resizing這個功能，根據需要來進行調整。

上圖的這三個列表用的都是一個控件，利用Resizing功能做響應式調整，既方便又快捷可以提高很多工作效率。

需要注意幾個重要的點：

1. 對Resizing功能不熟悉的同學可以多嘗試，找到最合適的設置；
2. 列表里面的文字，背景色以及圖標建議都Symbol，這樣方便元素的調整以及替換提高使用靈活性；
3. 一定要考慮到響應式解決方案；

文字：

在一個產品中我們會有很多的文字樣式，例如：大標題、副標題、正文、提示等等。

我們的文字樣式，可以利用Sketch的樣式預設功能針對每個文字類型創建樣式，后面我們就可以利用樣式表來快速調整文字。

通過建立文字樣式，可以快速的對單行，多行，各種文字進行樣式調整，提高效率，增加文字樣式的統一性。我們還可以通過文字樣式管理，對文字樣式的預設進行增加、刪除、改變等操作。

需要注意幾個重要的點：

1. 因為文字的靈活度極高，所以不是所有文字都有適合做成組件?？梢栽诮M件庫里面做好最基本上的樣式展示，方便團隊成員查閱，然后在自己的文件內設置文字樣式；
2. 樣式預設的功能不僅僅只可以設置文字樣式對圖層樣式等等一樣適用 快去解鎖新技能吧。

按鈕：

按鈕也是組件庫基本的組件之一，但是按鈕的顏色、大小在不同的場景下會不一樣，例如下圖：

是按鈕組件中的一個基本樣式，通過Sketch我們可以根據自己的使用場景對顏色 ，文字內容，大小 進行變化。針對這些變化我們不用再單獨制作控件，只需用一種即可。

因為篇幅關系所以其他的組件就展開講了，通過上面幾個組件模塊，我們應該對組件庫的建立有了一些認識。它并不復雜，只要根據產品的實際情況出發，然后考慮到幾個通用的點以及每個產品特殊的情況即可。當我們把一些常用的組件建立好之后，組件庫的第一階段也就相應的完成啦。

然后我們可以看到一個組件庫應該是這樣的：

又或者是這樣的：

在Symbol里面是這樣的：

又或者是這樣：

公眾號里我為大家提供了30家大廠的組件庫源文件。我們也可以通過研究他們的組件庫，學習到他們的思考方式，組建方式等等，然后結合我們自己的實際情況出適合自己的組件庫。

意見收集

通過上面的內容的講解，一個設計組件庫基本已經建立完成了，那么到底是否適合產品使用呢，我們還需要內部進一步討論，聽取各方反饋意見，進行增刪改查，然后就可以正式投入使用啦。這里可以使用內部網盤，外部網盤等同步工具進行設計組件庫同步方便小伙伴們云端調用。如果有小伙伴不知道怎么做呢可以看我另一篇文章《想法結合工具，讓你的效率翻十倍》，或者私信我。

然而故事到這里并沒有結束，只要是人做的事情就一定會有Bug，即使當時很多人討論過覺得很完善一點毛病沒有，隨著時間推移我們也會發現很多新的問題出現，所以設計組件庫也需要像產品需求一樣迭代。所以及時總結各方的反饋意見就至關重要，可以定期對設計團隊、產品經理、開發小哥等相關同事進行意見訪談，問問他們現階段遇到的一些問題以及有什么建議，然后把這些意見收集起來進行篩選判斷，然后下次更新的時候就可以把這些問題解決掉。

持續更新

根據上面的反饋意見我們要定期對設計組件庫進行更新，但是越往后會發現新的問題出現。例如組件庫越來越繁雜，組件越來越多，所以保持組件庫的輕量化就很必要了，隨著產品的更新迭代必然有些組件是會失去存在的意義的。這個時候我們就可以對這個組件按下刪除鍵了。

組件庫的更新也需要產品更新日志，這樣小伙伴們才知道每次更新了那些內容，方便了解?？梢酝ㄟ^建立一個表格來進行更新日志管理。

總結

以上是我對建立設計組件庫的一點小心得，希望對小伙伴們有幫助。在我們的日常工作中會遇到很多問題，遇到問題不要慌，分析問題的本質尋找最優的解決方案。不積跬步無以至千里，當不知道怎么做的時候就從最小的入手，由簡單到復雜逐步遞進。我們要學會舉一反三，看再多文章還是需要小伙伴們自己去實踐，設計師的核心價值就是解決問題，所以加強我們解決問題的能力至關重要。

希望這篇文章對你有幫助??????

作者：Kane_D|?公眾號：小凱的設計筆記（ID：YXS_Design）

本文由Kane_D原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議