B 類產(chǎn)品設(shè)計(jì)細(xì)節(jié)：文本縮略

2021-8-15 濤濤

說(shuō)明：文本縮略是指展示空間不足時(shí)，隱去部分內(nèi)容并用'...' 替代。常見(jiàn)情況：

· 文本內(nèi)容長(zhǎng)度或高度超過(guò)列寬或行高；

· 圖表中空間有限，文本內(nèi)容無(wú)法完全顯示；

· 自適應(yīng)調(diào)整時(shí)寬度變小。

縮略方式

末端截?cái)?

· 內(nèi)容超過(guò)列寬時(shí)超出的用 '...' 省略；

· 標(biāo)簽內(nèi)文案超出由 '...' 省略。

· 長(zhǎng)文本截?cái)嗟耐ㄓ媚Ｊ健?

中間截?cái)?

· 設(shè)置開(kāi)頭、末端保留的字符數(shù)，在末端保留字符前顯示 '...' ；

· 開(kāi)頭保留字符數(shù)根據(jù)列寬以「顯示盡量多的字符」的原則來(lái)確定（極端情況為開(kāi)頭不保留字符，即為「開(kāi)頭截?cái)唷梗蝗艨臻g十分有限，則盡量多地保留末端字符）。

· 中間截?cái)嘣谖谋镜拈_(kāi)頭相同、末尾字符對(duì)區(qū)別字段起到關(guān)鍵作用時(shí)使用。

場(chǎng)景舉例 1：實(shí)例名

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

典型案例：完整字段如下

company_sales_record_20150116

company_sales_record_20150117

縮略結(jié)果：

場(chǎng)景舉例 2：系列名稱

開(kāi)頭統(tǒng)一的系列長(zhǎng)名稱，通過(guò)后半部分來(lái)區(qū)分的字段。

典型案例：阿里集團(tuán)的 BU 完整名稱如下

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

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

縮略結(jié)果：

設(shè)計(jì)要點(diǎn)

· 重要數(shù)字、時(shí)間不建議縮略。

· 名稱列縮略可結(jié)合表頭的拖拉控制顯示與縮略，內(nèi)容完全顯示時(shí) '...' 消失。

· 單行文本省略使用 tooltip，多行文本省略使用展開(kāi)與收起。

· 描述 '...' 支持 hover，標(biāo)簽整個(gè)支持 hover。

· 標(biāo)簽數(shù)量多時(shí)建議通過(guò)折行全部展示，不建議通過(guò) '...' 隱藏后面的標(biāo)簽。

· tooltip 不承載復(fù)雜文本和操作。

· 根據(jù)使用場(chǎng)景為字段設(shè)置合理的字?jǐn)?shù)上限和展示空間，避免隱藏過(guò)多的內(nèi)容。

· tooltip 的尺寸不應(yīng)過(guò)大，建議最大尺寸不超過(guò)長(zhǎng) 320px、寬 160px。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.sdgs6788.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)