文章来源：转行人的设计笔记，ID：zhrenui

作者：Andrew_臣



可能我们每个设计师都会经历从买家秀到卖家秀的一个阶段。

测试小哥用极限值毁掉你的设计，只需要三秒。

明明视觉稿那么完美无缺，为什么测试极限值时出了那么多问题？
可能我们会觉得测试是故意跟我对着干，或者安慰自己这仅仅是测试值，真实数据怎么可能那么长嘛~~

但是我们并不能忽略极限值的情况，因为产品只要定下了字段的极限长度，极限值的出现只是概率问题。你可以说出现概率低，但你不能否认它的存在~

如果我们不注重极限值的情况，最后线上的真实数据往往会让你辛苦养育出的”孩子“变得畸形古怪，视觉体验的糟糕也将影响着各项商业数据指标。

所以，考虑极限值的情况对于我们设计师来说至关重要！今天，我会结合以往的案例跟你聊聊如何正确处理设计中的极限值情况。

先列个大纲！

从一个失败的案例说起

固定字段与可变字段

确定极限值长度

确定对应策略

确定布局并告知下游

小结

先从一个失败案例说起

这是后台选品页的商品卡片。视觉上看着没什么毛病~

但是，价格字段长度并不是这一种情况。由于我们平台的供应商用户可能拥有不止一个备货地，而且不同备货地的商品价格不一样，所以会存在一个区间价的情况。可能一个玩具从美国发货是20刀，但是从中国发货是30刀。而且这种情况是不可控的，完全取决于供应商自己在后台上传的商品。

当我们将上面的价格改为区间价时，duang~~~

果然塞不下了。

价格折行会严重降低本身的可读性，但业务要求price是必须全部展示的，而MSRP（建议零售价）可以酌情考虑使用省略号。

看着也还是可以接受的对不？

但是，当我尝试用四位数后，发现情况并没有我想象的那么乐观。更坑爹的是，四位数的价格是需要加入千位符的。。。

最后的商品卡片视觉并不像一开始那么“没毛病”，MSRP小数点后的数字全被隐藏，更别提五位数的价格了。当时的内心是崩溃的。

更加晴天霹雳的是，前端表示这种根据价格位数由左往右递进字段宽度的情况无法实现。只能price和msrp左右均分~~

这是个让我印象深刻的失败案例，同时也让我加深了对于字段极限长度的考虑以及解决办法。

首先，我们先来讲一个简单的知识。

固定字段与可变字段

在设计中，我们可以根据信息长度的固定与否将其分为两类，固定字段和可变字段（这里的字段，你可以理解成一类信息，比如电商中常见的价格字段、库存字段、sku字段等等）。说白了，即一类字段长度固定，另一类字段长度不定。

比如时间字段，它代表了我们内容产生及变更的时刻，即便处于什么时间，它始终维持一个固定的长度，属于固定字段。

但是我们将时间字段替换为一段时间值，比如5分钟前，1小时前，3天前等等，那这个字段就属于可变字段。

如果我们不去考虑这类字段的长度对界面的影响，不去考虑字段所占的合理空间，那上线后的真实数据很可能会让页面变得一团混乱。

那我们该如何应对这些字段？避免极限值出现时对原本布局及用户阅读体验的破坏？

我基于多个项目的反复实践总结出一个简单好用的办法。今天我把它分享出来，但愿能帮到你。

1.确定极限值长度

正所谓知己知彼百战不殆。设计师如果想合理得为字段布局，那就必须主动提前了解我们所有字段的极限长度~

因为你只有清楚它们的极限长度，你才能做到心中有数，并根据当前的布局采取对应的策略。

比如我们商品卡片中常见的商品标题一般极限值会比较多，大概30个字符，而供应商店铺名称大概10个字符，然后价格通常是五位数（当然你得算上后面的两位小数）。

什么？产品文档没给？交互稿没有？那就主动去问呀，别害羞！~ 相信我，主动争取资源可以说是设计师在职场上的一项必备技能了。

2.确定对应策略

既然我们掌握了“敌方”的军情，接下来就是制定策略。

这个策略就是：当一行放不下字段时该采取什么样的方式？

通常来说，在不使用任何组件的情况下，通常对应三种方案。

1.省略号表示

即直接用“...”表示溢出文本，此乃最简单粗暴的一种办法。

这种策略适用于：对于用户认知来说并没有那么关键、重要的信息，即便是展示不全也不会造成负面的影响。

但是出于更全面的考虑，通常需要加入一个hover（鼠标悬浮）显示全部信息的交互。

比如商品列表页的商品卡片，我们限制商品标题只显示一行，超出部分”...“表示。用户如果想看全部的商品标题，可以通过将指针悬浮到信息区域中2s看到所有信息（蓝框框住的部分），这玩意儿专业术语叫”Title“，我们如果想加，只需要跟开发说一下hover显示Title即可。

当然如果你嫌人家丑，可以用antD组件库中的”Tooltip“来代替系统默认的Title，颜值上要高一个档次。

2.折行处理

就是一行我塞不下，那换行继续，还塞不下也可以再折一行。一般来说行数需要我们设计师主动去定死，超出则用省略号表示。否则没有经验的开发童鞋很可能会全部展示，信息一长折个七八行都有可能。。

这种策略适用于：对用户认知来说比较关键、重要的信息，一旦展示不全、或者仅展示一行将会对用户认知造成负面影响。当然，还有一种情况就是需要复制粘贴的场景也需要展示全。

3.改变布局

这大概是我们最抗拒的策略了。。毕竟一开始的布局谁想重新更改呢。但是这也是考量我们设计师解决问题的能力所在。

比如上面的失败案例，我们只能通过将价格改为各自独占一行的展示布局才能解决展示上的问题，即便极限值也是绰绰有余。

但是这也是一柄双刃剑，因为B类买家是要销售给最终客户的，他们非常关心所有原价和建议零售价之间的可赚利润，这样的布局其实并不利于两个价格的直观对比。

3.确定布局告知下游

制定完策略后，就是“进攻”啦！

我们基于之前制定的策略，开始进行合理的布局，给每个字段预留合理的宽度。

不论是只读的字段，还是可编辑的输入框，都可以基于上述的办法进行。

当然，确定布局后并不是万事大吉了，一些看起来不太直观的布局我们还要主动告知开发同学。

比如在栅格布局中，每个字段占据多少列，这些都需要加入遮罩来明确范围~

这是栅格布局后的一个示意，商品名称、店铺名称和sku，我们直接用视觉告知他们定下3行、2行和2行的行数限制，超出即省略。同时把每个部分占据的空间明确用遮罩划出，这样前端在开发时就非常清晰，一目了然。

小结

我们设计师在进行界面设计时一定要提前考虑好字段信息的极限长度，让最终线上的产品能够经得起极限值的考验。

我是AndrewChen，下期见。

如果你觉得对你有所帮助，欢迎点个在看鸭，让我知道这篇文章对你是有价值的，当然这也是我继续下一篇分享的最佳动力~！

本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：转行人的设计笔记！