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

01?背景

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

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

02?構(gòu)成

前期我們對各業(yè)務(wù)線的微聊界面進行了收集整理，發(fā)現(xiàn)了各業(yè)務(wù)線設(shè)計質(zhì)量參次不齊。

以四大業(yè)務(wù)線為例，主要存在以下幾個問題：

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

那么設(shè)計師應(yīng)該如何去把控多業(yè)務(wù)線一致性設(shè)計？如何讓多業(yè)務(wù)線產(chǎn)品做到具備一致的識別性與體驗性？我們需要有一個通用的設(shè)計準(zhǔn)則：一致性（整體框架、頁面結(jié)構(gòu)高度一致）、交互合理性（統(tǒng)一操作區(qū)、聚焦核心功能設(shè)計，降低用戶理解成本）、靈活性（允許創(chuàng)新）。

03?依據(jù)準(zhǔn)則，建立規(guī)范

1. 一致性

一個微聊界面包含哪些內(nèi)容？

• 導(dǎo)航
• 基礎(chǔ)信息
• 消息信息
• 業(yè)務(wù)卡片

以內(nèi)容為依據(jù)，我們進行了規(guī)范的創(chuàng)建

（1）導(dǎo)航欄

導(dǎo)航欄默認(rèn)可套用公式：

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

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

（2）基礎(chǔ)信息

基礎(chǔ)信息，無外乎常規(guī)的顏色、字體、行高、等構(gòu)成頁面的基礎(chǔ)元素。

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

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

行高：默認(rèn)行高取字號的 1.3 倍，應(yīng)用于標(biāo)題、說明文字、標(biāo)簽、會話文本等無特殊行高要求時。特殊行高，取字號的1.6 倍，四舍五入取整數(shù)

（3）消息信息

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

消息狀態(tài)包括：

• 閱讀狀態(tài)：已讀、未讀
• 發(fā)送狀態(tài)：發(fā)送中、發(fā)送成功、發(fā)送失敗
• 接受狀態(tài)：已接、未接和拒接

（4）業(yè)務(wù)卡片

業(yè)務(wù)卡片包括兩種：1. 系統(tǒng)提示信息；2. 商家在對話時，向用戶發(fā)送的商品介紹、個人介紹，增加雙方溝通效率，用于提高用戶向業(yè)務(wù)的轉(zhuǎn)化。

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

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

2. 交互合理性：統(tǒng)一操作區(qū)、聚焦核心功能設(shè)計，降低用戶理解成本

統(tǒng)一操作區(qū)，聚焦核心功能。對功能標(biāo)準(zhǔn)化設(shè)計，降低用戶使用成本，提升效率與轉(zhuǎn)化率。

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

3. 靈活性：允許創(chuàng)新、自定義設(shè)計

而靈活性，允許創(chuàng)新主要體驗在業(yè)務(wù)卡片的展示上。在大前提統(tǒng)一下，我們允許各業(yè)務(wù)找到一個平衡點，各業(yè)務(wù)線根據(jù)自身的需求進行定制化設(shè)計，讓產(chǎn)品在不同業(yè)務(wù)線有更好的呈現(xiàn)。

04?總結(jié)

除了以上列出來的規(guī)范，還有很多細(xì)節(jié)的條列，在此就不一一陳列了。在創(chuàng)建設(shè)計一致性規(guī)范的時候，對內(nèi)容的梳理越全越好，對規(guī)則設(shè)定越簡單越好，對擴展性的延展越寬越好。

當(dāng)然，設(shè)計規(guī)范的創(chuàng)建與執(zhí)行同樣重要。我們期待每一個參與的同學(xué)，都能記住設(shè)計規(guī)范，并結(jié)合設(shè)計原則進行更好的呈現(xiàn)。通過不斷的更新迭代、正向循環(huán)，最終成為一個更大生態(tài)。

作者：李巖，交互設(shè)計師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設(shè)計中心（微信公眾號@58UXD），作者@李巖

題圖來自pexels，基于CC0協(xié)議