編輯導語：設計在滿足基本的產品需求的同時，也要注意各業務線平臺的設計一致性，給用戶傳達好正確的品牌認知。本文從使用場景出發，結合58消息中心——微聊的案例，梳理總結了建立產品一致性設計規范的幾點實用方法，與大家分享。

01?背景

隨著58各產品線的不斷拓展，58消息中?作為集中輸送各類服務信息的載體，為各業務導流的重要樞紐及業務轉化的關鍵發?點，也越來越受到關注。而消息中心微聊作為轉化的主要場景，對各業務導流更是起到關鍵性作用。

58的消息中心主要囊括了：車、房、招聘、黃頁四大業務線業務線。但由于各業務線獨自運營多年，加上新的業務線（到家精選、金融等）不斷加入，導致了消息中心微聊在設計上“各自為營”的現狀。

02?構成

前期我們對各業務線的微聊界面進行了收集整理，發現了各業務線設計質量參次不齊。

以四大業務線為例，主要存在以下幾個問題：

1. 界面元素不統一、一致性較差；
2. 交互邏輯不一致，體驗性差；
3. 各業務線均有特殊的業務卡片，獨立性強。

那么設計師應該如何去把控多業務線一致性設計？如何讓多業務線產品做到具備一致的識別性與體驗性？我們需要有一個通用的設計準則：一致性（整體框架、頁面結構高度一致）、交互合理性（統一操作區、聚焦核心功能設計，降低用戶理解成本）、靈活性（允許創新）。

03?依據準則，建立規范

1. 一致性

一個微聊界面包含哪些內容？

• 導航
• 基礎信息
• 消息信息
• 業務卡片

以內容為依據，我們進行了規范的創建

（1）導航欄

導航欄默認可套用公式：

• 主標題：a/a+b 字號34px 顏色#333333
• 副標題：c/d/e/c+d 字號24px 顏色#666666

在導航欄無法完全滿足傳達需求時，可通過個性化的導航欄信息來突出服務者角色屬性，輔助用戶業務識別，靈活適配業務展示訴求。

（2）基礎信息

基礎信息，無外乎常規的顏色、字體、行高、等構成頁面的基礎元素。

顏色：在項目中起到傳遞不同信號、分割內容、強調不同內容的重要程度等作用。在消息中心中，我們將顏色規范分為「類型」、「使用」兩個方面。類型在實際項目中，會有一個與業務或者行業相呼應的主色（主題色&品牌色）。而「使用」時，可以根據實際所承載的內容的重要性選擇使用。

文本：主要包括2塊，首先是字號字重，字號主要是：18、24、26、34（單位PX），字重有三種，以蘋方字體為例：1. 常規體Regular；2.中粗體Semibold。

行高：默認行高取字號的 1.3 倍，應用于標題、說明文字、標簽、會話文本等無特殊行高要求時。特殊行高，取字號的1.6 倍，四舍五入取整數

（3）消息信息

微聊消息類型包括：Tips、文本、視頻、語音、通話（視頻&語音）、文檔、位置、圖片、邀請、紅包。

消息狀態包括：

• 閱讀狀態：已讀、未讀
• 發送狀態：發送中、發送成功、發送失敗
• 接受狀態：已接、未接和拒接

（4）業務卡片

業務卡片包括兩種：1. 系統提示信息；2. 商家在對話時，向用戶發送的商品介紹、個人介紹，增加雙方溝通效率，用于提高用戶向業務的轉化。

• 邊距：卡片距離頁面邊距30px、內容區距離四周的邊距24px。
• 轉角：取4的倍數：4px、8px、12px、16px、20px等，會話氣泡與業務卡片轉角統一16px大小。
• 按鈕：定義了4種風格：文本按鈕、灰色描邊按鈕、主色描邊按鈕、主色實心按鈕；以及三種常用狀態：常態（Noramal）、按壓（Press、Click）、不可點擊（Disable）。

• 圖片：從兩個緯度進行規范：應用與比例。
• 應用：一般用于頭像、業務卡片內的商品圖片
• 比例：將所有圖片比例進行整理，得到了三個常用比例：1:1、3:4、1:2.3

2. 交互合理性：統一操作區、聚焦核心功能設計，降低用戶理解成本

統一操作區，聚焦核心功能。對功能標準化設計，降低用戶使用成本，提升效率與轉化率。

原有卡片的排版信息分散，功能操作區都是分散的，在獲取信息方面沒法聚焦。優化后，將操作等有效信息集中在右側，符合用戶的操作習慣，同時也能大大提高屏效。

3. 靈活性：允許創新、自定義設計

而靈活性，允許創新主要體驗在業務卡片的展示上。在大前提統一下，我們允許各業務找到一個平衡點，各業務線根據自身的需求進行定制化設計，讓產品在不同業務線有更好的呈現。

04?總結

除了以上列出來的規范，還有很多細節的條列，在此就不一一陳列了。在創建設計一致性規范的時候，對內容的梳理越全越好，對規則設定越簡單越好，對擴展性的延展越寬越好。

當然，設計規范的創建與執行同樣重要。我們期待每一個參與的同學，都能記住設計規范，并結合設計原則進行更好的呈現。通過不斷的更新迭代、正向循環，最終成為一個更大生態。

作者：李巖，交互設計師

本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@李巖

題圖來自pexels，基于CC0協議