/3天做了个UI像素眼测试，没几人能上8分
最新文章2023-08-25

3天做了个UI像素眼测试，没几人能上8分

UI 设计比一般的平面设计更讲究精准细致，毕竟其它包装、海报这之类的设计，用户一般也就看上几眼，而 UI 界面要被成千上万的用户长期盯着，任何细节问题都可能被发现。
我们平时画 UI 设计图都是一个像素一个像素地扣，没点细节控真的做不来。
设计稿画出来，就是为了前端能照着做出一样的效果，但是前端眼中的「准确」与设计师眼中的「准确」有着天差地别！
所以 UI 走查就不可避免地成了设计师的日常工作之一。
但是工作中发现，很多我自己一眼就能看出的问题，前端怎么也看不出来。
有时非得要把辅助线画出来，或者把前端截图和设计稿重叠对比，才能证明问题的存在，简直要逼死强迫症。
于是我开始思考，一眼看出 UI 对齐和间距上的问题，可能并不是一件容易的事情。
对一般人来说，5 个像素以内的差异可能根本看不出来，经常画 UI 的设计师能够识别出 2-3 个像素的差异，但要识别到 1-2 个像素的差异，就很不容易了。
但是每个人对 UI 像素的敏感度不一样，怎么才能识别出差异呢？
于是我就趁春节假期，做了一个 UI 像素眼的小测试。
从出题、设计到开发都是我一个人做的，前前后后大约花了 3 天时间吧。
看起来简单的一个小网页，一个人全栈做起来还是挺麻烦的，记录页码和分数要用到 Cookie、记录数据要用到 MySQL…
其中最大的问题是，最开始做的一个版本难度太高了，发给非设计师做普遍都是 50% 的正确率（只有两个选项，瞎猜都是这个概率），给设计师做也很难达到 8 分以上……


于是稍微降低难度了一下。

然后里面有一些 UX 设计师发现了一些体验优化点。
例如一开始不能点图选择，必须点击按钮（底部的「上图」和「下图」）进行选择，导致有个人第一轮完全理解错误。



于是我干脆去掉按钮，写清楚点击图片进行选择。


其实之前那么设计，主要是为了降低开发成本而想要复用页面结构……

还有人说，虽然选择后会立即在正确的选项上展示出辅助线来暗示结果，但还是不确定答对没有。




于是我在原有结构不变的基础上，增加了两种结果反馈。


之前没有提供足够的反馈，是觉得出现辅助线后已经可以看出哪个是正确选项了，但没有考虑到这样的展示并不够直观。


总之，在较低开发成本的前提下，尽可能地优化了手机端的体验。


总共十道二元选择题，涵盖了各种不对齐和不等距的情况，用不了多久就可以完成，欢迎尝试一下～


除了上面的海报之外，点击文字底部阅读原文，也可以进入。


如果你想查看所有人的数据统计，可以点击本页顶部的 体验进阶 >，在公众号主页回复UI像素眼。



想要学习或者练习交互，但又缺少机会和动力的朋友，可以了解一下「体验设计学习社」。


无限制作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：



如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：







本文来自微信公众号“体验进阶”（ID：Advanced_UX）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章