中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

?一、標題/標簽

1. 需求場景

• 需要用戶快速區分內容分區。
• 需要用戶快速理解內容分區含義。

2. 內容與布局

• 標題使用簡短的語句標明模塊，用于描述內容的主要包括內容和主旨。
• 標題標簽盡量避免換行顯示。
• 標題與其他內容組合顯示時，其他內容應換行縮進顯示。

• 文本框需要根據不同語言做自適應。當標題涉及國際化時，根據當前語言版本動態顯示文本寬度。
• 在同一個產品界面中，允許存在多級標題。
• 不同層級標題提供縮進，需要有樣式上的區別
• 標題、分級標題以及分類標簽使用左對齊
• ”屬性“相關文本居左對齊

二、內容描述

1. 需求場景

• 用戶通過閱讀內容理解相關信息與數據。
• 用于顯示或說明產品相關信息。

2. 內容與布局

• 描述文本左對齊
• 在特定場景下允許換行。一般內容描述遵循自然換行，而在某些特定場景下換行有助于將內容描述更清楚。
• 如界面布局限制而無法換行，則可根據國際化中最長字符串語言版本進行寬度適配。
• 有交互響應的文本需支持顏色變化，如可點擊事件。

3. 交互行為

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

舉個例子:

以下是不支持點擊事件的響應文本：

以下是支持點擊事件的響應文本：

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

舉個例子：

下面是鼠標移入前：

下面是鼠標移入后：

三、備注

1. 需求場景

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

2. 內容與布局

• 備注文本默認使用左對齊，如有特殊需要也可根據業務需要右對齊。
• 支持換行顯示。
• 因界面布局原因不允許使用換行顯示時，涉及國際化則以最長字符串最長的語言版本進行寬度適配。
• 顯示效果需弱于標題文本與描述文本。備注文本一般通過字體或顏色與描述文本進行區分。

四、組合文本

1. 需求場景

• 在實際的業務場景中，各類文本需要組合顯示。
• 在標簽文本與描述文本展示時，為方便用戶理解可提供對應的備注信息。

2. 內容與布局

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

標簽文本+內容描述：

標簽文本 +?內容描述 +?備注文本（備注文本在內容描述后換行顯示）：

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

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

作者：云桌面產品，公眾號：云桌面產品，歡迎關注

本文由 @云桌面產品 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 unsplash，基于 CC0 協議