縮略方式

末端截斷

• 內(nèi)容超過列寬時超出的用‘…’省略；
• 標簽內(nèi)文案超出由‘…’省略。
• 長文本截斷的通用模式。

中間截斷

• 設置開頭、末端保留的字符數(shù)，在末端保留字符前顯示 ‘…’；
• 開頭保留字符數(shù)根據(jù)列寬以「顯示盡量多的字符」的原則來確定（極端情況為開頭不保留字符，即為「開頭截斷」；若空間十分有限，則盡量多地保留末端字符）。
• 中間截斷在文本的開頭相同、末尾字符對區(qū)別字段起到關鍵作用時使用。

場景舉例 1：實例名

包括任務名、文件名、表名、系統(tǒng)名等等。

典型案例：完整字段如下：

company_sales_record_20150116

company_sales_record_20150117

縮略結果：

場景舉例 2：系列名稱

開頭統(tǒng)一的系列長名稱，通過后半部分來區(qū)分的字段。

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

口碑-本地生活事業(yè)部-北方大區(qū)-北方運營

口碑-本地生活事業(yè)部-七星大區(qū)-東南運營

縮略結果：

設計要點

• 重要數(shù)字、時間不建議縮略。
• 名稱列縮略可結合表頭的拖拉控制顯示與縮略，內(nèi)容完全顯示時‘…’消失。
• 單行文本省略使用 tooltip，多行文本省略使用展開與收起。

• 描述‘…’支持 hover，標簽整個支持 hover。
• 標簽數(shù)量多時建議通過折行全部展示，不建議通過‘…’隱藏后面的標簽。

• tooltip 不承載復雜文本和操作。
• 根據(jù)使用場景為字段設置合理的字數(shù)上限和展示空間，避免隱藏過多的內(nèi)容。
• tooltip 的尺寸不應過大，建議最大尺寸不超過長 320px、寬 160px。

轉載請注明：學UI網(wǎng)》B 類產(chǎn)品設計細節(jié)：文本縮略

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務