關鍵詞：組件、規(guī)范化、統(tǒng)一
去年曾參與過門戶網(wǎng)站以及電商類App的組件化規(guī)范制作過程，想來在這方面也積累了一些經(jīng)驗， 想在這里和大家分享一下。
主要內(nèi)容分三方面展開：
第一部分，網(wǎng)頁組件化規(guī)范的具體步驟以及注意點；
第二部分，App組件化規(guī)范與網(wǎng)頁的區(qū)同點；
第三部分，在組件化規(guī)范的基礎上制作UI規(guī)范的注意點。
PART1 ?網(wǎng)頁的組件化規(guī)范
／1／瀏覽所有組件
注意點：切記鉆到細節(jié)，只需要知道所有的組件類型即可。
／2／搜集 & 分類
將網(wǎng)站中常見的組件形式通過截圖的方式截取下來，并根據(jù)組件的類型進行分類歸檔。
注意點：
（1）組件的分類需要結(jié)合網(wǎng)站的類型，有側(cè)重地劃分、取舍和排優(yōu)先級。比如，門戶類常見feed流，而電商類則多見圖文組件。
（2）建議采用截圖的方式而不是用Axure制作，這樣可以避免前期不必要的時間消耗。
／3／整合
在每一類組件下，繼續(xù)進行細分、刪減和整合。比如，圖文組件有很多種類型，上圖下文、左圖右文，更細節(jié)的有標題＋圖片＋簡介＋評論等控件。
注意點：刪減哪些組件類型以及對哪幾種類型進行整合，需要根據(jù)自身產(chǎn)品的需求進行取舍。
在分類方法上，剛接觸組件化規(guī)范的人可能會有些困惑。因為根據(jù)圖文數(shù)量的不同以及排列順序和方位的不同，會變幻出多種組合方式，這是很大的工作量。
這里，實際上出現(xiàn)了一個思維誤區(qū)。這種通過排列組合進行思考的方式，被稱為「向下」的思維方式，俗稱「鉆細節(jié)」。相反，我們更應該采用自下而上的思考方式。具體來說，就是分析網(wǎng)站上搜集到的組件類型以及使用場景，留下常見的組合方式，將個別的組合方式做特殊情況處理。這一步就是利用自身產(chǎn)品的「需求」推動設計決策。
這部分完成后，每類組件下，我們便得到了主要的幾種細分類型。
／4／參考競品，優(yōu)化組件
進行到上一步，我們只是對網(wǎng)站原有的組件進行了規(guī)整。但由于設計團隊的更替、網(wǎng)站版本的迭代，現(xiàn)有的組件常常存在大大小小的問題，很可能這種組件已經(jīng)落后于產(chǎn)品和用戶的需求了。比如，登錄注冊中的密碼輸入功能，從最初的單行輸入，到兩行確認，到明暗文切換，再到明文顯示，這就是一個需求演變的過程。
因此，參考競品就變得很重要了。這一步我們需要利用競品分析，找到符合當下用戶體驗趨勢同時滿足自身產(chǎn)品定位和用戶需求的組件樣式與操作方式，進一步優(yōu)化組件。
注意點：
（1）競品分析的競品不應只是同類產(chǎn)品，我們此時分析的是組件，因此可以將參考依據(jù)細化至使用場景。比如針對登錄注冊組件，無論是門戶網(wǎng)站或者電商網(wǎng)站都有一定的參考價值。
（2）在分析競品時切記照搬照出，無論是產(chǎn)品的定位、頁面的布局、當前的使用場景都是分析的依據(jù)。（如何篩選競品，如何利用競品分析幫助自身產(chǎn)品的更新迭代，在此不做贅述，在以后的文章中會做補充。請關注相關文章信息。）
進行到這一步，我們心里已經(jīng)形成對組件布局以及交互方式的大致構想了，可以將此在紙上粗略畫出，接著進行到下一步。
／5／寫文檔
制作文檔初期，需要針對文檔的信息架構以及內(nèi)容排布，預先制定規(guī)則，并在文檔前面注明文檔的使用方式。
注意點：
（1）確定文檔的信息架構時，需要注意組件分級的粒度，比如導航欄有一級、二級導航，圖文組件有左圖右文、上圖下文等，這些分類的粒度不能過粗也不能過細。過粗會導致頁面內(nèi)容的繁雜，過細則導致信息架構的復雜。此外還需特別注意復合型組件與單元型組件的分組分級方式，如單元型的左圖右文、上圖下文的組件類型以及復合型的標題＋圖片＋簡介＋功能模塊的組件類型。
（2）針對不同組件，其頁面布局都需要遵循統(tǒng)一的規(guī)則。 比如，在頭部概述組件的定義以及細分的規(guī)則，接著根據(jù)示例＋標注＋說明的原則進行內(nèi)容的詳細說明。
／6／驗證 & 拓展
此步驟即為文檔的更新迭代過程。驗證是將規(guī)范化組件帶入幾個主要頁面檢驗其適用性以及頁面的整體效果。拓展是在后續(xù)頁面設計過程中，將新的組件補充進文檔中。
注意點：
（1）將規(guī)范化組件帶入產(chǎn)品進行檢驗時，可將組件進行適當細化和修改以適應頁面需求，但大體規(guī)則應符合組件化規(guī)范。
（2）補充新的組件時，應注意這個組件在規(guī)范中是否已經(jīng)存在。此外，補充的位置以及分級排序方式都要滿足文檔的分類分級規(guī)則。
PART2 ?App組件化規(guī)范
App的組件規(guī)范化流程與網(wǎng)頁差不多。特別注意如下幾點差異：
（1）App相對網(wǎng)頁來說更強調(diào)整體設計的統(tǒng)一性，比如圖文組件的變式應盡量不超過3種；
（2）App需要考慮跨平臺、跨設備的體驗；
（3）App包含多種手勢操作，在此基礎上組件的交互形式也多種多樣。但切忌為了交互而交互，應以需求為前提，避免沉浸在華而不實的交互方式中。
PART3 ?App的UI規(guī)范
在組件化規(guī)范的基礎上制定UI規(guī)范。同樣需要進行搜集>分類>整合>優(yōu)化>制作文檔的過程。最終的UI規(guī)范文檔一般都包含組件示例、色值、字號、間距以及icon尺寸、按鈕尺寸這幾個部分。
注意點：
（1）無論是色值、間距或者字號，對于一個App都需要設定幾個梯度的常用值并適當描述其使用場景。比如，較深的色值用于大標題，淺一些的用于圖文模塊等等。
（2）通常需要代入幾個頁面進行驗證，頁面的選擇最好是一個頁面中能包含多種色值或間距或字號等。
總結(jié)
以上便是針對網(wǎng)頁和App的組件化規(guī)范的制作過程說明。我再將上述內(nèi)容簡要概括一下：
／1／組件化規(guī)范包含5個步驟：瀏覽所有組件>搜集&分類>整合>優(yōu)化>制作文檔（>檢驗）
／2／UI規(guī)范主要包含：組件示例、色值、字號、間距以及icon尺寸、按鈕尺寸
組件化規(guī)范需要注意幾點：
／1／分類與分級的標準，考慮組件的適用性與可拓展性；
／2／時刻以符合產(chǎn)品定位于用戶需求為前提，優(yōu)化組件；
／3／時刻以使用者需求為前提，制作文檔。
（特別注明：UI規(guī)范是從交互設計師的角度進行闡述的，相比較而言，會更加注重體驗的效果，希望也能給UI設計師一點啟發(fā)。）
