編輯導(dǎo)語：在前面一篇文章中，分享了《B端UI交互通用規(guī)范概述》，其中對(duì)B端規(guī)范的UI適用范圍、基本原則以及UI交互通用規(guī)范進(jìn)行了詳盡的規(guī)范描述；今天作者介紹Web端的基礎(chǔ)組件以及交互規(guī)范，基礎(chǔ)組件主要包括：文本、按鈕、下拉菜單、組合菜單、輸入框、翻頁控制、表格、表單、會(huì)話框等9種。

本章介紹的是“文本”組件的交互規(guī)范。

?一、標(biāo)題/標(biāo)簽

1. 需求場(chǎng)景

• 需要用戶快速區(qū)分內(nèi)容分區(qū)。
• 需要用戶快速理解內(nèi)容分區(qū)含義。

2. 內(nèi)容與布局

• 標(biāo)題使用簡(jiǎn)短的語句標(biāo)明模塊，用于描述內(nèi)容的主要包括內(nèi)容和主旨。
• 標(biāo)題標(biāo)簽盡量避免換行顯示。
• 標(biāo)題與其他內(nèi)容組合顯示時(shí)，其他內(nèi)容應(yīng)換行縮進(jìn)顯示。

• 文本框需要根據(jù)不同語言做自適應(yīng)。當(dāng)標(biāo)題涉及國(guó)際化時(shí)，根據(jù)當(dāng)前語言版本動(dòng)態(tài)顯示文本寬度。
• 在同一個(gè)產(chǎn)品界面中，允許存在多級(jí)標(biāo)題。
• 不同層級(jí)標(biāo)題提供縮進(jìn)，需要有樣式上的區(qū)別
• 標(biāo)題、分級(jí)標(biāo)題以及分類標(biāo)簽使用左對(duì)齊
• ”屬性“相關(guān)文本居左對(duì)齊

二、內(nèi)容描述

1. 需求場(chǎng)景

• 用戶通過閱讀內(nèi)容理解相關(guān)信息與數(shù)據(jù)。
• 用于顯示或說明產(chǎn)品相關(guān)信息。

2. 內(nèi)容與布局

• 描述文本左對(duì)齊
• 在特定場(chǎng)景下允許換行。一般內(nèi)容描述遵循自然換行，而在某些特定場(chǎng)景下?lián)Q行有助于將內(nèi)容描述更清楚。
• 如界面布局限制而無法換行，則可根據(jù)國(guó)際化中最長(zhǎng)字符串語言版本進(jìn)行寬度適配。
• 有交互響應(yīng)的文本需支持顏色變化，如可點(diǎn)擊事件。

3. 交互行為

1）支持點(diǎn)擊事件響應(yīng)的文字，當(dāng)鼠標(biāo)移入內(nèi)容區(qū)域后提供受范性指示（如鼠標(biāo)手型變化，文字顏色或樣式發(fā)生變化）。

舉個(gè)例子:

以下是不支持點(diǎn)擊事件的響應(yīng)文本：

以下是支持點(diǎn)擊事件的響應(yīng)文本：

2）支持點(diǎn)擊事件響應(yīng)的文字可根據(jù)業(yè)務(wù)特性標(biāo)注顏色，鼠標(biāo)移入后需要提供受范性指示（鼠標(biāo)手型變化、文字顏色透明度發(fā)生變化）。

舉個(gè)例子：

下面是鼠標(biāo)移入前：

下面是鼠標(biāo)移入后：

三、備注

1. 需求場(chǎng)景

• 需要內(nèi)容補(bǔ)充說明，?輔助用戶更容易地理解、操作界面內(nèi)容。
• 界面內(nèi)容在正常情況下需盡量避免對(duì)用戶的日常使用造成干擾。

2. 內(nèi)容與布局

• 備注文本默認(rèn)使用左對(duì)齊，如有特殊需要也可根據(jù)業(yè)務(wù)需要右對(duì)齊。
• 支持換行顯示。
• 因界面布局原因不允許使用換行顯示時(shí)，涉及國(guó)際化則以最長(zhǎng)字符串最長(zhǎng)的語言版本進(jìn)行寬度適配。
• 顯示效果需弱于標(biāo)題文本與描述文本。備注文本一般通過字體或顏色與描述文本進(jìn)行區(qū)分。

四、組合文本

1. 需求場(chǎng)景

• 在實(shí)際的業(yè)務(wù)場(chǎng)景中，各類文本需要組合顯示。
• 在標(biāo)簽文本與描述文本展示時(shí)，為方便用戶理解可提供對(duì)應(yīng)的備注信息。

2. 內(nèi)容與布局

1）屬性展示：標(biāo)簽文本與內(nèi)容描述組合展示，文本內(nèi)容局左對(duì)齊。

標(biāo)簽文本+內(nèi)容描述：

標(biāo)簽文本 +?內(nèi)容描述 +?備注文本（備注文本在內(nèi)容描述后換行顯示）：

2）多級(jí)文本內(nèi)容組合展示：
標(biāo)簽文本與內(nèi)容描述組合展示，使用上下排列，文本均左對(duì)齊，如在信息描述中有屬性展示，對(duì)應(yīng)布局以屬性展示規(guī)定為準(zhǔn)。

關(guān)于B端交互組件“文本”的相關(guān)分享就到此，后面我們介紹“按鈕”相關(guān)交互規(guī)范。

作者：云桌面產(chǎn)品，公眾號(hào)：云桌面產(chǎn)品，歡迎關(guān)注

本文由 @云桌面產(chǎn)品 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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