课堂PPT：

大纲提要：8.1 应用设计逻辑
8.2 演化出一套风格
8.3 “吸引眼球”
8.4 视觉设计
8.5 视觉结构

1、将图像和文字巧妙地安排 (the artful arrangement of images and words)
到规划好的形式中�(into planned form)。

2、应用设计逻辑：网新的弹性逻辑及业务逻辑结合传统平面设计及知识
风格（style）是演化出来
“吸引眼球” 的科研基础
视觉设计：塑造视觉平面，应用视觉原则
视觉结构：建立层次，使用页面网格系统

白话：如何应用设计逻辑；
演化出一套风格；
掌握“吸引眼球”的科研知识；
塑造视觉平面，应用视觉原则
建立层次的视觉结构

3、平面设计之科学及学科基础
根源于语言
关乎排版（typography）
排版：印刷形式再现口语
千年的书写体系
面对网新多平面之弹性/流式逻辑

应用设计逻辑 USING DESIGN LOGIC

4、弹性/流式逻辑
FLUID LOGIC

网新的弹性平面不应是种缺陷，而是特色，设计师应拥抱之

5、业务逻辑
BUSINESS LOGIC

网新平台对日常生活的影响，如空间、环境等等益发重要

整合众多平面的必要知识及技能
网新的弹性平面

image.png

8.2 演化出一套风格Evolving a style
重视体验、惯习、及好用

近传统而远特立独行丶绝对不让框架压倒内容。并记住，最好的风格是读者从来沒注意到风格： 一切都感觉合乎逻辑丶舒适和美好的境界，就算有高量的视觉 "造型" 也不会侵犯体验的境界。就如爱德华. 塔夫特（信息可视化大师）所说，"如果你照顾真和善, 美会照顾自己。"

8.3 欣赏/理解�吸引眼球的影响力
视知觉的构成

1. 视觉注意力
   视觉觉注意力包含了几个层面：
   (1)东西出现于眼前，能不能注意到是很重要的；
   (2)注意到了之后，能不能持续的注意，还是一下子就分散掉看别的东西；
   (3)如果眼前不止一个东西，要选择注意哪一个东西，而忽略不相关的；
   (4)必须同时注意两件事物以上的时候，能够妥善分配及应用。
2. 视觉记忆
   把当前看到的东西和以前的经验作比较，加以分类、整合再储存在大脑中，即是所谓的视觉记忆。例如：妈妈一开始指着狗告诉小朋友这是狗狗，小朋友看到狗有四只脚的特征，日后只要看到四只脚的就会说这是狗。直到记忆累积越来越多，分类越来越细，就能进一步发展出区辨各种东西的能力。

8.3 吸引眼球的影响力
眼球追踪与美感反应
很多眼球追踪研究表明大幅图像及图像元素会在眼球扫描的过程中吸引用户成为几个注视点，图像的篇幅、美学特性、调性对 用户的影响不是瞬时的，而是持续的。另一项用户行为体验调查示，网站的审美对用户影响较大，如果在秩序、美感、新颖度、创造力方面有好的表现，用户会对网站更加信任，也会对网站可用性更为认可。
视觉设计及用户调研配合能提供更好的网站用户体验：实用性与审美之间的优秀平衡能够取悦眼睛与大脑，即，美感能够增强可用性。

AJAX之父Jesse James Garrett早在2000年就提出了用户体验要素的5层结构，现在已发展为6层。：

image.png

眼球追踪能够更好的帮助我们了解用户如何看、如何与网站互动、如何使用信息。
因为较少有针对营造网站风格的图片的研究，所以在一些用户界面研究声称这类图片对用户影响较小。这种图片非商品目录等具有功能性的图片。
对于这个结论我们要结合“情境”来看待：在类似这样的用户研究中，参与者通常会被指派一系列“任务”，所以他们潜移默化的会倾向于关注链接、标题、按钮、表单等界面操作要素，而忽略没有实际功能效果仅仅是为了装饰网站风格的图片。
拓展：如何进行网站可用性测试https://www.zhihu.com/question/20418124

本能反应（GUT Reaction）
二十世纪初发展的完形心理学理论（gestalt psychology）及 其后基于其的研究能够帮助我们理 解。大脑对一张图像的反应是及其复杂 的，且几乎是瞬时的，这个过程仿佛带 有魔幻性质，因此似乎不可信，这样复 杂的过程怎么可能发生的如此快？一个 我们无法完全了解的过程，又如何去相 信它的结果？

研究结果显示，用户仅 用50毫秒（二十分之一秒）就会对一个 网页所有图像拥有自己的视觉感受。所 有用户都会产生这种出于本能的反 馈，且这个反馈会贯穿用户使用网站的 全过程，并对用户对该网站的信任度产 生及大影响。简单来说，用户在眼球追 踪实验正式开始之前，就已经产生了对 这个网站的基本的、持续的、牢固的视 觉印象。

《决断两秒间》
Malcolm Gladwell（马尔科姆·格拉德威尔） 著
这本书以全新的视角告诉我们什么是不假思索的神奇力量，它证实了这样的简单事实：在转瞬之间做出的决策能够与经过谨慎思量和深思熟虑做出的决策媲美。而这本书诉求的另一个主题就是：你快速做出判断的能力和凭借第一印象付诸行动的能力是可以训练和掌控的。

image.png

在Malcolm Gladwell的著作《决断两秒间》，作者举了一个例子。盖蒂博物馆的《盖蒂青年雕像》如今被严密的矿物学、放射科等多种手段证明为赝品，当在最开始时有经验的历史学家就提出对这座雕像真假的怀疑，原因在于它视觉看上去太“新鲜”了。其实许多职业所仰赖的正式近乎是直觉的视觉判断。

情绪反应与决策制定AFFECTIVE RESPONSE AND DECISION MAKING
在心理学中，对刺激给予的情绪反馈成为“情绪反应”（affective response)。情绪反应的过程是下意识的、无意识的，且非常快，由大脑的下层中枢（lower center of the brain）控制的，这个区域同时也控制人体的生物本能，如吃、害怕、呼吸、眨眼等。回想下你由大脑本能区域控制时对所见所感做出的情绪性反应吧。
“认知反应”（Cognitive response）是大脑耗时较长、自上而下、考虑更为周全后的反应，认知反应是由你的文化视野、知识、经历及个人决定共同主导的。
情绪反应给你增添经历，而认知反应决定所见、所经历对你的意义所在。

图8.5
我们的认知反应系统经历三层阶段：第一阶段“本能判断”（visceral judgments)，迅速做出好/坏的反应，激发行动及情绪反应。
第二阶段“行为阶段”（behavioral）人类的行为，由“反射阶段”控制，但常在意识不到的情况下，极大的被“本能判断”影响；
第三阶段“反思阶段”（reflective)，感知的、智力知识的阶段，控制行为。与“本能判断”没有直接关系。

image.png

本能阶段 ：
视觉刺激下的情绪反应和认知反应在大脑中由三个阶段组成：本能阶段、行为阶段、反思阶段。
大脑在本能阶段对视觉外表的反应 非常迅速，研究表明这个过程可以达 到50毫秒。这种本能感觉或好或坏的 情绪反应绝大部分是无意识的，它可 以花费数秒或数分钟时间变成一个有 意识的本能反应——这种情况尤其容 易发生在对复杂视觉刺激（如网页）的反应过程中。

行为阶段：
行为阶段涉及到更多我们所熟知的“网站可用性”内容：使用网站的感 受、网站的功能性、对网站结构和导 航结构的理解、网站整体的性能表 现。这个阶段，用户很清楚的意识到 自己对网站系统的态度与反应，愉悦 的或是沮丧的，这一过程发生在用户 操作网站后的短短数秒至数分钟 内。眼球追踪等研究对这个阶段的调 查最为有用且准确，因为这些研究能 够提供每分每秒用户为完成任务而有 意识的决定看什么、做什么的详细证 据。

本能阶段的情绪延续：本能阶段的情绪反应进入意识层 从而变为行为阶段或反射阶段，可 能花费相当长的一段时间，但这并 不意味着情绪反应不会即时影响用 户的思想。事实上，正是看到一个 设计优秀的网站所迅速引起的没来得及意识到的愉悦感，促使你下意识的倾向 去看见那些好的设计——即使你的 意识进入行为阶段或反射阶段，这 种下意识的印象仍然会伴随你的体 验全过程并影响你的感受

反思阶段
反思阶段是最复杂的阶段，一般 与用户个人对网站的设计、意 义、文化背景、当下的实用度等有 关。反射阶段常触发用户回忆相关 经历，并促使用户对网站总体的审 美价值、个人所认为的价值做出实 用层面的判断。眼球追踪研究及网 站日志对这个阶段的判断没有意 义，但用户采访可以让你知道你的 用户是如何、为何做判断的。反应 阶段也包括了对符号内容的意义解 析，这个解析过程由视觉感知元 素（颜色、样式、形状、对比 度、人物识别）、对具象图像的更 为精细复杂的反应、和符号内 容（字体、图标、图表）共同影 响。

图8.6
完全解析我们所见是需要时间的，但我们的情绪反馈（Affective reactions）早在我们有意识的做出行为反馈之前，就已经对我们产生影响了

image.png

8.4 视觉设计
Visual design
塑造视觉平面
行长
颜色和对比度
应用Gestalt 视觉原则
图形-背景关系
一致连接性
1 + 1 = 3 的效果

塑造视觉平面
平面设计/视觉设计（graphic design）最根本的是在平面上组织视觉元素：摆弄图形丶各种媒体和字体排版来产生视觉顺序，用以反映和增强内容信息。
今日的数字设备上的可视化平面是：

变异的 (Variable)
动态的 (Dynamic)
无处不在的 (Ubiquitous)
响应性 (Responsive)

变异的 (Variable):我们不再知道我们设计应用的领域大小甚至其物理特征。对於我们的作品的边界，我们已经失去了控制, 我们不再有这些基本的边缘边界，来指导我们的工作，来用做参考框架。

动态的 (Dynamic)
屏幕上设计成型结果是使用当下才产生的，我们永远不能完全确定这设计成型结果是什么浏览器丶操作系统丶字体丶颜色丶或其他基础显示技术来提供支持的。

无处不在的 (Ubiquitous)
好消息是，我们的设计有史上最广的受众，信息显示已从办公桌解放出来，并已真正成为环境里到处可见的显示平面。设计师所拥有的是，史上最强大的丶最可塑的丶或最有用的视觉平面来创作。

响应性 (Responsive)
在这个多屏的世界里, 唯一合理的前进道路依赖于响应性网页设计的基础：弹性网格布局(fluid page grids)丶弹性图片/媒体(responsive images)丶CSS3媒体查询(CSS3 media queries)，让您的设计能够智能地响应他们要出现的各类屏幕。

image.png

好消息是，所有的视觉设计的基本�工具仍有用：字体排版丶颜色丶对比丶大小关系，甚至复杂的布局在完全响应的设计中仍好使。
所有的视觉设计的基本�工具仍有用

文本分栏的科学基础
文本分栏之所以发挥了很好的作用，是因为它们对我们人类视觉系统的各个方面进行了补充

颜色和对比度 Color and contrast
颜色和对比是通用可用性的关键组成部分。文本的可读性取决于读者从背景区分出字体的能力。区分颜色对比主要取决于明亮度 (brightness)和饱和度 (saturation)。拥有最强的对比度的是白底（白色背景）黑字（黑色文本），这是因为黑色为零明亮度，而白色是全明亮度。色相/色调 (hue) 也是一个因素。如蓝色和黄色这样的互补的颜色．会产生强烈的对比。确保颜色的选取不会让读者难于区分文字和背景。同时，千万不要忘记差不多有8%的男性读者在区分精细的红色阴影和绿色阴影时有一定困难。

并不是所有的颜色是等价的
并不是所有的颜色是等
价的，并不是所有的颜
色组合是可替换的，尤
其是对8%有一定程度
的色盲的男性来说。

-可读性的最佳组合是白底黑字
-黑字白底的可读性也不错

• 白底上的明亮颜色像黄色会消失看不清
• 白底上的暗颜色像蓝色或红色效果较佳
• 渐变背景极易制造可读性问题，是因为部份文字将因较弱的对比使可读性降低。若非用渐变背景不可，请使用黑色字，并不要在背景使用暗色
• 有些许红绿色盲的10%男性读者，会觉得此段落很难读，特别是红色和绿色的明亮度很接近的状况。不要在文本上单靠颜色来产生对比。

应用Gestalt 视觉原则
人类心灵能把复杂的视觉成分的总和看成统一的 "整体"，这样的视觉能力让20世纪早期的Gestalt（有中译 "格式塔" 是德文的 "整体" 或 "整体形式"）心理学家着迷。
Gestalt心理学家他们对视觉模式的感知研究，产生出了许多一致的原则，而这些原则支配着人类的视觉处理和视觉模式识别；而这些原则构成了现代平面设计大部份的理论基础：

image.png

图形-背景关系 �Figure-ground relationships

image.png

一致连接性 Uniform connectedness

image.png

1 + 1 = 3 的效果

image.png

8.4 视觉结构(Visual structure
)
建立视觉层次结构
视觉层次结构和负空间
一致丶简洁丶焦点
有效对比

使用页面网格系统
网格系统的起源
现代网格系统
模块和程序
一致的布局
已建立的模式

建立视觉层次结构
欧洲国家（大部分国家）的阅读习惯如图，通常被成为“古滕堡Z”（Gutenberg Z.，德国活版印刷创始人），代表这视觉的层次顺序。
眼球追踪研究不断的得出类似的结论，即网页中最受关注的是左上区域。

image.png

哪些国家/语言是反Z？

进入点及对比的综合应用

image.png

建立视觉层次ESTABLISHING VISUAL HIERARCHIES
如果一个网页在视觉上缺少中心点，用户就需要花更多的时间和力气来阅读。用户阅读网页一般以快速浏览页面视觉图形内容开始，这种视觉内容一般依照英语阅读习惯进行布局。

image.png

简单的两条原则：

1. 使用符合惯例的页面布局，避免太过背离普遍形式的布局，这可能会使阅读者感到困惑。符合惯例的页面布局能够节省用户花在“获知”页面布局上的时间和精力。举个例子，书籍设计是一个拥有长久历史的行业，而书籍设计的“法则”被融入在The chicago manual of style中，这些法则并不是限制了书籍设计，而是成就书籍设计。

2. 首要任务是让页面的视觉效果一眼看上去就非常清晰。清晰的页面层级要做到让用户一开始就能通过宽度、大小的对比、颜色、排版来获知如何使用基本的工具，从而紧接着能关注到个人的兴趣中来，即从页面的扫描进展到关注网页的文字内容、图像内容中来。

英文引用标准格式 - 最常用的美国学术刊物的标准引用格式之一
标准格式不是束缚，而为创作和设计提供可行性

image.png

image.png

image.png

-视觉层次结构和负空间Visual hierarchies and negative space
优秀的视觉层级结构并不仅仅是图像 的对比，不然我们要做的就只是给网页 加上厚重的页头、在头部加上图片、文 字下面加上一个个小图片方块。这是网 上最常见的网页结构，因为它直接且对 用户清晰。
比这个更精细复杂的页面布局遵守的 是我们之前讨论过的“完形视觉原则”。完形视觉原则，甚至是所有排版和图像设 计依赖的都是“负空间”（实体周围的空间，留白），从而实现群组 和 易读性，这些视觉叙事、视觉重心、强 调、图像叙事都要依靠留白区域。
留白可由元素的margin和padding实现，这 些留白是元素成为一个群组，又使群组 与群组之间区分开来。

• 一致丶简洁丶焦点Unity, simplicity, and focus
  好的设计要突出重点使用户一眼就能看到，同时整个页面的顺序和平衡要流畅。强烈的对比和页面元素的重量很有用，但如果过度使用将使用户感到疲惫。如果你的页面上有重要内容，请相信好质量使突出它的最好形式，你并不需要额外在图形上突出它。

• 有效对比Effective contrast
  水平线、装饰性的项目编号、图标等视觉标记有它们的作用，但使用时需注意和谐及一致性。图形强调工具只在被适度使用的情况下有用，过多的使用只会导致页面看起来像小丑的衣服，所有部分都在被强调，重点没有被突出。

符合自然世界的色彩模板效果十分和谐，如果你不是一个经过训练的图形设计师，那么采用自然世界的色彩模板是一个好选择。弱饱和的色彩是背景、及较小元素的最佳选择，除非是整个区域最需强调的中点，否则请避免浓重的、强饱和的色彩选择。

image.png

使用页面网页系统USING PAGE GRID SYSTEMS �- 网格系统的起源
所有有经过认真设计的页面都要使用页 面网格，最早且最基本的布局网格是手绘 网格，在移动设备还没有发明时就在使用，现在也仍然被广泛运用在书籍、博 客、智能手机的页面设计上。

image.png

图8.23a图时最经典的手绘网格，只有 一栏，有时会在margin部分添加页边说明或附注信息。
c图的column grid在古登堡发明活版印 刷术（1452）之前就已经存在了，在19世 纪初成为报刊杂志最流行的页面布局。直 至今天还有许多书籍、杂志、印刷品、手 册、网页使用的都是这种布局的变体。
今天在印刷及网页设计中流行的“模块 化布局”（d图）是由现代主义设计者 在20世纪50年代及60年代演化出来的。随 着css更加稳定且多样，这种固定布局的 形式在2006-2011年期间的网页设计领域 产生过短暂的热潮。
“分层布局”（e图）是现代网格布局的其 中一种演化布局，特点是灵活，主要运用 在以图片为主的印刷品和网页中，如杂志 印刷。这种布局中图片（一张或多张）是重 心，奠定了网页的基调。

image.png

-现代网格布局Modern grid systems
20世纪20年代德国包豪斯学院将传统完形心理学与现代主义理论融合，提出现代主义设计。瑞士的设计风格就受到包豪斯学派的巨大影响，瑞士设计师如Jan Tschichold、Josef Müller-Brockmann创造除了现代网格布局，而20世纪50年代、60年代Charles and Ray Eames, Paul Rand, and Massimo Vignelli等美国现代主义设计师又为现代网格布局打上了美国的烙印。

Müller-Brockmann用他的书《平面设计中的网格布局》为现代主义的网格布局系统做了最有力的声明。现代设计者们在不同的项目中使用不同的网格布局、不同程度上使用网格布局，但网格布局始终为复杂的设计提供了和谐性和完整性，也为内容展示和放置提供了可复制的系统。

image.png

image.png

在21世纪初期主流浏览器对CSS及HTML的支持力度加大，网页设计者们对网格布局开始越来越关注。有一些基于CSS的网格布局框架如960 grid system出现。随着移动设备的发展，网格布局从固定样式变为流式及响应式布局，随着CSS3的弹性盒子布局被越来越多的被浏览器支持且被设计者采用，我们将会看到更多弹性的、响应式的网格布局框架产生。

在2005-2010年固定宽度的网格布局非常流行，这个时期除了电脑之外的用户被简单的归类为“手机用户”，不管什么设备，只有同一套只有基本布局和信息的网页。960 grid就是固定宽度布局，现在还会在一些很老旧的网站中见到。

image.png

★模块和方案 Module and program
网格布局尤其在需要大量、重复性的图片设计情形下会占据主导作用，“模块”为综 合性的设计项目提供了灵活的组件。现 代设计的“模块与布局”为布局设计提供了 理性（rationalist）依据。重复的模块在 图像展示框中非常有用，能够使复杂的 设计更加高效、节省成本、视觉效果也 很统一。
图8.26的网站设计师采取了一种模块 与布局的设计系统，即使他早就从美 国国家公园辞职，这个网站至今使用 了超过50年也仍然兼具美观与 功能，为机构节约了大量经济成本。

image.png

★一致的布局 Consistent layouts
建立一个网格布局以及一套处理你的内容与图像的固定方式，让它帮助 你建立和谐统一的网站页面。重复并 不意味着无聊，一致性的布局及导航 令用户对使用你的网站产生信心并产 生地理上的安全感，也会因此记住你 的网站。

重点：Bootstrap 栅格系统
https://v3.bootcss.com/css/
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

image.png

Bootstrap 中文网

image.png

Bootstrap 文檔
3.0
https://v3.bootcss.com/css/

image.png

4.0
https://v4.bootcss.com/docs/4.0/getting-started/introduction/

image.png

Bootstrap (网格)栅格系统
https://v3.bootcss.com/css/
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

image.png

Bootstrap 栅格系统 实作
https://hanteng.github.io/portfolio/
https://hanteng.github.io/sdg/SDG01_2017/

(完)