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

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

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

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

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

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

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

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

64

查看详情

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

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

 以上就是高品质的网页设计与技巧之四（元素的组织）的内容，更多相关内容请关注PHP中文网（www.php.cn）！