B 类产品设计细节:文本缩略

用户头像
杭州/设计爱好者/4年前/1609浏览
B 类产品设计细节:文本缩略

作者:林叶,蚂蚁集团设计师

说明:文本缩略是指展示空间不足时,隐去部分内容并用'...' 替代。常见情况:

· 文本内容长度或高度超过列宽或行高;

· 图表中空间有限,文本内容无法完全显示;

· 自适应调整时宽度变小。


缩略方式

末端截断

· 内容超过列宽时超出的用 '...' 省略;

· 标签内文案超出由 '...' 省略。

· 长文本截断的通用模式。


中间截断

· 设置开头、末端保留的字符数,在末端保留字符前显示 '...' ;

· 开头保留字符数根据列宽以「显示尽量多的字符」的原则来确定(极端情况为开头不保留字符,即为「开头截断」;若空间十分有限,则尽量多地保留末端字符)。

· 中间截断在文本的开头相同、末尾字符对区别字段起到关键作用时使用。


场景举例 1:实例名

包括任务名、文件名、表名、系统名等等。

典型案例:完整字段如下

company_sales_record_20150116

company_sales_record_20150117

缩略结果:

场景举例 2:系列名称

开头统一的系列长名称,通过后半部分来区分的字段。

典型案例:阿里集团的 BU 完整名称如下

口碑-本地生活事业部-北方大区-北方运营

口碑-本地生活事业部-七星大区-东南运营

缩略结果:


设计要点

· 重要数字、时间不建议缩略。

· 名称列缩略可结合表头的拖拉控制显示与缩略,内容完全显示时 '...' 消失。

· 单行文本省略使用 tooltip,多行文本省略使用展开与收起。

· 描述 '...' 支持 hover,标签整个支持 hover。

· 标签数量多时建议通过折行全部展示,不建议通过 '...' 隐藏后面的标签。

· tooltip 不承载复杂文本和操作。

· 根据使用场景为字段设置合理的字数上限和展示空间,避免隐藏过多的内容。

· tooltip 的尺寸不应过大,建议最大尺寸不超过长 320px、宽 160px。


23
阅读原文
|
举报
|
39
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
平面书法字手写
金色颗粒质地的平面
空的平台平面和自然景观
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
水蜜桃和李子的平面水果图案
倒计时,海报,平面
城市园林平面布局航拍
平面风格黄绿色系花朵装饰
金色颗粒质地的平面
平面花卉图案扁平简约无缝拼接插画
古风平面仕女与瓷器
“知识宅急送”外卖,快递,平面,海报,素材,教育
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
金色颗粒质地的平面
玄关入门地毯印花图案红地毯
海底世界插画
平面男孩喝咖啡插画设计
金色颗粒质地的平面
平面插画设计女孩喝咖啡
平面设计 吊牌设计
平面插画情侣/矢量
牛奶乳液层次梯田平铺平面
金色颗粒质地的平面
金色颗粒质地的平面
中国传统纹样创新图案设计
你可能喜欢
相关收藏夹
大家都在看
登录注册