為什么要制定設計規范?
現在已經不是一個人做設計的時代了,多人協作中,為了達到設計的統一性,交互規范正在起著越來越重要的作用。而且軟件中還可以做成組件,大家共同維護,省時省力。
這篇文章分為三個部分:
- 一般規范包含什么內容
- 如何通過規范省時省力
- 如何評估規范的合理性
為什么要寫這些內容。首先第一部分讓大家大概了解設計規范有什么內容,日后制定規范可以直接套用;了解第一部分就會發現,現在很多設計規范的內容都大差不差,每次一個新項目都有一個新規范,規范以及是一個累贅的負擔,沒有起到最初的作用:省時省力,當前我們團隊也沒有完全解決,這里我就先假定某些解決方案僅供參考;第三部分則是花費了大量精力制定的規范如何評估它的合理性,依據有哪些,只有這樣,設計的合理性才可站穩腳跟。
話不多說,開始正題。
一、規范包含什么內容
設計規范一般分為:視覺規范和交互規范。交互規范會更注重整體的層級關系、邏輯、流程方面的定義,對于已確認會用到的常用組件也會有概念定義,由于業務的不確定性,所以交互規范更多的是起到框起某個范圍的作用,設計師可以在該范圍中進行設計;而視覺規范則會事無巨細的制定字體、顏色、邊距等等非常具體的規范,這是一個明確且不可變更的規范,除非有新的組件出現,已有的內容則基本都要按照規范去實現。
交互規范大體上包含:結構、布局、公用組件、業務組件、反饋、公用流程(編輯等)、業務流程(下單等),再從上述幾個大類中去細分,就構成了一個規范。
視覺規范在交互規范的基礎上增加:顏色、字體、間距的規范即可。
制定規范的初衷也是為了解決一下問題:
- 團隊內部協作
- 可追溯的更新版本
- 組件化設計,可復用性強
- 通過組件化設計,提升可復用性,來提升開發效率
- 如果是多個業務線并行,統一的規范能夠起到統一的作用
二、如何通過規范省時省力
身為懶人,在如何偷懶的道路上深有研究,那么對于設計師而言偷懶偷得名正言順的規范怎么能放過呢。如何通過制定規范達到省時省力的目的,這里就詳細說一說。
制定規范分為以下幾個階段:
- 項目前期:結構層級,以及某些常用的公用流程和組件方便初始的交互設計搭建
- 項目中期:對出現的新組件的定義,某個元件是否能被定義為組件取決于該元件出現的頻率、普適性以及可擴展性
- 項目后期:收尾工作,查看新組件和之前的是否有沖突、重合,是否有某些地方可以成為新的組件,并進行迭代更新
如果設計師處于多個項目中,就會出現要維護多套規范的情況。
這里來說說以下的情況:
- 整個公司圍繞一個產品為主,那么規范只存在一套;
- 公司N個產品并行,類似但不是同一個產品,這些產品還要有定制性,統一的規范不可行,那么有多少個產品就會有多少套規范;
- 公司多個產品但是這些產品是互補的,那么可以有一定的共同性,那么就會存在一個統一的規范,然后各個產品根據具體業務需求看是否要制定支線規范;
第一種情況很簡單,大家共同維護好一套規范,按部就班的迭代就好;第三種情況也簡單,由于產品互補,那么整體的交互方式一致即可,相同、類似的操作可以采用統一的規范,至于業務流程部分則可從主規范中演變出來,那么這時候設計目標、原則就起到了指向性作用。而第二種情況則比較復雜,產品不同、產品基調不同,規范不同也是情理中的事,但是如何維護,如何使用就成了問題。
第二種情況很難碰到,但每個公司生存肯定是有一個主線產品,不論外表產品形式如何更改,都無法改變核心業務。那么可以參考第三種情況的方式,針對核心業務整理核心流程并組件化,這樣可以適配各種類型的產品,那么剩下的工作就是針對項目做差異化設計了。
上圖(Xmind試用模式忽略忽略)是一個完整的交互規范可能有的內容:結構、布局、流程、組件。結構主要是針對整體產品架構、結構層級的定義,這是一個產品的底層邏輯定義,而且設計原則也起到了設計指導的作用,當出現新組件、新流程時,如何制定最終方案還是要依據設計原則進行。
所以省時省力的做法就是:公用組件、流程提煉出來作為統一規范,而結構、布局、業務流程和組件作為差異化的部分,以項目為緯度分別進行維護和迭代。
三、規范制定的合理性
現在的規范系統都比較成熟,有經驗的人在項目初期就可以列出一個大概的規范出來,但是規范列出來了,如何評定這個規范的合理性呢?
- 這個組件在項目中出現的頻率是否很高,如果僅出現過一次是否可以考慮作為特案處理
- 這個組件在項目中其他模塊的設計中是否可以復用,復用率如何,如果不可復用那么更換樣式是否可以提高組件復用率
- 如果這個組件實在不可復用,那么通過簡單的增刪是否可以復用;或者說通過多個組件之間的組合達到目的
上面3點就是我在做項目中總結的好的規范通過哪些緯度去評定:頻率、普適性和可擴展性
好了,以上就是對于規范的一點碎碎念,這里都是從概念上去說明,后續會整理出合適的例子,那就到這里,謝謝大家的觀看。
作者:青絳,微信公眾號:搬磚人員素養
本文由 @青絳 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash ,基于 CC0 協議
最好能圖文結合,舉些例子來描述