經常在網上看到「B 端產品 C 端化」的討論。
一開始我以為這個概念是說 B 端產品以前做得太差了，但隨著競爭越來越激烈，以后也要像 C 端產品那樣注重用戶體驗，更加輕量化、趣味性和人文關懷才行。
當時我還挺不以為然，感覺像是噱頭或者自嗨。
把用戶體驗做好雖然重要，但是這對 B 端公司的實際業務（錢）未必有什么直接影響。
因為對于絕大部分客戶來說，功能、效率和價格才是真正的硬指標，而且光是能找到能同時滿足這三點的產品就很不容易了！
然而，我最近剛開始參與一個 B 端項目，為了做競品調研，我試用了國內外十多款產品（國外為主）。
做完之后，我深刻反思了自己過去對「B 端產品 C 端化」的理解還是太膚淺。
其實 B 端產品 C 端化，并不是因為傳統的 B 端產品沒 C 端好用（不是這么比的）。
其實關鍵還是獲客模式的轉變。
傳統的 B 端產品是銷售驅動，銷售人員通過電話、上門拜訪等形式促使客戶下單。
一旦成功賣出，只要后續的服務不太差，客戶就沒必要更換遷移。
現在 B 端市場越來越大、行業信息越來越透明、客戶的判斷能力越來越強，傳統銷售模式開始變為互聯網營銷。
B 端產品在網上發布信息并投放廣告，吸引客戶自己前來試用并購買，只需提供少量客服人員即可。
這與以往的 B 端業務模式有很大不同，所以就需要變革。
所謂「B 端產品 C 端化」，表面上是學習 C 端的用戶體驗，背后的真正意圖是要學習人家 C 端的互聯網獲客能力。
我發現 B 端產品的 C 端化程度，和他們的互聯網廣告投放力度成正相關。
例如我在油管上經常受到 Monday、GoDaddy 這兩款 B 端產品的輪番轟炸。
先不說好不好用（畢竟我也不是目標客戶），我發現他們用起來真的很有「C 端感」，和傳統的 B 端產品果真不一樣。
倒不是什么“輕量化、趣味性和人文關懷”，而是因為他們在我打開網站的那一刻，就開始不斷吸引我探索使用。
我拿 GitLab 和 Monday 的官網首頁對比一下，也許你就能感受到了：
前者像是一板一眼的「老實人」，后者則像是對你笑瞇瞇的「綠茶妹」，高下立判。
“輕量化、趣味性和人文關懷”這些東西，并不足以打動用戶試用和購買，頂多只能算是「低段位」手段。
只有「高段位」手段，才能讓用戶不自主地地被吸引，心甘情愿地掏錢。
可是要做到「高段位」真的很不容易，我今天就總結幾個技巧吧～
1. 直接坦誠
遇到兩個陌生人：一個打官腔又遮遮掩掩的；另一個說話友善接地氣又誠實，你會更喜歡哪個？
可能大多數人跟我一樣會喜歡第二個。
C 端化做得好的 B 端產品，會把自己的產品預覽圖直接放到首頁供人觀看，而不是搞一張概念圖外加一堆高大上的廣告詞。
前面放過的那張案例，這里也可能拿來用：
GitLab 的官網畫了一些很抽象的概念圖，寫了一些很抽象的描述，給人感覺很模糊。
Monday 的官網明確把自己的業務類型列了出來供用戶選擇，還把每種業務對應的圖標和展示方式畫了出來，感覺很明確清晰。
2. 有效互動
遇到兩個健身房銷售：一個上來就說一個勁地介紹服務；另一個則先確認你平時的健身習慣，再根據你的情況介紹服務，你會更愿意聽誰說話？
我肯定更喜歡第二個。
C 端化做得好的 B 端產品，不是簡單地展示信息，而是先了解用戶，再根據用戶的需求提供不同的信息甚至服務。
Zendesk 的網站，會把自己的功能列出來給用戶，給的圖像和描述又很抽象，毫無互動感。
而 Asana 會讓用戶選擇自己需要的功能，并直接給出具體案例的界面展示圖。
3. 降低門檻
遇到商場逛街時遇到兩個陌生餐館，一家在二樓；另一家在一樓，你會愿意嘗試哪家？
肯定是第二個。
很多 C 端化做的好的 B 端產品，會把表單用彈窗的樣式放在產品上面，讓用戶感覺只要填寫完就能立即使用了。
比起 Trello，Smartsheet 只是在表單展示了一下產品內部，就讓用戶感覺門檻低了好多。
即便 Smartsheet 的新用戶后面發現背后那張圖真的這是一張圖而已，要填的一點不少，但這時都已經快填完了……
4. 循序漸進
兩家陌生的兩家餐廳都把菜單擺出來了，一家的菜單寫得密密麻麻；另一家的菜單雖然菜品不多，但是推薦菜品和菜式分類很清晰，你會更愿意嘗試哪家？
我相信很多人都會更愿意嘗試后者。
C 端化做得好的 B 端產品，不會太在意自己的產品是不是看起來功能齊全，而是更在意用戶是否能夠很好的理解產品，不要造成心理負擔。
上圖來源：Figma 這些交互細節，B 端設計也值得借鑒
Sketch 和 Figma 的屬性面板在功能上其實沒有很大的差異，但是后者看起來卻清晰簡潔許多，對新用戶更加友好。
B 端產品 C 端化這個理念其實很好，但如果被誤以為只是向 C 端學習用戶體驗那就可惜了。
用戶體驗只是手段，關鍵目的是在沒有銷售人員參與的情況下，如何從互聯網獲客。
這次的經驗的提醒我，以后如果再看到一些很火概念，不要簡單的從表面理解，而是要站在決策者的角度，多思考背后的真實意圖。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區別B端與C端的產品設計差異？我總結了26條對比！
“組件”是平臺級產品非常重要的組成部分，設計組件不僅可以節約設計和開發成本，更是設計理念的約束性體現。但是，隨著平臺級產品業務場景的復雜度不斷增加，過往沉淀的設計組件的交互模式和視覺形式，卻跟不上業務發展的訴求。因此，我們思考：如何建立和迭代一個優秀的組件庫——不僅能保持良好的普適性，解決全平臺產品的體驗一致性的問題；并且能夠保持各個業務線的特色和定制化需求，即所謂平臺級組件的“和而不同”。
隨著近兩年業務的發展，早期沉淀的組件漸漸無法滿足業務訴求，一部分組件的使用率和覆蓋率很低。
因此我們決定對貝殼平臺組件進行一次全新的升級。我們的目標不僅是針對“基礎組件”進行優化，保持其良好的通用性，達到“和”的目的；更希望能夠承載業務線（二手房、新房和租房）更多體驗場景的需要，做到服務于業務的“不同”。
為了更好的實現升級目標，我們思考了以下幾個問題：
1. 設計組件庫的使用人員有哪些不同的角色？他們的訴求是否有區別？
在我們眼里，設計組件是對設計工作的一種管理，而設計工作從產出到落地的完整鏈條上，主要有三種角色的人群：
貝殼平臺設計師和各個業務線設計師：平臺設計師窮舉組件使用場景的同時，提煉業務訴求，幫助業務線設計師通過組件更省時省力的高效完成設計工作。
開發團隊：通過設計師的輸出，明確組件開發的具體框架和自由度（例如按鈕顏色是否支持不同業務自定義等）
產品團隊：通過設計組件文檔明確設計的標準，在各角色有共同標準的認知下，需求中可使用組件搭建的部分無需重復提需求，節約各方成本。
因此，設計師需要產出的并不是一份簡單的組件庫源文件，而是一份以不同角色合作伙伴的視角，都能看得懂的設計組件表達文檔。
△ 圖 1 給設計、產品和開發不同的文件樣式
2. 組件真的是越多越好嗎？
我們給出的結論是：面面俱到反而無從下手。在做設計組件時，大多數同學都會有患得患失的心理，認為組件足夠多，就可以應對更多的使用場景，規范也足夠細致和統一。
但是這是一個比較理想的狀態，過于低微的顆粒度下，設計反而會失衡。這里的失衡是指，創新和規范之間的平衡被打破，顯然不是我們想要的。并且平臺級組件庫是具備再生和持續發展的生長能力的，因此不必一味追求數量。
3. 采用什么方法可以合理的控制組件的質量和數量，挑選出通用度高的組件呢？
我們優先梳理了貝殼平臺流量 TOP30 的核心關鍵頁面，依據數據圈定范圍，然后進行組件的整理。如下圖，我們發現使用率最高的前十名組件，按照降序排列依次為：tabs 選擇>Navbar>房源卡片（業務通用組件）>經紀人展位（業務通用組件）>按鈕>通知與提示>彈層>搜索框>操作菜單>標準懸浮球。
△ 圖 2 貝殼平臺流量 TOP30 頁面組件應用情況
這樣，我們就可以按照以上優先級，優先設計和代碼化使用頻次較高的組件。
我們將貝殼原有組件庫的全部組件打散，重新定義后分成三大類別：
平臺基礎組件：指不具有業務屬性的元件及基礎組件，例如：按鈕/表單/列表/搜索欄/系統反饋彈層/操作欄/Navbar 等。
業務通用組件：指橫跨多業務，但在不同的業務場景中略有變化，有公共元件可提煉，例如：經紀人展位/房源卡片。
業務特性組件：指只屬于某一業務應用范疇的組件，無公共元件可提煉，但是在單一業務線復用率較高。
組件的明確分類，可以幫助我們在日后每當有新增組件時，以統一的標準和原則進行歸納和整理。
除了優化平臺基礎類型的組件外，我們還對其中使用頻率很高的業務通用組件——房源列表進行了優化。
房源列表是在貝殼平臺通常以線性結構呈現的。用戶通過縱向掃讀來獲取房源宏觀信息，橫線瀏覽來了解單個房源條目的細節信息并進行相關操作。它在二手房、新房、租賃、海外等等業務線，都會經常被使用到。貝殼平臺原房源列表樣式，由于業務的發展，需要展示的信息逐步增多，依次羅列在列表中，導致展示效率變低，無吸引用戶的亮點，最終導致用戶對房源列表的“決策效率降低”。
而想要提升決策效率，并且優化后的列表能夠在各個業務線使用，我們先要了解，在不同業務場景中，房源卡片都要展示哪些內容？這里我們應用到了先前研究得出的結論——用戶瀏覽房源列表的心智模型。
△ 圖 3 用戶瀏覽房源的心智模型
在心智模型的指導下，我們進行了“元素窮舉”。
△ 圖 4 元素窮舉
得到了具體展示哪些元素后，我們開始思考，一個包容性強的列表底層結構應該是什么樣子？經過幾次的反復推敲和嘗試，我們得出如圖所示的三層結構：容器背板層、可交互操作層、內容展示層。
△ 圖 5 房源列表的三層結構
容器背板層：它是承載列表內部所有內容的盒子，我們在這一層，定義了容器的形狀，圓角等屬性，使它成為一個統一的底層模版。
可交互操作層：這一層放置的是用戶關于列表可進行的全部操作，例如關注，查看 VR 圖片等。并且，我們針對具體每一種操作行為，定義了統一的交互方式。
內容展示層：這一層涵蓋所有用戶可以查看的具體信息，包含房源標題、樓盤名稱、房源詳細信息和價格的動態浮動變化信息。
通過三個層次的劃分，我們可以清晰的定義每個層次的具體的職責是什么，這有利于我們后期面對復雜業務場景和海量信息內容時，可以更好的去歸納和組織信息的呈現。
在完成了元素窮舉和結構分層之后，我們繪制了一個基礎框架模版，如下圖：
△ 圖 6 房源列表基礎框架
然后我們將不同業務線的具體細節信息，嵌入模版中，設計成各個針對不同業務和不同場景使用的房源列表。帶著這樣的設計結果，我們與業務線的產品經理和設計師同學進行了一次深入的探討，并且確定可推行迭代的節奏。
綜合 14 天數據，二手房改版后，CTR 由原來的 44.65%提升到 51.35%。這對于房源列表來說，是非常難得的。
△ 圖 7 改版后的數據結果
以上就是本文的全部內容，相信大家已經掌握了 C 端組件庫建立的基本方法，這里我們總結一下組件庫的創建流程：
△ 圖 8 C 端組件庫的創建流程
組件庫是每一位用戶體驗設計師，在日常工作中積累的設計資產。組件要做到“和而不同”，“和”是指用規范化的底層容器，將抽離出復用率高的元素包裹起來，形成體驗一致，交互一致的封裝模塊?！安煌笔侵?，每條業務線可以根據自身具體的使用場景，去定義各自在內容展示層要展示的元素，保證了一定的自由度和各自生長的能力。
房源列表在貝殼平臺首頁已經上線有半年左右的時間了，通過改版，用戶使用房源列表時的決策效率有一定程度的提升，業務覆蓋也逐步擴大。在研發老師的協同下，實現了 Native 和 Flutter 組件的封裝，大大縮短了開發時長，從而提升了產品整體的研發效率。
希望能給同樣正在建立組件庫的設計師同學們帶來一些啟發，貝殼用戶體驗團隊也會繼續致力于更多業務特性組件的深挖，期待你的關注。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區別B端與C端的產品設計差異？我總結了26條對比！
說到網格的應用，我們可以追溯到很遠。古埃及人在他們的雕刻和繪畫中描繪的人物遵循了一個規則，將比例標準定為人的拳頭，一個站立的人物從地面到頭頂測量為 18 個拳頭。
公元 1040 年，首次在中國出現活字印刷，主要采用的是泥活字。在西方，金屬活字印刷術在 1450 年左右出現，而古騰堡圣經在 1455 年左右的發行將是出版界的第一個重大里程碑。金屬類型的文字更加充分利用了網格。
到了 1917 年，網格在荷蘭風格派運動中最為明顯，由藝術家 Theo van Doesburg 和 Piet Mondrian 領導。他們將畫布限制在相交的垂直和水平線條和原色上。
1919 年，德國的包豪斯學校成立，他們主張的簡潔實用的設計理念同樣用到了網格的概念。像著名的包豪斯國際象棋，它的棋子都是正方形和長方形等簡單的幾何形體，可以緊密地組合在一起，以便緊湊地存放。
1950 年代，一種嶄新的平面設計風格終于在瑞士形成。這種風格的設計，力圖通過簡單的網絡結構和近乎標準化的排版方式，達到設計上的統一性。這種風格一直到現在影響了很多網頁和平面設計師。
隨著第二次世界大戰的結束，一種新的消費主義出現了。經濟快速發展，廣告業的繁榮逐漸興起。保羅·蘭德作為美國第一個應用瑞士平面設計風格商業藝術家，他以企業品牌標志設計及商業廣告設計而聞名，網格在這種新的廣告形式中發揮了重要作用。
今天我們要聊的是關于網頁設計的網格系統。說起來很簡單，但其實里面包含了很多復雜的概念。網頁設計的第一步就是如何進行布局。標題、導航、按鈕放在哪？每個元素之間的間距是多少？這些都離不開頁面布局。作為網頁設計的基礎，頁面布局可以極大地影響用戶閱讀的流暢度和直觀度。在聊頁面布局前，我們需要先普及一些概念。
頁面布局是網頁上所有視覺元素的排列。通過頁面元素的有序排列，可以建立元素間的關系，從而更好地引導用戶體驗。作為網頁設計的關鍵組成部分，布局決定了頁面哪些元素最受關注，以及頁面的視覺整體平衡。總之，一個好的頁面布局可以將用戶的注意力引向正確的方向。先將他們吸引到最重要的元素上，然后按照重要性順序閱讀余下部分。
要實現良好的頁面布局，最好的辦法就是應用網格系統。網格是設計的骨架，可以幫助我們對齊，有序組織頁面內容。通過正確使用網格，我們不會隨意地把元素放到頁面里，而是明確地知道將這些元素放到哪些合理的位置上，有助于提高設計效率和設計質量。無論是 PC 端還是移動端設計，通過網格都將對我們做出有指導性的設計決策并為用戶創造更好的體驗。
網格由幾個部分組成，分別是 Column (列)、Gutter (槽)和 Margin (邊距)。它們在一起構成了屏幕的水平寬度。
接下來通過幾個圖例來詳細解釋下。
列(Column)是跨越內容區域的垂直部分。在網頁設計中列越多，網格就越靈活。列的寬度由設計師自己來決定，傳統做法是在 PC 端網頁上使用 12 個，Pad 端使用 8 個，移動端使用 4 個。列寬一般定義為 60~80px。列寬是影響實際內容寬度的關鍵因素。
槽(Gutter)是列與列之間的間隙。槽的作用是將每個模塊的內容進行縱向分割。較寬的槽更適合較大的屏幕設備，可以通過更寬的槽去拉開頁面的間距，使頁面信息展示的更加舒展。
邊距(Margin)是內容與屏幕左右邊緣之間的空間。更寬的邊距更適合更大的屏幕，因為它們會在內容的周邊創建更多的空白。
介紹了以上 3 個概念，我們可以利用 8pt 網格系統來對頁面進行分割。8pt 網格系統，使用 8 的增量來調整頁面元素的大小和間距。也就是說，頁面中的高度或寬度、邊距或填充都是 8 的倍數。
有沒有想過我們在做移動端界面設計的時候為什么選用特別小的畫板，但我們的顯示設備卻非常大？
比如，我們用 375×812 的尺寸來進行設計 iphone X，但其實 iphone X 的實際尺寸是 1125×2436，是我們設計尺寸的 3 倍。
因為設計尺寸會以 2 倍或 3 倍的像素進行渲染，比如 iphoneX 就是以 3 倍尺寸進行渲染，iphone8 或 iphoneXR 會以兩倍尺寸進行渲染。所以我們在進行設計的時候可以采用 1 倍最小尺寸進行設計，以適配到不同設備的不同尺寸。因此，1pt 可以分別轉換為 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。
所以我們設計一個 16pt 的圖標，導出@2x 或者@3x 的尺寸應該是 32px、48px
使用偶數來調整元素大小或元素間的間距可以很好的適配到各種尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇數來定義元素尺寸或間距，就很容易出現半個像素的情況。5px 在 1 倍尺寸中導出為 1.5 倍尺寸就容易出現半格像素的情況。之所以選擇 8，也是因為大部分的屏幕尺寸是可以被 8 整除的，這樣就很容易適配。此外在 PC 端沒有使用 2 或 4，是因為其顆粒度太小，不便于設計師進行操作；用 8 的倍數來設計還有一個好處就是避免我們在設計中過于糾結。
基于 8pt 網格的排版系統。字體的大小可以設計成不同的尺寸，但它們的行高要盡量是 8 的倍數。
在網頁端設計時，很少會遇到幾倍尺寸的輸出，所以通常情況下都以像素為單位，這樣的話就是 8px 的倍增。我們就可以把間距或者元素定義成以 8 的倍增不同尺寸。
例如：
small = 8px
medium = 16px
large = 24px
x-large = 32px
……
普及了上述概念后，我們一起進一步了解下頁面的布局，頁面布局大體分為幾類：固定布局、流動布局、自適應布局、響應式布局。
固定布局，顧名思義就是頁面的整體寬度是固定的，不會隨著瀏覽器的拉伸變化而變化。這種頁面相對死板單一，但對于設計師來講相對容易設計，也易于開發。
流動布局，它會隨著瀏覽器窗口的大小而變化，但是它變化的邏輯是以模塊的百分比來定義的。無論瀏覽器的寬度是多少，流動布局都會填滿頁面的寬度。其次流動布局不需要像響應式布局那么多樣性的變化。它在極大或極小的頁面寬度上會存在一些缺點。比如頁面很寬，內容可能會被拉伸得太長，單個文字段落可能會在單行上貫穿頁面。相反，小屏幕上的多列布局也可能對內容來說過于擁擠。
自適應布局可以理解為是固定布局的一個升級版，舉個例子，當頁面內容為 960px，此時頁面無論再往多寬拉伸，頁面內容始終顯示 960 寬度。如果縮小寬度到一個臨界值時，比如 960px 以內，頁面就會縮小到它的第二個寬度，假設是 640，以此類推。這個臨界值我們稱之為斷點。
響應式布局結合了流動布局和自適應布局。隨著瀏覽器寬度的增加或減少，響應式布局將像流動布局一樣進行變化。同時，如果瀏覽器寬度超出了某個臨界點，也就是斷點，那么頁面布局也會發生改變。通常，響應式布局是為了能夠兼容網頁端、平板端和移動端等不同設備進行設計的，這樣會給用戶帶來更好的瀏覽體驗。
最后用圖例展示下如何利用網格系統在網頁設計上進行頁面布局。
在 figma 上的設置如圖：
我們可以設置好列數，定義好列寬和槽寬來決定頁面的實際寬度。
在網頁設計上使用網格系統淺層價值是為了讓頁面布局有章可循，使頁面看起來更加統一，深層價值其實是為了做自適應布局，讓頁面在不同寬度下適配到不同的設備上。
這里我也創建了 4 種不同尺寸的網頁端網格系統，供大家參考，大家也可以根據自己的實際情況去建立自己的網格。
https://www.figma.com/community/file/1076073453929437640/8pt-web-grid
最后推薦一款 sketch 智能布局網格的插件，喜歡的同學附件進行下載。
切記，在實際項目中，盡可能靈活的使用網格，不必拘泥于 8pt 的單位，但盡量保持在偶數范圍。
參考文獻：
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
配圖取自文章《以B端產品為例，幫你深入淺出掌握「設計系統」》
設計系統 = 設計價值觀和原則+設計規范+場景定義+工具包
設計系統是在設計價值觀和原則、設計標準指導下的各種共享的設計模式和組件資產，是將產品設計團隊聯合在一起共同打造的一套質量和效率上都有所保障的可行性解決方案，能夠解決產品視覺、交互體驗一致性的問題、幫助傳達統一的品牌認知。幫助團隊快速完成產品迭代和功能開發！
問題 1:
隨著業務的拓展，產品和項目數量不斷增加，發展中期設計和交互上不一致性的問題浮出水面，需要采取措施確保產品或產品線之間保持統一的品牌傳達、外觀和體驗，以滿足用戶預期并向其傳達統一的品牌認知。
問題 2:
無統一的設計規范和交互原則，沒有統一的 UI 組件庫和代碼庫，各團隊設計和前端需花費大量資源陷入低質量溝通協作和重復造輪子，拖慢產品和項目設計和開發節奏。
問題 3：
產品項目數量 vs 產品設計師，人員配比嚴重不足的情況下，團隊的設計師們無法從雜/亂/急的日常需求中剝離出來，影響構建產品壁壘的質量和速度。
產品側：
保證可復用模塊的交互體驗的一致性。如同一個產品類型不同分支多個團隊完成的時候，可以保證產品團隊使用同一份設計規范快速完成產品原型設計。
設計側：
把設計師逐漸從不必要、重復性勞動中解放出來，節約出來的時間和精力放到更多有價值的工作上去。更多去關注對用戶需求和業務邏輯的深入挖掘，如果每個設計師都具備產品用研、交互、組件化等一條龍能力，才能體現 tob 產品設計師的價值，才不會被別人稱作是拖拽組件的“工具人”。
開發側：
形成開發資產，可以提升研發效率，降低維護成本。開發工程師無需再重復開發同一個組件，只需要去組件庫里調用即可，配合業務邏輯，高效完成界面開發。做到開箱即用。
測試側：
標準化的設計規范，是測試人員最喜歡看到的。1 是 1，2 是 2 的設計準則，提升了測試效率。例如，設計規范規定彈窗 footer 區按鈕組居右，那么測試人員只要測到不居右，就可以給產品提優化建議了。
主流設計系統-他山之石可以攻玉！
無需猶豫，直接基于現有的優秀的開源設計系統。
設計系統的打造不必從 0-1 構建， 例如：Ant Design 業界優秀的開源設計系統，我們完全可以站在前人的肩膀，最終生產出符合達觀品牌、業務特性的設計系統。
1. 原子理論設計介紹
首先原子設計理論并不是什么高大上的規則。最早是由國外前端開發工程師 Brad Frost 提出的，他從化學元素周期表中得到啟發，發現在化學世界中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。根據他的理論，設計體系主要包含 5 個層面：原子、分子、組織、模板、頁面。
原子理論設計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面，讓我們更深入的了解每一個概念哦～
2. 原子層(Atoms)：
原子是物質的基礎組成部分，是構成設計系統的最基礎元素。
在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、間距、陰影等。
簡單概述下來就五個字：色、形、質、構、質；
3. 分子(Molecules)層
在界面中，分子就像是一個由 UI 元素組成的相對簡單的組織。如：按鈕、彈窗、搜索框等。
以按鈕為例，它的組成元素包含了文字、色塊、圖標和間距。這些抽象的原子從毫無關聯組合成一個分子，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，間距為按鈕定義了一個尺寸和規范。
4. 組織(Organisms)層
分子+原子組合成更復雜和可擴展性的模塊，這個稱之為組織（區塊組件），如：列表操作區塊、列表展示區塊、表單區塊、數據統計卡片區塊。
以表單為例，一個表單我們可以通過數量的組合，以及間距的調整，元素的增減，在界面中表達不同的場景和含義。
5. 模板(Templates)層
由原子+分子+組織構成的更復雜更具拓展性的模塊，如：分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。
本質就是線框圖，模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。專注于頁面的底層的內容結構，頁面中的信息是占位作用，而不是頁面的最終內容。
6. 頁面(Pages)層
帶業務邏輯的場景案例如：標注詳情場景、抽取詳情場景、權限管理場景。頁面將真實內容應用于模板；
頁面是模板的具體實例，填充了真實的內容（圖片、文字等）后形成頁面，也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖，將占位符替換為有代表性的真實內容，使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的設計方案。
誤區 1：設計體系就是設計規范或者組件庫嗎？
許多人認為設計系統就是單個代碼庫、組件庫、設計規范，但實際上他們不是一個層次的東西，準確來說設計體系包含設計規范，組件庫也是建立在設計體系內的，組件庫是記錄和共享設計模式的工具，就是設計體系工具化和表現層的部分；
誤區 2：設計體系的存在扼制了組織內創造力，會替代掉設計師？
拋出這個問題，是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點，我個人是很難認同這個的，對 design system 的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合，需要調動整個團隊的想象力和創造力，最終達到一個統一共識才有可能被實施和執行；
好的設計系統可以通過流程和機制促進創造力的，而且好的設計資產可以幫助大家從不必要的、重復的勞動時間內節省出來，當然也不能過度依賴過往的沉淀資產，把自己定位為設計系統的創造者，而不是使用的工具人，不斷的創造和貢獻好的解決方案被整個組織采用，就不必再擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。不會替代掉設計師，反而是一個企業內部尊重設計師價值的開始！是企業對設計文化的認可！
誤區 3：設計系統是一勞永逸的嗎？
設計體系是動態的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經完成了設計體系的建設的人都是錯誤的，都是將靜態的設計規范曲解成了設計體系。
誤區 4：設計系統由少數人員生產，我們負責用就行了？
正確管理機制：少數人負責管理，多數人參與貢獻；避免你做、我用模式，這種生產消費模式非常內卷；避免如：我一個設計師為啥要用你的規范；這規范做的太垃圾用處不大，我才不用，用你做的規范；我苦逼做業務，你晉升拿結果的負面心態；
設計系統也不是簡單的靠少數的人 1-2 個月用愛發電就能完成的，設計系統是一群人，對一種做設計文化的認可，每個與之相關的人都應該是設計體系的貢獻者與布道者！
當然設計體系也容易出現一些缺點，這些問題需要設計體系的構建者們去摸索去克服；
盡管有一系列潛在的問題，但總的來說設計體系帶來的收益是大于這些投入的，總的來說方向是沒錯的，下一個關鍵問題是：我們如何去建立一個更優秀的設計體系。
今天就跟大家分享到這了，一點拙見，設計系統的話題這個我們分三期跟大家進行交流，如有興趣，鐵子們可以加個關注
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
