隐形设计

最近在读原研哉《设计中的设计》。以前读过的书都会争论一个问题,设计究竟该归于艺术还是科学,这本书却完全没有提及

因为,它两者都不属于

设计就是生活,优秀的设计,最不易被察觉,是隐形的

wordpress博客主题我已经做过不下五款了。由于是个人博客可以随意折腾,从布局版式到评论表单,都极尽所能地天马行空。只是这样的花哨设计,让我极少思考设计在这其中所发挥的作用,以及它的本质是什么

恰好最近在负责公司UED团队blog的设计,商业化的东西不能太异想天开,需要规矩一点。这么一来,如何在大众化的博客布局上出彩?这才令人想起要回归设计的本质。在设计评论表单的时候,这个毫无新意的元素反倒费了我不少功夫……

一个标准的wordpress评论表单,用户名、邮箱、网站链接、评论正文、提交按钮,没了。而且还要符合博客本身干净简洁的设计风格,这能出什么花样?

想起书中提到深泽直人的伞筒设计,伞筒的本质是什么?一个可以整齐排列雨伞的容器。他的设计却完全异于传统意义上的伞筒,严格来说那根本就不是一个容器,仅仅是离墙根有点距离的一条地面沟槽。人们却会不自觉地将伞尖放进沟槽中,把伞依靠在墙边,整齐列成一排。于是,伞筒的功能实现了

回归本质……那输入框的本质是什么呢?是用户填写信息的地方。为了让用户了解他应该填写什么,都会有提示文本。通常的做法,是把提示文本写在输入框的一侧。用户会看一眼旁边的提示文本,再把视线移回输入框,开始填写信息。为何不让用户只看一个地方就好呢?于是我把提示文本移进了框中

输入框获得焦点时,提示文本便隐藏起来,当前输入框亮起蓝色发光边框

用户会有各种各样的行事风格。理想中的用户,在输入之前会阅读框中的提示文本。与此相对应,一定存在看都不看就直接输入信息的用户。但他发现点击了输入框之后,提示文本没有了,又忽然记不起该输入什么。对于这部分用户,真的需要把提示文本写在旁边,或者在他输入第一个文字之后再隐藏提示文本(但我个人不喜欢光标与提示文本重叠,看着眼花)。既然两者不可兼得,请允许我擅自决定,把这个细节作为对那些粗心用户的小小惩罚

可以发现,提示文本的字色与用户自己输入的字色不同,两者的色值分别是#aaa与#444。用户只需要填过其中一个输入框,就会发现颜色上的区别,从而条件反射地将颜色与输入框内容状态联系起来

想象一下,如果颜色不加以区分,视力不怎么好的用户,也许会忘记自己填过哪些,或者仅仅是想确认一下。于是他们接下来的动作很可能是凑近显示屏,阅读文本内容来判断哪些输入框已经填过,这绝对令人沮丧

若用户把填写好的内容删除,相应输入框的提示文字又会出现,并且变为之前的灰色。这个细节告诉用户,此处的内容刚刚被你删除了,现在输入框又恢复到待填的状态

最后我自己体验了一遍。从灰色的提示文本,到框中填满黑色的用户信息,这整个过程比较自然,没有什么吸引或分散我注意力的事情

设计完成后不禁捏了把汗,一个小小的评论表单竟也有如此多名堂。而我之前的作品,究竟遗漏了多少东西?那些对用户发表演讲般的设计,完全没有与人交流的诚意,如果用户仍然感觉到了设计的存在,就一定还有可以改进的余地