PS设计教程网欢迎你!

网页设计的层次感如何体现(2)

文章来源于 Ucdchina,感谢作者 佚名 给我们带来经精彩的文章!
设计教程/前端设计/前端设计2010-10-25
2、颜色 颜色是一个很有意思的工具,他可以在组织上和个性两方面起到作用。醒目、对比强烈的颜色在特殊的元素中将会引起更大的关注(例如按钮、错误信息或者超链接)。当作为一个体现个性的工具时,颜色可以延伸到体

2、颜色

颜色是一个很有意思的工具,他可以在组织上和个性两方面起到作用。醒目、对比强烈的颜色在特殊的元素中将会引起更大的关注(例如按钮、错误信息或者超链接)。当作为一个体现个性的工具时,颜色可以延伸到体现更精练的层次感上;用到豪华、舒适的颜色将给页面带来感情上的吸引力。颜色可以影响网页的每一个角落,从商标到形象。色彩应用在视觉层次设计中可以做到信息分类的效果,就像下面的例子:

网页设计的层次感如何体现

3、对比

对比体现出相对的重要性。字体大小上戏剧性的变化将传递出某个消息的重要性或者需要某些特别关注。从较亮的背景转换到一个较暗的背景将较快的区分核心内容与页脚内容。

网页设计的层次感如何体现

4、对齐

对齐体现出元素们的组织。甚至可以简单到仅仅用“主栏”和“侧栏”区分。但对齐也能够在视觉层次上起到更多更复杂的作用。考虑,举个例子,放在页面左上角的内容的力量。因为用户多半将那个地方的信息与简介、账号、购物车等等相联系。放在那个地方的东西被赋予了某种“官方”性。对齐如果用特定的方式也会激起用户的兴趣,例如下面的例子:

网页设计的层次感如何体现

网页设计的层次感如何体现

5、反复

重复体现了元素之间的关联性;如果所有段落的文字都是灰色的,当一个用户看到一块新的灰色文字时,他也许认为这是其中的另一段;当同一个用户遇到一个蓝色的链接或者一个黑色的标题时,他可以放心的将它理解成段落以外的东西。

网页设计的层次感如何体现

6、亲密性

亲密性将元素彼此分开并且创建下级的层次。在一个页面中可能会看到很多被空白分隔开的小部件;在这些部件中又会有新的层次,标题、副标题和内容。亲密性是最快的方式将关系紧密的内容组织起来。在下面的例子中,很容易通过亲密性将主要内容与其他内容区分开来。

网页设计的层次感如何体现

7、紧密与留白

密集的元素给人一种“重”和杂乱的感觉;元素之间距离太大,他们将会失去彼此之间的联系。当一个网页被设计的恰到好处时,眼睛将会准确的将各个元素组织好。

网页设计的层次感如何体现

进入论坛交作业:http://www.missyuan.com/viewthread.php?tid=485053

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa