這種方法的限制很多，比如你將圖片插入修改為“四周緊密型”，那么你插入的圖片在編輯器中看不到，實(shí)際使用的時(shí)候是可以看見的。這就很別扭了，還有就是圖片好像會成為附件，如果有你的照片你不想別人每次下載附件將你的照片下載過去吧·······
上一篇我們已經(jīng)講述了產(chǎn)品發(fā)展的生命周期，而現(xiàn)階段你的B端產(chǎn)品處于什么生命周期？在這個(gè)階段產(chǎn)品要解決的問題是什么？在產(chǎn)品發(fā)展的過程中，設(shè)計(jì)體系又應(yīng)該如何構(gòu)建？本文將基于B端產(chǎn)品的發(fā)展階段，帶你詳細(xì)了解設(shè)計(jì)體系的正確構(gòu)建方式。
前言
對于產(chǎn)品體量較大、發(fā)展周期相對較長的B端產(chǎn)品來說，任何一個(gè)設(shè)計(jì)決策的沉沒成本都是巨大的。
若在產(chǎn)品初期就過多制地定規(guī)范，就容易限制產(chǎn)品設(shè)計(jì)的創(chuàng)意性；而在產(chǎn)品框架成熟之后盲目地進(jìn)行“創(chuàng)意”，則容易造成體驗(yàn)一致性的缺失，以及大量的重復(fù)開發(fā)工作。
在合適的階段做正確的事情，能夠極大降低產(chǎn)品的設(shè)計(jì)和開發(fā)成本，保證最高的投入產(chǎn)出比。
在產(chǎn)品的不同生命周期中，產(chǎn)品需要解決的問題、工作內(nèi)容、建設(shè)方向是不同的，而對于設(shè)計(jì)的需求也會存在差異。因此，針對不同的階段，需要制定不同的策略，才能讓設(shè)計(jì)發(fā)揮最大的價(jià)值，并逐步構(gòu)建完整的設(shè)計(jì)體系。
你的產(chǎn)品處于哪個(gè)階段？在這個(gè)階段中，設(shè)計(jì)師應(yīng)該重點(diǎn)做哪些事情，才能逐步構(gòu)建設(shè)計(jì)體系呢？
「新生期」確立風(fēng)格，關(guān)注核心場景的最優(yōu)體驗(yàn)
如果你的產(chǎn)品目前處于新生期，那么恭喜你～ 你將有機(jī)會從零開始構(gòu)建一套完整的設(shè)計(jì)體系。
處于新生期的產(chǎn)品，首先要解決的兩個(gè)核心問題是：用戶是誰？需要解決什么問題？
產(chǎn)品的目標(biāo)用戶群，將決定你的產(chǎn)品風(fēng)格；而需要關(guān)注的核心問題，便是產(chǎn)品的核心場景體驗(yàn)。因此，在產(chǎn)品設(shè)計(jì)上，也將圍繞這兩個(gè)重點(diǎn)來展開。
A.「 確立產(chǎn)品風(fēng)格 」感知性模型的初步構(gòu)建
首先，我們要為產(chǎn)品創(chuàng)建產(chǎn)品主風(fēng)格，并以此基礎(chǔ)進(jìn)行延展，構(gòu)建初步的感知性模型。感知性模型是控制產(chǎn)品外觀的一套設(shè)計(jì)規(guī)范，不僅包含產(chǎn)品風(fēng)格，還包含以主風(fēng)格為基礎(chǔ)制定的組件視覺風(fēng)格。
影響產(chǎn)品風(fēng)格的因素很多，但其中最為核心的一定是“人”。
用戶是那些人?（用戶畫像：如性別、用戶年齡區(qū)間、工作、喜好等）將會決定產(chǎn)品的定位，進(jìn)而決定產(chǎn)品的調(diào)性傾向。
競品長什么樣？我們還需要在前期進(jìn)行充分的競品調(diào)研，分析目前市場上的產(chǎn)品現(xiàn)狀，在設(shè)計(jì)上保證產(chǎn)品的獨(dú)特性，讓用戶能更好地記住產(chǎn)品。
需要注意的是，感知性模型的建立，通常與品牌特征具有強(qiáng)相關(guān)性。為了保證品牌調(diào)性的一致，設(shè)計(jì)師需要思考如何在產(chǎn)品中植入這個(gè)“感知點(diǎn)”，并恰當(dāng)?shù)爻霈F(xiàn)在不同的體驗(yàn)場景中，加深用戶對于“感知點(diǎn)”的印象。
比如在網(wǎng)易七魚的所有設(shè)計(jì)中，為了使所有場景具有統(tǒng)一的品牌調(diào)性，在圖形風(fēng)格、配色、界面布局的設(shè)計(jì)上都采用了一致的延續(xù)性。
感知性模型的建立，其實(shí)與品牌DNA有異曲同工之妙。優(yōu)秀而獨(dú)特的產(chǎn)品風(fēng)格，可以讓用戶擁有更好的記憶點(diǎn)和歸屬感，并成為用戶傳播的基礎(chǔ)。
B.「 關(guān)注產(chǎn)品的核心體驗(yàn) 」
在新生期，產(chǎn)品的核心功能將會是最主要的競爭力。
這一階段，設(shè)計(jì)師應(yīng)該專注于核心功能，將核心場景體驗(yàn)做到最佳。用戶使用產(chǎn)品時(shí)通常處于什么場景？如何讓用戶更好地解決問題？流程是否可以更精簡？通過不斷地思考、嘗試、驗(yàn)證，找到最佳的產(chǎn)品設(shè)計(jì)方案。
而非核心場景的設(shè)計(jì)，因?yàn)闃I(yè)務(wù)還在不斷發(fā)展中，將會伴隨大量的試錯(cuò)和調(diào)整。所以只需制定基礎(chǔ)性的規(guī)范即可，否則反而容易限制設(shè)計(jì)師的發(fā)揮，對效率的提升也不明顯。
當(dāng)然，在設(shè)計(jì)之前，進(jìn)行廣泛的競品研究也是必要的。競品是如何解決問題的？我們是否擁有更優(yōu)的解決方案？我們可以將一些好的、更高效的設(shè)計(jì)方式結(jié)合到產(chǎn)品中。
什么時(shí)機(jī)進(jìn)行競品研究是最佳的？我建議設(shè)計(jì)師先經(jīng)過完整的自主思考，并擁有自己的解決方案之后，再開始進(jìn)行競品的調(diào)研。這樣有利于產(chǎn)出更具創(chuàng)意性的方案，而不僅僅只是“比競品好的方案”。
需要說明的是，這里的體驗(yàn)指綜合性的產(chǎn)品體驗(yàn)，包含了產(chǎn)品核心邏輯、交互方式與視覺設(shè)計(jì)，將會涉及到產(chǎn)品不同的職能。
產(chǎn)品流程決定了用戶解決問題的路徑。是否能夠解決用戶核心痛點(diǎn)？是否合理？是都具備通用性？這些都決定了產(chǎn)品未來的用戶廣度與銷售范圍；而產(chǎn)品交互則決定最合理的人機(jī)交互形式。如何更高效？如何使操作更方便？如何讓新用戶擁有更低的學(xué)習(xí)成本，等等……
這些工作雖然在視覺設(shè)計(jì)師工作的范疇以外，但對于產(chǎn)品至關(guān)重要。作為產(chǎn)品團(tuán)隊(duì)的重要成員，我建議設(shè)計(jì)師主動(dòng)去學(xué)習(xí)并參與到這些環(huán)節(jié)。
在設(shè)計(jì)中主動(dòng)思考，提出自己的看法與建議，這樣才能真正的從根本上去提升產(chǎn)品的核心體驗(yàn)，增強(qiáng)產(chǎn)品的競爭力。
「成長期」通過組件庫建立“引用”模式，構(gòu)建團(tuán)隊(duì)協(xié)作模型
如果你的產(chǎn)品在這個(gè)時(shí)期，設(shè)計(jì)團(tuán)隊(duì)?wèi)?yīng)該及早讓產(chǎn)品的”生產(chǎn)流程“標(biāo)準(zhǔn)化。因?yàn)楫a(chǎn)品的頁面、模塊數(shù)量將會開始迅速增加，標(biāo)準(zhǔn)化越早，能夠節(jié)約的成本也就越高。
通過組件化建立“引用機(jī)制”，可以讓產(chǎn)品擁有統(tǒng)一的“零件”標(biāo)準(zhǔn)。之后，再圍繞“零件”標(biāo)準(zhǔn)，構(gòu)建團(tuán)隊(duì)的協(xié)作模型，使整個(gè)產(chǎn)品的“生產(chǎn)線”更加標(biāo)準(zhǔn)化，從而提升產(chǎn)品的效率與品質(zhì)。
A.「 啟動(dòng)產(chǎn)品組件化，建立“引用機(jī)制” 」
進(jìn)入成長期，在產(chǎn)品形態(tài)初步穩(wěn)固之后，就可以開始啟動(dòng)產(chǎn)品組件化了。
組件化，就是將頁面拆分成可復(fù)用的最小單元。如果將頁面比喻成物質(zhì)，那么組件就類似于“原子”，每個(gè)組件獨(dú)立封裝，又可以集中維護(hù)，以此來管理和維護(hù)整個(gè)頁面。
組件本身又分為基礎(chǔ)組件與復(fù)合組件，就像“原子”與“分子”的關(guān)系。基礎(chǔ)組件可以作為一部分嵌套在復(fù)合組件中，這也可以保證復(fù)雜組件與基礎(chǔ)組件之間的延續(xù)性和可控性。
與設(shè)計(jì)規(guī)范不同的是，因?yàn)榻M件庫包含了封裝的前端代碼，其統(tǒng)一性在執(zhí)行上往往比設(shè)計(jì)規(guī)范要徹底得多。
而組件化更長遠(yuǎn)的價(jià)值，在于“引用”機(jī)制的建立，以及基于組件庫進(jìn)行的工作模式升級。引用模式可以使所有相同的組件都有共同的控制節(jié)點(diǎn)，使整個(gè)產(chǎn)品形成可控的逐級鏈路，對所有末端組件進(jìn)行集中控制。
在封裝的組件庫中，我們還可以植入統(tǒng)一的API接口，使所有組件可以進(jìn)行主題定義。比如整體的配色、圓角度數(shù)、間距、模式等等。這樣，每個(gè)組件將會有非常多樣化的配置方式，以此來適應(yīng)不同場景、不同的風(fēng)格。
是不是很像前文中提到的自然構(gòu)成算法？基礎(chǔ)物質(zhì) X 隨機(jī)變量 X 算法/秩序 = 可控的復(fù)雜系統(tǒng)。
任何一個(gè)新的產(chǎn)業(yè)進(jìn)入成熟期以后，都會逐漸將某些環(huán)節(jié)進(jìn)行標(biāo)準(zhǔn)化，以此來提升效率、降低成本。通過無數(shù)個(gè)標(biāo)準(zhǔn)化的結(jié)合，逐漸形成體系，最終影響整個(gè)行業(yè)，而數(shù)字產(chǎn)品的發(fā)展，也必然會經(jīng)歷這個(gè)階段。
通過組件庫，不僅可以保證每個(gè)組件樣式、交互、反饋上的一致性，還能統(tǒng)一對組件進(jìn)行優(yōu)化和維護(hù)。極大地提升了產(chǎn)品的可控性，降低產(chǎn)品開發(fā)成本，也增強(qiáng)了產(chǎn)品的使用體驗(yàn)。
當(dāng)然，在組件庫的創(chuàng)建上有不同的選擇，使用開源組件還是自行研發(fā)，需要企業(yè)根據(jù)自身情況計(jì)算投入產(chǎn)出比。自研組件庫是一個(gè)龐大的工程，雖然成本較高，但對于組件的匹配性、易用性、穩(wěn)定性等方面都會有較強(qiáng)的優(yōu)勢。對于體量較大的B端產(chǎn)品來說，通過組件庫節(jié)約的開發(fā)成本，往往遠(yuǎn)大于開發(fā)成本，而這也是大企業(yè)選擇自建組件庫的重要原因。
從零到一進(jìn)行組件庫的創(chuàng)建，將會經(jīng)歷一個(gè)比較長的周期。常規(guī)的流程是：產(chǎn)品經(jīng)理負(fù)責(zé)組件的定義，之后由交互設(shè)計(jì)進(jìn)行單個(gè)組件的交互原型、交互規(guī)范的設(shè)計(jì)，在三方評審?fù)ㄟ^后才會進(jìn)入視覺設(shè)計(jì)的階段。
在組件的視覺設(shè)計(jì)中，不僅需要考慮單個(gè)組件的規(guī)范性，還需要考慮整個(gè)組件的數(shù)值一致性、代碼的復(fù)用性、復(fù)合組件的嵌套關(guān)系，以及全局API植入等細(xì)節(jié)因素。關(guān)于組件庫的從零到一創(chuàng)建，之后會有單獨(dú)的文章進(jìn)行概述。
B.「 團(tuán)隊(duì)協(xié)作模型的升級 」
隨著產(chǎn)品模塊的逐漸增加，不同模塊的產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺設(shè)計(jì)師等也將快速增加。團(tuán)隊(duì)較小時(shí)，產(chǎn)品的一致性與統(tǒng)一性可以通過小范圍溝通去解決，一旦團(tuán)隊(duì)規(guī)模擴(kuò)大以后，這種模式便難以解決問題。
一方面，組件本身的標(biāo)準(zhǔn)需要符合不同模塊的需求。另一方面，不同模塊的產(chǎn)品框架、規(guī)則需要有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，才能避免產(chǎn)品“混亂度”的不斷增加。
因此，在產(chǎn)品的成長期，我們需要一個(gè)對組件標(biāo)準(zhǔn)、體驗(yàn)一致性進(jìn)行管理的團(tuán)隊(duì)，可以暫且稱之為——產(chǎn)品設(shè)計(jì)標(biāo)準(zhǔn)委員會。
委員會可以是虛擬的項(xiàng)目組，也可以是一個(gè)群，在有需要的時(shí)候進(jìn)行討論，并進(jìn)行文檔的沉淀。當(dāng)遇到有可能跨模塊的內(nèi)容，或者能夠復(fù)用于其他模塊的通用方案時(shí)，都要通過委員會進(jìn)行評審。同時(shí)，委員會可以定期對產(chǎn)品內(nèi)容進(jìn)行排查，查看在產(chǎn)品中是否含有可統(tǒng)一、可標(biāo)準(zhǔn)化的內(nèi)容。
比如在七魚工作臺中，抽屜式內(nèi)容是每個(gè)模塊都會出現(xiàn)的。但是，因?yàn)椴煌K是由不同產(chǎn)品經(jīng)理負(fù)責(zé)，所以內(nèi)容模塊的標(biāo)準(zhǔn)就會存在差異，比如模塊的布局、信息展示的排版、甚至ICON都不一致。
這就會造成兩方面問題。一方面，用戶在切換模塊后，需要重新對信息格式進(jìn)行適應(yīng)，甚至無法關(guān)聯(lián)相同的信息，導(dǎo)致學(xué)習(xí)成本增加。另一方面，當(dāng)一個(gè)模塊需要接入另一個(gè)模塊的抽屜內(nèi)容時(shí)，內(nèi)容標(biāo)準(zhǔn)與樣式的差異性，也為大大增加開發(fā)和維護(hù)成本。
這種全局的統(tǒng)一設(shè)計(jì)標(biāo)準(zhǔn)，單獨(dú)一個(gè)模塊的設(shè)計(jì)師或者產(chǎn)品，都是很難推動(dòng)的。必須擁有一個(gè)標(biāo)準(zhǔn)審核的機(jī)制，使不同模塊的同類內(nèi)容具有相同的設(shè)計(jì)標(biāo)準(zhǔn)，才能使產(chǎn)品在發(fā)展中始終保持有序發(fā)展，避免產(chǎn)品走向混亂，最終導(dǎo)致產(chǎn)品“失控”。
團(tuán)隊(duì)協(xié)作模型的建立，將會逐漸沉淀出一系列的“跨模塊設(shè)計(jì)標(biāo)準(zhǔn)”，而這些標(biāo)準(zhǔn)將會成為逐漸整合為“規(guī)范體系”，最終構(gòu)建成為完整“模式語言”。
C.「 設(shè)計(jì)中臺化 」
在產(chǎn)品的成長期，隨著設(shè)計(jì)團(tuán)隊(duì)的人數(shù)的增加，設(shè)計(jì)團(tuán)隊(duì)的中臺化也是需要考慮的事情。特別是隨著Figma以及其他云端協(xié)作軟件的出現(xiàn)，也使團(tuán)隊(duì)設(shè)計(jì)文檔管理與協(xié)作的方式更簡單了。
對于設(shè)計(jì)團(tuán)隊(duì)來說，設(shè)計(jì)中臺的建立主要有以下幾個(gè)優(yōu)勢：
- 標(biāo)準(zhǔn)文檔管理：設(shè)計(jì)中臺將會作為所有設(shè)計(jì)標(biāo)準(zhǔn)的來源，讓所有設(shè)計(jì)師可以進(jìn)行調(diào)用。比如組件庫設(shè)計(jì)稿的存放與維護(hù)、ICON繪制規(guī)范、全局Banner規(guī)范、框架規(guī)范等。
- 資源共享：將一些通用的、質(zhì)量好的設(shè)計(jì)元素進(jìn)行共享，提升利用率和統(tǒng)一性。
- 項(xiàng)目協(xié)作：大型項(xiàng)目的多設(shè)計(jì)師協(xié)作
- 資產(chǎn)沉淀：隨著項(xiàng)目的進(jìn)行，我們會積累大量的設(shè)計(jì)資源。設(shè)計(jì)中臺不僅是設(shè)計(jì)稿的存放庫，也可以將優(yōu)質(zhì)的設(shè)計(jì)資源進(jìn)行分類，形成團(tuán)隊(duì)資產(chǎn)，方便設(shè)計(jì)師進(jìn)行學(xué)習(xí)與調(diào)用。
設(shè)計(jì)中臺的建立，能夠引導(dǎo)標(biāo)準(zhǔn)的統(tǒng)一，降低團(tuán)隊(duì)的溝通和協(xié)作成本，是推動(dòng)設(shè)計(jì)體系建設(shè)的重要因素。
「成熟期」構(gòu)建模式語言，整合功能性模型+協(xié)作模型
在經(jīng)歷成熟的的快速擴(kuò)張之后，產(chǎn)品形態(tài)將最終進(jìn)入一個(gè)相對穩(wěn)定的階段。其模塊數(shù)量、頁面數(shù)量已經(jīng)足夠巨大，雖然可能還伴隨著一些功能的增加或完善，但這座“大樓”已經(jīng)基本成型了，“樓層”已經(jīng)基本確定，剩下的可能是基于“樓層”建立更多的房間等等。
在這個(gè)階段，設(shè)計(jì)團(tuán)隊(duì)需要將前期積累的“標(biāo)準(zhǔn)框架”構(gòu)建為統(tǒng)一的功能性模型，并整合功能性模型（組件庫）和協(xié)作模型，形成真正的設(shè)計(jì)體系。
A.「 逐步建立模式語言，構(gòu)建產(chǎn)品搭建模型 」
隨著協(xié)作模型的建立，不同模塊在進(jìn)行設(shè)計(jì)時(shí)，都會進(jìn)行標(biāo)準(zhǔn)的統(tǒng)一。在成熟期之前，因?yàn)楫a(chǎn)品形態(tài)還在擴(kuò)張，這個(gè)標(biāo)準(zhǔn)都是比較零碎的。當(dāng)產(chǎn)品進(jìn)入成熟期后，設(shè)計(jì)團(tuán)隊(duì)就需要將這些零碎的規(guī)范進(jìn)行梳理，形成規(guī)范體系。
比如下圖的產(chǎn)品構(gòu)建框架規(guī)范，便是產(chǎn)品搭建的標(biāo)準(zhǔn)之一。比如一二級菜單的出現(xiàn)位置，頁面中標(biāo)題、操作區(qū)、列表應(yīng)如何布局等等…
以及在具體的功能頁面中，不同頁面的細(xì)則規(guī)范、應(yīng)用切換方式，頁面的預(yù)加載樣式如何統(tǒng)一等。
最終，我們會將所有的全局規(guī)范、框架規(guī)范、信息架構(gòu)，都整合為完整的模式語言（規(guī)范體系），以此來指導(dǎo)設(shè)計(jì)師/產(chǎn)品經(jīng)理進(jìn)行產(chǎn)品的統(tǒng)一設(shè)計(jì)。
B.「 功能性模型+模式語言 」產(chǎn)品快速構(gòu)建
完成模式語言（規(guī)范體系）的構(gòu)建后，結(jié)合我們的功能性模型（組件庫），就可以初步形成了產(chǎn)品的快速搭建能力——即一些常規(guī)的頁面，產(chǎn)品經(jīng)理可以在沒有設(shè)計(jì)時(shí)參與的情況下，自主進(jìn)行快速搭建。設(shè)計(jì)師只需要在搭建完成后，針對頁面進(jìn)行走查即可。
整個(gè)搭建過程類似于樂高積木，通過單個(gè)組件進(jìn)行框架搭建，然后遵循頁面的結(jié)構(gòu)進(jìn)行組件填充，之后形成產(chǎn)品的功能模塊，再更進(jìn)一步，將多個(gè)功能模塊再搭建成業(yè)務(wù)系統(tǒng)。
通過“樣式組件化”+“規(guī)范體系化”，再配合逐步完善的協(xié)作模型，整個(gè)產(chǎn)品團(tuán)隊(duì)最終將形成了完善的設(shè)計(jì)體系。
快速搭建體系的建立，可以創(chuàng)造更高效的資源分配模式。
一方面，對于產(chǎn)品來說，這意味著大量的資源可以從簡單、重復(fù)性高的工作中脫離出來。通過快速搭建體系，標(biāo)準(zhǔn)化和簡單的設(shè)計(jì)任務(wù)就無需設(shè)計(jì)師參與，可由經(jīng)過培訓(xùn)的產(chǎn)品經(jīng)理直接進(jìn)行搭建，而前端開發(fā)因?yàn)榻M件化與設(shè)計(jì)標(biāo)準(zhǔn)的統(tǒng)一，代碼復(fù)用率也大大提升，節(jié)約了大量的開發(fā)資源。
另一方面，因?yàn)椤吧a(chǎn)原料”與“生產(chǎn)流程”的統(tǒng)一，使得產(chǎn)品的設(shè)計(jì)一致性得到極大的提升。
C.「 提供高質(zhì)量的用戶體驗(yàn) 」
在產(chǎn)品進(jìn)入成熟期后，產(chǎn)品通常已經(jīng)具備了龐大的用戶量。而在B端產(chǎn)品競爭日趨激烈的今天，用戶體驗(yàn)將會越來越成為產(chǎn)品的核心競爭力之一。因此，提供高質(zhì)量的用戶體驗(yàn)，將會成為非常有價(jià)值的事情。
特別是在產(chǎn)品快速發(fā)展的成長期，為了配合版本迭代，而忽略的大量體驗(yàn)問題，都要在這個(gè)階段有針對性的進(jìn)行解決。
而設(shè)計(jì)體系的建立，使得設(shè)計(jì)師擁有更多的時(shí)間專注于關(guān)鍵場景的體驗(yàn)升級。
產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)可以定期針對產(chǎn)品進(jìn)行體驗(yàn)評估，掃描目前產(chǎn)品出現(xiàn)的問題。確定列表后與各相關(guān)方確定優(yōu)先級，之后根據(jù)優(yōu)先級進(jìn)行排期，并跟蹤結(jié)果，最終驗(yàn)證體驗(yàn)問題的解決成果。
比如為了解決頁面在加載中的卡頓問題，設(shè)計(jì)團(tuán)隊(duì)為七魚的主要頁面設(shè)計(jì)了一套頁面預(yù)加載模式。提升頁面流暢性，盡量減少用戶等待中的焦慮感，也對模塊的結(jié)構(gòu)有一個(gè)預(yù)期。
為了解決不同屏幕的最佳適配問題，我們與前端開發(fā)一起設(shè)計(jì)了一套多段式自適應(yīng)適配方案，讓屏幕適配不那么生硬，同時(shí)提升屏幕的使用效率。
以及在網(wǎng)易七魚的產(chǎn)品中，會伴隨著大量的篩選任務(wù)，經(jīng)常會占用巨大的屏幕空間。為了解決這個(gè)問題，設(shè)計(jì)團(tuán)隊(duì)打造了可收縮式的“自適應(yīng)超級篩選”。使客服人員在保證精準(zhǔn)篩選的前提下，最大限度地提升屏幕使用效率。
而在使用場景最多、占比最高的表單組件中，我們制定了層級式表單規(guī)則，根據(jù)不同類型的字段，賦予合適的寬度，最大化地提升了屏幕的使用效率。
這些產(chǎn)品體驗(yàn)的優(yōu)化任務(wù)，大多都由設(shè)計(jì)團(tuán)隊(duì)進(jìn)行推動(dòng)，取得了非常良好的效果。這使得我們的產(chǎn)品在大的維度擁有極高一致性的同時(shí)，在不同的場景也具備高品質(zhì)的設(shè)計(jì)體驗(yàn)。
「生態(tài)擴(kuò)張」基于設(shè)計(jì)體系，快速創(chuàng)建新產(chǎn)品
一套成熟的設(shè)計(jì)體系建立，意味著產(chǎn)品的“基礎(chǔ)零件”和“生產(chǎn)流程”都已經(jīng)成熟。這種模式一旦落地，企業(yè)不僅可以快速生產(chǎn)新的B端產(chǎn)品，還可以基于這個(gè)模型對老的B端產(chǎn)品進(jìn)行改造，最終構(gòu)建完整B端產(chǎn)品生態(tài)。
A.「 快速創(chuàng)造全新的產(chǎn)品 」
通過分析B端產(chǎn)品的構(gòu)建方式，我們可以發(fā)現(xiàn)：不同B端產(chǎn)品的構(gòu)成方式是相同的，區(qū)別僅在于產(chǎn)品的風(fēng)格（感知性模型）和模式語言（產(chǎn)品的框架規(guī)范）的差異。而產(chǎn)品的組件庫、協(xié)作模型以及快速搭建流程，都是可以在不同的產(chǎn)品中進(jìn)行復(fù)制粘貼的。
因?yàn)?strong>組件API的存在，我們可以將同一個(gè)組件適配不同的產(chǎn)品風(fēng)格，并且基于改造后的組件庫，構(gòu)建產(chǎn)品的整體框架規(guī)范。比如下圖中的三個(gè)產(chǎn)品，雖然他們的風(fēng)格不同，但都是使用FishDesign組件庫進(jìn)行API定義的。
同時(shí)，當(dāng)協(xié)作模型在一個(gè)產(chǎn)品中運(yùn)轉(zhuǎn)成熟后，我們可以將這種協(xié)作方式快速復(fù)制到新的團(tuán)隊(duì)中。之后，隨著新產(chǎn)品逐漸進(jìn)入成長期，我們可以同樣按照上文所講的方式為產(chǎn)品構(gòu)建整體的框架規(guī)范（模式語言），并應(yīng)用相同的快速搭建系統(tǒng)等等。
我們可以發(fā)現(xiàn)，當(dāng)擁有一套成熟的設(shè)計(jì)體系之后，構(gòu)建一個(gè)新產(chǎn)品的成本將大大降低。
基于這種模式，所有的組件仍然引用自同一個(gè)組件“源”，也就是說，企業(yè)仍舊可以通過組件庫保證所有產(chǎn)品的可控性。我們?nèi)耘f只需要維護(hù)一個(gè)組件庫即可，而這也將為企業(yè)節(jié)約大量的開發(fā)資源。
B.「 產(chǎn)品融合，打通企業(yè)服務(wù)全流程 」
一個(gè)B端產(chǎn)品，通常是為了解決“某一類”問題而誕生的。而B端企業(yè)的最終目標(biāo)，一定是為企業(yè)解決“一系列”的問題，甚至是“全流程”的問題。因此，在一個(gè)大型B端企業(yè)中，當(dāng)所有的子產(chǎn)品都逐漸成熟以后，產(chǎn)品的整合通常會成為下一個(gè)目標(biāo)。
在傳統(tǒng)的B端企業(yè)中，產(chǎn)品整合通常會是一個(gè)非常大的問題。因?yàn)椴煌漠a(chǎn)品可能采用不同的前端框架、不同的風(fēng)格、不同的操作行為等等?？梢哉f，產(chǎn)品整合的成本約等于重新開發(fā)一個(gè)產(chǎn)品。
但是，如果所有的產(chǎn)品都采用同一套設(shè)計(jì)體系，那么產(chǎn)品整合將會容易很多。
因?yàn)樗挟a(chǎn)品都是基于同一套設(shè)計(jì)體系進(jìn)行構(gòu)建的，不同產(chǎn)品的區(qū)別僅在于框架規(guī)范（模式語言）以及核心場景操作方式的差異。所以，我們只需要對這些產(chǎn)品的整體框架規(guī)范進(jìn)行統(tǒng)一，就能逐步打通不同產(chǎn)品。
最終，通過產(chǎn)品設(shè)計(jì)體系+一致的產(chǎn)品框架規(guī)范，我們將幾個(gè)不同的B端產(chǎn)品整合成了一個(gè)大型的B端平臺。在這個(gè)平臺中，原先所有子產(chǎn)品的能力都在其中，同時(shí)我們也可以將所有的能力在同一個(gè)平臺中串聯(lián)起來，形成完整的解決方案。
而對于我們服務(wù)的企業(yè)來說，我們不僅擁有眾多可單獨(dú)購買的“多樣化服務(wù)”，也擁有一系列全流程的“大型服務(wù)能力”。我們既能解決小問題，也能解決大問題，產(chǎn)品的競爭力將會大大提升，我們所能服務(wù)的客服范圍也將越來越大。
「未來前瞻」B端產(chǎn)品設(shè)計(jì)的發(fā)展局勢
隨著B端產(chǎn)業(yè)的快速發(fā)展，在未來一定會出現(xiàn)更多的創(chuàng)新的設(shè)計(jì)趨勢。在文章的最后，結(jié)合自己淺顯的認(rèn)知，跟大家來聊一聊未來的新趨勢吧～
A.「 設(shè)計(jì)“算法”化，框架智能化 」
即便是目前基于組件庫的UI設(shè)計(jì)，產(chǎn)品模塊的“拼裝”上，更多的還是依靠個(gè)人感官，以及設(shè)計(jì)師的配合。雖然存在柵格系統(tǒng)，但顯然在設(shè)計(jì)與前端層面并沒有形成完整的融合。
因此，在未來的B端設(shè)計(jì)中，UI設(shè)計(jì)中部分“感知性”的模型，將會逐漸轉(zhuǎn)化為“算法”。
比如在所有的UI界面設(shè)計(jì)中，我們可以將4間距設(shè)定成一個(gè)代數(shù)值U（U=4px）。以此為基礎(chǔ)，我們將模塊內(nèi)元素的間距設(shè)定為2U，模塊間的間距設(shè)定為4U。通過這種方式，我們可以將所有的間距、層級以U進(jìn)行表示。將所有的設(shè)計(jì)稿、前端開發(fā)都使用同一個(gè)代數(shù)U進(jìn)行設(shè)定之后，所有UI的間距就實(shí)現(xiàn)了“代碼化”。
以這種方式，全局的UI間距可以轉(zhuǎn)化為“算法”，讓機(jī)器自動(dòng)生成間距。同時(shí)，當(dāng)我們的界面在不同場景需要調(diào)整疏密感時(shí)，直接調(diào)整U的數(shù)值，配合柵格系統(tǒng)，就能實(shí)現(xiàn)全局等比調(diào)整。
B.「 能力交叉，新型崗位誕生 」
在職能的細(xì)分上，一個(gè)很明顯的趨勢是，不同職能的能力范圍將逐漸蔓延。在成熟的產(chǎn)品中，不管是產(chǎn)品經(jīng)理還是設(shè)計(jì)師，他們的能力都會越來越向兩端擴(kuò)展，并趨于融合。
比如產(chǎn)品經(jīng)理更懂交互了，視覺設(shè)計(jì)師也更懂交互，并且一部分成為了體驗(yàn)設(shè)計(jì)師。這就導(dǎo)致部分交互設(shè)計(jì)崗位會減少，產(chǎn)品經(jīng)理將會承擔(dān)部分交互工作，而另一部分則由體驗(yàn)設(shè)計(jì)師完成。比如為了讓產(chǎn)品還原度更高，一部分設(shè)計(jì)師將會開始研究前端代碼，而一部分前端則會擁有更高的設(shè)計(jì)與審美素養(yǎng)。
因?yàn)楦髀毮苤g的“交叉面”增加了，所以產(chǎn)品的“下限”更高了，而產(chǎn)品的整體品質(zhì)也得到了提升。
而在設(shè)計(jì)軟件未來的發(fā)展中，這個(gè)趨勢也將得到加強(qiáng)。產(chǎn)品設(shè)計(jì)師（產(chǎn)品經(jīng)理+體驗(yàn)設(shè)計(jì)師）將能夠在軟件上完成從產(chǎn)品策劃-UI設(shè)計(jì)-Demo演示-開發(fā)對接的全流程。
另一個(gè)趨勢是新型崗位的誕生。隨著B端產(chǎn)品的逐漸成熟，一些大型的、成熟產(chǎn)品將會對各方面提出更高的要求。而未來可能將會出現(xiàn)以下兩種職位：
數(shù)字體驗(yàn)工程師：
在未來，越來越多的體驗(yàn)將在虛擬場景、或者虛擬現(xiàn)實(shí)場景進(jìn)行。產(chǎn)品體驗(yàn)的提升很大程度上將會依賴技術(shù)與設(shè)計(jì)的結(jié)合。因此，在一些大型的互聯(lián)網(wǎng)公司，很可能會出現(xiàn)同時(shí)精通產(chǎn)品體驗(yàn)與前端技術(shù)的“數(shù)字體驗(yàn)設(shè)計(jì)師”。
產(chǎn)品架構(gòu)設(shè)計(jì)師：
在大型的B端產(chǎn)品中，各產(chǎn)品經(jīng)理往往負(fù)責(zé)不同的業(yè)務(wù)線，專注于本模塊的架構(gòu)。而設(shè)計(jì)師雖然制定規(guī)范，卻難以推行至產(chǎn)品框架層面。導(dǎo)致了產(chǎn)品的頂層框架-產(chǎn)品UI規(guī)范-產(chǎn)品前端框架，這三者通常是分離的狀態(tài)，二者將帶來非常巨大的彌合成本。
產(chǎn)品架構(gòu)設(shè)計(jì)師的出現(xiàn)，將會以 [產(chǎn)品+設(shè)計(jì)師+前端架構(gòu)師] 的角色，統(tǒng)籌所有的產(chǎn)品線，制定 [產(chǎn)品-UI-前端] 一體式的整體架構(gòu)，讓整個(gè)產(chǎn)品的標(biāo)準(zhǔn)完美兼容所有的模塊，使整體架構(gòu)更精簡、更可控。
C.「 跨端模塊化，兼容性框架，全平臺融合 」
隨著移動(dòng)互聯(lián)網(wǎng)、物聯(lián)網(wǎng)的加速，數(shù)字產(chǎn)品將會逐漸延伸至更多的場景。而多端的兼容性、一致性、成本也逐漸納入到未來的思考之中。
因此，跨端模塊化、全平臺融合將會是未來的趨勢。隨著Google的Flutter、華為的Harmony OS，都正朝著這個(gè)方向發(fā)展，而蘋果也在嘗試iOS、iPadOS、MacOS的三端融合。
很顯然，對于產(chǎn)品體量巨大的B端產(chǎn)品來說，多端開發(fā)的成本是非常高昂的。而且，高昂成本帶來的，卻仍然是大量的體驗(yàn)不一致、版本難以管理等，而跨端的模塊化，將是這一系列問題的答案。
比如網(wǎng)易會議在產(chǎn)品設(shè)計(jì)之初，移動(dòng)端就直接采用了Flutter進(jìn)行跨端開發(fā)，而桌面端（Windows、Mac端）則采用了兼容性框架。同時(shí)，為了使未來全端融合可以實(shí)現(xiàn)，我們對很多場景與組件都進(jìn)行跨端的模塊話設(shè)計(jì)，不管是設(shè)計(jì)稿還是前端數(shù)值，都實(shí)現(xiàn)了1:1的跨端統(tǒng)一。
可以預(yù)見，在未來的系統(tǒng)架構(gòu)中，一定會以跨端模代碼統(tǒng)一、全平臺融合作為目標(biāo)，而產(chǎn)品的設(shè)計(jì)也會逐漸往這個(gè)趨勢發(fā)展，帶來更多的可能性。
最后，希望華為的Harmonys能夠成為第一個(gè)真正意義上的全場景融合系統(tǒng)，也希望中國所有的科技公司一起加油～
「末」寫在最后
這段時(shí)間的變化也挺大的，經(jīng)歷了公司內(nèi)的組織變革、拆分，伴隨著離別、重組、成長、新生。心態(tài)上確實(shí)又成長了許多，也看開了很多事情。沒有任何事情是一成不變的，你的安全感來能力和內(nèi)心的強(qiáng)大。只是做好隨時(shí)應(yīng)對變化的準(zhǔn)備，才能坦然的活在暫時(shí)的穩(wěn)定中。
從整個(gè)宇宙的尺度來看，變化是永恒的。所有的物質(zhì)都處于大爆炸的余暉中不斷膨脹，就連時(shí)間也是如此。
熵增是宇宙的基調(diào)，而生命以負(fù)熵為生。生命就是要在不斷克服變化，在變化中尋找平衡。努力與舒適、工作與生活、做人與做事，任何事情都是相對的，平衡是事物長期發(fā)展的關(guān)鍵。
隨著年紀(jì)的逐漸增長，好像突然能夠讀懂一些“老書”了。不管是孔孟老莊，還是偉人的《毛澤東選集》，對于自然、社會、人的認(rèn)識反思，都比我們要深刻的多。智能并不等于智慧，抖音和頭條看再多，都比不上認(rèn)真完整的去讀一本書。
孔子曰：“子溫而厲，威而不猛，恭而安。”
王蒙老師對此的解釋很通俗：做人時(shí)刻做到面面俱到，是不容易的。從長遠(yuǎn)看，也就是求幾個(gè)方面的平衡、均衡。溫和很好，失去了堅(jiān)定性與原則性就不好了，所以還要補(bǔ)上厲。威嚴(yán)是必要的，太兇猛莽撞了就傷人害人，提醒您悠著點(diǎn)，別那么猛恐怕是必要的。恭敬小心，如果變得哆里哆嗦，進(jìn)退失據(jù)，鬧心亂意，當(dāng)然也是走向了反面，您還得安詳踏實(shí)些。這三條乃是做人的辯證法。
希望大家能在工作之余，多看一些好書，多一些學(xué)習(xí)成長。
感謝大家的觀看，下次再見～
推薦閱讀書籍/文章：
《智能商業(yè)》—— 曾鳴；《設(shè)計(jì)的思考》——周陟；《設(shè)計(jì)體系》—— [英] 阿拉·霍爾馬托娃；《深?yuàn)W的簡潔》—— [英] 約翰·格里賓；《機(jī)械宇宙》—— [美] 愛德華·多尼克；《萬物皆數(shù)》—— 米爾?？āぢ迥危弧懂a(chǎn)品從0到1的4個(gè)發(fā)展階段》；《B端產(chǎn)品生命周期》；《復(fù)雜》——梅拉尼·米歇爾
原文地址：設(shè)計(jì)劍道（公眾號）
作者：徐劍杰
轉(zhuǎn)載請注明：學(xué)UI網(wǎng) ?設(shè)計(jì)體系構(gòu)建法則 | 論B端產(chǎn)品的體系化構(gòu)建（下）
藍(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)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ù)
觀察顧客去了哪里，他們看到了什么，聽他們說了什么。獲得深刻的客戶洞見，推動(dòng)新想法。
