企業級B端設計體系：用產品思維建立設計規範

如何以產品設計的視角從0-1構建整個企業級B端設計規範？本文從專案背景、使用者調研、競品分析、規劃產品路線、設計資訊架構、設計互動方案、設計視覺方案几方面分析了整個流程。

關於建立企業級B端產品的設計規範，筆者在上篇文章中，提到了如下幾個問題：

今天筆者就來給大家一一解答下。

百度百科描述：“產品是指做為商品提供給市場 ，被人們使用和消費，並能滿足人們某種需求的任何東西，包括有形的物品、無形的服務、組織、觀念或它們的組合。”

因此，筆者在主導設計企業級規範的時候，將“企業級B端產品的設計規範“看做是一個產品，用產品經理的思維去解決以上的問題，用產品設計的方法去逐步建立設計規範。

下面筆者與大家講述，如何以產品設計的視角從0-1構建整個企業級B端設計規範：

當企業越來越大，產品越來越多，如何保證產品對內整合的高效性與展示的一致性，保證產品對外輸出的一體性與品牌體驗。

從產品本身的角度來說，設計規範可以解決上述的問題。細細說來，設計規範的誕生，是企業內外部因素共同促成的。

上述可見 ，企業級B端設計規範的構建 ，是內外因素共同作用的結果。為企業級產品建立一套統一的設計規範，不僅是跟隨潮流的表現，更是體現了產品的專業度。

既然要建立設計規範是大家一致認同的，那麼行動起來吧，看看產品使用者到底關注哪些關鍵點 。設計規範不是設計師憑空想出來的，想象出來的規範無法在實際產品中落地，而不會落地的設計規範，那真的不如不開始。這次選取的調研方式為：一對一使用者現場訪談。

列出設計規範的目標使用者，能讓我們收集上來的需求更精準，後續更好的進行需求分析。本次設計規範梳理出來的目標使用者包括：

1）產品設計者

產品設計者的原型有時由於專案時間緊的原因，並沒有時間交接到設計師處進行潤色，就得進入開發。因此他們希望企業內部能輸出一致的設計規範，對他們進行培訓和輔導後，使得他們能快速輸出可以被投入於開發的原型。

2）專業設計師

每個設計師都有自己的設計經驗和設計方法，設計師們認為，沒有統一的設計規範，會導致大家重複設計類似的功能或介面。因此，建立大家可對標的設計規範，可以統一設計師的產品稿。

3）產品開發者

同樣的元件和同樣的頁面，不同的開發者重複開發，效率很低，並且由於開發者本身技術能力的原因，同一個頁面不同的開發者開發出來的效果都是不同的。因此，運用普適性的設計資產落地程式碼，可以提升產品研發效率和保證相同頁面的實現一致性。

在設計訪談提綱的時候，需要注意以下幾點：

本次訪談提綱首先摘取出一些目標產品，然後確定訪談人員，最後設計訪談提綱。提綱結構如下，僅供參考：

提綱設計好，約上訪談人員到一個輕鬆的環境，就可以開始一對一訪談了。面對面訪談要注意以下幾個技巧：

本次面談中，我們直接約在了設計師、產品經理、開發者的辦公座位上，開啟他們的產品，就愉快的進入訪談了。

我們首先詢問他們對設計規範的瞭解程度，然後將設計規範的作用講解給他們聽，接著讓他們聊聊對設計規範的興趣點，最後進入元件（細節）的訪談環節，真正調研元件在他們產品中的使用程度和情況。

競品分析是我們在設計一個產品前，必須要經歷的過程。

俗話說“知彼知己，百戰不殆；不知彼而知己，一敗一負；不知彼不知己，每戰必殆。”

那競品分析要怎麼做呢？

筆者在這裡不具體詳述競品分析要用到的一些方法論（商業畫布、PEST分析等等），而是說說在設計規範上，我們是如何做競品分析的。主要步驟為：

在設計規範界，目前有以下幾個大廠在做：螞蟻金服、餓了麼、檢視更新科技、用友網路。

但真正有體系化系統化在做的，只有“螞蟻金服的Ant Design”。經螞蟻金服體驗技術部過大量專案實踐和總結，逐步打磨出一個服務於企業級產品的設計體系 —— Ant Design。

但是“餓了麼的Element”在使用者數量上來說也是很多的，並且元件庫功能也較為豐富，也有一定的生態體系，因此Element也被納入我們的競品分析範圍。

iView2019年10月起正式更名為View UI，它經過4年左右的沉澱，也積累了大量的使用者，同時擁有自己的生態：元件庫、Admin Pro、View UI Pro等。

綜上，競品分析物件就確定了：Ant Design、Element和View UI。

如何確定競品分析的範圍呢？我們根據設計規範本身的初衷和功能範圍，去劃定需要分析的競品的範圍。

在設計規範中，第一期我們希望能包含基礎元件庫、頁面模板、設計理論體系、全域性視覺、框架，而最重要的是基礎元件庫、設計價值觀、生態體系，這三者奠定了設計規範成長的基礎。

那麼現在我們就來看看Ant Design、Element、View UI在基礎元件庫、生態體系、設計價值觀上各自的情況吧。

1）基礎元件庫：

Ant Design將基礎元件庫分為7類，共61個元件。Element為6類，共56個元件。View UI分為7類，共57個元件。它們的分類方式有所差異，同時，具體元件形態既有相同之處，也有差異點，這跟它們本身服務的中後臺業務有關係，也和設計者的思維方式密不可分。

筆者將三者的分類差異和共有、非共有的元件都取出來了，如下三幅圖展示：

三者的元件分類體系

三者共有的元件

三者非共有的元件

2）設計價值觀

Ant Design是這麼描述設計價值觀的作用的：“設計價值觀為設計者提供評價設計好壞的內在標準，啟示並激發了設計原則和設計模式，進而為具體設計問題提供嚮導和一般解決方案。”

作為Ant Design指導性的設計價值觀，幫助了Ant Design建立了橫向和縱向的拓展性。

Element和View UI沒有設計價值觀一說，都只有設計原則，但是他們的設計原則不太一樣。Element為：一致性、反饋、效率、可控。View UI為：對比、重複、對齊、親密性。

3）生態體系

Ant Design的生態體系包括：元件庫、圖表庫、頁面模板、Kitchen、海兔、圖表庫、設計理論體系等。Element的生態體系目前只有元件庫。View UI的生態體系包括了：基礎元件庫、業務元件庫、頁面模板。可見生態體系最全的是Ant Design，其生態體系中的每位成員都在為更好的服務中後臺產品而貢獻自己的力量。

由此可見，Ant Design在設計規範的制定上是進行了系統化的思考和探索的，如果我們要制定企業級的設計規範，可以借鑑和研究Ant Design的思路。只有站在巨人的肩膀上，才能看的更遠。

產品路線圖是團隊行動指南，是產品可預見的未來方向，通常產品負責人綜合各方意見進行規劃。同時，我們要意識到，在使用者需求不明確、團隊成員意見不一致的時候，越需要制定路線圖，來保證團隊的凝聚力。路線圖制定考慮兩個要素：

在我們的設計規範中，前期我們梳理了需求、調研了使用者、分析了競品，現在開始就進入產品規劃階段了。我們根據自己企業的實際情況，制定了符合公司設計規範的一期產品規劃路線：

同時，我們將路線圖上的內容進行了進一步拆解，包括：類目下的具體內容、實現目標及想要獲得的收益、優先順序、計劃完成時間。

產品路線圖中，我們計劃了在一段時期內要做的東西，和需要達到的目標，那是不是就這樣子一上來我們就開始做呢，筆者認為不是的。

我們需要設計整個產品的資訊架構。資訊架構是對資訊進行構建、組織以及歸類的設計，是一個產品的骨架，它決定了一個產品的走向和內涵，是使用者對一個產品最初的印象。

一個好的資訊架構，是產品成功的開始，可以讓使用者很快的上手使用。

為了讓大家直觀的感受什麼是資訊架構，筆者拿APP舉例，APP的底部標籤欄就是對整個APP的資訊架構：

那我們設計規範的資訊架構設計，就要讓使用者快速知道我們的設計規範要表達什麼，包含哪些大模組，他們如何從這些模組裡找到自己要的東西，同時知道如何使用。

順著這個思路走，我們將設計規範分為大資訊架構和小資訊架構兩部分。

大資訊架構是全域性性的，你可以認為是設計規範的生態；小資訊架構是子模組下的資訊組織（舉例：頁面模板）。大致如下圖展示：

大資訊架構

小資訊架構（舉例：頁面模板）

當我們進入設計互動方案的階段，也就是進入產品的詳細設計階段了。

對於設計規範來說，需要設計的內容實在太多了，每一項都馬虎不得：每個元件的互動、佈局的互動等。

筆者在這裡就不詳細展開去說了，在這裡和大家分享下一些互動設計原則，幫助我們更好的進行設計規範設計：

視覺設計常常讓我們覺得無法用理性去衡量，視覺是顯性的，與大家的審美有很大的關係。

特別是服務企業級B端產品的設計規範，我們該如何去定製他的視覺模式呢？

我們經過分析後發現，B端系統的視覺設計，不是為好不好看服務的，而是為了讓使用者在長時間使用後不產生視覺疲勞，提升使用者的工作效率服務的。

找到視覺設計服務的物件和源頭後，我們確定了極客藍作為我們的主色調，讓頁面操作元素的視覺符合W3C的無障礙設計原則。

W3C的無障礙設計原則是：文字和背景的對比足夠，為視力障礙者提供足夠的對比度。

由此可見，視覺設計方案需要追溯源頭，找出視覺設計服務的物件，從而給出視覺設計方案。而不是什麼配色好看，設計成什麼樣子。

針對文章一開始提出的問題，筆者認為：

所以，企業級B端設計體系的建立，我們可以從產品設計的角度出發，將產品思維用於設計規範，剖析需求、快速迭代、建立生態。

作者：知果；公眾號：果有料

本文由 @知果 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。