首页 > 程序开发 > web前端 > HTML/CSS >

高品质的网页设计与技巧之四(元素的组织)

2011-12-04

设计师这一职业对很多人都有吸引力,因为那些制造创意的过程,实在是十分有趣。我知道组织内容的过程就没有那么有趣了,不过一旦你养成了组织内容的好习惯,你就会发现其实它也没有想象中那么枯燥。组织内容的方...

设计师这一职业对很多人都有吸引力,因为那些制造创意的过程,实在是十分有趣。我知道组织内容的过程就没有那么有趣了,不过一旦你养成了组织内容的好习惯,你就会发现其实它也没有想象中那么枯燥。组织内容的方式总是需要看情况而定,比如说,这站点是什么类型?某项特定内容在页面上的重要性如何?

如何放置内容,以及放到哪里,可能的排列组合实在太多了。不过还是有一些技巧可循的。最基础的就是,先决定你的设计需要达到的效果。例如,你是在做卖东西的网站吗?是要做内容展示吗?或者是在做一个用户注册页?推广页面?等等……

靠设计做买卖: 37Signals
看看这个广受欢迎的 37 signals 的网站。他们的东西能卖这么好,可不是靠的运气。他们的网站让你尽可能容易地了解了他们的产品, 帮你做出最终决定。你所看见的东西都被精妙地设计而呈现。

如图中所示,他们提供了四大理由让你购买他们的产品。吸引注意力(Attention)是第一步,他们做了一个黑色区块,放上关于产品的简单介绍,并且使用了粗大的标题。 接着,他们通过一些漂亮的插画把你的兴趣(Interest)吸引到对产品优点的介绍上。再然后,他们想要让你产生购买需求(Desire),这能通过放置客户评论引言和产品获奖证书来实现。在这一实例中,他们是通过几个“What our Customers have to say”(我们的客户如是说)的视频来实现的。最后要实现的即促成购买行动(Action); 37Signals 的网站上有大量行动点(action points,即引导用户进行下一步操作的链接)贯穿于整个页面,由于页面很长,页面底部还放置了更多的行动点。

\

为内容(Blog)而设计: Well Medicated
设计博客页面时的情况则大不一样了。你不用花力气劝说你的用户信任你的产品,你的“产品”已经展示在他们面前—— 也就是你的博客内容。你要做的就是确保用户能轻松阅读你的文章,探索内容,与你和你的博客产生联系。

内容(Content) 应该是博客中出现在读者眼前的首要部分(之一)。在下面的例子中,一个粉红色粗体字的标题,很好地吸引了你的注意力,引导你直接关注文章内容。左侧放了张大小合适的预览图,右边则是两三段文章摘要,和一个“继续阅读”的链接。当然,也有标准的日期和作者信息。这简直就是我心目“内容设计”的完美实例。注意力(Attention) 可以被引导到任何有趣的事物上。在这个例子中,漂亮的RSS订阅按钮成为了焦点。且不说这个焦点让读者产生了与内容的联系感,它还能帮助网站获得更多的订阅量。鼓励你的读者探索你的内容相当简单,只需在边栏上加一些最新文章或最受欢迎文章的链接列表,或者制作一个下拉菜单,或者组织一个其他你想要推送的内容的高效列表。做起来很简单,效果却足够有效,尤其是对博客来说。博客是一个私人领地,通过不同的途径告诉读者你的联系方式(Connect) ,能帮助他们了解你,也说不定会带来意外的好处。

\

组织内容小贴士
你当然可能会遇到需要打破常规,选用非同寻常方式的时候,不过你还是可以遵循这些简单技巧,以保证内容结构和阅读顺序的良好。

你为何而设计?
如前所述,确定设计的目标。
利用网格
网格帮助你发挥页面的最大潜能。
测试元素位置
以访问者的角度考察内容的易用性。
移除所有不必要元素
不必要的东西都应该被消灭,或者至少不要放到显眼的地方
注意力的均衡
有些东西需要被简单化,好让另外的事物闪耀光辉


作者 lixinstudio
相关文章
最新文章
热点推荐