页面上元素对齐的问题

On February 9, 2010, in 2.设计, by 邓熔

页面上各个元素的对齐,能使页面显得更加规整。以下图为例,能对齐的元素都对齐了,看起来很规整。

1

但这也导致了一个问题:阅读线路不清晰——究竟是“Z”型线,还是“N”型线?

像这种过度追求对齐而影响了信息架构的情况,在我们工作中不算少见,我个人不太赞同这种做法。
我比较倾向于适当打破一点对齐关系,但可以使阅读线路更清晰的做法,如下图。

2

看看Yahoo的首页:
yahoo1
当然,也可以通过设计的处理,比如调整颜色,或者增加中间的间距,来解决这个问题,比如下图。

3

4

但这些处理方式都不如打破对齐来得直接、简洁。

毕竟,视觉设计是为信息架构服务的,而不能反过来。

Tagged with:  

IA设计实例:一个简单图表

On February 8, 2010, in 2.设计, by 邓熔

IA设计几乎是无处不在的,下面以一个PPT中用到的图表为例。(数据非真实数据)

下面这个图表,细看起来也能看得明白,表达得还算清楚,但似乎总有一点不太上道的感觉。实际上就是IA上有些小问题,做一些调整就可以更好。

e4bfaee694b9e5898d1

调整如下:

  1. 2009年的数据在2010年的数据之上,有悖常理。也因为这一点,不得不箭头向下,虽然数据是增长的,但箭头向下容易让人有负面直觉。如果把09年数据和10年的位置互换一下,箭头也转过来,一举两得。
  2. 上面条状图中,1月、2月、3月的说明放在条状图下方,导致夹在两个条状图中间了,有点隔断。把它们放到条状图上面会好一些。
  3. 还需要降低一些视噪,让重点更加突出一些。比如调小辅助性的文字的字号,比如调细条状图和箭头的边框。
  4. 把图表的标题修改为一个结论性的,以总结图表表达的观点。
  5. 另外,还有一个视觉设计上的调整:用进度条来表示每个月的完成情况,是一个好的想法,但进度条做得还不够好,稍作调整比如给外框留出一点内间隙,就会好很多。
  6. 最后,英文统一一个英文字体,中文统一一个中文字体。

完成上述调整之后,得到下图,比调整之前好了很多。

e4bfaee694b9e5908e2

Tagged with:  

最应该规范设计的元素——链接

On October 22, 2009, in 2.设计, by 邓熔

链接是最应该尽快规范设计的元素,因为点击链接是互联网使用者最频繁的动作。

我们花了很多精力在对链接本身的展示上,比如现有的四个状态:常态、访问过、鼠标悬停、鼠标点击。但对于点击之后的结果,却缺乏“暗示”。

所谓点击之后的结果,最常见的有三种:在新窗口(或新标签)打开新页面、在当前窗口打开新页面、Popup提示信息框。

其实,从视觉设计上把点击之后的结果“暗示”一下,比链接本身的展示还要重要。

不要以为网民都像你一样,知道用快捷键点击就能在新窗口打开,国内60%以上的网民还在用着IE6呢。即便是国外,我相信不知道快捷键的情况也很普遍。

我建议的方案如下:

links

出于简洁页面,很多网站把链接的下划线去掉了。这和上面的设计也不矛盾,可以在常态的时候不带下划线,但是在鼠标悬停的时候带上。

Tagged with:  

设计三要素:信、达、雅

On October 13, 2009, in 1. 互联网, by 邓熔

原研哉在《设计中的设计》中归纳了设计的三要素:清晰、独创、幽默。我觉得归纳得不是很好,从他的文字中看来,他对这个归纳也显得信心不够。

其实设计的本质还是信息的表达,其中关键的三要素最应该套用严复老先生的“信达雅”三字真言。

  • 信:把信息表达正确,杜绝二义性;(特殊场景设计例外)
  • 达:把信息表达通顺流畅,主次分明,重点突出;
  • 雅:把信息表达得打动人心。

原研哉把“信”、“达”都放到了一起,叫“清晰”;把“雅”拆开为“独创”和“幽默”。看起来他很关注“雅”的部分,这是因为他个人已经进入高水准设计领域。

但就普罗大众而言,我认为更应该关注的是“信”和“达”。把信和达做好了,就可以说是一个好的设计作品,如果还做到了雅,我们可以说这是一个好的艺术品。这也是谷歌的产品和苹果产品的区别。

所以说,设计是一门艺术,但它首先是一门科学。

Tagged with:  

简洁和优雅

On December 27, 2008, in 2.设计, by 邓熔

前段时间,奥美来我们公司做提案。

提了一个很傻逼的创意——在进入首页之前,先给用户看一个很时尚的设计感十足的启动页面,然后让用户点一个“进入”按钮,启动页面以一种拉开舞台幕布的感觉从中间缓缓打开,首页华丽登场!

奥美不是没有能人,千鸟就在奥美。不过,根据我上篇文章讲到的“没有瓷器活,别揽金刚钻”的原理,奥美应付我们这种案子,派来的当然是见习医生了。

Jakob Nielson在《网站优化》一书中专门提到了这种启动页面的傻逼设计,并委婉地称为“设计过度”。这里我就不做过多的引用和批判了。

我认为最理想的设计应该是简洁而且优雅的,其次是简洁但不优雅,再次是优雅但不简洁,最次是既不优雅也不简洁。

简洁是科学(参考《简单法则》),优雅是艺术。科学不需要天分,可以通过学习掌握,但艺术离不开天分。

如果这样说太抽象,不好理解,我们可以来点具体的——

iPhone/iPod代表的就是简洁优雅,Gmail/iGoogle代表的是简洁但不优雅,奥美的傻逼提案是优雅但不简洁,波导手机(还记得这个手机中的战斗机吗)是既不优雅也不简洁。

优雅的尺度很难把握,稍有不慎,就会影响易用性。
苹果玩优雅,是因为艺高人胆大,你我如果要效颦苹果玩优雅,那就是无知者无畏了。

Tagged with: