為什麼UI設計規範很重要？

為什麼要做設計規範？（why）

如果說工作兩年我養成了什麼習慣的話，那一定是在做任何需求之前，都先問問自己「為什麼要做這件事」。整理規範也是一樣，做之前先要想清楚為什麼要做規範？清楚的了解做一件事的價值有助於我們產生心理認同，從而更好的實施。

1.保證平台統一性

統一性是交互設計的一個基本原則，在一個長期迭代多人合作的項目中，不同的設計師會負責不同的模塊，每個人都有各自的思路，就有可能會對相同的元素做出了不同的方案，對於用戶來說容易造成困惑，對品牌整體形象的建設也沒有好處。所以對於較大型的產品，最好有設計規範來定義基本的元素，幫助眾多設計師一起做出有統一性的產品。

2.提升團隊工作效率

對於同一個基本元素，如果沒有設計規範，交互設計師需要設計一次交互方式，視覺設計師需要設計一次外形，UI開發同學需要開發一次，每個不同的設計師遇到這個元素時都可能重新設計一遍。但如果有了設計規範，只需設計一次，團隊中任何一個設計師需要用的時候直接拿來用就可以了，也不需要再進行視覺和開發，極大的提升了效率。

3.打磨細節體驗

在整理每個元素的規範時，設計師都需要對其場景、狀態考慮清楚。在整理的過程中，經常會發現一些以前沒注意到的問題，並進行優化。把一個小元素單獨拎出來仔細考量，寫成一篇完整規範的過程，其實就是在打磨細節的過程。

什麼時候做設計規範？（when）

雖說最理想的情況是在做設計前把設計準則、風格、規範都定義清楚，但在實際項目中很少能有條件這樣做。項目初期總是小步快跑、先上再說，產品在不斷試錯的同時設計也是在不斷試錯，在一開始就能定義一個完全「正確」的規範其實是不太現實的。

通常情況下，在產品發展日趨平穩，產品定位和品牌形象都比較確定的時候；參與設計的人越來越多，統一性和效率的問題漸漸顯現出來的時候，就是需要定義和整理設計規範的時候。

什麼樣的規範是好規範？（what）

規範是給人閱讀的，寫好一篇規範就像是設計好一個界面，我們也應該確定目標用戶、用戶目標、設計目標后，再進行設計執行。

一.用戶目標

設計規範的目標用戶有可能只是一個團隊內的設計師，有可能是第三方的工作人員，有可能是公開給所有人都可以查看的。不管是哪種類型的用戶，都會有一個基本一致的目標，那就是「快速的在規範中找到有效信息並獲得指導」。在這個一致的目標下又有所不同之處。

1.團隊內設計師——準確使用

團隊內的設計師通常情況下需要儘可能的依據規範做出「準確」的設計，保證元素使用在正確的場景下，保證整個平台的一致性。所以給團隊內的設計師看的規範相對來說會詳細很多，以騰訊雲內部設計規範為例，需要包含實際的交互場景舉例及說明幫助交互設計師理解和判斷，需要包含視覺標註幫助視覺設計師和UI工程師查閱等。

2.第三方團隊——快速上手

給第三方工作人員的設計規範又有所不同，他們的目標更側重在合作時快速上手，直接將團隊內部詳細的長篇大論拿給他們看很難保證他們有耐心閱讀，因此很難保證他們遵循規範。針對這種情況，更適合整理出典型頁面，UI Kit，加之簡單易懂的說明給他們，讓他們快速了解頁面應該怎麼布局，可以用現成的元素進行快速拼接就可以了。

3.公開大眾——尋求參考

公開給大眾的設計規範有非常詳細的，也有比較簡單直接的，主要還是要根據公開的目的來確定。通常情況下只是起到參考作用的公開指南，內容會比團隊內部的設計規範精鍊的多，大都只是展示定義描述、樣式，再配以正確和錯誤示範幫助理解。而某些公開規範同時起到給合作方使用的功能時，就會包含更多詳細的內容，詳細的描述、視覺標註、代碼等等。

二.設計目標

確定用戶目標之後，設計目標就很清晰了，一個好的規範應該是高效的、簡單易懂的，以內部設計規範為例，具體執行時，我們應該確保分類合理、規範本身保持一致、布局排版易讀，來提升設計師查閱的效率；確保定義清晰、描述準確、場景完備，來幫助設計師理解和使用。

1.分類合理

一整套規範的內容通常都很多，為了能讓用戶快速查找，合理的分類必不可少。

2.保持一致

每篇規範包含的內容保持一致、格式保持一致可以給用戶構建心理預期，讓他們看一篇規範就知道每篇都包含哪些部分，可以找到哪些信息。

3.排版易讀

通過合適的字體字型大小、間距留白減少用戶閱讀的疲勞感，圖片與說明清晰的結合，正確和錯誤示例要能明顯區分，使用表格來組織信息。

4.定義清晰、描述準確、場景完備

用簡單易懂的語句進行定義和描述，幫助用戶了解是什麼、怎麼用、哪些場景可用。（規範不可能包含所有場景，但應該包含大多數常見場景。）

如何系統的整理規範？（how）

一.制定一個計劃

整理設計規範是一個涉及廣周期長的項目，所以有一個清晰的計劃可以幫助這個項目更好的推進。制定計劃的流程如下圖所示：

1.整理規範內容及分類

做之前先明確我們需要整理哪些內容，這些內容的分類是怎樣的，下圖是我們整理騰訊雲規範時列的內容及分類，初始時列舉的內容可能不全，但沒有關係，先把最基礎的分類和內容定義好，後續發現有遺漏的內容再添加進去即可。

2.確定優先順序與分工

由上圖可以看出，一整套規範包含的內容非常的多，所以內容和分類整理好后，還需要確定每塊內容的優先順序和分工。從大的模塊上說，首先應當確定整體的設計風格和框架，整體確定后才好確定細節的風格；其次的優先順序最好是控制項、組件、場景，因為控制項組成組件，控制項和組件組成場景，所以先確定小的控制項后，組件和場景更容易確定。至於分工，規範的制定是整個團隊的事情，最好團隊中的設計師都能夠參與，互相分擔工作量以提高規範整理的效率，也能夠確保規範是在大家的討論下制定而成，每個人都參與過並贊同結論。

3.確定規範展示形式及推進流程

其實確定規範展示形式也是確定規範目標用戶，要確定規範是給誰看的，展示在網站上還是直接用文檔承載，網站是否對公眾開放等問題。確定了這些問題后就可以確定規範的詳細程度、大體的展示形式。

推進流程指的是整個項目要怎麼跑，涉及到每個設計師接到分工后如何輸出，何時討論，怎麼輸出，交接給誰等等問題。例如我們的推進流程是每周固定時間開規範討論會，每次確定幾個要討論的內容，負責的設計師整理問題，在會議上和大家一起討論敲定結果，經過兩周討論后輸出最終版本，交給下一個負責人。

4.制定規範的規範

規範本身要遵循什麼規則，也是需要事先確定的，我認為包括兩個部分，一是設計原則，二是輸出物規範。

根據整個產品的目標用戶、用戶及產品目標可以確定我們的設計原則，所有的規範梳理都要遵循最基礎的設計原則，以滿足用戶及產品需求，提升整體的體驗。

之前有提到過規範自身保持一致性是提高規範閱讀效率的一部分，而且為了提升設計師輸出的效率，事先制定好規範輸出物的規範可以幫助設計師按照一個既定的格式進行輸出，同時又能保持一致性。我們的輸出物規範中包括：

• 規範包含的內容，需要有描述、類型及場景、使用說明、視覺規範、補充說明、相關下載、負責設計師

• 規範插圖的尺寸、背景色、板式、字體及用色、正確及錯誤示例圖樣式等

二.單個規範的整理流程

整體計劃制定好之後，就需要開始一個個整理規範內容了。整理單個規範的內容也是有流程可尋的，如下圖所示。下面以整理「對話框」規範為例，講解一下單個規範整理的流程。

1.收集場景

給已經趨於成熟的產品整理規範，第一步就是要先收集場景。以對話框為例，對話框可能出現的地方很多，類型也各有不同，在沒有規範之前，產品中可能會有各種各樣的對話框，每個設計師做的可能都有些差別，所以第一步，是把產品中所有出現過的對話框都收集起來。

2.歸納分類

場景收集完后，就要對收集到的所有場景進行歸類，例如對話框按照樣式不同可以分為「模態對話框」和「非模態對話框」，在模態對話框中按照功能不同又可以分成「確認類對話框」、「反饋&警示類對話框」、「表單類對話框」。歸納分類的作用在於，可以把眾多的場景收攏成幾個典型的種類，只對典型種類進行定義和詳細描述就可以很好的給用戶起到指導作用；同時歸類之後減少了規範對象的種類，更好的保證產品的一致性。

3.給出定義

分類確定好后就可以開始給出定義了，首先給出整個規範對象的定義，例如對話框是什麼，什麼情況下適合用對話框等。除了整體的定義外，每個類型也需要有定義，幫助用戶理解每種類型有何差別，什麼場景選用哪種類別等。

4.優化方案

分類和定義都確定后，需要對各類型進行優化輸出最終的規則，對於這些細節規則，無法確定的時候可以尋找一些優秀案例來參考，例如優秀的產品、有名的設計指南等。同時可以根據實際場景輸出多種優劣不同的方案，和大家一起討論對比。

5.宣講討論

規範整理出后可以在討論會議上同步給大家，最好事先把所有需要大家一起討論確定的問題列出來，把對比方案都做好，提高討論的效率，和大家一起來敲定最終的方案，同時也讓每個設計師都了解規範的細節。

6.最終輸出

所有問題都敲定后即可按照輸出物規範進行輸出，輸出后交接給視覺設計師。

規範整理完之後還有什麼工作？

如所有的設計工作一樣，輸出並不代表完結。

設計稿輸出后還需要確保還原度、保證其正常上線、收集反饋意見不斷進行優化。設計規範也一樣，做完規範后也要確保還原度，推動新的規範落地；不斷收集遺漏的部分補充進規範中，發現問題並不斷優化，持續的維護更新規範文檔。

有了完善的規範如何進行創新？

規範和創新從來都不是對立的。

1.規範不可能囊括所有場景，即不可能所有場景都需要100%遵循規範。

對於一些規範中沒有包含的場景，或者不適合遵循規範的場景，例如一些特殊的運營活動，一些特別的功能點，還是有可以創新的餘地的。

2.體驗好是第一要義。

遵循規範是為了保證一致性從而保證體驗，如果在某些場景下不遵循規範也不會因為影響一致性而影響體驗，反而對特定場景有更好的效果時，不遵循規範也沒什麼關係。

3.規範不是永恆不變的，還有優化的空間。

規範也需要不斷的優化、迭代更新，優化規範本身也是創新的過程。例如樣式風格隨著時間的變化需要更新，例如交互方式也有可能會有新的場景需要補充等等。

整理規範可以鍛煉哪些能力？

寫一篇分類簡單合理，場景、細節考慮完備，展示清晰易讀的規範，也不能算是一件很簡單的事情，需要用到設計師的很多基礎能力，例如：

1.收集信息的能力

在整理規範時，收集場景、收集定義、收集優秀案例都可以鍛煉到我們的收集信息能力，這個基本能力在日常工作中也經常需要用到，例如做需求前需要先收集需求背景相關信息，了解清楚是什麼、為什麼、怎麼做的問題。

2.歸納總結的能力

將收集到的信息進行歸納整理，得出簡單合理的分類的過程，就是鍛煉我們歸納總結能力的過程。在設計時，大到信息架構的設計，小到表單信息分類展示，都需要此能力幫助我們更好的處理信息，更好的將信息展示給用戶。

3.全面思考的能力

我一直認為，全面思考的能力是交互設計師最重要的能力。在整理規範時，既需要對全局全面思考，例如什麼情況適合用對話框，什麼情況不適用，不同類型的對話框應該在哪些場景用等等；也需要對細節全面思考，例如對話框中需要放幾個按鈕、按鈕順序應該怎麼定、按鈕文案怎麼才好理解等等。在日常工作中也是一樣，既要思考全局的問題，例如用戶目標、產品目標、整體使用流程等，也要思考細節的問題，例如異常情況怎麼辦、極限情況有哪些等。

4.清晰表述的能力

在整理過程中和大家討論，可以鍛煉自己的表達能力和說服對方的能力；在輸出規範時，又能鍛煉清晰的描述能力，幫助用戶快速抓住重點。表述能力也是交互設計師的必備能力之一，因為日常工作中經常需要和上下游各類同事溝通、PK，清晰的表述能力可以幫助設計師把全面思考的結果告知他人，並說服他人，推動工作更好的進展下去。

最後

再來回顧一下全文的主要內容：

• 在產品發展到穩定階段、參與的人越來越多時，還是十分有必要整理設計規範的，因為它可以幫助我們提升產品統一性、團隊工作效率以及細節體驗。

• 好的設計規範應該是能讓用戶高效獲取到有效信息的，但針對不同的受眾，規範本身也會有不同的側重點。

• 規範的制定最好能有系統的組織、遵循一定的流程來完成，以確保規範有條不紊的整理和推進。

• 規範輸出后並不代表完成，還需要推動落地、迭代優化、維護更新。

• 有了規範也不代表設計師就沒有創新的空間了，規範和創新從來都不是對立的。

• 整理規範對設計師的基本能力有很好的鍛煉作用，所以各位設計師們整理規範時不要嫌瑣碎麻煩，它可以讓我們慢慢變強！