本篇為如何從零構(gòu)建UI組件及設(shè)計規(guī)范之介紹篇，介紹設(shè)計規(guī)范能給公司帶來的價值，怎么做一套符合公司系統(tǒng)平臺的設(shè)計規(guī)范以及如何利用組化的思維去維護(hù)后續(xù)的迭代及優(yōu)化，以及讓團(tuán)隊更好的協(xié)作，與大家分享！

《如何從零構(gòu)建組件及設(shè)計規(guī)范》共分為5個系列，分別為《一：介紹篇》、《二：設(shè)計原則》、《三：全局樣式》、《四：基礎(chǔ)組件》、《五：通用模版》

一、做什么（What）

• 公司設(shè)計規(guī)范：我們對過去設(shè)計的這些產(chǎn)品進(jìn)行思考和沉淀，抽象并形成了一些穩(wěn)定且復(fù)用性高的內(nèi)容，打磨出一套適合于公司產(chǎn)品設(shè)計模式及規(guī)范。
• 全面的設(shè)計語言：設(shè)計規(guī)范從設(shè)計原則到頁面布局，從交互到文案，從基本組件到模版頁面…. 提供了產(chǎn)品設(shè)計上的解決方法。

在多數(shù)情況下可以指導(dǎo)設(shè)計、產(chǎn)品和開發(fā)可以快速找到相關(guān)的指導(dǎo)內(nèi)容，有效地幫助完善工作并且提高效率。

二、為什么要做（Why）

分子是由原子組成的。分子分成原子，原子也可以重新組合成新的分子。一個界面是由獨(dú)立的基本組件搭建而成，基本組件由基本樣式、組件特性構(gòu)成，基于不同的基本樣式和特性再重組構(gòu)成新的界面。

• 保證平臺一致性：加強(qiáng)產(chǎn)品與開發(fā)的溝通，解決多平臺后期多而復(fù)雜頁面帶來的不一致性。用戶用到一個新功能或者切換到另一個新平臺，不需要再花額外的學(xué)習(xí)時間，所以保證一致性可以讓用戶形成習(xí)慣性路經(jīng)思考。
• 提升產(chǎn)品使用效率：組件化設(shè)計是通過對頁面中元素的拆解、歸納和重組，并基于可被復(fù)用的目的，形成規(guī)范化的組件。再通過組合來構(gòu)建整個設(shè)計方案，從而提升設(shè)計效能。所以組件化為產(chǎn)品帶來一致的設(shè)計語言和工作效率上的提升，另一方面確保使用的客戶或用戶在很短的時間內(nèi)使用平臺。
• 提升產(chǎn)品細(xì)節(jié)體驗：當(dāng)前的互聯(lián)網(wǎng)產(chǎn)品發(fā)展到下半場，所有的產(chǎn)品在能用的基礎(chǔ)上希望能夠有良好的使用體驗。美觀的產(chǎn)品能夠提升體驗和激發(fā)愉悅用戶的重要手段，這要求我們在產(chǎn)品設(shè)計時需要思考產(chǎn)品的細(xì)節(jié)美觀等。

國外的一項數(shù)據(jù)研究：在保證數(shù)量和質(zhì)量的前提下，運(yùn)用組件化的設(shè)計推動模式，原本200人的團(tuán)隊，可以縮減為100人，能夠為公司節(jié)省大量的人力成本。

組件化能讓公司以更快的速度和更低的成本開發(fā)產(chǎn)品，在前期也能對產(chǎn)品的想法快速驗證。

1）公司維度
通過組件化推動的產(chǎn)品設(shè)計與迭代，可以使團(tuán)隊工作增效，降低成本。產(chǎn)品或者設(shè)計可以在很短的時間內(nèi)出十幾個頁面，前端開發(fā)人員也可以通過查看prd文檔，直接調(diào)取組件代碼完成需求；以此來提高開發(fā)效率加快產(chǎn)品的開發(fā)進(jìn)度。

2）產(chǎn)品維度

• 從設(shè)計方案上：對于一些適用組件化的產(chǎn)品形態(tài)，我們可以運(yùn)用組件化思維將其「化整為零」。對需求有更規(guī)范的統(tǒng)籌，建立一個可復(fù)用的組件結(jié)構(gòu)，以保證交互和視覺的一致性。
• 從工作流程上：不同的產(chǎn)品、設(shè)計及不同的開發(fā)，相同角色無交集。缺乏溝通會導(dǎo)致大量重復(fù)性工作，又或因為大量溝通帶來的資源浪費(fèi)，因此會增加項目的開發(fā)周期和管理難度。

3）用戶維度

幫助到客戶和用戶體驗到優(yōu)秀的產(chǎn)品，對產(chǎn)品的設(shè)計不僅僅停留在是能用，而是在能夠用的基礎(chǔ)上。讓產(chǎn)品的細(xì)節(jié)更加優(yōu)秀，體驗更加智能、流暢，讓使用者愿意使用產(chǎn)品以幫助到他們的工作。

三、怎么做（How）

1. 傳統(tǒng)的生產(chǎn)頁面模式

傳統(tǒng)的頁面生產(chǎn)流程是瀑布式的，從業(yè)務(wù)需求到產(chǎn)品設(shè)計，再到開發(fā)是一串的工作流程。

這樣會導(dǎo)致重復(fù)性業(yè)務(wù)頁面設(shè)計制作、反復(fù)低效率的溝通、糾結(jié)的還原度修復(fù)等。通過組件化設(shè)計我們可以將大量的頁面進(jìn)行整合設(shè)計。

2. 我們的做法

設(shè)計規(guī)范是建立一套基于業(yè)務(wù)的為基礎(chǔ)的組件庫，對于組件庫里已有的組件，在產(chǎn)品設(shè)計時可直接調(diào)取組合并構(gòu)建新的頁面。

新增的組件則經(jīng)過常規(guī)設(shè)計流程后，歸納沉淀并有產(chǎn)品組審核通過后入庫，以提升后續(xù)組件擴(kuò)展能力，助力產(chǎn)品快速迭代發(fā)展。每個組件模塊基于復(fù)用為目的，通過標(biāo)準(zhǔn)的規(guī)范組合方式來構(gòu)建整個設(shè)計方案，從而提升設(shè)計效能。

3. 組件化設(shè)計的關(guān)鍵點

基礎(chǔ)組件：從需求出發(fā)，結(jié)合Element框架，拆解頁面所需的基礎(chǔ)組件。

模版頁面：通用的組件的布局體系及替換規(guī)則。設(shè)計模式是設(shè)計過程中問題解決的核心方法，也是構(gòu)建整個平臺或框架所要遵循的基礎(chǔ)和標(biāo)準(zhǔn)。

本文由 @徐銀高 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議