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

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2019年9月16日07:19:35 评论 271 views 1456字阅读4分51秒

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

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

靠设计做买卖: 37Signals

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

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

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

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

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

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

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

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

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

继续阅读
CSS梅兰商城网页设计项目开发的资源分享 css教程

CSS梅兰商城网页设计项目开发的资源分享

《CSS梅兰商城网页设计项目视频教程》讲述以网页布局定位的基础知识为依托,灵活运用CSS的全部知识和小技巧,带你深入剖析经典网页的制作过程,同时涉及到了CSS样式的初始化、版心控制、精灵图的使用、搜索...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: