您的位置: 首页 > 艺术设计 > 设计理论 > 高品质的网页设计:实例与技巧
QQ旋风2设计历程 回到列表 亚足联新Logo的设计过程
 高品质的网页设计:实例与技巧

作者:笨活儿 时间: 2009-05-25 文档类型:翻译 来自:笨活儿

第 1 页 高品质的网页设计:实例与技巧 [1]
第 2 页 高品质的网页设计:实例与技巧 [2]
第 3 页 高品质的网页设计:实例与技巧 [3]
第 4 页 高品质的网页设计:实例与技巧 [4]
第 5 页 高品质的网页设计:实例与技巧 [5]
第 6 页 高品质的网页设计:实例与技巧 [6]
第 7 页 高品质的网页设计:实例与技巧 [7]
第 8 页 高品质的网页设计:实例与技巧 [8]
第 9 页 高品质的网页设计:实例与技巧 [9]

04. 元素的组织

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

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

靠设计做买卖: 37Signals

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

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

37signals

为内容(Blog)而设计: Well Medicated

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

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

wellmedicated

组织内容小贴士

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

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

出处:笨活儿
责任编辑:bluehearts

上一页 高品质的网页设计:实例与技巧 [4] 下一页 高品质的网页设计:实例与技巧 [6]

相关文章 更多相关链接
五个为设计添加光影效果的简单技巧
设计良好网页的4项原则
用Photoshop设计一个博客界面
抠图合成创意实例
网站设计趋势:立体盒子
作者文章
五个为设计添加光影效果的简单技巧
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
国外创意名片设计欣赏
情感化界面
线下项目工作流程(归纳篇)
线下项目工作流程(分析篇)
简约而不简单-Practise平面设计
培养用户的使用习惯
优秀名片设计
专题头图的秘密武器
别让UED忽悠你(2):多少钱一斤
别让UED忽悠你(1):天生的矛盾
>> 分页 首页 前页 后页 尾页 页次:5/91个记录/页 转到 页 共9个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2