要做設計規範前,先來瞭解什麼是設計規範,不是把所有元件都擺在同一張圖上排排站吃果果就好,設計規範(Design Code / Design Specifications) 一文中提到: 設計規範是指對設計的具體技術要求,是設計工作的規則。一般包括總體目標的技術描述、功能的技術描述、技術指標的技術描述,以及限制條件的技術描述等。

設計規範的層次

粗分成 3 個層面:公司、產品線、單一產品。包含視覺、品牌、使用者體驗等。

設計規範的目的

量化指標

確定一般可用性原則和審美常識下的避免犯錯的方法,以及一旦出現錯誤後的補救方案。

確認設計關鍵點

獲得該設計規範針對範圍內的關鍵點,包括設計方向和設計元素,以通過項目設計的過程,達到團隊成員的更加密切的配合效果。它是一份檢驗文件,記錄過程中的錯誤,留作以後的經驗。併在此可以做出項目和產品設計的里程碑。

規範設計原則

這個原則有可能是針對單個項目的,也有可能是整個設計團隊的指導原則,這個原則要被反覆強調,反覆實施,團隊人員要共同為這個原則負責。

簡單來說就是:告訴你這些元件可以怎麼用、用在哪裡、有什麼樣的限制、怎麼驗收。

以上取自 設計規範(Design Code / Design Specifications)

產品組成

產品的組成大約可以拆分成 頁面 > 元件 > 元素 > 圖(影片)、文字、icon、表單、互動 等。
各元素都可能需要制定 色彩、透明度、尺寸、間距、檔案格式、品質、風格 等。
互動包含 手勢操作、過場動畫、特效、音效、震動 等。

先將各個產品拆到最小單位,再進行分類整理,通常就是那幾種分類方式。參考現有的設計規範會更容易理解。

別人家的設計規範

我又把 Google design guidelines 掏出來了,這份應該是目前最流行、寫得詳細的一份設計規範。可以從裡面分析設計規範要包含哪些內容。


從左方的選單中可以看到這份文件包含:總覽、動畫、風格、佈局、組合元件、圖片、易用性、資源。點開後還有更詳細的分類,之後才會是內文部份。

每一個元件或元素都會包含

  • 元素意義
  • 使用規則、限制
  • 運用場合、時機,與其原因
  • 和同質元素間的一制性(新製規則)
  • 組合運用
  • 各種狀態
  • 平台差異性
  • 正確示範、錯誤示範

元素意義

這個元素有什麼的功能、對使用者來說有什麼幫助、呈現什麼資訊等等。

使用規則、限制,與其原因

要怎麼使用這項元素、使用這項元素需要注意什麼事情?為什麼?

運用場合、時機

什麼情況下會使用到這項元素?它會出現在什麼地方?

和同質元素間的一致性(新製規則)

若現有同質元素不敷使用、需另製新款時,必須符合哪些規定以求風格一致?(如icon)

組合運用

當元素和其他元件混合使用,會有什麼限制?是否有特例情況?

各種狀態

若元素會因操作或其他原因呈現不同樣貌狀況時,規則為何?

平台差異性

若產品發布於各種平台上,該元素是否會有不同的情況?

正確示範、錯誤示範

除了正確示範外,將常見的錯誤一併標示可以降低出錯慮、節省來回修改的時間。不僅只有文字之外,最好附上圖片甚至動畫說明。

製作文件的規範

只要是「文件」都有它的規範存在,即使是 Style Guideline。製作這份文件也有它的規則存在。

  • 階層
  • 分類
  • 順序
  • 視覺
  • 維護人員

階層

你的產品可拆分成幾個階層?階層的規則是什麼?如果不懂的話先套用 Google Design 的分類,之後就知道怎麼創健自己產品的階層。

分類

即使分了階層,也會有各式各樣的元素待整理,比如按鈕。同性質的放在一起或是同個區塊才會用到的方在一起,要看你的產品適合套用什麼樣的分類規則。

順序

最重要資訊的放最醒目的地方,這次改版才加入的新規則也可放在最醒目的地方。這份文件要用什麼規則排序目錄需要好好思考。

視覺

這份文件的排版、色彩、字體字型、內容一致性、檔案發佈的格式等等,都會影響到使用者是否能快速找到他想看的章節。

維護人員

規範不是做好了就算,每過一段時間就需要檢查改版。需要明確訂定編修人員,並建立改版審核機制「要在什麼情況下才能變動此文件的內容」,確保此文件的穩定和可信。

結論

Style Guideline 是份指南,將所有的規則系統整理後條列化,必需要做到「不管是誰只要看了這份文件都能產出一樣的成品」。不光是設計師需要常常閱讀,同時也會影響到 PM、企劃、RD 在產品上的設計與開發。絕對不能今天做了什麼好看的設計、就去改一下設計規範。而且所有的設計都要照這份文件開發,要改動規範就必須提出申請,並通知所有公司成員,確實傳達改動內容與原因,否則這份文件形同虛設。

補充參考:設計風格資源筆記

通靈

沒有寫清楚講明白的部份要靠實作人員腦補瞎猜。例1:「你就看圖大概比對一下位置就好。」「…所以數字是多少?要我通靈喔?」例2:「就依你的經驗大概想一下這會怎麼操作。」「功能都還沒定下來我怎麼知道操作?要我通靈喔?」

comments powered by Disqus