B類產品設計細節:文本縮略
編輯導語:文本縮略是產品界面常見的顯示形式之一,當文本內容無法展示、或者自適應調整寬度有所變化時,文本則可能進行縮略。那么,具體有哪些縮略方式?本篇文章里,作者總結了文本縮略的具體形式以及設計時的注意要點,一起來看一下。
說明:文本縮略是指展示空間不足時,隱去部分內容并用‘…’ 替代。包括但不限于以下情況:
- 文本內容長度或高度超過列寬或行高;
- 圖表中空間有限,文本內容無法完全顯示;
- 自適應調整時寬度變小。
一、縮略方式
1. 末端截斷
- 單行內容超過列寬,超出的用‘…’ 省略;
- 多行內容超過設置行數,超出的部分用‘…’ 省略;
- 標簽內文案超出由‘…’ 省略。
- 末端截斷為長文本截斷的通用模式。
2. 中間截斷
- 設置開頭、末端保留的字符數,在末端保留字符前顯示‘…’ 。
- 開頭保留字符數根據列寬以「顯示盡量多的字符」的原則來確定(極端情況為開頭不保留字符,即為「開頭截斷」;若空間十分有限,則盡量多地保留末端字符)。
- 中間截斷在文本的開頭相同、末尾字符對區別字段起到關鍵作用時使用。
場景舉例 1:末尾為數字
通常用于實例名(任務名、文件名、表名、系統)。
典型案例:完整字段如下
company_sales_record_20150116 company_sales_record_20150117
縮略結果:
場景舉例 2:系列名稱
開頭統一的系列長名稱,比如部門名稱,或者其他通過后半部分區分的字段。
典型案例:阿里集團的 BU 完整名稱如下:
口碑-本地生活事業部-北方大區-北方運營 口碑-本地生活事業部-七星大區-東南運營
縮略結果:
二、設計要點
重要數字、時間不建議縮略。
名稱列縮略可結合表頭的拖拉控制顯示與縮略,內容完全顯示時‘…’ 消失。
單行文本省略使用 tooltip,多行文本省略使用展開與收起。
描述‘…’ 支持 hover,標簽整個支持 hover。
標簽文案過長時建議截斷;標簽數量多時建議通過折行全部展示,不建議通過‘…’ 隱藏后面的標簽。
tooltip 不承載復雜文本和操作。
根據使用場景為字段設置合理的字數上限和展示空間,避免隱藏過多的內容。
tooltip 的尺寸不應過大,建議最大尺寸不超過長 320px、寬 160px。
作者:林葉,螞蟻集團設計師
本文由 @Ant Design 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議
評論
- 目前還沒評論,等你發揮!