B端UI基礎元件互動規範-文字

編輯導語：在前面一篇文章中，分享了《B端UI互動通用規範概述》，其中對B端規範的UI適用範圍、基本原則以及UI互動通用規範進行了詳盡的規範描述；今天作者介紹Web端的基礎元件以及互動規範，基礎元件主要包括：文字、按鈕、下拉選單、組合菜單、輸入框、翻頁控制、表格、表單、會話框等9種。

本章介紹的是“文字”元件的互動規範。

一、標題/標籤

1。 需求場景

2。 內容與佈局

標題使用簡短的語句標明模組，用於描述內容的主要包括內容和主旨。

標題標籤儘量避免換行顯示。

標題與其他內容組合顯示時，其他內容應換行縮排顯示。

文字框需要根據不同語言做自適應。當標題涉及國際化時，根據當前語言版本動態顯示文字寬度。

在同一個產品介面中，允許存在多級標題。

不同層級標題提供縮排，需要有樣式上的區別

標題、分級標題以及分類標籤使用左對齊

”屬性“相關文字居左對齊

二、內容描述

1。 需求場景

使用者透過閱讀內容理解相關資訊與資料。

用於顯示或說明產品相關資訊。

2。 內容與佈局

描述文字左對齊

在特定場景下允許換行。一般內容描述遵循自然換行，而在某些特定場景下換行有助於將內容描述更清楚。

如介面佈局限制而無法換行，則可根據國際化中最長字串語言版本進行寬度適配。

有互動響應的文字需支援顏色變化，如可點選事件。

3。 互動行為

1）支援點選事件響應的文字，當滑鼠移入內容區域後提供受範性指示（如滑鼠手型變化，文字顏色或樣式發生變化）。

舉個例子：

以下是不支援點選事件的響應文字：

以下是支援點選事件的響應文字：

2）支援點選事件響應的文字可根據業務特性標註顏色，滑鼠移入後需要提供受範性指示（滑鼠手型變化、文字顏色透明度發生變化）。

舉個例子：

下面是滑鼠移入前：

下面是滑鼠移入後：

三、備註

1。 需求場景

需要內容補充說明， 輔助使用者更容易地理解、操作介面內容。

介面內容在正常情況下需儘量避免對使用者的日常使用造成干擾。

2。 內容與佈局

備註文字預設使用左對齊，如有特殊需要也可根據業務需要右對齊。

支援換行顯示。

因介面佈局原因不允許使用換行顯示時，涉及國際化則以最長字串最長的語言版本進行寬度適配。

顯示效果需弱於標題文字與描述文字。備註文字一般透過字型或顏色與描述文字進行區分。

四、組合文字

1。 需求場景

在實際的業務場景中，各類文字需要組合顯示。

在標籤文字與描述文字展示時，為方便使用者理解可提供對應的備註資訊。

2。 內容與佈局

1）屬性展示：標籤文字與內容描述組合展示，文字內容局左對齊。

標籤文字+內容描述：

標籤文字 + 內容描述 + 備註文字（備註文字在內容描述後換行顯示）：

2）多級文字內容組合展示： 標籤文字與內容描述組合展示，使用上下排列，文字均左對齊，如在資訊描述中有屬性展示，對應佈局以屬性展示規定為準。

關於B端互動元件“文字”的相關分享就到此，後面我們介紹“按鈕”相關互動規範。

本文由 @雲計算產品汪 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 unsplash，基於 CC0 協議