Web设计师应遵循的高效设计原则之亲密性

  “亲密性”是“Web设计者应遵循的高效设计原则”中的最后一个。引导用户顺利浏览网站,合理使用空白间隔,把相似的内容放在一起,提供清晰的结构是“亲密性”设计标准的所有内容。

  间隔与关联


  图1Web设计的亲密性,即把相似或相关的元素组织在一起,对不相关或不相似的元素进行分离。

  当元素之间发生重叠或接触,那最上层的元素就会获得主要的注意力。观看图1,你是否首先注意到“Proximity”这一部分?你的眼睛首先会被紫色部分吸引,之后向上移动从左扫描其它部分吗?如果附近的其它元素与之形成鲜明对比,那么重叠的元素就会立刻“黯然失色”。同样,多个元素紧密地靠拢在一起,有鲜明对比的元素就会凸显出来。在亲密和对比之间取得平衡,甚至调整这两个原则可以获得不同的结果。看图2,你的眼睛首先会被哪一部分吸引。你会首先注意到“Repetition”这部分吗?


  图2相对于与其相近的元素,每个元素都有一个“重力极”(gravitational pole),一个元素与另一个元素的亲密程度也会影响到它的权重。正如地球的引力可以影响月球的运转轨迹一样,页面中的元素相对彼此的位置会影响到它及其他元素的权重。

  空白区域

  另一个“亲密性”元素即Web页面中空白区域。利用“外边距”(margin)来分隔每个元素,内边距用来平衡内容与空白区域。一般来讲,太多的留白,会使网页看起来不正规,给人一种缺少内容的感觉。当然,如果你的设计要求具有艺术效果,突出开放空间,以达到吸引人的目的,那就这样去做吧。

  亲密性与排版

  上文讨论了太多空白区域所带来的消极影响,但内容过于紧密同样会使网页看起来杂乱而拥挤。一般来讲,恰当的空白区域更具有吸引力,更让人舒服。下面两个案例展示了空白区域的两个极端,图3中的空白区域太多,而图4中的空白区域太少。


  图3


  图4

  直观的内容流会在空白区域与排版元素(由文本内容组成)之间达成一种平衡。图5是一个IT课程列表,我们试着对该列表进行调整,使它更适宜阅读。


  图5

  现在,看看图6中所展示的相同内容的列表。每个逻辑组之间通过合适的空白进行分隔,每个组都由大标题及无序的列表项组成。


  图6

  第二个列表将内容划分为几部分,每个子部分包括相应的课程列表;每组课程列表与相关的子部分的标题有亲密关系。

  利用间隔、排顺、大小、关联、颜色及空白区域和排版元素的划分,“亲密性”设计原则可以我们帮助组织页面中的内容元素。

  原文链接:Effective design principles for web designers:Proximity

  编译链接:CSDN

时间: 2024-08-31 18:27:38

Web设计师应遵循的高效设计原则之亲密性的相关文章

Web设计师应遵循的高效设计原则之二:重复

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 摘要:<写给大家看的设计书>一书把复杂的设计原理凝炼为对比.重复.对齐和亲密性四大设计原则.本系列文章将分别详细阐述四个设计原则中的重点因素及辅助工具.本文为第二篇,讲述重复在网站设计中的重要作用. 主要针对酒店行业和联邦政府进行Web开发的Ryan Boudreaux针对四大设计原则写了一系列文章,本文为第二篇<Effec

Web设计师应遵循的高效设计原则之三:对齐

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 摘要:<写给大家看的设计书>一书把复杂的设计原理凝炼为对比.重复.对齐和亲密性四大设计原则.本系列文章将分别详细阐述四个设计原则中的重点因素及辅助工具.本文为第三篇,讲述对齐在网站设计中的重要作用及辅助工具. 主要针对酒店行业和联邦政府进行Web开发的Ryan Boudreaux针对四大设计原则写了一系列文章,本文为第三篇<

Web设计师应遵循的高效设计原则

主要针对酒店行业和联邦政府进行Web开发的Ryan Boudreaux针对四大设计原则写了一系列文章,本文为第一篇<Effective design principles for web designers: Contrast>的译文,内容如下: 如果你接受过设计方面的正规课程,你可能已经了解了高效设计原则,它包括四个著名的标准概念:对比(Contrast).重复(Repetition).对齐(Alignment)和亲密性(Proximity).很多人简称为PARC或CRAP.这四个设计原则是

Web设计师应遵循的高效设计原则之一:对比

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 主要针对酒店行业和联邦政府进行Web开发的Ryan Boudreaux针对四大设计原则写了一系列文章,本文为第一篇<Effective design principles for web designers: Contrast>的译文,内容如下: 如果你接受过设计方面的正规课程,你可能已经了解了高效设计原则,它包括四个著名的标准概

Google移动网站设计原则白皮书:应该遵循 25 个设计原则

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 Google 刚刚发布了由 Google 与 AnswerLab 联合打造,名为<Principles of Mobile Site Design: Delight Users and Drive Conversions>的移动网站设计原则白皮书.白皮书提到,为了愉悦用户和推动转化率,移动网站设计应该遵循 25 个设计原则. 这

Web设计师的路:自学网页设计的有用资源

文章简介:Web设计师的路是充满挑战性的路.有很多技术需要学习,而且有很多知识可以用来稍微减轻路途上的负担.最流行的学习媒介是书籍,但是随着网络的发展,如今学习网页设计原理比以前任何时候都更容易. Web设计师的路是充满挑战性的路.有很多技术需要学习,而且有很多知识可以用来稍微减轻路途上的负担.最流行的学习媒介是书籍,但是随着网络的发展,如今学习网页设计原理比以前任何时候都更容易.我希望向对扩展自己设计方面的知识有兴趣的人介绍一些有用的资源.内容涉及从网页表单,教程,以及发表博客等到你可以想到的

【心得】Web设计师应参考的技术

导读:作者Paul是一位资深的Web设计师,他写了一篇文章<Stop obsessing over HTML5 and CSS3>. 文中他强调,作为Web设计师应该多多关注其他方面的业务,不能一味的追寻HTML5和CSS3.要开拓自己的视野,才能使自己更上一层楼.以下是文章摘要: 作为Web设计师,我们都不约而同的痴迷于HTML5和CSS3,我们需要学习HTML5和CSS3有关技术.博客里有很多关于这方面的教程.评论.讲解.但是,自己究竟学到了多少实用的技术? 我们似乎花了大量的时间在阅读关

开发J2EE应用应遵循的几点原则

j2ee J2EE,作为开发mission-critical的企业级应用的一整套规范的整合平台,规范多.内容广,从而给开发J2EE应用带来了很多"麻烦".比如,为实现内容的RDBMS存储,我们可能的方法有JDBC.Entity Beans.JDO.O/R Mapping工具(TopLink.Hibernate).XML-DBMS.JAXB等方法(其中一些方法不是J2EE规范所包含的).因此,为实现J2EE各层(至少有表示层.控制层.商业逻辑层等3层)以及层与层之间的耦合,J2EE系统架

J2EE应用应遵循的几点原则

  J2EE,作为开发mission-critical的企业级应用的一整套规范的整合平台,规范多.内容广,从而给开发J2EE应用带来了很多"麻烦".比如,为实现内容的RDBMS存储,我们可能的方法有JDBC.Entity Beans.JDO.O/R Mapping工具(TopLink.Hibernate).xm l-DBMS.JAXB等方法(其中一些方法不是J2EE规范所包含的).因此,为实现J2EE各层(至少有表示层.控制层.商业逻辑层等3层)以及层与层之间的耦合,J2EE系统架构师