B類產品設計細節:文字縮略

編輯導語:文字縮略是產品介面常見的顯示形式之一,當文字內容無法展示、或者自適應調整寬度有所變化時,文字則可能進行縮略。那麼,具體有哪些縮略方式?本篇文章裡,作者總結了文字縮略的具體形式以及設計時的注意要點,一起來看一下。

B類產品設計細節:文字縮略

說明:文字縮略是指展示空間不足時,隱去部分內容並用‘…’ 替代。包括但不限於以下情況:

文字內容長度或高度超過列寬或行高;

圖表中空間有限,文字內容無法完全顯示;

自適應調整時寬度變小。

一、縮略方式

1. 末端截斷

單行內容超過列寬,超出的用‘…’ 省略;

多行內容超過設定行數,超出的部分用‘…’ 省略;

標籤內文案超出由‘…’ 省略。

末端截斷為長文字截斷的通用模式。

B類產品設計細節:文字縮略

2. 中間截斷

設定開頭、末端保留的字元數,在末端保留字元前顯示‘…’ 。

開頭保留字元數根據列寬以「顯示儘量多的字元」的原則來確定(極端情況為開頭不保留字元,即為「開頭截斷」;若空間十分有限,則儘量多地保留末端字元)。

中間截斷在文字的開頭相同、末尾字元對區別欄位起到關鍵作用時使用。

場景舉例 1:末尾為數字

通常用於例項名(任務名、檔名、表名、系統)。

典型案例:完整欄位如下

company_sales_record_20150116 company_sales_record_20150117

縮略結果:

B類產品設計細節:文字縮略

場景舉例 2:系列名稱

開頭統一的系列長名稱,比如部門名稱,或者其他通過後半部分割槽分的欄位。

典型案例:阿里集團的 BU 完整名稱如下:

口碑-本地生活事業部-北方大區-北方運營 口碑-本地生活事業部-七星大區-東南運營

縮略結果:

B類產品設計細節:文字縮略

二、設計要點

重要數字、時間不建議縮略。

名稱列縮略可結合表頭的拖拉控制顯示與縮略,內容完全顯示時‘…’ 消失。

單行文字省略使用 tooltip,多行文字省略使用展開與收起。

B類產品設計細節:文字縮略

描述‘…’ 支援 hover,標籤整個支援 hover。

標籤文案過長時建議截斷;標籤數量多時建議透過折行全部展示,不建議透過‘…’ 隱藏後面的標籤。

B類產品設計細節:文字縮略

tooltip 不承載複雜文字和操作。

根據使用場景為欄位設定合理的字數上限和展示空間,避免隱藏過多的內容。

tooltip 的尺寸不應過大,建議最大尺寸不超過長 320px、寬 160px。

作者:林葉,螞蟻集團設計師

本文由 @Ant Design 原創釋出於人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基於 CC0 協議

頂部