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

用户头像
杭州/设计爱好者/4年前/1608浏览
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
你可能喜欢
相关收藏夹
大家都在看
登录注册