理性的设计

Rational Design西乔

h"p://blog.xiqiao.info

Twi"er:  arthur369

                   arthur369@gmail.com

令我们害怕并挫折的是什么？

设计

视觉语言

创造性媒介

策略+审美

设计和艺术有所区别，也不等同于绘画，

设计过程

技能

控制，引导，转换

理性判断+直觉感应

误区：从事设计是神秘的令人恐惧的需要天赋和大量训练

设计非常理性

在设计过程的每一步中，做出任何决定都有其一定的原因。

目录最重要的问题——这取决于⋯⋯

修辞情境

设计法则

策略依据——视觉习惯

设计策略

•策略1：排列 —— 编组 对齐

•策略2：强调 ——重心 对比

•策略3：清晰 —— 降噪 表意性图像

•策略4：简洁 —— 利用空白 不要过度设计

•策略5：风格—— 一致性 品质

•策略6：语气 —— 态度 情感

提升之道

最重要的问题 这取决于⋯⋯

受众 Audience 目的 Purpose 语境 Context

他们是谁？

他们对主题的熟悉程度？

他们接触类似设计的经验？

他们的文化背景

他们所知道的惯例

他们的需求和期望

说服性：

劝说受众用某种方式思考行动

使他们能完成某种任务

告知性：

帮助受众理解某些东西

改变他们的态度

受众当时所处的社会情境

物理环境——空间、操作范围

时间限制——紧迫程度

认知程度——经验，交流历史

生理状态——健康、心态

社会趋势——潮流、时代

修辞情境 Rhetorical situation

设计策略

策略指导视觉习惯

成功的设计

受众 Audience 目的 Purpose 语境 Context

排列 ——强调

清晰——简洁

风格——语气

设计成功的关键

取决于如何运用策略更好地符合特定的

修辞情境。

视觉习惯的运用，帮你满足用户的期望，

也帮助用户理解设计中各个层面的信息。

在整个设计过程中，它们都将左右你的决定。

7

策略的依据：视觉习惯一份依照视觉习惯的设计，用户可以很快

对它们的类型、目的、用法做出判断。

当我们认知事物的时候，会带入过去的经

验，那些经验深刻地塑造我们看到的图

像。通过不断过滤我们的认知，过去的经

验在我们的视觉中起着非常积极的作用。

运用特点

•范围 ：

•灵活度：

•使用者规模：

结合用户的需求来考虑视觉习惯

这是一张电影海报

这里有个下拉菜单

策略 Cognate strategies

• 设计者可以将这三组设计策略应用于整个视觉语言领域。

• 然而他们并不是单独作用的，而是相互关联和交叠

• 设计选择是几种策略共同作用的结果。彼此平衡和补充，而不是独立使用。

• 当设计者运用其中一个策略时，必须经常监测它对其他策略的影响。

• 当策略彼此冲突。设计者必须权衡这种妥协或选择 是否有助于适应修辞情境。

设计策略

排列 ——强调

清晰——简洁

风格——语气

优化视觉结构和组织

优化使用语境，使设计更有可读性，更有效

优化受众使用时的主观感受。增加感情和可信赖度

策略 1: 排列 Arrangement排列是一种组织视觉元素以便读者能看到它们的结构，提高可读性的策

略。

它们意味着顺序，创造结构，为读者提供获取信息的途径，给视觉元素以

平衡和比例

对齐 Alignment用于让页面统一、有条理。

需要在各个单独的元素之间建立视觉

纽带。

通过适当放置，让物理位置上并不靠

近的一些孤立元素看上去有联系而且

是相关的。

编组 Grouping

结构化出一个视觉领域内的视觉信息。

利用视觉元素间的相似性，

在一些元素中创造平行关系，在另一些

元素中创造分级关系，以此从视觉上结

构文案。

编组的方法：

• 形状的相似

• 空间的接近

• 分割

来源：《the  non-­‐designer's  design  book》

编组的技巧点：

•避免一个页面上有太多孤立元素

•不要在元素之间留出同样大小的空白，除非各组属于一个子集。

•不同属一组的元素之间不要建立关系

对齐的技巧点：

• 避免混合使用多种文本对齐方式

• 少使用不明显的居中对齐方式

来源：《the  non-­‐designer's  design  book》

排列策略的应用1：

一张普通的账单。仅仅运用“对齐”就可以获得稳定平衡的视觉美感

排列策略的应用2

清晰的结构和层次感

排列策略的应用3

严格 统一的对齐

16

排列策略的应用4：

元素间的间距很大，孤

立元素也很多，

通过运用编组和对齐依

然取得了协调的视觉效

果，整个布局放松、典

雅。

策略 2: 强调 Emphasis强调是一种把读者注意力引向指定视觉元素的策略。

认知心理学指出：

认知是积极和紧张的。作为视觉信息的认知者，人们总是寻找焦点来使认知行为有意义。当人

们没有什么要关注的时候，认知就中止了。因为它不再引起思考。

当人们遇到重复模式，现场是同质化的。这种情况就会发生。

所以修辞情境都要求某些部分比其他部分更显要，受到更多关注。

对比 Contrast为页面增加视觉效果的最有效途径之一

在不同元素间建立层次感和组织性。

重心 centre-­‐of-­‐gravity视觉重心为页面增加安定感

引导用户快速理解你表达的核心

视觉重心的技巧点：

•不同情境下，用户习惯的视觉重心位置不一样

•一个设计中只有一个重心

•视觉重心并不一定是最突出，颜色最亮，比例最大的。可以通过方向性和引导来建立重心

重心的导向

重心分散的失败设计

对比的技巧点：

•对比一定要强烈，尽可能大胆

•不要使用类似的，不能形成鲜明反差的组合

对比很微弱

用户会怀疑是对比吗？

还是设计师搞错了？

字体之间的强烈对比使它更生动，

更引人注目

线条的粗细也有了明显的对比，

没有人会认为这可能是一个失误了

加入了色彩和空间的对比

整个设计更鲜明，精美

20

对比策略的应用1：色彩、明暗的鲜明反差带来的视觉震撼

强调策略的应用2：视觉重心

强调策略的应用3

有力的对比

强调策略的应用4

对比和强调

策略3: 清晰 Clarity清晰是一种增加可读性,使用户准确理解信息的程度的策略。

认知心理学上的 “图形—背景”对比原则 Figure-ground Contrast

设计者可以利用图形与其周围的视觉领域之间可感知的区别，产生所需的强调，或提

高清晰度。

降低噪音“图形—背景”对比也是一种格式塔 原

则。它的缺少会影响你的传播。因为这

一对比很容易被视觉噪音降低，从而削

弱设计的清晰度 及其简洁和风格。

利用表意性图形利用icon、图表、信息/数据可视

化，可以更有效地表达信息，也令

设计更优雅和有趣味

复杂烦琐的边框和阴影

形成了视觉噪音

色彩的选用也造成了文字

的边界不够清晰，用户无

法快速识别对象与其周围

元素的区别

降低噪音

26

利用表意性图形

这些logo设计让人一眼就能看出他

们所代表的品牌含义

自然组织

钢琴服务

理发店

实验室

利用表意性图形

环保海报：

表现了产品生产过程中淡水资源的消耗

黑色的表格框线形成了噪

音。

√和X的图标设计得太复

杂，干扰用户的选择

斑马背景色改善了图表的

视觉效果。

但图标还是抢夺了用户的

视线，用户最需要关注的

是第一列的“属性”

清晰策略的应用——性能对照表的设计

清晰的设计：

第一列 “属性”栏加上

了表意性的ICON

√和X只需要显示一种

策略4: 简洁 Conciseness简洁是一种在特定修辞情境中使用适当数量的视觉语言的策略

简洁指的是视觉设计的量和复杂程度。

简洁并不意味着简陋，不要把简洁当作是解决成本的途径。因为简洁意味着每个视觉元素都要设计得尽可能精细，而且要符合特定情境

利用空白许多设计失败的主要原因是太过拥挤。

尤其是报纸、广告和网站首页的设计。

不能因为寸土寸金就把每个角落占满。

太多的信息意味着无信息，

用户无法留下印象，什么也记不住

不要过度设计过度设计是没有信心和全局观的表现。

认知是以目标为导向的，用户从图像中

找出需要的东西而忽略其他的。

不要让任何元素干扰到这一点

简洁策略的运用1

从杂志、宣传册

里可以很好地学

习到这一策略的

运用

简洁策略的运用2 创意实验室的网站

空白的运用令你反而会关注它更长时间

简洁策略的运用3

功能性提神饮料的广告

精简，有力

33

简洁策略的运用4

咖啡馆广告：使用wifi

极简主义

Geek们看了是不是觉得很温情

简洁策略的运用4 商务网站

是否足够简洁，取决于情境

策略5: 风格 Ethos风格是一种让视觉语言在特定修辞情境下建立可信度的策略

在任何传播中，传播者都试图与其受众建立一种新人关系。为了做到这一点，信息发

送者需要培养一种特别的或可靠的感觉来吸引受众。视觉语言也需要建立信任感，以

便充分适应修辞情境。

风格通常取决于看起来很专业的元素。设计者对一致性、品质和细节的注

意。

一致性一致性可以理解为恰当的重复

设计中视觉元素的重复可以将作品中的

各个部分联系在一起，从而统一并增强

整个作品。

技巧：不要滥用重复

品质品质通过建立用户对设计的信任感和信

心而传达风格。

专业化的 真诚的设计

使用用户熟悉，可分辨特征的设计元素

以取得认同感

风格策略的运用1 来观察下重复是怎样增强视觉效果，给你留下特别的印象

风格策略的运用2

看起来设计专业的元素，

一致性原则的运用和

细节的品质给用户建立了

可靠专业的引向。

可以从大量的VI设计中

学习到这一点

风格策略的运用3

酒类产品系列网站 设计协调、统一，专业化，注重细节品质。

产品差异化细分带来专业和体贴的感觉。设计元素的选用建立用户认同感

可靠和信任感

策略6: 语气 Tone透露出设计者对受众和文案的态度。

可以表达一系列不同的声音：随意或严肃的，正式或非正式的，威胁性或安全的，温

柔或威严的，

好的设计并非源于审美，而是源于对受众的理解。他们喜欢什么，容易接

受什么，容易被什么说服和吸引。

越了解用户，你就越能对他们移情，进行更有效的设计。

态度正确的态度可以感染用户，

引起共鸣

建立对设计的信任感和融入感

情感人的情感、行为和认知 相互影响

只有在产品/服务和用户之间建立起情

感的纽带，通过互动影响了自我形象、

满意度、记忆等，才能形成对品牌的认

知，培养对品牌的忠诚度。

——《情感化设计》诺曼

41

这是3张创意名片，你能猜出他们的主

人分别是什么职业的吗？

5个咖啡馆的logo设计

不同的情感 传达不同的品牌定位， 适应不同的受众，巩固认同感

语气策略的运用1

面向家庭的开关的广告

温馨、可爱、优雅

语气策略的运用2

工业风格浴具品牌的网站 严谨、中性、工业化

45

语气策略的运用3

面向儿童：

卖童装的电子商务网站

可爱、放松、轻柔

语气策略的运用4 面向注重品质的人群：Magic Mouse的产品介绍页面

优雅、人性化专注

排列 Arrangement 强调 Emphasis

分组 对齐 重心 对比

清晰 Clarity 简洁 Conciseness

降噪 表意性图像 利用空白 不要过度设计

风格 Ethos                                        语气 Tone

一致性 品质 态度 情感

设计策略 Cognate strategies

易用

实用

影响力

效用

局部

整体

设计是为了解决问题，使用任何技巧的时候都别忘记一切取决于情境

提升之道

打磨你的理性

• 随时随地观察各种语境下 各种人群的需要，他们可能就是你下一个作品的用户。

• 学习和搜集用户的视觉习惯和行为模式的信息和数据

打磨你的直觉

• 运用今天学习到的策略，重新观察你接触到的任何视觉传播。学习它们是如何适应情境，如何做判断，如何在多种策略间平衡取舍。

从哪里获得帮助

• 摄影、传统绘画、广告设计、杂志排版、平面设计、web设计⋯⋯

所有艺术和设计门类之间都可以相互借鉴。比如配色、布局、线条、情感的处理

• 放开视野，多看国外的设计blog

• 学习认知心理学，了解人类是在认知和思考之间运作

上twitter，看《每日设计三推》

推荐的都是国外的出色的设计blog。虽然都是英文的，但基本图像就可以说明一切，英语不好的同学也不用有负担。

http://blog.xiqiao.info 里有每期的汇总。

• 《How to Create Smoky Brushes and Type In Illustrator CS4》 如何在illustrator CS4中创建幽雅的烟雾状画笔

• 《30 Superb Examples of Infographic Maps 》30个信息可视化地图的案例交互地图或图表地图在web上应用越来越广泛，如何平衡图表、信息、颜

色的呈现使其别具一格。本文包括用于呈现统计数据的信息可视化图表，交互式地图，和传统的定位地图。

• 《Showcase Of Beautiful Textured Web Designs》 拥有漂亮质感的web设计陈列。恰当地使用纹理和阴影可以高度提升页面质感、层次、立体效果和别具一

格的风格。如焦纸，木质，贴画，手绘、涂鸦、半色调，做旧等效果。

• 《A Showcase of 35 Beautiful Typographical Illustrations 》极为出色的文字设计。包括包豪斯、涂鸦、波普、罗马式、古典、回文、卡通、装饰画、水墨等

设计风格，以及赋予了各种超强质感的设计。都是在illustration中的设计教程。

• 《45 Inspiring Navigation Menus That You Must See 》45个不得不看的导航设计。导航在网站中是传达网站信息结构的重要元素，其设计也能表达网站内容

定位及风格。本文包括了涉及传统横导航，手风琴导航和tab导航等多种形式的成功设计案例。

谢谢观赏

西乔 2010.03

署名·非商业用途·保持一致   

本PPT均使用 创作共用协议