如何從0到1建立設計規范?來看騰訊設計師的總結!

從一開始的立項到現在落地上線,可以說是從零開始進行 APP 全部細節的梳理并且規定規范,這一路走過來還是能總結出很多心得,本文將分為3個部分,闡述如何從0到1建立設計規范。

目錄

  • 如何確定內容,規范里要寫什么
  • 如何寫
  • 如何推動規范落地

一、如何確定內容?

這里我總結了三步:

如何從0到1建立設計規范?來看騰訊設計師的總結!

1. 確定目標用戶、用戶目標、設計目標

根據不同的用途和目標,不同的團隊對設計規范的制定是不一樣。比如為了指導與規范全球第三方開發者進行設計和開發,Google 建立的 Material Design 覆蓋面廣,每個組件細節寫得非常細致。Ant Design 則是直接做出了組件,方便直接進行調用。有些國內設計團隊的規范則是主要描述常用控件和色值。因此我們需要確立用戶目標和設計目標,這樣才能確定我們的規范側重點是什么,需要做成怎么樣的形式。

在這里我列舉了自己撰寫規范時的用戶與目標:

如何從0到1建立設計規范?來看騰訊設計師的總結!

2. 模范大平臺,先列全

一個規范里面的東西是很多的,那么我們究竟需要做什么呢?假如一開始我們沒有方向,找一個,列一個,這樣我們很容易疏漏很多情況。在這里我采用的一個辦法是:首先熟讀 iOS,Material Design規范,并且模仿他們,在腦圖中,把規范中應含有的所有內容羅列出來,羅列一個大綱。

這里我列舉當時自己做的一個腦圖大綱,覆蓋了主流規范中的所有細節,大家可以進行參考并模仿:

如何從0到1建立設計規范?來看騰訊設計師的總結!

3. 針對自己情況進行刪減

列完齊全的大綱后,我們需回顧設計目標,對大綱里的內容進行刪減。(比如在組件、模式這些地方,可以對著自己的 APP,進行挨個尋找,看自己的 APP 當前是不是運用了這個組件,沒有的話就進行刪減。)

在這里我列舉了針對自身 APP 的情況刪減后的大綱圖:

如何從0到1建立設計規范?來看騰訊設計師的總結!

二、如何寫

進過了以上的三步,我們基本得出了要寫什么的框架了,接下來就是如何寫規范的階段。

這里我總結了3步:

如何從0到1建立設計規范?來看騰訊設計師的總結!

1. 確定優先級

我們可以通過版本迭代計劃+性價比+重要性(該組件在頁面出現的場景次數以及當前的不統一對 APP 體驗影響程度)這幾個維度分別確定每塊內容的優先級和分工?;A的、必要的、高性價比的放在第一期,復雜的向后放,隨著產品的迭代,我們的規范也會越來越完整。

同時需要留意版本規劃,了解即將要做的功能或即將要改版的頁面。我們可以提高這里面牽涉到的控件、組件等內容的優先級。龐大復雜,牽涉到很多頁面的,我們可以先降低其優先級:比如全局提示框的規范,toast 的規范。

同時,我們也需常與開發溝通,爭取把可復用性高、組件日后變化幅度少的組件做成開發組件庫。

2. 確定規范書寫格式

我們制定的規范本身也是設計的交付物,假如每個設計師都按照自己的喜好來編寫規范,那么這個規范本身也會變得不規范,規范自身保持一致性是提高規范閱讀效率的一部分。

我們可以回歸我們之前制定的用戶目標和設計目標來制定我們規范的書寫格式。規范的用戶群是誰,主要想達到什么作用,是通過文檔展示還是網上展示,確定了這些問題后,就可確定規范的詳細程度、主要的展示形式(比如前文說到的 Ant Design 和 Material Design)。

這里我的思考點是:假如規范寫太多字就會變得很臃腫,沒有人喜歡慢慢仔細的閱讀你寫的規范,所以我們應該做到寫得簡明扼要,再輔以例子說明(根據開發的習慣,都是喜歡直接看例子,看標注)。

我的書寫格式是:先寫描述這個組件是什么,再列舉出現的場景,然后編寫交互規則,最后給出視覺標注+例子。

3. 逐步對單個規范進行整理與書寫

當確定了要寫什么東西和格式之后,我們開始進入到細節,對每個內容進行整理,制定規范了。

通過對每個內容制定規范也是有方法的:

如何從0到1建立設計規范?來看騰訊設計師的總結!

下面我通過整理「列表」這個規范來講解:

收集出現的所有的場景

當一個產品已經趨于成熟,這個組件出現的場景就會非常多,比如對話框,toast,列表這些組件出現的地方很多,需要我們自己仔細地體驗產品,把所有頁面都找出來。

提取共性,歸納分類

我們需要分析每個頁面的特點并且把相同特點的頁面歸納一起,眾多的頁面場景就能整理成幾個典型的種類,然后只需對這幾個典型的種類進行定義和描述即可。

在列表中,我分為了大封面列表、小封面列表、用戶列表、單行列表

如何從0到1建立設計規范?來看騰訊設計師的總結!

編寫規則

在分類好后,我們可以對每個種類編寫規則,在這里我們需要描述好每個種類有什么特點或屬性,什么時候場景下適用,并且給出標注和例子,方便閱讀者理解。

如何從0到1建立設計規范?來看騰訊設計師的總結!

多與組內成員討論修改

在制定好初稿后,我們可以與組內成員宣講下自己制定的規范。多從別人的角度出發,確保你編寫的規范是否易懂,是否包含了全部的情況,是否容易執行落實。

三、如何推動規范落地

寫完內容后,最重要的一步就是推動落地,規范要真正有人用才能體現價值。

1. 幫助推動規范落地的小建議

制定規范推進進度表

表格里面應該包含規范制定的優先級,分工進度,分工人員,并且確定每一期進度的交付時間,開會討論的時間,作為負責人,也可以適時提醒成員每次的開會時間。

編寫過程中多與其他成員討論,達成一致性共識

制定規范后,與部門其他人員進行宣講,灌輸概念,針對如何更好的落實進行討論調整。在設計中都不可能一次就完美,我們需要不斷的在修改中逐漸完善。

規范建成后放在網上

同步在網上,方便部門內的其他成員能隨時查看和團隊成員對規范的更新修改、同步。

強制性制定規則要求團隊成員執行

有明確的懲罰機制和要求才能更好的執行,不然在規范制定后很容易健忘此事。

規范保持持續的更新迭代

規范推動落地后并不是完全了事,要根據產品的迭代,保持規范的更新。

這整個制定規范的項目中,還是有不少反思的地方,值得我們深思和注意。

2. 深思和注意

切記不要為設計規范而做規范

規范最重要的點是能推動落地,能確確實實改善產品,達到統一性。因此我們在設計規范時,并不需要「高大上」術語,給出一大堆的設計理念用來提升設計檔次。而是真正的回歸到我們的設計目標,針對目標用戶制定規范,做到簡樸、易懂、能落地。

沒人愿意閱讀長篇文字

我們應該盡量控制文案長度,做到通俗易懂即可。

要時刻圍繞我們的目標做規范

比如,我這次做的規范中有一項是去工具化,在制定控件中,空白頁面中就會加入很多趣味化的設計。

靈活變通

規范只是適合大多時候的場景,對于一些規范中沒有包含或者不符合規范的場景,我們可以靈活變通,積極創新或者是補充新的規范(前提是與組內積極溝通,達成共識)。

總結

再來回顧如何從0到1建立規范。

1. 確定內容
  • 確定用戶目標和設計目標
  • 模仿大平臺,列全
  • 針對自己情況進行縮減
2. 寫
  • 確定優先級
  • 確定規范書寫格式
  • 逐步對單個內容進行整理與書寫: 收集全部情況 、 分類歸納 、提取共性,編寫規則
3. 推動
  • 制定規范推進進度表
  • 編寫過程中多與其他成員討論
  • 把規范建成后放在網上
  • 強制性制定規則要求團隊成員執行
  • 規范保持持續的更新迭代

歡迎關注「TCD設計中心」公眾號:

如何從0到1建立設計規范?來看騰訊設計師的總結!

圖片素材作者:Tran Mau Tri Tam ?

「有效制作設計規范的實用方法」

收藏 389
點贊 20

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。