各行各業都有規範，可以說我們每天都是生活在各種條條框框中，那麼對我們手上的設計工作來說，如何制定設計規範來幫助我們更高質高效的完成設計工作。

最近在做工作的項目文件整理，其中一部分工作内容就是維護更新之前産出的設計規範。

一、設計規範什麼時候做？做到什麼程度？

先有産品還是先有規範？

聽起來好像有點像先有雞還是先有蛋，先做産品後總結規範，or先出規範再做産品，or一邊出産品一邊整理規範，其實每種方法都沒有錯。

不過在我來看，我比較中意第三種方式，即一邊出産品一邊出規範。

對于新的産品來說，需要在産品的初期先制定能夠主導産品體驗大方向性的、主要組件的設計規範，先讓小車的輪子轉起來，随後在産品的研發和疊代的過程中，不斷去完善。

對于大部分常見的設計組件基本上在産品的一個版本的疊代中就可以全部涉及到，所以在産品從0-1的這個階段是最合适的。

制定交互規範對我們工作中有什麼幫助呢？

我們先來看看如果不制作交互規範的話，日常的設計工作中會遇到哪些問題：

• 同一類型的交互方式在不同頁面顯示的方式不一樣
• 對于明明可以複用的組件，每次出交互方案時都要重新畫組件，費時費力
• 與工作上下遊夥伴的溝通效率低
• ……

那麼設計規範做到什麼程度才可以呢？

現在大部分的互聯網公司都是敏捷研發的模式，所以在産品起步的初期，我們最重要的事情不是制作各種交互組件，最重要的是定義整個産品最基礎的交互框架。

網易UEDC設計組對web頁面的框架層級做了如下的梳理：即底層、内容層、導航層、全屏操作層、插件層和模态彈窗層（熟悉前端的同學應該知道，前端同學在寫頁面時會把頁面劃分的三層：結構層、表示層、行為層，我們制定設計的主要是圍繞這三個方向展開，即頁面框架、頁面樣式和交互動作設計）。

當我們制定好這框架之後，設計的工作就會變得更加的清晰，有條理，絕大部分的設計工作都可以依附在在這個設計框架内完成，和前端的同學溝通效率也會更高。

在制定了完善的頁面交互框架之後，敏捷開發的團隊中，産品的生命周期節奏很快，所以我們在設計工作的前期，隻需要根據産品的定位、産品的調性去制定我們的常見的交互規範就可以了。

比如基礎文字使用規範、基礎控件庫（輸入框、對話框、搜索、導航等）、産品全局狀态（加載、刷新、缺省等），能夠滿足初期的産品設計就行。

在産品發展突破了從0-1的這個階段時，産品的交互規範就要随着産品的不斷疊代進行更新擴充，各種複雜的、較為少見的交互組件都會慢慢的出現在産品疊代中。

在這時候我們需要對這些組件進行更加規範的分組整理，常見的分組有導航、搜索、通知、按鈕、表單、提示信息、信息切換等，比如導航又會分為頂部導航、側邊導航、底部導航等，具體的内容會在下文中詳細說明。

二、怎樣重新開始制作一套自己的交互設計規範

交互規範主要分為web端和移動端以及其他配合産品使用的設備端，其中移動端又分為Android和IOS兩種，其他設備端如iWatch、車載大屏等，我們在制作對應的交互設計規範時，一定要在響應平台本身的設計規範之上制作。

如果要從零開始設計一套屬于自己産品的設計規範，我們不妨看看一些做的非常優秀的案例，比如iview、Ant Design，Element、VUX等，這類産品已經實現了端到端的體驗一緻，交互組件的的豐富度能夠滿足絕大部分交互場景。

并且這些組件的交互、視覺、前端都做的非常優秀，這些優秀的案例在我們制作交互規範時确實可以作為有效的參考，包括交互組件的類型、每個組件的交互方式、整體色彩搭配等等，參考這些優秀的設計規範産品，對我們制作交互規範時可以起到事半功倍的效果。

一套基礎的交互設計規範體系需要包含哪些内容？

上文提到了交互組件的類型、每個組件的交互方式、色彩文字使用規範等，其實比較抽象，在實際的産品中，這些開發具體要包含哪些内容呢？

首先我們把組件類型分類：頁面布局類、導航類、基礎組件類、表單組件類、數據展示類、提示組件類。

每一類常見的内容如下：

• 頁面布局：栅格布局、顔色色彩、排版字體等
• 導航：頂部導航、側邊抽屜導航、頂部導航欄、底部标簽欄、分頁器、面包屑、步驟條、tab标簽、分段控制器
• 基礎組件：按鈕、加載、單行文本框、多行文本框、搜索框、下拉框、段落文本等
• 表單組件類：輸入框、單選框、複選框、滑動開關、輸入校驗規則、文件上傳、圖片上傳、圖片查看、日期選擇器、級聯選擇器等
• 數據展示類：表格、圖表、手風琴、走馬燈、列表、步驟條、九宮格等
• 提示組件類：tip、标簽、對話框、吐司提示等
• 業務組件：根據當前産品業務的需要而設計出的一些特殊類型的組件

值得注意的是：我們在制作一套交互設計組件時，可以把它看成一個我們設計的一個産品，它也要有自己的規範，也會有優先級，也會有版本疊代，從零到一；從先滿足對基礎業務的支撐開始，再逐步進行疊代。

針對交互設計規範文檔本身制訂一套規範，以滿足在不同時間、不同人員維護這個規範文檔時都能夠保持整個文檔的統一性，在我們制作規範文檔的過程中是一件磨刀不誤砍柴工的事情。

三、交互設計規範制作的的幾個注意點

交互規範雖然能夠提高工作效率，維護産品的體驗一緻性，也能夠降低團隊的溝通成本。

但是仍然需要我們做好以下幾點才可以：

• 文字不要太多，能讓項目組成員看圖明白的交互方式（多狀态、極限情況等）就盡量避免文字的累贅描述
• 必要的描述信息不能少，對于關鍵的交互信息最好能夠輔以清晰的文字闡述
• 務必設計好組件多狀态的情況（獲取焦點前、獲取焦點、失去焦點）和在極限等情況下的交互形式
• 文案表達形清晰一緻，好的交互規範不需要太多的文字說明，團隊成員直接看圖即可明白這個組件的交互方式（點擊前、點擊後、空數據、有數據、極限情況下等的交互樣式），當然有些不好通過圖稿表達的信息也必須需要文字說明輔助，但相比文字而言，能用圖片傳達的信息盡量用圖片傳達。
• 交互規範後期有一定的維護成本，需要專門抽出時間進行整理維護，每一次的維護内容都要記錄在冊。

設計規範在梳理制作的過程中，主要由設計同學來主導，但是必須要與團隊的産品同學、前端同學達成共識。對于因為團隊内技術、業務等限制産生的特定情況下的交互産物了然于胸。

當然規範的制定一定要結合有效的落地執行才能夠發揮真正的作用。在解放設計師勞動力的同時，讓我們的設計工作變成真正的以不變應萬變。

不過有一點必須要說明一下：實際的設計工作中也不要産生唯規範論的态度，我們真正要做的還是盡量從場景和問題的角度出發，而不是拿規範當擋箭牌。

規範是為了實現業務需求而服務的，如果某種設計方案能夠更高效更有質量的解決某個問題，并不帶來新的損失，那是不是可以不那麼拘泥在當前的規範中。

規範不是我們的王牌，不要因為産品有了設計規範而讓自己變成規範的奴隸，喪失了更多好設計和好靈感。

附1：自己整理制作的一套交互組件庫

• 鍊接：https:///s/1PQ9mEaMnJqWAhHvqErwHBg
• 密碼：z8xg

附2：我常做參考的web交互設計規範

Ant Design：https://ant.design/index-cn

餓了麼 Element ：http://element-cn.eleme.io/#/zh-CN

附3：我常做參考的移動端交互設計規範

VUX UI：https://vux.li/demos/v2/#/demo

滴滴Cube UI：https://didi.github.io/cube-ui/example/#/

Ant Design Mobile：https://mobile.ant.design/index-cn

本文由 @Mr.李lee 原創發布于人人都是産品經理，未經許可，禁止轉載。

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部