年少時(shí)，經(jīng)常聽到身邊的同事聊一些名詞概念，羨慕之余猶豫羞于提問，導(dǎo)致我經(jīng)常會陷入其中無法自拔，痛苦不已；過了這么多年，大多數(shù)概念都隨著工作的原因慢慢被理解和消化，或逐漸消失或不再提及。但唯獨(dú)，“設(shè)計(jì)系統(tǒng)”這個(gè)詞陰魂不散，反反復(fù)復(fù)的出現(xiàn)在我的面前，特別是在面試這個(gè)場景下，幾乎每一場都會有這個(gè)詞被提到。

也可能是每個(gè)候選人的認(rèn)知不同，對設(shè)計(jì)系統(tǒng)的理解略有不同，有的朋友會認(rèn)為設(shè)計(jì)系統(tǒng)是玄學(xué)，大話一套套的，根本沒卵用；也有的朋友會把設(shè)計(jì)系統(tǒng)和設(shè)計(jì)規(guī)范劃了等號。其實(shí)怎么理解跟輸出環(huán)境有很大的關(guān)系，不同的產(chǎn)品在不同的階段一定程度上對設(shè)計(jì)系統(tǒng)的依賴是有一定偏向性的，這就會導(dǎo)致設(shè)計(jì)師的認(rèn)知偏差；

也源于最近做B端稍微多一些，不如今天就以toB產(chǎn)品為例來嘮嘮我認(rèn)知下的設(shè)計(jì)系統(tǒng)是什么以及如何幫助設(shè)計(jì)落地執(zhí)行的。

理論上來講，設(shè)計(jì)系統(tǒng)分為兩個(gè)大部分，一部分是指導(dǎo)思想，另一部分是實(shí)際產(chǎn)出；前者去指導(dǎo)后者執(zhí)行，二者的關(guān)系像極了競技運(yùn)動中的教練安排的“戰(zhàn)術(shù)”和球員場上的“執(zhí)行動作”，如果用一張圖來表示，大概就是這么個(gè)事：

通過上面這張圖不難發(fā)現(xiàn)其實(shí)設(shè)計(jì)規(guī)范也就僅僅是系統(tǒng)中的一部分而已， 核心在設(shè)計(jì)語言的定義上，這是一個(gè)復(fù)雜的推理過程，需要對業(yè)務(wù)和設(shè)計(jì)同時(shí)有很深的理解，牽扯到很多虛虛實(shí)實(shí)結(jié)合的部分，我試圖總結(jié)了一些平時(shí)的思考來重點(diǎn)說一說這幾個(gè)模塊。

1. 語言構(gòu)成

需要強(qiáng)調(diào)的是，要設(shè)計(jì)一套“設(shè)計(jì)語言”，首先需要聚焦到“語言”這個(gè)詞上，通常我們認(rèn)知里的語言無非是一套溝通方式，因?yàn)槲覀儗λ?xí)以為常，所以并沒有更進(jìn)一步的了解，我試圖去查了下語言的來源，以及為什么世界上會出現(xiàn)這么多語言之類的問題，搜過出來的結(jié)果很多很復(fù)雜，但概括來說就是支撐一套語言的核心分為“語言特性”以及“語言構(gòu)成”這兩大部分。

第一塊，詞匯：ta的作用是讓你表達(dá)出想法，就好比如果你跟我一樣English is not good的情況下，還嘚嘚瑟瑟的出國游玩，一定也經(jīng)歷過用“蹦單詞+比劃”的方式去問路、點(diǎn)菜吧，典型的通過word的方式傳遞信息。

另一趴，語法，ta會讓你更順暢的表達(dá)出自己的想法，通過對詞匯的重組和編排，信息傳遞的有效性被大大增加，你可以通過“主動賓”來陳述觀點(diǎn)或表達(dá)疑問，盡可能的豐富此刻你的所思所想。就像上面的例子，按照語法規(guī)則稍微調(diào)整一下，看起來就順暢多的多了~

那么如果映射到設(shè)計(jì)上，顯而易見，組件庫對應(yīng)詞匯，交互流程對應(yīng)語法；所以你會發(fā)現(xiàn)當(dāng)我們不斷迭代產(chǎn)品的時(shí)候，我們無非就是想把產(chǎn)品當(dāng)做一件事情講清楚罷了。

但需要注意的是，設(shè)計(jì)師喜歡用更多的組件去表達(dá)想法這個(gè)事本無可厚非，但千萬別過于執(zhí)著，因?yàn)楹芏唷敖M件”針對性極強(qiáng)，通用和復(fù)用的價(jià)值不高，這就像我們經(jīng)常聽到的網(wǎng)絡(luò)詞匯一樣，一旦過了生命周期，這些詞就像成了過眼云煙，大概率不會再有用處。所以針對這種情況（之前的文章也有提到過），我建議要在組件的分類上下功夫，建立不同類型的分類幫助你應(yīng)對不同的場景，也可以有效的避免組件庫的肥胖癥：

再就是當(dāng)一套組件被創(chuàng)造出來，ta需要遵循一定的規(guī)則形成一個(gè)完整的頁面，跟我們造句幾乎一模一樣；所以這個(gè)時(shí)候充當(dāng)語法的交互流程就至關(guān)重要。現(xiàn)實(shí)情況下，往往交互形態(tài)是千變?nèi)f化的，經(jīng)常性的會因?yàn)闃I(yè)務(wù)場景的不同創(chuàng)造一些流程出來；但如果是基于語言的背景下，我們需要盡可能的抽練一些標(biāo)準(zhǔn)化的規(guī)則形成語法，我們稱之為“設(shè)計(jì)模式”：

這段鬼話理解起來太麻煩了，我試著翻一下大概就是：“為了避免重復(fù)造輪子，就搞了幾個(gè)通用的流程，以保證產(chǎn)品開發(fā)流程的效能問題”，嗯，就這么個(gè)意思...

以material design為例，官方給出了給出了很多規(guī)則，我仔細(xì)看了看，重新編組和分類了下：

我從中挑了搜索這個(gè)比較通用的模式來簡單講下；拋開組件的“點(diǎn)”思維，需要我們定義的是“信息交互”的“線性”流程，我試著把其中的每個(gè)環(huán)節(jié)提煉了出來，抽練了一個(gè)流程出來：

通過上圖也許你會發(fā)現(xiàn)“模式”注重的是流程節(jié)點(diǎn)的體驗(yàn)感知（用戶跟產(chǎn)品交互的一來一往），并注重封裝成標(biāo)準(zhǔn)化方案。另外有一點(diǎn)，我把整個(gè)搜索的過程分為了2個(gè)個(gè)小線程——輸入行為和消費(fèi)行為，這是為了以后團(tuán)隊(duì)協(xié)作更好的理解這條模式的運(yùn)作方式，以及之后的拓展，舉個(gè)例子：產(chǎn)品經(jīng)理決定加一個(gè)歷史搜索（就是顯示用戶過往的搜索結(jié)果），這個(gè)時(shí)候設(shè)計(jì)師就可以把這個(gè)功能當(dāng)做一個(gè)拓展包，直接扔到這個(gè)主干里來：

綜上， 模式最重要的起點(diǎn)和終點(diǎn)（可以理解成為目標(biāo)和結(jié)果），那么中間的過程就是可以被隨意定制和改變的，這也是模式的靈活性。

另外，toB CRM鼻祖salesforce在自己的設(shè)計(jì)網(wǎng)站上公布了他們的設(shè)計(jì)模式，給出了一些特定的場景下的解決方案，不過寫的相對更偏組件流程一些：

總的來說呢， 設(shè)計(jì)模式在互聯(lián)網(wǎng)設(shè)計(jì)的發(fā)展上，一定程度把交互設(shè)計(jì)師的價(jià)值充分利用了，因?yàn)閠a的存在，讓設(shè)計(jì)系統(tǒng)不再是UI設(shè)計(jì)師的專屬，更不是幾個(gè)顏色和字號就可以被定調(diào)的，ta的作用一直都是幫助一款產(chǎn)品在成為優(yōu)秀產(chǎn)品的道路上，傳遞出更“別具一格”且“優(yōu)雅”的信息；

PS . 插個(gè)有的沒的的小話題，一個(gè)很好玩的事，如果你細(xì)心琢磨的話，也許會發(fā)現(xiàn)其實(shí)組件本身也是帶有一定的潛在交互，這種交互不需要你特意安插，天生就有，就好比一個(gè)按鈕擺在那，在沒有任何引導(dǎo)的情況下，正常人也知道點(diǎn)一點(diǎn)。所以映射到語言里，語法貌似并不是必要的（當(dāng)然ta的存在是為了設(shè)計(jì)系統(tǒng)更完整，產(chǎn)品更好），比如這個(gè)爛大街的梗：

這種現(xiàn)象是著名的“貝葉斯理論”，利用相關(guān)信息總結(jié)出未知信息，也就是說我們的大腦是可以通過殘缺的信息來補(bǔ)足未知的信息的，人類的大腦真的是奇奇妙妙啊~

2. 語言特性

相比構(gòu)成，特性這個(gè)就好理解多了，相當(dāng)于設(shè)計(jì)原則這類的，我們需要通過一定的規(guī)則約束對語言有一個(gè)明確的指向；比如現(xiàn)代漢語就具備適應(yīng)性、開放性兩大特征。

同樣的，設(shè)計(jì)系統(tǒng)在被不斷使用和執(zhí)行的路上需要有明確的引導(dǎo)，一方面幫助現(xiàn)有產(chǎn)品應(yīng)對迭代的需求，另一方面保證組件、模式的不斷擴(kuò)容滿足各種適應(yīng)性場景，與之匹配的就是“設(shè)計(jì)原則”了。

但不得不說，作為面試官我個(gè)人不是很喜歡作品集里描述設(shè)計(jì)原則的時(shí)候就3個(gè)詞：“簡潔”“高效”“清晰”。并不是討厭這三個(gè)詞，而是當(dāng)我追問候選人為什么是這三個(gè)的時(shí)候，我得到的回復(fù)基本是Material Design（或其他大廠的設(shè)計(jì)系統(tǒng)）就是這么寫的亦或是其他很蒼白的回答，這無疑是暴露了對設(shè)計(jì)系統(tǒng)的認(rèn)知?dú)埲保且粋€(gè)非常掉分的互動過程。其實(shí)，當(dāng)google、IBM、salesforce在對外宣講他們的設(shè)計(jì)原則的時(shí)候，也許就只有兩個(gè)字“清晰”，但背后或許有非常多的思考，甚至超乎你我的想象。

但...異乎尋常的是，AntDesign 的設(shè)計(jì)原則寫的很"深奧"，憑我的功力真的看不出背后的東西，也不知道如何指導(dǎo)設(shè)計(jì)（也許他們是在探索設(shè)計(jì)哲學(xué)吧哈哈哈哈）：

在我設(shè)計(jì)過B端產(chǎn)品里，我更希望盡可能的把 設(shè)計(jì)原則按照不同角色視角的方式去劃分，舉個(gè)例子：

假設(shè)現(xiàn)在我們正在為一款工具類SaaS系統(tǒng)做設(shè)計(jì)（0-1階段），這個(gè)時(shí)候最好確定一個(gè)方向來綜合考慮業(yè)務(wù)訴求、產(chǎn)品訴求、設(shè)計(jì)訴求和最重要的用戶訴求（這基本包含了從生產(chǎn)到實(shí)用這條流程線上的所有角色），ta們分別承載著不同角色的不同期望，互相成就又彼此制約；所以需要從4個(gè)角色的不同角度分別提取訴求：

當(dāng)我們對上述各方訴求梳理清楚后，首先要精準(zhǔn)的概括和整理這些內(nèi)容的權(quán)重和占比（需要注意的是，雖然允許多個(gè)原則存在，但也要有一定的側(cè)重和比例，這種做法在順暢的環(huán)節(jié)上不會有所建樹，但在多個(gè)原則沖突的情況下為了保全大局，順應(yīng)占比最大的原則是相對穩(wěn)妥的選擇，一定程度上可以幫助設(shè)計(jì)師規(guī)避掉不必要的糾結(jié)或撕逼的過程）；再然后基于當(dāng)下的情況產(chǎn)出相應(yīng)的原則，形成整套設(shè)計(jì)系統(tǒng)的王炸：

但在實(shí)際操作中，高度整合后的設(shè)計(jì)原則雖然指明了方向，但缺失了可衡量性，這就會導(dǎo)致“認(rèn)知偏差”的情況，因?yàn)槊總€(gè)人對圖例中的“高效”或“靈活”理解不同，會對同一個(gè)事物有不同的理解，就跟“小馬過河”這個(gè)典故一樣，小松鼠覺著水很深，小馬卻覺著也就那樣；也正是基于此，需要設(shè)計(jì)師們在此基礎(chǔ)上拆分明確的細(xì)則，幫助整個(gè)團(tuán)隊(duì)建立統(tǒng)一認(rèn)知：

到這一步基本上設(shè)計(jì)系統(tǒng)就被定了調(diào)了，我們可以明確對一個(gè)設(shè)計(jì)進(jìn)行評判和衡量，以“清晰”為例，我們有個(gè)B端產(chǎn)品里面有個(gè)表單填寫的頁面，需要用戶提供一些個(gè)信息，前兩天，團(tuán)隊(duì)一個(gè)設(shè)計(jì)師做了個(gè)方案是把表單新開tab，但產(chǎn)品覺著不夠清晰，反而覺著蒙版的形式更清晰。他就很疑惑，明明信息獲得了更好的展示咋就不清晰了？

說到底，是我們在做設(shè)計(jì)定義的時(shí)候，對“清晰”的認(rèn)知就是偏薄的，這個(gè)案例里面顯然第一個(gè)方案對信息的展示更加充分明了，但在這個(gè)場景下“清晰”并不僅僅指的是信息呈現(xiàn)，產(chǎn)品經(jīng)理希望用戶透過浮層能確認(rèn)當(dāng)前處在哪一步（或哪個(gè)頁面）也同樣是一個(gè)維度；從這個(gè)case里，你會發(fā)現(xiàn)，定義一個(gè)原則真的不僅僅是搬運(yùn)一個(gè)名詞這么簡單，所有的原則和特性必須遵循易于操作且合理，這樣才是一條合格且優(yōu)秀的原則。

ps . Salesforce的Lightning設(shè)計(jì)系統(tǒng)是我最喜歡的design system之一，原因很多，其中很重要的一條是因?yàn)樗麄冋娴氖?strong style="outline:0px;margin:0px;padding:0px;">把“美”作為一個(gè)很重要的原則：

嗯~nice，非常符合設(shè)計(jì)師的三觀，也很真實(shí)，很實(shí)在哈哈哈哈~

唉媽...啰嗦了一大頓，終于講到了設(shè)計(jì)規(guī)范了，作為設(shè)計(jì)系統(tǒng)的中樞，設(shè)計(jì)規(guī)范承接了指導(dǎo)思想和設(shè)計(jì)落地兩者，更像一本說明書，我挑了個(gè)點(diǎn)重點(diǎn)說一下（前面費(fèi)了太多口舌了，實(shí)在是沒有力氣再寫下去了哈哈哈哈）；

色彩體系的定制往往是重災(zāi)區(qū)，最常見的做法是把顏色用色塊的方式一字排開，一排叫做品牌色，一排叫做輔助色，還有一排是灰度：

這種定義存在很大的風(fēng)險(xiǎn)，就跟菜譜只告訴你需要哪些食材，不告訴你配比一樣，做出來的菜大概率是一塌糊涂，難以下咽。所以如果你正在建設(shè)一套團(tuán)隊(duì)協(xié)作級別的設(shè)計(jì)規(guī)范，務(wù)必要把“協(xié)作”當(dāng)做最重要的事，用比例的方式來告訴你的隊(duì)友他們應(yīng)該怎么做：

同理，其他的模塊，比如字號，間距，圖標(biāo)，我都建議盡可能的“場景化”，讓設(shè)計(jì)規(guī)范有一定的代入感，這樣會大大提高設(shè)計(jì)的效能和品質(zhì)。

拋出這個(gè)問題，是因?yàn)榻?jīng)常在不同的場合聽到“設(shè)計(jì)系統(tǒng)是扼殺設(shè)計(jì)師的創(chuàng)造力”之類的觀點(diǎn)；我個(gè)人是很難以認(rèn)同這個(gè)的，對design system的最大誤解就是限制設(shè)計(jì)師的想象力。首先設(shè)計(jì)系統(tǒng)本身就是一個(gè)龐大且復(fù)雜的設(shè)計(jì)觀集合，需要調(diào)動整個(gè)團(tuán)隊(duì)的想象力和創(chuàng)造力，最終達(dá)到一個(gè)統(tǒng)一共識才有可能被實(shí)施和執(zhí)行；其次，創(chuàng)造力并不全是設(shè)計(jì)個(gè)btn或者彈窗，真正能展示創(chuàng)造力的是像樂高一樣，通過零件（組件）拼裝成各種各樣的令人嘆為觀止的創(chuàng)意，那才是我理解的創(chuàng)造力：

另外從系統(tǒng)性思維上講，如果在不考慮資源的情況下，我倒是挺支持每一位設(shè)計(jì)師都自己去設(shè)計(jì)一套設(shè)計(jì)系統(tǒng)，因?yàn)樵谖覀兤綍r(shí)看來，2/3年經(jīng)驗(yàn)的設(shè)計(jì)師和10年的設(shè)計(jì)師他們的產(chǎn)出物或許不會差太多，但對設(shè)計(jì)觀架構(gòu)的能力千差萬別，前者依賴感覺和直覺素養(yǎng)做事，后者更靠縝密的邏輯和推理來做事；我更喜歡后者多一些，并不是因?yàn)樗麄冎v起自己作品的時(shí)候聽起來多么高大上，而是因?yàn)橐罁?jù)推理方法可以時(shí)刻保持輸出的穩(wěn)定性。

如果你了解NBA的話，你一定知道美職籃里天賦最高的運(yùn)動員 - 麥迪，他有過35秒13分驚為天人之作，把心理素質(zhì)和身體極限展示的淋漓盡致，但就整個(gè)職業(yè)生涯來說，并不算特別突出，對比同時(shí)代的科比來說，他的個(gè)人/團(tuán)隊(duì)成就都還顯得差點(diǎn)意思；天賦不算頂級的科比通過不斷的自我訓(xùn)練和戰(zhàn)術(shù)研究能夠保持20年的穩(wěn)定輸出，贏得了5個(gè)總冠軍戒指，成為了我們這一代球迷心目中的“神”。

我無意詆毀這兩大巨星，也無意內(nèi)卷，只是想說，做事，終究不能托付給“天賦”和“靈感”，勤奮和努力在一定程度上也許可以幫你飛到更高。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷   作者：負(fù)能量補(bǔ)給站

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( paul-jarrel.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)