理性的设计 最新修订版 西乔

Notes de l'éditeur

2. 在座的大部分是产品经理，你们都会遇到相当多需要评价设计和参与设计的场合，那么你们可能也遭遇过许多痛苦的经历，比如说：不知道怎样布局和搭配。你手下的设计师总是无法令你满意，但又说不出到底问题出在哪里。 为何普通人在参与设计或评价设计的时候，总是会感到很挫折，因为缺乏审美,天赋和专业训练？ 其实这些不是必须的。设计是一个非常理性的事情。你可以回想一下，你在跟别人进行对话的时候，你是如何决策先说什么，后说什么，怎么说？即取决于你的目的，也取决于你的谈话对象，即时反应如何。这些决策过程并不依赖审美，天赋什么的，对吧。只要你问对了问题，解决了问题就可以了。 那么设计也差不多，设计也是一种对话。广告海报/宣传册/GUI/web，这些都是设计者和用户之间进行对话的一个代理。如何设计这些代理，应该考虑的事情跟应该如何去和别人进行对话，本质上是相同的。
3. 这是3张创意名片，你能猜出它们的主人分别是什么职业么？很容易。而且会给你留下非常深刻的印象
4. 这5个都是咖啡馆的Logo,你能分辨出它们的经营特色和针对用户群么？也很容易 从这两组设计里我们都可以体会到设计师他在真诚的有感情地与受众进行对话，所以能够打动人心， 最终也达成目标，。
5. 所以我们今天主要2点 1 如何问对问题。你在做每一步决定和选择的时候,其依据和准则是什么? 2 如何解决问题。讲6个重要的设计策略，他们的应用技巧以及大量案例。 这些策略可以通用于所有运用视觉语言来进行传播的门类，包括GUI，产品设计，工业设计，视觉设计、广告设计什么的。
6. 首先来看最重要的事，这也是…问对问题。你必须要问的3个问题？1谁是你的用户。2你真正的目标是什么，3受众在使用你的设计时处于什么情境。 为什么要问这3个问题，因为我们在设计过程中做任何选择或决策的时候，都必须以这3个问题的答案做为判断依据。 首先来看第一个问题，谁是你的用户？他们对主题有多了解，有没有接触类似设计的以往经验？他们的文化背景是什么，所掌握的惯例是什么，有怎样的预期？所希望使用的词汇、icon 和图像是什么样的？ 从下面2个例子中我们可以受到启发： A：今天，可以说没有人不知道可口可乐，它的广告海报中只要一个瓶子的剪影，人们就能自然地联想到这个品牌和产品。但在上世纪40年代的时候， 大部分人还不知道可乐是什么，如果你穿越回70年前，你还能像今天一样去设计可口可乐的广告吗？ Ｂ：冰箱司空见惯。小孩子都理解冰箱的用途是降温，保证食物不会变质。但北极的小孩子显然不这么看，在那里冰箱是用于保温的，保证食物不会冻上。如果你在为一款销往全球的冰箱品牌做设计，你需要多考虑什么？ 这2个例子告诉我们，受众对一种产品的了解程度，他接触类似设计的经验，以及他的文化背景都将影响你的设计。所以你应该去预测他们会有反应，是什么在影响他们反应，这是保证你设计有效的关键之一。 作为一个设计师应该保持好奇心和敏感度，去研究你的用户是什么样的，真正喜欢什么，需要什么。根据你的观察和经验来获取这些信息，刻画你的用户，也就是你们的术语，建立用户模型。 第二个问题？WHY？你试图实现什么目标：你的设计是为了让用户去消费，还是为了让他们付出分享，是为了帮助他们完成任务，还是帮助他们解决问题，是向他们传播新的理念，还是为了让他们改变陈旧的观点。古话说，有的放矢，找到靶子才能射中，才能真正让设计实现效用。如果你连需要达成什么目标都没有弄清楚，你的所有选择都是没有方向，都是徒劳的。 第三个问题：How? 受众在使用你的设计时处于什么情境，这个词大家很熟悉的，情境菜单，上下文菜单。也就是用户和设计发生互动的环境。他是否能非常充分地使用你的设计，是否操作空间受限，是否有高安全性需求。用户是否会在机场使用你的设计，手里提着大包行李，时间紧迫。用户是否会在开车的时候使用你的设计，不能一心二用。用户在使用的时候是否有条件接受培训或指导，用户是否可能包括视力不好，无法使用鼠标的残疾人。像这样情境的差异的不同会极大程度上改变用户的使用方式和范围。而你作为设计者必须随时根据用户的使用情境来做出选择。
7. 成功的设计是因为解决了正确的问题。只有问对了问题才能做出了正确的设计决策。 有时候用户或者客户会与你谈论他们需求他们的理想，但并不是真正的需要和存在的问题。 也有很多设计师会在设计任务和细节的时候迷失，执着于设计一个非常好用的交互，或者一个非常精美的界面细节，但却忘记了真正的目标。设计师们应该考虑使用更好的信息展现方式来减少用户的动作。将用户从任务和操作中解脱，更直接地给他们真正想要的结果，而不是执着于设计出一个更好的交互。 找到正确的问题所在，可能会在项目早期花费相当长的时间和付出很大的代价，甚至可能占整个周期的1/3，但是相信我，这是值得的。
8. 当决策方向明了之后，下一个问题就是依据什么去决策。 但是我还想问：为什么你们会认为这是一张电影海报，而不是别的什么东西？是哪些因素导致你进行快速做出了这个判断？ 是因为下面居中的大号粗体标题，突出的角色形象，顶部有人名，底部的小字介绍……等等。 这些判断理由可能人们说不出来，但它们的确在起作用，在不知不觉间影响这你的认知。因为人们见过的绝大多数电影海报都有类似的模式。
9. 为什么我们不会把杂志广告与电影海报弄混？ 为什么人们能快速找到大部分电器的开关？为什么人们会去点击向下的小三角，知道这里藏着个下拉菜单？ 这就是视觉习惯，你们也可以管它叫模式。通过触发一些特征和次序， 就像按下一个play按钮一样 启动人们一系列固定的行为或判断，。比如你在超市里看见价签上面写着半价，五折，就会不自觉地感到：这种商品很便宜。我应该考虑买它，不管我是不是需要。这时候一个play按钮被按下了。 人类天性中会以较高的准确性迅速识别出熟悉的东西。 人们的判断和快速反应依赖固定模式。 所以在GUI和产品设计中，利用模式是非常重要的。 视觉习惯是一件非常有用的武器，它帮你满足用户的期望，也帮助用户理解设计中各个层面的信息。 在整个设计过程中，它们都将左右你的决定。 设计师要利用这一点，使设计符合人们的视觉习惯。如果无视这一点，或错误地使用了视觉习惯，用户在使用你的设计的时候会迷惑、出错甚至反感。随着用户对各种网站和应用的熟悉，他们的耐心更低，期望值更高。一个不符合习惯模式的设计，带来的不良影响也更大。在竞争激烈的领域，不成熟的设计会迅速地导致用户流失。
10. 现在我们可以来看最重要的部分了：解决问题。设计策略。 设计策略分为3组： 排列和强调策略：在视觉层面上组织和结构化你的设计，使设计具备更好的外观和更高的可读性。 清晰和简洁策略：在行为层面上优化你的设计，提高用户的使用体验和效率。 语气和品质策略：在反思层面上赋予设计个性。满足用户情感、自我表达、和社会化交往上的需求。 这六种策略并非单独起作用，它们交织在一起， 彼此平衡和补充，共同影响设计的最终效果。 甚至在有些时候，策略之间会相互冲突。例如：严谨的排列会让风格变得过于保守，手稿或涂鸦的风格的设计会影响可读性。 所以当设计者运用其中一个策略时，必须经常监测它对其他策略的影响。当策略彼此冲突。设计者必须权衡是妥协或放弃其中一种。而判断依据还是如前文所述：是否能够满足用户，目标和情境。
11. 排列是最常见的策略。它帮助用户组织视觉元素，以便读者能看到它们的结构，层次和级别。 不用多说，页面布局是一种艺术，它通过打理视觉层次结构，引导视觉流、注意力焦点来为用户提供指导，或者说，控制用户 排列有最基本的两种的技巧：编组和对齐 编组把设计元素组织成一个单元和子单元，创造平行关系或者分级关系。使读者能够从容地，有效地浏览设计中的每一个部分。
12. 视觉编组的方法有3种：形状的相似、空间的接近和分割。 w3school页面设计中综合运用了这3种手法：中部的这4个区块，人们很容易会辨识出它们是同级的，它们运用了形状的相似，使用了类似的装饰和结构，同时用边框进行了分割。而左边的菜单，人们可以看出分为3组，每组之间预留了同样的空白，这里运用的是空间的接近。可以看到这个页面的设计通过运用分组策略，结构和层次感非常清楚。人们的视线在上面可以非常从容的移动。
13. 元素间的间距很大，孤立元素也很多， 但通过运用分割和空间上的接近依然取得了协调的视觉效果，
14. 背景色是非常常见的分割方法。意这些同色系背景色的搭配，控制颜色数量。注意间距，避免产生过多平行线与生硬感
15. 我们再来看看对齐。对齐是一种运用非常普遍的策略，使用起来也很简单。对齐除了在视觉上建立美感，让页面统一，有条理以外，还起到一种作用，因为在设计中会有各种类型各式各样的孤立元素，他们的物理位置并不靠近，如果随意放置就会让设计变得非常散乱，但是通过适当的对齐，可以让他们看上去有联系而且是相关的。 左图中的居中对齐也是没有明确的对齐边缘，只有中轴线。人们无法在意识里将中轴线自动连成完整直线，而容易把这些元素视为孤立元素。而右边这张图仅是改变了对齐策略，就对整个设计改观非常大。所有元素都与其它元素保持着联系，没有孤立元素，结构稳定。
16. 层次感明晰，边缘清晰，
17. 现代主义推崇严格遵守网格和对齐方式，强调空白和无衬线字体的版面样式，抛弃装饰与点缀。
18. 强调是一种强化视觉流，把读者注意力引向指定视觉元素的策略。认知心理学指出：人们总是通过寻找焦点来使认知行为有意义。当我们没有什么要关注的时候，认知就中止了。因为它不再引起思考。当我们遇到重复模式，现场是同质化的。这种情况也会发生。 所以在任何传播中，不管是设计还是文章，都必须有焦点，有某些部分比其他部分更显要，受到更多关注。不然人们的认知就会中止，他们将不再对眼前的东西有兴趣。 实现强调策略 的两种典型方法是 建立重心和 创建对比。
19. 视觉重心可以创建平衡为页面增加安定感，也引导用户快速理解你想表达的核心内容。比如厂家新出了一款手机，特色是全透明键盘，设计里就要将全透明键盘作为视觉重心来处理，让用户一眼就能看到它，第一时间完成认知。如果你的视觉重心偏移了，变成屏幕或者拿着手机的美女，你可就错过了重要让用户第一眼形成正确认识的宝贵机会，也很难实现你的目标。。 视觉重心并不一定是最突出，颜色最鲜亮，比例最大的那个。从这张摄影里可以看出，最亮的地方是落日，但你们的视觉重心落在了哪里？告诉我。 对落在了这个运动着的人身上。因为这里山脉的反光轮廓形成一条导向线，建立了一种方向感，也就是从左上到右下，大家注意到这条线了吗。这种导向线可以起到箭头一样的作用， 帮助构成视觉重心。 睫毛膏让眼睛变大的原理就是如此。 所以有很多时候，单纯的放大、颜色加深或位置居中的处理方法会令画面显得太呆板。不妨考虑这种技巧。
20. 这两个设计，都使用导向线，把你的视线引到所需的位置。
21. 用渐进的方法，把你的视线引向最大的那个汉堡，你的视线很容易就被锁定在它想展现给你的诱惑上。
22. 另一点非常重要：一个设计中应该只有一个重心。焦点太多会彼此竞争，从而降低了所有焦点的重要性。这里有一张失败的设计，它的重心分散，许多部分都很显眼，但又不够显眼。所以用户很难对网站设计者想要重点推荐或表达的信息形成认识。
23. 这个网站的视觉重心都非常鲜明，用户可以从容地落下第一眼，开始浏览
24. 这是一种跑鞋的广告。它应用了视觉重心，也应用了对比。鞋和它所代表的生活姿态，无容置疑是绝对的焦点。这是简洁而又令人印象非常深刻的作品。 人总是希望得到即时满足，在开始使用的最初几秒中就获得结果。如果你能够预测一名新用户会做的第一件事，那你将很容易让你的设计获得成功。
25. 实现强调策略另一个典型技巧是对比。 对比是为页面增加视觉效果的最有效途径之一。它带来冲突，碰撞、和鲜明的节奏感，把读者注意力引向指定的视觉元素。也在不同元素间建立区分与层次。 对比策略的应用：色彩、明暗的鲜明反差带来的视觉震撼
26. 要记住，如果一旦运用对比，就千万不要心慈手软。不要使用那些类似的，不能形成鲜明反差的组合。 有力的对比。视觉上很有冲击力，个性鲜明，非常又风格
27. 看看它是怎样运用字体、字号、字型的对比，怎样运用颜色的对比，空间层次的对比。这些技巧的运用让整个设计显得成熟和专业。
28. 这个WWF的公益环保广告。不需要什么文案，仅仅依靠对比的力量就可以做到。
29. 上面我们讲完了第一组策略：排列和强调。它们优化的是视觉层面上的组织结构。 接下来是第二组策略。清晰和简洁。这组策略主要在行为层面上优化你的设计，让它们变得可用性更强，更有效。 清晰策略可以用于增加可读性，帮助信息接收者解读信息 “生物具备天然的感知轮廓的能力，在重要对象的颜色或亮度与其背景环境几乎相同的情况下，将其分辨出来。 设计者可以利用图形与背景之间的对比来提高清晰度，产生所需的强调。但这种对比是很容易被视觉噪音减弱， 包括不恰当的边框,格线,背景色彩和纹理,以及喧宾夺主的视觉装饰等等. 它们会削弱设计的清晰度，及其简洁和风格。
30. 复杂烦琐的边框和阴影 形了视觉噪音 色彩的选用也造成了文字的边界不够清晰，用户无法快速识别对象与其周围元素的区别。浏览的时候，不断受到干扰。
31. 黑色的表格框线形成了噪音。√和X的图标设计得太复杂，干扰用户的选择 斑马背景色改善了图表的视觉效果。但图标还是抢夺了用户的视线，用户最需要关注的是第一列的“属性” 清晰的设计：第一列 “属性”栏加上了表意性的ICON 。√和X只需要显示一种。
32. 另一个技巧是利用表意性图像。 利用icon、图表、信息/数据可视化，以可视化的方式而不是文字的方式传达知识。如果设计得好，它们可以让人们用眼睛和心灵来得出他们自己的结论，它们show而不是tell.” 在媒体、海报和web上，被可视化的信息、数据或知识越来越常见。可以更有效地表达内容，展现信息之间的关系，也令设计更优雅，有趣与可读。
33. 这些logo设计让人一眼就能看出他们所代表的品牌含义。
34. 这份信息可视化海报设计，主题是生物和工业产品中淡水资源的消耗量。简洁、优雅、有效，无论你使用何种语言，什么文化背景都可以顺利阅读。
35. 人们喜欢数据，更喜欢形象化的数据。即使只是把数字用不同大小的字号表现出来。这一招在宣传册的设计中屡见不鲜。
36. web比传统纸媒多了交互性。交互式的工具然供用户按照自己的方式选择或过滤数据，增加用户的控制欲和自主感。就算仅仅是简单的排序或者信息组合这样的行为也有价值，用户成为了发现过程中的参与者，而不只是一个被动的旁观者。
37. 如果说清晰考虑的是质的话，简洁考虑的是量。少即是多，是最知名的极简主义的口号了。这一设计风潮号召只采用最必须的部分。省略任何无用的元素与效果。复杂的界面对用户意味着繁重的认知负担。 但省略并不意味着节省劳动或降低成本，简洁要求对作品更强的把握，对题材和表现元素有更强的分析筛选，对细节更需精密的处理。不要把简洁当作是解决成本的途径。因为简洁意味着每个视觉元素都要设计得更为恰当 构成简洁的两个途径是否：1 是利用空白。 瑞士有一位设计师将空白视为现代主义设计的价值观，称之为“好设计的肺”，因为它为各式各样的设计要素提供了呼吸空间。 许多设计失败的主要原因是太过拥挤。尤其是报纸、广告和网站首页的设计。不能因为寸土寸金就把每个角落占满。太多的信息意味着无信息，用户无法留下印象，什么也记不住 2不要过度设计。人们的认知是以目标为导向的，用户从图像中找出需要的东西而忽略其他的。从而保证自己的认知有意义和有效率。过度设计会干扰用户完成自己寻找目标的过程，从而导致认知过程的失败。同时，它也是没有信心和全局观的表现。
38. 创意实验室的网站。它运用了大量的空白，没有使用许多说明和介绍文字，也没有使用大量大尺寸的图片。空白的运用并没有使你忽略它，你反而会关注它更长时间，更有兴趣去阅读简短的文字，留下深刻印象。
39. 这个设计在website中算是中精简到了极限，它运用了大量的空白，但绝不会令人觉得空洞。奢侈的留白，高品质的画面，绝妙而雅致的配色，令这一设计拥有了打动人心的力量。
40. 从杂志、宣传册里可以很好地学习到这一策略的运用
41. 功能性提神饮料的广告 精简，有力
43. 清晰和简洁是为了优化使用语境，使设计更有可读性，更有效 语气和品质是为了优化受众使用时的主观感受。增加感情和可信赖度 人们会通过你与对方交流时所采用的语气，判断大量信息。采用正确的语气，是获得有效交流和积极关系的开始。我们对儿童说话的时候应该亲切柔和。对老人说话的时候应该体贴尊重。对上级说话的时候应该听起来敬畏正式,让他们感觉良好。这些你与别人交流时所使用的语气，将告诉对方很多你的特性。 在设计里也是。运用语气策略可即能传达设计者的风格特质，也流露出设计者对受众和文案的态度。。所以1 是要建立正确的态度。 正确的态度可以感染用户，引起共鸣。建立对设计的信任感和融入感。 “好的设计并非源于审美，而是源于对受众的理解。他们喜欢什么，容易接受什么，容易被什么说服和吸引。越了解用户，你就越能对他们移情，进行更有效的设计。”——《Designing Interfaces 中文版》 2 要运用情感。人的情感、行为和认知 相互影响 只有在产品/服务和用户之间建立起情感的纽带，才能形成对品牌的认知，培养对品牌的忠诚度。 ——《情感化设计》诺曼
44. 微笑，友善的人类面孔，尤其是儿童和美女的面孔总是有这非常强的杀伤力，激发你的感情。
45. 这个是温室效应的公益海报， 温馨、可爱、优雅
46. 工业风格浴具品牌的网站 严谨、中性、工业化。轮廓鲜明
47. 优雅、人性化 专注
49. 这是儿童食品的包装，你很难阻止小孩子去拥有它。
50. 品质是一种建立可信度的策略。在任何传播中，传播者都试图与其受众建立一种信任关系。做朋友。为了做到这一点，需要培养一种特别的或可靠的或专业的或成熟的感觉来吸引受众。建立信任感。 为了达到这一点，需要设计师对设计诉求与受众非常了解 ，拥有全局性开阔性的思路，同时非常注意细节。无论是在整体布局，还是在字体的选择，空间的使用颜色的搭配等等。 在品质这件事上，短板效应非常明显，任何一个部分都无法代表整体品质，但却都拥有毁掉整体品质的能力。虽然大部分人受到的视觉训练是有限的，但人们往往都有能力敏锐地察觉到不对劲地方。虽然人们并不知道什么是好用的设计，但却能发现什么是不好用的的设计。 技巧1：协调统一。协调统一也称一致性原则，指的是在版面中，所有的部分互相之间保持融洽，凝聚。它可以通过相似结构和连贯性来完成。 你可以可以将其理解为是一种恰当的重复。在设计中运用多个协调的，有着相似特征觉元素，包括色彩，比例，距离，纹理，装饰效果，格式。通过对设计元素和样式的统一这种可以帮助用户建立整体印象。 虽然重复可以将设计中的各个部分联系在一起，从而统一并增强整个作品。但要记住不要滥用重复。一个美女，穿着黑色的套装，带着红色的围巾、耳环，拎着红色的皮包。我们会看起来很别致。但是她如果在戴上红色的帽子，穿上红色的皮鞋，红色的腰带，红色的裙子。那简直就很灾难了。滥用重复会迅速降低设计的视觉品质。
51. 风格策略的运用1 来观察下重复是怎样增强视觉效果，给你留下特别的印象
52. 风格策略的运用2 看起来设计专业的元素，一致性原则的运用和细节的品质给用户建立了可靠专业的引向。 可以从大量的VI设计中 学习到这一点
53. 技巧2： 精益求精 对细节的忽视会造成设计品质的瓶颈。整体的品质和可靠则是基于每一个细节的精致，粗糙的细节不可能产生优质的整体。 设计杯具时，什么弧度是最适合握在手中；需要定时更换的快速消费品，用什么方式来提醒人们使用期限；对于会丢弃或忽略说明书的用户们，怎样提醒他们可能导致严重后果的注意事项；提供什么样的反馈和补偿，帮助等待中的用户缓解焦虑；怎样设置保护措施／有限条件，来减少可能发生的错误操作…… 随时随地考虑这些细节问题，并根据用户与市场的需要无止境地进行修订，是一名设计师基本而必备的修养。 况且在这个竞争激励精益求精的时代，用户一旦拥有了追求精致的意识，就会对细节更加重视。 酒类产品系列网站 设计协调、统一，专业化，注重细节品质。产品差异化细分给消费者带来信心和信任感。可引发积极情绪的明快色彩和高贵背景令用户愉悦，标识不同口味的特征化易辨设计元素，有助于帮助用户建立认同感
54. 可靠和信任感
55. 技巧3：以人为本。 虽然品质通常取决于看起来专业的处理，但如果使用者发现设计并不好用，看起来再专业的设计也可能难以建立其品质。 产品的形式应适合于人的特性，满足精神追求和人文关怀——这就是人性化设计 现代工业化社会中的人们，更加注重设计在舒适、可靠、效率、环保等方面的考虑， “以人为本”的设计思想，可以通过系统深入地研究使用对象、使用引发积极情感的色彩造型或材料、对功能持久的发掘改良、对残疾人和弱者关怀、对环保和生态的关注等体现出来。既包括生理学层面上的，也包括心理层面上。要知道在很多时候，用户无法说出自己的需求，甚至会错误地认为某些功能并不是自己需要的。但一旦被设计出来，人们才为之狂喜觉得离不开它。从一百多年前汽车里的茶杯座，到Apple最新推出的iPod Nano 和 Facetime。都是如此。 那么我们来看这个设计，它说一个锁孔，上面漏斗型的滑道能引导钥匙以正确的方向对准锁孔， 在黑暗中也可以准确地对准锁孔， 整体造型非常优美和雅致。
56. 洗手池和水箱直接合为一体的抽水马桶，洗过手的水自动流入水箱。这是非常环保的设计，同时也节省了浴室空间，造型简洁风格现代，拥有令人喜爱的质感和细节。
57. 所有的策略都讲完了。我们来复习一下。 排列 强调 清晰 简洁 语气 品质 这3组策略从上往下看，上面影响局部，下面影响全局。上面是可视的策略。下面的策略用于在意识与情感上感染和影响用户。 掌握了这些原则和策略，你可以做到正确并有效地完成一个设计，传达你想表达的意识和内容。但这远远不是终点，距离创作出卓尔不群，令人印象深刻并引发强烈喜爱的设计作品还有很长的路要走。 同时还要注意的是：“在设计中，如同在政治中一样，只懂得遵守规则的人是创造不了历史的。” 许多优秀的作品经常会打破普遍惯例，反潮流而行，结果带来更大的冲击和效果，但都需要设计师通过更多的实践和观摩，掌握更强的控制能力之后。