主要针对酒店行业和联邦政府进行Web开发的Ryan Boudreaux针对四大设计原则写了一系列文章，本文为第一篇《Effective design principles for web designers: Contrast》的译文，内容如下：
如果你接受过设计方面的正规课程，你可能已经了解了高效设计原则，它包括四个著名的标准概念：对比（Contrast）、重复（Repetition）、对齐（Alignment）和亲密性（Proximity）。很多人简称为PARC或CRAP。这四个设计原则是印刷行业设计的标准知识；实事上，有几本书已被要求作为该科目（包括非设计人员的设计课程）的教科书，比如Robin Williams写的第三版《写给大家看的设计书》（The Non-Designer’s Design Book）。
本文将重点讨论“对比”这一设计原则，它与Web设计中的颜色及如何测试颜色匹配程度有关。
对比
从一个全新的角度来看，当两个或更多相关元素以不同方式显示出来时，就会产生对比，差异越明显，对比也就越明显。把相似的元素放在Web页上，并把它们转化为唯一的实体、部分，或者容器，这是高效对比的关键点所在。打造具有对比性的元素最普遍的方法包括创建元素的不同属性，比如颜色——它似乎已得到最广泛应用。其它的属性包括大小、形状、纹理、方位、位置及运动。但有较大对比度的两个元素不一定会带来具有吸引力的视觉体验。
在网页中，文本和排版元素的颜色值可以很好地体现“对比”。需要测试的前景色就是文本本身，而背景色则是文本之下的任何元素，无论是图片、渐变，抑或RGB颜色。
用颜色完成对比
在Web设计中，好的颜色对比是十分重要的，不仅仅是为了美学价值，还为了Web的可访问性。有些人具有视觉障碍，或是色盲，应确保网站的颜色对比可以相应地调整，以增加响应性和可访问性。所以测试网站的颜色对比是一个很好的选择，下面列出几个工具可以提供页面的亮度对比度。对比度在4.5：1或者更高是比较理想的，符合W3C的WCAG 2.0标准。
颜色对比检测工具
这些工具可以帮助你设计网站，使你的网站有一个合适的前景色与背景色的对比度。某些工具可以检测色差和亮度差的平衡性，并显示出结果，包括亮度差、色差、颜色匹配、比对度，及相应的从AA到AAA等级的WCAG 2值。
Check My Colours工具由自由Web开发者Giovanni Scala提供，它可以用来检测网页中所有DOM元素的前景色与背景色的组合情况。只需要输入待测网站的URL，该工具即可显示出页面中DOM元素是否有充分的对比，以满足有视觉障碍人群的浏览。Check My Colours所有的检测结果均基于W3C所建议的算法。下图展示了某简单网站中DOM元素的检测结果。
Colour Contrast Check由加拿大的Web开发者Jonathan Snook提供，该工具允许你指定一个前景色和背景色，并判断它们是否有足够的对比度，以满足有视觉障碍人的阅读，或适合于在黑白屏上阅读。下图展示了该工具。
Luminosity Colour Contrast Ratio Analyse由Web开发者Gez Lemon提供，通过输入十六进制颜色码，可以计算出前景色与背景色的亮度对比度。如下图。
WebAIM Color Contrast Checker可以调暗或调亮最初的前景色与背景色（十六进制的RGB值），直到它满足AA标准。你可以用这个工具来改变颜色、改变亮度。如下图。
原文链接：Effective design principles for web designers: Contrast
重复
《Web设计师应遵循的高效设计原则之一：对比》一文介绍了设计的四大原则，并重点讨论了四大设计原则之一：对比——尤其是在Web设计中的应用。本文将讨论另一设计原则“重复”。
在网站上，“重复”多以“重复的视觉元素”贯穿于站点的全部页面中。这些元素包括颜色、形状、纹理、字体、排版、图形、图片、视频、空间关系、线条的粗细、页眉、页脚、导航、工具栏等等。按统一方式显示的重复元素可以帮助提升网站的组织性，增强其连贯性。元素也可以渐变的方式来实现重复，在重复的过程中，元素可以越来越大，也可以越来越小，正如左图所示的“Repetition”案例。重复方式的多样性可以避免网站变乏味、变枯燥。
重复对增加网站流量很重要
重复是大自然的一部分。假设某一天你外出花一定时间去研究森林里的树木，你会发现其中有很多相似的物种。在冬天观看一群向南飞的鸟，它们会重复摆出各种不同的类“V”字型的图案。在动物园里，在一群斑马中同样可以发现重复的多样性。比如下图中两匹斑马身上有重复的条纹图案，但每个条纹又各不相同。没有任何变化的重复会使网站变得枯燥、无趣、令人厌烦。
重复也会给你的用户带来一种有组织、一致性的体验。使用重复的Logo，让标题、字体、颜色、大小和样式在网站的所有页面中保持统一，可以增加网站的重复连贯性，同样可以增加网站的流量。具有相同属性的元素，它们的重复使用可以创造一种愉悦的视觉形象，在简单重复的基础上增加稍微的变化，可以吸引访问者的好奇心与注意力。
重复可以创造连贯性，看起来更专业
相似元素的重复，可以带来一致性。比如当你从一个页面浏览到另一个页面，导航部分始终保持在同一位置。这将给访问者带来舒服的感觉，每个页面将提供相似的功能，并提供均衡的在线体验。
每当你走到道路的交叉口，每个交通灯所代表的交通规则是什么呢？在某个城市，你发现紫色的正方形灯亮了代表“通过”，而在另一个城市，长方形的蓝灯代表“通过”，但又到了其他城市，圆形的闪烁的粉红色灯代表“通过”。
当然，上面是一个极端的案例，试着记下你最近访问的缺失这种连续性、平衡性的网站。包含导航、页眉、排版、图像及整体风格在内的，具有重复一致性的元素可以给用户提供一个线路地图，帮助他们顺利浏览全站。如果用户对这种重复设计的元素感到舒适，他们最有可能浏览完全站，并不断地回访你的网站。
在网站设计及字体、颜色、图片、导航等设计中，你是如何利用“重复”这一设计原则的呢？（编译：陈秋歌）
原文链接：Effective design principles for web designers: Repetition
对齐是“Web设计者应遵循的高效设计原则”之三。
对齐
无论你是否意识到，对齐都是大部分Web设计中必不可缺少的部分；它作用于幕后，是一个隐藏设计元素。它起初可能只是一个PSD文件，也可能是设计模版中不可缺少的部分，是Web设计的主干。你的网站可能有一套布局（或网格），作为主要的框架，以支持网站的外观、体验、导航、工具栏、页眉、页脚等。
作为高效设计原则，“对齐”可以帮助我们对“元素如何在页面中布局”做出明确的决定。利用战略层上的布局，可以设计出更强大、更吸引人的作品；利用网格系统，可以为每个元素的定位提供标准的指导。没有对齐策略，我们就会随意安放元素，与其他相似元素产生很小甚至不会产生联系。没有对齐，网站的外观及体验就会变得杂乱无章。
对齐策略已远远超越了对齐、浮动属性及文本和图片的对齐方式，它还包含其他的因素，比如用户的交互、信息架构、网格及Web设计元素的组织。
关于Web设计中的对齐，你是如何做决策的？
最主要的考虑因素包括对典型用户交互方式的分析，如眼动追踪测试。针对“用户如何浏览网页”的多项研究已开展，内容包含眼睛是如何浏览页面的，从开头到结束的扫描路径是什么，用户如何决定跳转到的位置及下次点击位置等。Charles O’Connell在Usability.gov上发起的讨论（如图1）介绍了眼动追踪测试的含义。从这些研究可以看出，它的要点之一是大部分用户会沿着“F”形状的“热点图”来扫描页面内容，即从顶部开始（正如头条往往比图片更吸引眼球），仅扫描几个词后，便沿页面的左侧扫描并寻找更多有吸引力的内容，并在几秒内做出点击动作。
图1
同时还要注意信息架构（IA），包括整体概念模型、设计计划、架构及组织方式。该过程可以描绘出网站的层级结构、核心导航、标准、规范、分类标签、可用性，用页面线框图、站点设计图解、原型图来代替详细的设计模式。图2展示了一个简单网站的信息架构概念模型，它提供了开发流的起点，最终对主要元素进行对齐设置，以满足动态网站模型。
图2
利用对齐，如何创建引人注目的网站？
对齐原则带来了条理，而条理体现了协调，所有的元素平衡合理地安排在Web页面中。以有序的方式组织页面元素，从而构建成功的产品并健康的发展。
图3所示的简单布局以左侧顶部的Logo开始，页眉和导航区域位于右侧区域，并与之水平对齐；Banner图位于导航的下方。左侧栏与Logo位于一列，一直延伸到页脚的上方。主内容区与Banner图和页眉左对齐。右侧栏占据了剩余空间，与页眉/导航及Banner图的右边缘垂直对齐。页脚横跨页面的整个宽度。
图3
注意，Logo、左侧栏、内容区、右侧栏及页脚部分的文字均为左对齐，导航及Banner图区域为居中对齐。
这仅仅是一个举例，来说明如何清晰地布局网格系统中的页面元素。
网格系统
一些网格系统及模版可以指导我们布局Web设计元素。下文列举了两个此类系统，你可以修改其中各种设置，如列、排版，并以CSS和HTML格式进行保存，从而快速提供原型，或整合入现存的开发环境中。
由Web开发者Rasmus Schultz提供的Grid Designer 是一个在线工具，它默认提供4列，宽分别为174px，总宽度为800px，其中每列间有20px的间隙，页面两侧分别有22px的留白。在该案例中，默认的排版样式为Veranda：段落内文字大小为10px，行高为1；标题采用默认字体，大小为16px，行高为2。如图4。
图4
960 Grid由Web设计师Nathan Smith设计，可供下载。它提供了一个系统，通过常用维度来分割宽为960px的页面来流程化Web开发。它提供了两种选择：12列和16列，每一种选择即可单独使用也可混合使用。12列网格将宽均衡地分割成12列（每列宽为60px），而16列网格则分割为16列（每列宽40px），每列左右两侧具有10px的间隙，各网格最外侧均留出20px的空白。
图5
响应式对齐
针对响应式Web设计，W3C已推出了CSS弹性框布局模块（CSS Flexible Box Layout Module）工作草案，简称“Flexbox”。Editors Draf于2012年8月13日进行了更新，它描述了CSS框模块的规范，以优化用户界面的设计。在强性布局模块中，弹性容器中的子元素可被定位于任何位置，可“弹性”变换大小，即可以增大充满未用空间，也可缩放以避免溢出，可很容易地对子元素进行水平和垂直对齐。这些框的嵌套（如水平中的垂直嵌套、垂直中的水平嵌套）可用来构建两种维度的布局。图5是来自Editors Draf的一个插图。
图6
原文链接：Effective design principles for web designers: Alignment
亲密性
“亲密性”是“Web设计者应遵循的高效设计原则”中的最后一个。引导用户顺利浏览网站，合理使用空白间隔，把相似的内容放在一起，提供清晰的结构是“亲密性”设计标准的所有内容。
间隔与关联
图1
Web设计的亲密性，即把相似或相关的元素组织在一起，对不相关或不相似的元素进行分离。
当元素之间发生重叠或接触，那最上层的元素就会获得主要的注意力。观看图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
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
