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