为什么你应该把按钮左移三个像素

为什么你应该把按钮左移三个像素

本文链接: http://yukun.im/news/452
原文:Why you should move that button 3px to the left

3px

每次当产品即将发布的时候,我就变成了完美主义者,每个元素的错位或蹩脚的交互都让我芒刺在背。 每次都会有十几个细节实现上的小错误,它们就像在嘲讽我,觉得一切都不对劲。

但对于团队中的其他人来说,我们的产品很好啊,功能正常啊。 他们会问“把这个按钮向左移动三像素,真的能改善我们的产品吗?”然后接着说 “上次我们修复一个很小的设计问题后,没有感觉到有什么区别啊” ,然后团队就扭头转向下一个“big idea”和下一组新功能了。

如果你和我一样是个较真的人,遇到这样的情况,你也会感到很挫败。作为设计师,我们要为用户体验的整体质量负责, 但是我们能设计出来漂亮、复杂、愉悦的细节,却拿团队其他人没有办法,我们没法儿控制队友制作、测试、发布的过程。

到底应该怎样说服我们的工程师和产品同行同样关注设计的整体细节呢,纠结了很长时间后,以下是我的几点体会:

不是为了设计而设计

设计师能发现“可用”和“愉悦”的差距,这就是我们迷恋小细节的原因(littlebigdetails.com)。完善设计和实现功能的比重也需要做一些权衡,因为深究细节意味着一般要花更多的时间。

仅仅说“这样更好看吧”还不够,设计师需要给出更充分的理由,为什么要花时间在一些细节上。

注重细节会增加信任度

用户会根据视觉设计、文案、交互等判断一个网站的可信度。如果信任对你的网站很重要, 那么细节也很重要。大家不妨看一些有关细节与信任的论文,斯坦福大学甚至还有一个 Web Crediblity的项目

Mint、Square和 Simple 在细节方面做的很出色,赢得了客户的信任。 刚开始的时候,客户在使用这些网站上那些未经验证的服务时,就愿意在网站上保存财务细节、处理付款、保障账户安全等。

注重细节会增加可用性

MailChimp 的 logo 每次都会让我微微笑;细节很少的 Google 主页让我感觉平和; 像素级完美的平滑的苹果界面令人心情愉快,所以他们注重细节的结果让用户产生了积极的情绪,为什么会这样呢?

大脑有一种奇妙的机制,我们的头脑与精神状态联系很紧密, 沮丧或者愉悦的情绪会改变我们看问题的方法。比如,我心情不好的时候,当点击一个按钮没有响应, 我就一直狂点这个按钮,虽然我也知道没什么用。

我心情好的时候,使用什么界面都像玩一样,整个世界就顺眼,没有什么让我烦恼生气。 当我有困惑的时候,我就会尝试去找其他的途径。有一本书叫《情感化设计》, 主要内容就是说注重细节会创造积极的情绪,从而增加产品的可用性。

批量处理

如果你的产品有很多细节要修改,只修复其中一两个不会有明显的变化,就像只填一个坑不可能把一条崎岖的路填平。

如果你的团队有一个 bug 修复日,用 Excel 或者 bug tracker 把产品上所有 UI 问题攒起来,到修复日那天,所有人按照这个列表依次修复 bug,这样做可能并不会解决所有的问题,但是过后, 所有人都会明显感觉到界面的变化,另外这样做也有助于让团队意识到平时不注意的细节问题的重要性。

边制作边打磨

有一次我把事情搞砸了。一开始很顺利很好,我做出了设计,工程师也满意这个设计, 但是看到他做出来的产品,我只能说,是个很草率很马虎的版本。

我向他指出所有的错误,不断的抱怨,最后两个人都很不高兴。更糟糕的是从那以后他做完产品再也不问我的意见了, 可想而知产品质量更不如意,我变得更恼火,陷入死循环了。

后来我才意识到,一个功能在工程师眼里已经完成90%的时候,在设计师眼里才完成10%的时候。 现在我的态度变得友好了,会这样说:“功能已经都完成了,现在我们只需要再做一点点界面上的修改就更完美了。

我也尝试过在工程师提交一个功能的代码之前,先一起把一些细节过一遍。

避免定制化的冰山

在 Photoshop 中设计一个按钮很容易,但这只是冰山一角,要实现这个样式要花比你想象的多的多的功夫。 点击状态和不可用状态、避免双击后选中文字、从右到左布局支持、测试可用性等等等等。


以上是我这些年总结的一些技巧。我注意到很多团队对待细节设计有很大不同, 一些团队很迷恋细节设计,愿意在上面花大量时间,但也有一些团队更愿意快速做出差不多的产品。

我对建立产品质量规范很感兴趣。你怎样推动团队建立设计细节的文化,你试过哪些方法有用, 哪些方法不起作用?