WSG8(1)

教材：

第八章
平面设计

有时候，魔法只不过是有人花费更多时间在某些事情上，而不是其他人可能合理预期的。
-Raymond J. Teller在2012年的 Esquire中引用

使用设计逻辑
设计创建视觉逻辑并寻求视觉感知和图形信息之间的最佳平衡。

流体逻辑

商业逻辑

演变一种风格
最好的风格是读者永远不会注意到的 - 所有的东西都感觉符合逻辑，舒适和美观 - 但是强硬的视觉“风格”永远不会侵入体验。

设计完整性
设计品质是对观众的尊重，是传达思想和目的诚实守信的一种手段

欣赏吸引力的影响

眼睛追踪和美学反应
许多眼动追踪研究表明，大型图形和图形元素吸引了很少的“注视凝视”
美丽增强了可用性。

眼动追踪是分析和理解用户如何看，解释和使用信息的好方法。

“肠道”反应
格式塔视觉判断

情感反应和决策
情感反应为你的经历赋予价值; 认知反应赋予你所看到和使用的含义。
对视觉刺激的情感和认知反应由大脑中的三阶段过程控制，在内脏，行为和反射处理水平。

视觉设计
塑造视觉平面

数字设备上的今天的视觉平面是：

变量：我们不再知道我们设计的领域的大小甚至物理特征。我们失去了对我们工作边界的控制，不再有那些根本的优势来指导我们的工作，并且作为一个参照框架。
动态：我们的屏幕设计是即时创建的，我们永远无法完全确定支持设计的浏览器，操作系统，字体，颜色或其他基础显示技术。
无处不在：好消息是我们的设计从来没有更广泛的受众群体，而且信息展示现在从桌面上解脱出来，变得真正的环境。设计师从来没有一个更强大，塑料或有用的视觉平面来工作。
响应式：在这个多屏幕世界中唯一合理的方式依赖于响应式网页设计的基础：流畅的页面网格，响应式图像和CSS3媒体查询，让您的设计能够以智能方式响应他们生活的各种屏幕。

设计过程也必须发展以支持图形设计的可变性：

旧设计：定义一个具有固定边和比例的平面，以及一个固定网格，并用内容填充它。
过渡：定义一个灵活的网格并填充它。
新内容：从内容设计出发，“以移动为先”，从最基本和重要的内容开始，并从那里开始构建。

线路长度
响应式设计和通用可用性原则（请参阅第3章）通过确保页面设计可以在宽度上进行流畅调整，为线路长度问题提供了一个很好的解决方案，以便用户不会陷入可能效果不佳的单一视图他们。所有当前的浏览器还允许用户更改网页布局中的整体尺寸，为用户提供更多的灵活性以适应布局以获得舒适的阅读体验。在大屏幕的响应式布局中，设计人员可以为页面设置CSS“最大宽度”，以防止布局在较大的显示屏幕上扩展为荒谬（并且不易读取）宽度。

颜色和对比度
颜色和对比度是通用可用性的关键组成部分。文本易读性取决于读者从背景字段区分字母的能力。色彩差异主要取决于亮度和饱和度。白色背景上的黑色文字具有最高的对比度，因为黑色没有亮度，白色全部是亮度。色调也是一个因素，互补的颜色，如蓝色和黄色，产生最大的对比度。确保您的颜色选择不会让用户难以区分背景文字。另外，不要忘记，将近8％的男性读者在区分绿色阴影的细微色调方面存在一些问题

使用形态感知原则
二十世纪初的格拉塔尔心理学家
他们对视觉模式感知的研究产生了许多支配人类视觉推理和模式识别的一致原则，这些原则构成了现代平面设计的理论基础。以下原则是与网页设计最相关的原则：

接近：相互接近的元素被认为比分离得更远的元素更相关（图8.10a）。
相似性：观众会将其视为一组具有一致视觉特征的元素（图8.10b）。
连续性：我们更喜欢连续的，不间断的轮廓和路径，绝大多数观众将图8.10c解释为两条交叉线，而不是四条线在相同点处相遇。
关闭：即使图形的轮廓被打破或模棱两可，我们仍然有强烈的偏见看到完成的数字。我们看到一个覆盖四个圆圈的白色正方形（图8.11a），而不是四个圆圈，每个圆圈都缺少一段。

图 - 地面关系

统一的连通性
统一连通性是指通过将元素封闭在页面的其他元素，区域或离散区域中定义的元素的关系。

1 + 1 = 3效果
两个视觉元素之间的“白色空间”形成第三个视觉元素，并随着元素靠得更近而变得视觉活跃。在黑色方块之间的空间中出现的灰色“斑点”下面的着名视觉错觉显示了1 + 1 = 3效果的最坏情况，但是该原理适用于所有紧密间隔的元素，其中地面形成活动整体设计的一部分。

视觉结构
设计创建突出和加强内容的视觉通路。

了解视觉结构的起源
一个页面是一个可视化的架构，充满了关于内容结构和相对重要性的隐含信息。设计，如果它意味着什么，意味着规划。页面设计需要对项目的战略和目标进行分析，并对受众及其需求有透彻的了解。开发一个美观而实用的视觉结构对于任何通信项目都是至关重要的：在传输信息之前，您必须吸引读者。我们通常认为内容是相当直接的东西 - 你看一页，阅读文字，并获得信息。但伟大的页面设计一直是显式和隐式消息的微妙但深刻的组合。所传达的文字和图像的显式意义，以及印刷术，图形和对比和强调的视觉层次的隐含意义。

客观设计结合包豪斯功能主义和格式塔视觉心理学的哲学，旨在根据客观的身体和心理现象创建模块化和系统化的设计。客观设计喜欢模块化系统，设计网格和调查设计问题的系统方法。在网络创建领域，页面编码，信息架构，用户界面设计和可访问性等领域往往是最基于研究和客观的。平面设计和营销在其综合中本质上更主观，

古典页面设计
在西方语言中，我们从上到下阅读，在经典的“古腾堡Z”或“古腾堡图”阅读模式的每一行上从左到右扫描。经典布局中的页面结构主要基于边距的放置，其中文本和图形内容在单个或有时双列中从上到下流动。

“形式追随功能”是现代设计的核心宗旨，但这种说法诞生于古典时代。

经典的从上到下的线性页面结构主导了大多数页面设计，
“设计”的唯一概念是经典的从上到下的布局，

现代设计
在二十世纪初，页面设计师开始打破页面古代古腾堡图模型。在报纸和早期杂志设计中，网页开始被视为一个统一的领域，网页元素的大小和对比度被用来为读者的流浪眼睛创造“切入点”。现代页面设计的目标是为页面创建一个合理的，基于规则的视觉体系结构，其中排版和图形的大小和对比关系创建一个视觉层次结构，读者可以假设它反映内容的相对重要性。

对比度吸引了眼球。眼动追踪研究表明，即使是现代网页和印刷文档的读者也会遵循基于古典上下左右的古腾堡图的扫描模式，但现代读者更有可能从其他点开始阅读除了左上角以外的页面，尤其是复杂的布局，提供了许多可供选择的主题，如典型的新闻或电子商务主页。

建立视觉层次结构
使用传统的页面布局，避免与正常形式大相径庭，因为它们往往会使读者感到困惑。由于所有媒体都有自己的形式和惯例，这种对传统形式的依恋并不是网页设计师所承担的一些特别的负担。这使得我们能够快速地与他们接触，并且没有太多的认知负担只是为了“获得”基本布局。书籍设计是一种古老而受人尊敬的设计手法，但在“ 芝加哥风格手册 ”中，图书设计的“规则”可达数百页。规则不会扼杀图书设计，它们启用它。
你的优先事项应该立即和图形显而易见。清除页面层次结构使用的对比度基本的可视化工具的重量和尺寸，颜色使读者开始接合，和排版，使之明显在哪里看，理想状态下能够提供足够的叙述感兴趣（的话）和视觉清晰度（图像和布局）将读者从最初的扫描中拉到与您的内容充分接触。

视觉层次结构和负面空间
所有格式塔视觉原则 - 实际上所有印刷术和平面设计 - 都依赖于负面空间或“空白空间”，以在页面上创建概念组和易读性。在页面上没有显着的空白区域来创建排序和组时，图形设计是不可能的。所有建立视觉叙事的可能性，以及使用对比度，视觉重量，色调强调和图形叙述来引导读者消失，当白色空间被挤出页面时，所有东西都会变成墙壁与墙壁之间的竞争图形。

白色空间是通过元素周围的边距和填充来实现的，它是形成元素组的白色空间，并且相互描绘了组。例如，在小于下面的分段标题上添加更多的填充会告诉读者该标题属于下面的内容块，并且上一节的内容与后面的章节不同。

团结，简单和专注
在整体页面架构中，伟大的设计创造出一个清晰的兴趣中心来吸引读者的注意力，从而建立统一的秩序和平衡感。

有效的对比
横向规则，装饰子弹，突出图标和其他视觉标记都有其偶尔的用途，但要谨慎地应用（如果有的话）以避免出现斑点和混乱的布局。
细微的，不饱和的颜色是背景或次要元素的最佳选择。除了最重要的区域之外，避免使用粗体，高度饱和的原色，甚至在那里谨慎地使用它们（图8.22）。

使用页面网格系统
页面网格是为页面布局提供一致的，可预测的结构的流行手段。与传统的用于打印的固定页面网格不同，最好的当代网页网格是流体，按比例间隔的网格，可以根据较小屏幕的宽度进行调整，但通常为较大的屏幕指定最大宽度（CSS最大宽度）。但是，网格仅代表有效构建网页的解决方案的一部分。

网格系统的起源

现代网格系统

在20世纪20年代，德国的包豪斯学派将格式塔心理学家的理论与关于印刷页面的形式，颜色和布局的现代主义理论相结合。

网格系统似乎是创意布局的障碍，但如果使用得当，它们可以为布局带来一致的结构，而不会产生图形单调（图8.24）。

浏览器对CSS的支持在21世纪初的增长主要是由于积极主义的网页设计师，如Jeffrey Zeldman和Web标准项目的努力，他们声称倡导“基于标准”的设计，并贯穿CSS和HTML的一致实现主要的浏览器。

基于网格的CSS设计框架（如960网格（960.gs））成为了使用经典现代主义网格原则构建固定宽度网页模板设计的手段。

由于CSS3灵活框布局（简称“flexbox”）在浏览器中变得更加广泛和可靠，我们应该看到日益复杂的灵活和响应式网格框架的出现。

此处显示的“960”网格（www.960.gs）（图8.23）是最流行的网格网格系统之一，并且仍在旧的固定宽度网站设计中看到。

模块和程序

1950年代至1960年代的现代设计运动因其对网格布局的热忱而着名，但网格只是一致的，可重复的图形设计形式的固定点，或者是作为更全面设计程序的组成部分而创建的模块。现代设计的模块和程序形式构成了布局和排版理性主义方法的核心。重复设计模块是预先设定的图形子单元的有效库，通过精心编程的设计系统，可以使更复杂的打印设计程序更加高效，经济高效，并在视觉上统一。

一致的布局
建立一个处理文本和图形的布局网格和样式，然后一致地应用它，以在整个网站页面上构建节奏和团结。重复不乏味; 它为您的网站提供了一致的图形标识，创建并强化了“地点”的独特感，并使您的网站令人难忘。采用一致的布局和导航方法，用户可以快速适应您的设计，并且可以自信地预测网站页面上信息和导航控件的位置。

建立模式
今天，现代主义模块和程序设计的概念后代是网络“模式库”，它不仅仅是可重复内容和功能设计模块应该看起来的静态可视化例子，而是“活”自包含的HTML块和可以在Web站点中快速重用和自定义的CSS代码。

在网页设计术语中，“模式”是HTML和CSS代码的独立单元，它描述了站点中的常见循环对象或HTML标记，例如按钮，基本输入表单，处理拉引号的特征方式，块引用，甚至是HTML的最基本的标题，列表，表格和其他标准元素的样式。为了方便起见，设计者总是复制和粘贴这些代码，并且支持在整个网站中处理事物的一致方式。模式库是精心维护的网站重复构建模块的集合。模式库有时也被称为“风格指南”或“前端风格指南”

大多数需要网站的实体已经拥有一个网站，并且通常随着网站的老化和多年来的不断完善，它逐渐积累了来自新项目的CSS代码。添加新功能和样式的最保守的方式就是将新的CSS代码添加到旧的CSS列表中。这种添加方法可以防止破旧的东西被破坏，但随着越来越多的样式代码的增加，CSS会变得臃肿到网站性能受损的程度。也许更糟糕的是，旧代码变得如此复杂和纠结，以至于没有人记得“实时”网站中实际使用的代码以及哪些代码早已被更新的样式项目重复使用。

保持工作和测试代码的一致模式库需要一些努力，但提供了许多优点：

一个稳定可靠的代码库可以节省大量时间，因为新功能成为剪切粘贴事件并减少冗余，因为没有人浪费时间重新创建模式库中已有的对象和功能。
一个代码库使您的网站的HTML和CSS更容易检查和维护。如果您将所有模式示例保存在一个长页面中，则尤其如此。如果您有新的代码进行测试，您可以将其添加到模式库页面，并快速评估新代码是否会破坏任何旧代码，或者是否有新的CSS，HTML或JavaScript类或变量名称与现有站点代码冲突。
模式库成为一个强大的通信工具，因为设计师，前端开发人员和团队中的其他人员都有一个共同的参考点和共享的词汇表，可用于现有样式和功能，以及快速查看功能是否已存在的方法并可以从现有代码进行修改。
彻底的模式库为所有合理的HTML标签指定了兼容的样式，即使您目前从未计划使用过的标签也是如此。您可能永远不会使用a <cite>或<abbr>标签，但如果有人在您的网站中使用这些标签，则为少量使用的HTML指定样式可避免令人不快的意外（丑陋的浏览器默认样式）。

最喜欢的风格和模式库

幸运的是，一些公司和组织维护着公众可以看到的风格指南和模式库，可以用于启发和指导。作为风格指导书呆子，我们在这里强调一些我们的最爱：

• A Pattern Apart（A List Apart杂志的模式库）：patterns.alistapart.com
• 美国网站风格指南代码：style.codeforamerica.org
• MailChimp的模式库和样式指南：ux.mailchimp.com/patterns和mailchimp.com/about/style-guide/
• 模式实验室：创建原子设计系统：patternlab.io
• 星巴克响应式Web模式库：www.starbucks.com/static/reference/styleguide
• 英国国民健康服务，NHS品牌指南：www.nhsidentity.nhs.uk
• IBM设计语言：www.ibm.com/design/language