同样是拼UI组件模板，为何效果相差那么大？

5月 12, 2023 发表于: 交互设计. 评论

Sponsor

前言：随着设计门槛的不断降低，咱们对设计方案的要求反而要不断提升，才能跟上时代的脚步。现在有了优秀的UI组件，但不表示设计师就能直接拿来用，而不加思考，今天我们就来看看不同设计师，拼出来的模板是有什么区别吧！

有人说，现在工具那么发达，做设计跟拼组件差不多了。

但是事实如此吗？

美图秀秀没有让修图师的工作量下降，剪映没有让剪辑师工作量下降，Midjourney更不会让原画师更轻松。

相反，随着效率的提升，标准在不断被拉高——原本的正常标准变成了现在的及格线，原本的高难度变成了现在的普通水平。

这就好比所有人都穿上高跟鞋后，高矮排名并不会因此而改变。设计组件，也是如此。当画图变简单时，那么我们对其它地方的要求就会变高——例如，设计思路、对业务的理解、用户体验……

也就是说，随着设计门槛的不断降低，咱们对设计方案的要求反而要不断提升，才能跟上时代的脚步。

这里有一位B端设计师做的方案，明显是用 Ant Design 组件“拼”出来的。

但看起来，是不是有点儿“落后于时代”的感觉？

问题非常多，我随便罗列几个明显的：

• 状态信息没有状态样式
• 备注很长不适合展示在表格上
• 撤回申请这种负面操作放在中间不合理
• 全是重复的虚假信息，难以理解评判方案

这个方案既然是“拼”出来的，画起来不费事，那么就必须通过其它方面来体现设计能力了，否则如何在海量作品集里脱颖而出呢？

接下来我就以这个方案为例，一步一步给大家演示一下改进方法。

1.信息调整

了解业务后发现，备注的字数普遍在几十到上百字之间，也就是说用表格展示这么2小根本没意义，还不如收起来点击查看。

这样操作就有点多了，可以去掉一个查看详情，点击整行查看即可。

进一步了解业务后发现，收件地址是对方公司，不会频繁变动，所以也没必要用两行这么长。

并且收件人的变动频率可能比收件地址高，那么可以两个合并展示。

分析用户场景发现，申请不会很频繁，没必要把时间也展示出来：

再仔细看一下操作，操作和申请状态的对应关系不准确。已寄出后应该不能再撤回，而且应该支付完成后才会寄出。所以操作也要根据状态进行调整。

最后金额加上逗号分隔符，订单编号也改成一行，方案变成了这样：

2.顺序调整

仔细从用户场景去看这些数据，会发现顺序不合理。

首先，申请状态的重要性应该很高，应该放到订单编号右侧。

金额和时间这种纯数字的，一般右对齐，放在右侧。

所以方案变成了这样：

3.内容填充

想要把设计做好，一定要在真实内容的基础上构思方案。

所以我们把重复的内容换成比较真实的：

是不是很快暴露出数字宽窄不齐的问题了？这个我们下面就解决。

4. 样式优化

表格的数字编号这些，一定要确保字体宽度是一样的，否则不方便对比查看。

例如原本用的苹方字体，明显参差不齐，改成思源黑体后就对齐了：

申请状态只用纯文字展示，肯定是不清晰的，加上表示样式的圆点后好多了：

把收货地址放到括号里，可以表意，但占地方而且不美观，也可以改一下。

撤回这种负面操作，默认每行一个不太好看。改成悬停展示并标红，看起来更整洁而且还增加了警示效果。

现在方案变成了这样：

5.功能增加

申请状态增加筛选功能，申请时间和金额增加排序功能，这些都放在表头上不占地方：

然后订单编号可能经常要复制，所以可以增加一个复制功能，悬停时展示：

现在方案改成了这样：

对比一下

看看改完后有多大差异：

Before

After

不论改之前还是改之后，这个方案都是用 Ant Design “拼组件”完成的，然而效果就差别很大了。

前者好像拼完后没多思考了，就纯粹靠“组件”完成方案。

后者才是真正把组件当成工具，利用对业务和用户场景的理解，来构思方案细节。

可见，组件虽然让设计门槛下降了，但是对设计师的要求反而会上升。

当画UI变得简单，就说明在UX上卷的人变多了。

那么如何才能了解业务和用户呢？了解业务可以靠多和同事沟通，了解用户的话，最常用的方法就是问卷等各种调研手段了。

作者：设计师ZoeYZ

来源：体验进阶（ID：Advanced_UX）

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。