如何以產品設計的視角從0-1構建整個企業級B端設計規範？本文從專案背景、使用者調研、競品分析、規劃產品路線、設計資訊架構、設計互動方案、設計視覺方案几方面分析了整個流程。
關於建立企業級B端產品的設計規範，筆者在上篇文章中，提到了如下幾個問題：
如何建立設計規範，並落地到產品中？
如何解決設計規範與使用者需求的矛盾？
設計規範如何有效的迭代？
今天筆者就來給大家一一解答下。
百度百科描述：“產品是指做為商品提供給市場，被人們使用和消費，並能滿足人們某種需求的任何東西，包括有形的物品、無形的服務、組織、觀念或它們的組合。”
因此，筆者在主導設計企業級規範的時候，將“企業級B端產品的設計規範“看做是一個產品，用產品經理的思維去解決以上的問題，用產品設計的方法去逐步建立設計規範。
下面筆者與大家講述，如何以產品設計的視角從0-1構建整個企業級B端設計規範：
一、專案背景
當企業越來越大，產品越來越多，如何保證產品對內整合的高效性與展示的一致性，保證產品對外輸出的一體性與品牌體驗。
從產品本身的角度來說，設計規範可以解決上述的問題。細細說來，設計規範的誕生，是企業內外部因素共同促成的。
1.內部因素
企業級設計規範的定製必定伴隨著公司領導層在戰略層面上已經達成共識，從上至下成為大家一致的目標。
產品介面上相同的元素和內容很多，可以被抽象，一旦統一，可以提升團隊協同設計的效率與開發效率。
在產品研發流程中，保證產品經理與技術經理在輸出的原型中都能遵循相同的設計規範，減少前端開發人員對介面的理解。
相同型別的設計稿在不同的前端人員中，開發實現度不一致，有了設計規範，就可以提高一致性。
2.外部環境
目前大廠都在輸出設計規範，設計規範提升了產研團隊的協作效率，保障了產品的使用者體驗。
2019年，Sparkbox在對設計系統調查後彙總分析，結果顯示：設計規範非常重要，它可以保證：程式碼重用性提高、UX/UI一致性、維持品牌標準等。
上述可見，企業級B端設計規範的構建，是內外因素共同作用的結果。為企業級產品建立一套統一的設計規範，不僅是跟隨潮流的表現，更是體現了產品的專業度。
二、使用者調研
既然要建立設計規範是大家一致認同的，那麼行動起來吧，看看產品使用者到底關注哪些關鍵點。設計規範不是設計師憑空想出來的，想象出來的規範無法在實際產品中落地，而不會落地的設計規範，那真的不如不開始。這次選取的調研方式為：一對一使用者現場訪談。
1.劃定目標使用者型別
列出設計規範的目標使用者，能讓我們收集上來的需求更精準，後續更好的進行需求分析。本次設計規範梳理出來的目標使用者包括：
1）產品設計者
產品設計者的原型有時由於專案時間緊的原因，並沒有時間交接到設計師處進行潤色，就得進入開發。因此他們希望企業內部能輸出一致的設計規範，對他們進行培訓和輔導後，使得他們能快速輸出可以被投入於開發的原型。
2）專業設計師
每個設計師都有自己的設計經驗和設計方法，設計師們認為，沒有統一的設計規範，會導致大家重複設計類似的功能或介面。因此，建立大家可對標的設計規範，可以統一設計師的產品稿。
3）產品開發者
同樣的元件和同樣的頁面，不同的開發者重複開發，效率很低，並且由於開發者本身技術能力的原因，同一個頁面不同的開發者開發出來的效果都是不同的。因此，運用普適性的設計資產落地程式碼，可以提升產品研發效率和保證相同頁面的實現一致性。
2.設計訪談提綱
在設計訪談提綱的時候，需要注意以下幾點：
包含一般性問題和深入性問題，從淺入深。
設計的問題可以引導使用者描述問題的本質，而不是泛泛而談。關注使用者過去的行為和直接性體驗，驗證痛點是否存在。
內容可以區塊化，使得被訪談者對方談內容認知清晰。
本次訪談提綱首先摘取出一些目標產品，然後確定訪談人員，最後設計訪談提綱。提綱結構如下，僅供參考：
3.一對一面談
提綱設計好，約上訪談人員到一個輕鬆的環境，就可以開始一對一訪談了。面對面訪談要注意以下幾個技巧：
訪談前消除被訪談者的緊張情緒，找個訪談者熟悉的環境是最好的。
訪談前友好的邀請使用者，比如“非常感謝能邀請你來幫助我們共同改善產品”。
訪談時候循序漸進，讓使用者充分表達他們的想法，從簡單到複雜、從整體到細節。
不要去暗示和引導答案。
本次面談中，我們直接約在了設計師、產品經理、開發者的辦公座位上，開啟他們的產品，就愉快的進入訪談了。
我們首先詢問他們對設計規範的瞭解程度，然後將設計規範的作用講解給他們聽，接著讓他們聊聊對設計規範的興趣點，最後進入元件的訪談環節，真正調研元件在他們產品中的使用程度和情況。
三、競品分析
競品分析是我們在設計一個產品前，必須要經歷的過程。
俗話說“知彼知己，百戰不殆；不知彼而知己，一敗一負；不知彼不知己，每戰必殆。”
那競品分析要怎麼做呢？
筆者在這裡不具體詳述競品分析要用到的一些方法論，而是說說在設計規範上，我們是如何做競品分析的。主要步驟為：
1.確定競品
在設計規範界，目前有以下幾個大廠在做：螞蟻金服、餓了麼、檢視更新科技、用友網路。
但真正有體系化系統化在做的，只有“螞蟻金服的AntDesign”。經螞蟻金服體驗技術部過大量專案實踐和總結，逐步打磨出一個服務於企業級產品的設計體系——AntDesign。
但是“餓了麼的Element”在使用者數量上來說也是很多的，並且元件庫功能也較為豐富，也有一定的生態體系，因此Element也被納入我們的競品分析範圍。
iView2019年10月起正式更名為ViewUI，它經過4年左右的沉澱，也積累了大量的使用者，同時擁有自己的生態：元件庫、AdminPro、ViewUIPro等。
綜上，競品分析物件就確定了：AntDesign、Element和ViewUI。
2.確定分析範圍
如何確定競品分析的範圍呢？我們根據設計規範本身的初衷和功能範圍，去劃定需要分析的競品的範圍。
在設計規範中，第一期我們希望能包含基礎元件庫、頁面模板、設計理論體系、全域性視覺、框架，而最重要的是基礎元件庫、設計價值觀、生態體系，這三者奠定了設計規範成長的基礎。
那麼現在我們就來看看AntDesign、Element、ViewUI在基礎元件庫、生態體系、設計價值觀上各自的情況吧。
1）基礎元件庫：
AntDesign將基礎元件庫分為7類，共61個元件。Element為6類，共56個元件。ViewUI分為7類，共57個元件。它們的分類方式有所差異，同時，具體元件形態既有相同之處，也有差異點，這跟它們本身服務的中後臺業務有關係，也和設計者的思維方式密不可分。
筆者將三者的分類差異和共有、非共有的元件都取出來了，如下三幅圖展示：
三者的元件分類體系
三者共有的元件
三者非共有的元件
2）設計價值觀
AntDesign是這麼描述設計價值觀的作用的：“設計價值觀為設計者提供評價設計好壞的內在標準，啟示並激發了設計原則和設計模式，進而為具體設計問題提供嚮導和一般解決方案。”
作為AntDesign指導性的設計價值觀，幫助了AntDesign建立了橫向和縱向的拓展性。
Element和ViewUI沒有設計價值觀一說，都只有設計原則，但是他們的設計原則不太一樣。Element為：一致性、反饋、效率、可控。ViewUI為：對比、重複、對齊、親密性。
3）生態體系
AntDesign的生態體系包括：元件庫、圖表庫、頁面模板、Kitchen、海兔、圖表庫、設計理論體系等。Element的生態體系目前只有元件庫。ViewUI的生態體系包括了：基礎元件庫、業務元件庫、頁面模板。可見生態體系最全的是AntDesign，其生態體系中的每位成員都在為更好的服務中後臺產品而貢獻自己的力量。
3.總結
由此可見，AntDesign在設計規範的制定上是進行了系統化的思考和探索的，如果我們要制定企業級的設計規範，可以借鑑和研究AntDesign的思路。只有站在巨人的肩膀上，才能看的更遠。
四、規劃產品路線
產品路線圖是團隊行動指南，是產品可預見的未來方向，通常產品負責人綜合各方意見進行規劃。同時，我們要意識到，在使用者需求不明確、團隊成員意見不一致的時候，越需要制定路線圖，來保證團隊的凝聚力。路線圖制定考慮兩個要素：
先明確大目標，再拆解成階段性目標。
路線圖是會調整和最佳化的，不是一成不變的。
在我們的設計規範中，前期我們梳理了需求、調研了使用者、分析了競品，現在開始就進入產品規劃階段了。我們根據自己企業的實際情況，制定了符合公司設計規範的一期產品規劃路線：
建立設計價值觀
建立設計指導原則
搭建元件庫
搭建佈局框架
搭建頁面模板庫
落地與迭代
同時，我們將路線圖上的內容進行了進一步拆解，包括：類目下的具體內容、實現目標及想要獲得的收益、優先順序、計劃完成時間。
五、設計資訊架構
產品路線圖中，我們計劃了在一段時期內要做的東西，和需要達到的目標，那是不是就這樣子一上來我們就開始做呢，筆者認為不是的。
我們需要設計整個產品的資訊架構。資訊架構是對資訊進行構建、組織以及歸類的設計，是一個產品的骨架，它決定了一個產品的走向和內涵，是使用者對一個產品最初的印象。
一個好的資訊架構，是產品成功的開始，可以讓使用者很快的上手使用。
為了讓大家直觀的感受什麼是資訊架構，筆者拿APP舉例，APP的底部標籤欄就是對整個APP的資訊架構：
那我們設計規範的資訊架構設計，就要讓使用者快速知道我們的設計規範要表達什麼，包含哪些大模組，他們如何從這些模組裡找到自己要的東西，同時知道如何使用。
順著這個思路走，我們將設計規範分為大資訊架構和小資訊架構兩部分。
大資訊架構是全域性性的，你可以認為是設計規範的生態；小資訊架構是子模組下的資訊組織。大致如下圖展示：
大資訊架構
小資訊架構
六、設計互動方案
當我們進入設計互動方案的階段，也就是進入產品的詳細設計階段了。
對於設計規範來說，需要設計的內容實在太多了，每一項都馬虎不得：每個元件的互動、佈局的互動等。
筆者在這裡就不詳細展開去說了，在這裡和大家分享下一些互動設計原則，幫助我們更好的進行設計規範設計：
排版四大原則：親密性、對比、對齊、重複。
尼爾森十大可用性原則：狀態可見原則、環境貼切原則、使用者可控原則、一致性原則、防錯原則、易取原則、靈活高效原則、易掃原則、容錯原則和人性化幫助原則。
七、設計視覺方案
視覺設計常常讓我們覺得無法用理性去衡量，視覺是顯性的，與大家的審美有很大的關係。
特別是服務企業級B端產品的設計規範，我們該如何去定製他的視覺模式呢？
我們經過分析後發現，B端系統的視覺設計，不是為好不好看服務的，而是為了讓使用者在長時間使用後不產生視覺疲勞，提升使用者的工作效率服務的。
找到視覺設計服務的物件和源頭後，我們確定了極客藍作為我們的主色調，讓頁面操作元素的視覺符合W3C的無障礙設計原則。
W3C的無障礙設計原則是：文字和背景的對比足夠，為視力障礙者提供足夠的對比度。
在WCAG2.01.4.3下，大型文字的最小對比度。
在WCAG2.01.4.3下，常規尺寸文字的最小對比度。
在WCAG2.01.4.6下，常規尺寸文字的增強對比度。
由此可見，視覺設計方案需要追溯源頭，找出視覺設計服務的物件，從而給出視覺設計方案。而不是什麼配色好看，設計成什麼樣子。
八、總結
針對文章一開始提出的問題，筆者認為：
要建立規範：需“瞭解專案背景、進行使用者調研、進行競品分析”。
要落地到產品：需“進行使用者調研、設計規範投入開發”。
解決設計規範與使用者需求的矛盾：需“進行使用者調研、進行競品分析”。
設計規範迭代：需“進行使用者調研、進行競品分析、研究設計趨勢”。
所以，企業級B端設計體系的建立，我們可以從產品設計的角度出發，將產品思維用於設計規範，剖析需求、快速迭代、建立生態。
題圖來自Unsplash，基於CC0協議。