详情
本书用清晰的说明和生动的图片分析了以用户为中心的设计方法来进行网站设计的复杂内涵，在关注于思路的同时也讲述工具或技术，从而使你的网站具备高质量的用户体验。本书用清晰的说明和生动的图片分析了以用户为中心的设计方法来进行网站设计的复杂内涵，在关注于思路的同时也讲述工具或技术，从而使你的网站具备高质量的用户体验。
书名：众妙之门——用户体验设计的秘密
ISBN：978-7-115-34970-5
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [德]Smashing Magazine
译 邱胤焱 林本杰
责任编辑 赵轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Copyright © 2013 by Smashing Media GmbH
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, by photocopying, recording or otherwise, without the prior permission in writing from Smashing Media GmbH.
CHINESE SIMPLIFIED language edition published by POSTS&TELECOM PRESS Copyright © 2013.
本书中文简体版由德国Smashing Media公司授权人民邮电出版社独家出版。
未经出版者书面许可，不得以任何方式复制或抄袭本书内容。
版权所有，侵权必究。
网页设计中的用户体验会受到访客感情、理念和文化背景等方面的影响。因此，网页设计师要利用讲故事的方法来提升设计的传达性，利用工具来解决问题，利用客户服务来帮助用户，制定合理的开发策略，从而提高整体的用户体验。本书能够赋予读者更为深刻的洞察力，让读者在优化网站时能够根据书中总结的原则进行设计，显著提升网页的吸引力。
James Young
网页设计的意义在于解决实际问题。很多设计师在设计之前会盲目浏览一堆设计图库，企图寻找灵感。但实际上，设计图库不会教你怎样解决“你的”问题。
其实，在设计图库中是无法找到灵感的：设计图库只是别人的解决方案。
因此，要再次重申：看别人的设计并不能解决自己的问题。尤其是行业里那些年轻的设计师，一旦遇到困难时，就会一遍又一遍地翻看那些设计图库，企图在其中寻找到优良界面和优秀用户体验的设计秘诀。然而，设计图库只是设计师对自我成功的展示——只有结果，没有过程。
项目简介递交后，千万不要多事的再去问客户：“希望按哪种网站设计？”如果问了，就会处于非常被动的地位。
笔者从来不会愚蠢地问客户这个问题，因为一旦这样问，客户对设计的印象就定型了，他们会让设计师照别人的网站模仿，使设计师的创造力毫无发挥之地。客户往往非常在意竞争对手，他们会说：“嗯，做一个和这个差不多的。”他们根本不会去考虑，这样的设计适不适合自己的产品和服务的特点。他们也不会去考虑自己的长处到底又是什么，他们只是在盲目地追随对手的脚步。这种事情，可以说在行业中司空见惯，不但不利于客户，也不利于设计师的创造。因此，一定不要犯这个错误。
当浏览灵感图库或者浏览富有吸引力的网站时，一定要记住，看到的仅仅是结果，而不是过程。
知道结果，却并不了解过程中的二三事。过程很复杂，包括用户测试、多次的修改、原型图、A/B测试等，还包括各个阶段和客户意图对设计的影响。这些根本无从了解。
浏览设计图库只知结果，不知道过程，更不知道最后的体验效果。
无论何时，当有人问到灵感来源时，笔者都会回答：“我的灵感来自人本身。我会观察用户的交互方式，观察用户解决问题的方式。通过这种方法，你能得到大量的灵感。”
尽可能多了解用户及其故事。笔者的灵感来源就是《国家地理》杂志，在其中能够了解世界各地的人处理问题的方式，无论问题是大还是小，他们都能巧妙地解决问题，这给予了笔者无尽的灵感。
每次遇到设计问题时，都要抵制住浏览灵感图库或者相似设计的欲望，因为能看到的都是表面。需要学会的是如何将观察与理解超越这些表面，如何去领略设计外观背后的东西，千万别忘了设计的目标是人，是用户。因此，要学会观察用户和了解用户的方式，并试图去取悦用户。
只有养成缜密筹划、深入思考的好习惯，才能在设计时得心应手。
研究用户，学习他们解决问题的方法，掌握他们的交互方式。完成这些之后，设计模式将会变得明晰，设计流程将会更加简化。如果设计已经完成，重新通过这种办法来审阅一遍设计也是个不错的主意。
这些步骤不光能解决设计问题，同时也是一切问题的普遍性解决方
案——真的非常有效：
（1）确定并理解出现的问题。
（2）制定计划，以图修正。
（3）实施计划。
（4） 检查一下解决方案是否行之有效（如果没有，说明计划有问
题，或者对问题的理解不够透彻)。
其实，用户遇到问题时，也是这样将问题分解，然后一步一步解决的。解决问题，只需使用这个方法或其变种即可。
（1）孟加拉国海平面上升问题的应对措施。
在这篇优秀的文章中，孟加拉国的人民用聪明的、创新的方式解决了日益严峻的环境问题——海平面升高。他们用风信子打造了流动的花园—一个令人赞叹、创新的解决方案！他们用美丽的植物取代了死气沉沉的海堤阻碍物。
（2）经典问题“卡车太高，无法通行隧道”的解决。
这个问题的变种有很多。在避免花销、避免损失的前提下，解决这个问题需要退后一步，深思熟虑。读者可以看看这个问题的解决方案，非常有益处。
（3）厨师也能教授网页设计。
来自世界级大厨Heston Blumenthal的声明，其中，读者可以感受到他聪慧的想法以及创新的问题解决方式，非常让人震撼的一篇文章。
笔者能够理解很多人经常浏览图库的原因。在涉足行业之初，笔者也经常浏览图库,但目的仅仅是社交，用来寻找那些有想法的设计师，用来交流分享经验，而不是将他们的设计作为解决方案的一种参考。其实，浏览图库没什么错，错就错在很多人把浏览图库当成解决问题的正确途径，本文想说的就是：在设计中要学会多观察，而不是闭门造车，这才是解决问题的最佳方案。
Rob Flaherty
科技在进步，网页设计的技巧也在进步。新的科技带来了新的挑战，因此，也需要新的解决方案。有时，人们面对崭新的未知领域，实在是毫无经验，只能根据直觉去打造解决方案。而有时，人们在新领域面对的问题有过去的影子，可以从历史和别人的经验中找到答案。
相对其他设计那漫长而又荣耀的历史，网页设计的历史有限，因此能给出的经验也相对有限，人们不得不借鉴这段有限的历史去解决近乎无限的问题。虽然也可以学习图形设计和视觉传达艺术的经验，但是网络完全不一样，人们不应该被束缚，因为网络的本质是自由。如果能够分析出问题的因和果，分析出问题的组成，那么问题就好解决多了。世界上任何事物都有一定的规律，有章可循，人们可以通过学习获取灵感，从而解决问题。即使是音乐和心理学这种不相关的领域，也可以从其中找到解决问题的答案。即使是约翰·塞巴斯蒂安·巴赫的乐章，也暗藏着迎接挑战的方案。
本章将进行一次历史的穿越，让那个时代伟大的艺术家巴赫来解决网页设计中的问题——网页设计该如何适应兼容性不尽相同、特性各异的不同设备。
1722年，巴赫收集整理了自己的键盘曲集，打算用此来为年轻的音乐家教学。这本曲集包含了48首曲子——从C到B有十二个音，十二种调性，每种调性包含了大调与小调。调式总和为24，而每一个调都写了前奏曲和赋格曲，共计48首。现在，这些弦律成为了西方音乐的主要规范，这是西方音乐史上总重要的作品之一。巴赫将此命名为
“平均律”。
要知道，巴赫时代的钢琴是古钢琴，和现代钢琴不同，那时候的键盘在现在看起来很非常规。古钢琴的发音原理是：通过羽毛管的拨子拨动金属弦发音，且击弦后立即脱离琴弦的装置，所以无法连续弹奏，一次只能弹一个键。在那样落后的时代，想要将十二个大调弹奏的合调，是很艰难的。因为在巴赫的时代，所使用的调律法基本上是纯律，很不利于转调。
想要改变物理规律很难，但是人类的观察角度却很容易转变。问题：无法和谐的弹奏。原因：① 钢琴物理因素。② 弹奏无法合调。既然在物理上改造钢琴很难，所以巴赫换了一种角度来思考。他将问题重新定义，主要致力于“合调”问题的解决。巴赫将8度音程平均分为十二个半音。这样，问题就得以解决。这种折中的、系统性的解决方案被称之为“音律”。
1-SF为巴赫十二平均律中第一首前奏的开头部分。
这种因巴赫而驰名的、可以用来解决问题的音律系统被称之为十二平均律。如今，西方音乐的“均分律”和“平均律”仍有一些差异，但是它们的目标是一致的：使每个按键略有差异（或者说是略有瑕疵），这样就能合理利用全键盘。这是音乐上的实用主义。
网页设计近些年来最令人兴奋的进展是什么？是网页设计对多设备浏览的支持。不再是那种支持多浏览器浏览的小把戏，而是支持不同特性设备浏览：不同的屏幕尺寸、不同的兼容性、不同的使用场景和不同的界面。
尽管响应式设计网站以及具有设备针对性的网站能够重新塑造设计，使之符合不同设备上的用户需求，但这并不是万能的办法。有时，问题依然会凸显，依然要采取最妥当的决定。这时，便可以借鉴平均律中的方法，将平均律作为一种隐喻，帮助人们解决设计问题。
将这种概念应用到界面设计中也非常简单。为了将优质的用户体验提供给尽可能多的设备，就不得不做出牺牲，个别界面可能会“略有瑕疵”。小小的折中能够使设计的适应面更广，应用更多样化。
这种折中的设计思维可以体现在触摸交互界面中，现在，它已经扎根于桌面网页设计中了。
在触摸交互界面中，手指作为定点设备比鼠标的指针大得多，这就需要更大的触摸对象。为了确保可用性，交互元素也需要更大。出于美学的考虑，需要相应地增大内边距和外边距——更大的交互元素需要更大的边距来保持一种视觉上的平衡感。
Gmail在新设计中采用了很多留白区域，增大了按钮的内边距，非常适合手指操作，尽管这是桌面版的设计。
按照以前的思维，触摸交互界面和桌面界面泾渭分明，但iPad的出现以及流行使两者之间的界线变得模糊——iPad为两者“牵线搭桥”。iPad的触摸设计影响了桌面界面设计。可以留意一下最近桌面界面设计的主要作品，诸如Gmail、Twitter和一些CSS图库，可以看到网页上的设计开始跟以前略有不同了。元素看起来似乎更丰满了。更多的留白区域，更大内边距的按钮，总体说来，就是元素更大了。当然，日益增长的桌面屏幕尺寸也是产生这一现象的原因之一。
这种设计对于鼠标操作来说，可能元素排布不是很紧密，但是却给拇指提供了充足的操作空间，防止了触摸的误操作。允许些许的不完美，以提供更普遍化的用户体验。这论调听起来是否很熟悉？没错，这就是界面设计中的平均律！
需要注意的是，如果界面设计能够适合手指的触摸操作，那么该设计一般会更适合桌面上的鼠标操作。易于触摸的按钮通常会更易于点击。平衡来自混乱，完美来自些许的瑕疵，通过这种设计方式，在满足触摸交互体验的同时，也提升了桌面场景的体验。
微软的Metro化设计Metro design语言以触摸为主，实现了很好的交互性。
尽管很多关于响应式设计的讨论都聚焦于技术层面和响应式概念的层面，但是“响应能力”这个指标不应该是设计的目标，只是为了满足用户需求的某种条件：只是对不同内容的呈递所需要具备的工具；只是用来压缩图像大小的一种技术；只是用来合理布局、更好地呈递信息，以适应小屏幕显示的一种手段。
响应式设计的核心目标是为不同设备提供普遍化的体验。
掌握响应式设计的过程是一种普遍化设计的训练。掌握了响应式，便对设计的“平均律”有了更深层次的了解。The Boston Globe的网站便是此理论的绝佳案例。
The Boston Globe 是响应式设计的绝佳案例，适应性很强。
响应式设计策略简化了设计，一种设计便能满足多用户设备的阅读需求。The Boston Globe的网站很棒，用户在任何设备上都可以获得舒心的阅读体验（即便是苹果的牛顿古董计算机也能）。这不仅仅是一种前端技术。响应式设计通过对media queries和JavaScript的巧妙运用，让设计具备更灵活的弹性，提高了设计的适应能力。
这是一种可调节的、均衡的设计。尽管极简主义设计极度有型，但人们曾经以为它只能在桌面上实现，而曾经的移动端界面设计大多过于注重装饰，显得华而不实。将桌面上的设计风格移植到多个平台，以追求一致性的体验。这本来是一项艰巨的工程，但是响应式设计的横空出现解决了这一问题。设计师做了一点点权衡，在设计上进行了调整，一种设计便能适应多种应用场景——就好比设计师也会弹奏十二平均律。
前面的案例大多和平面设计有关，但是平均律的思想也可以被设计师用来进行产品设计、用户体验设计、信息构架——几乎涵盖了设计的各个领
域。一起来看看该思想在产品设计中的体现，以及移动至上的设计理念。
如果你信奉“移动优先”，并以此为自己的设计理念，那么恭喜你，你的理念和平均律的思想不谋而合。只要设计流程围绕移动端展开，并且设计能够符合移动应用场景的苛刻条件，那么该设计将具有一种简朴、实用的美感——非常凝练，只包含产品最基本的元素。
正如 Luke Wroblewski所写的那样：
当一个设计团队进行移动优先的设计时，设计成果将非常符合用户的任务需求和预期。这种设计不会误入歧途，而是直奔主题；这种设计不会像桌面上的界面设计一样，不会有毫无意义的装饰元素。无论是从用户体验的角度，还是商业的角度，这都是一件好事。
当这种设计从移动端扩散到各个平台时，便完成了优良体验的多平台、多设备覆盖。这便是设计的十二平均律。最近，Twitter的重设计便很好地阐述了这种设计策略。
New Twitter 简约的设计，以及多设备一致性的体验。
Twitter重设计的目标之一便是打造计算机、手机多平台的一致性体验。这对于界面设计来说，可谓一种挑战。那么，有没有捷径呢？当然有，移动优先的设计策略便能帮助用户迅速达成目标。
Twitter的重设计上有一处很有趣的地方，那便是移动端的体验设计涵盖（或者说影响）到了各个平台上。例如，除了Tweet 按钮之外，用户所有的操作均由“Home”、“Connect”、“Discover”、“Me”四个标签展开。为何？因为这种设计非常适合手机的小屏。标签栏的四个元素便能实现大部分操作。
桌面版的网页便以此为基础，添加了更丰富的功能，但是依然有移动版那种简化风格的痕迹。尽管桌面版的界面空间非常大，元素非常多，但是为了移动端的用户体验，设计得很收敛。设计师懂得权衡，以便确保多设备间体验的普遍性。
虽然平均律很好，但是在某些调式中会出现狼音。不过要肯定的是，狼音不是由于平均律引起的。何谓狼音？狼音是乐器自然共鸣引起的一种刺耳的哮声，是乐器设计的必然结果。因此，音乐家给这种声音起了一个很形象的名字：狼音。
在界面设计中，当把某些交互元素或者视觉元素移植到其他平台时，某些问题似乎不可避免。例如，桌面版的网页设计必然包含链接，鼠标操作并不费力，移植到手机上后，会发现链接很小，很不便于触控。或者桌面版的字体大小属性原封不动地移植到了移动端，用户读起来很吃力。再或者，悬停效果对于触摸设备的不支持。这些都是界面设计中的狼音。
这篇文章的链接只适合鼠标操作。当用户使用移动触摸设备进行浏览时，此页面的可用性就降低了。
New York Magazine 的下拉式导航很实用，设计得也很棒，但仅适用于鼠标操作。
再重复一次，响应式设计和移动优先策略是明智的选择，能够解决上述问题。如果能够一劳便能永逸，又何必费事地设计一个又一个平台？别忘了，设备的种类会越来越多，设计也要讲究方法。
尽管现在已经有了响应式设计这种能够“量体裁衣”的处理方式，但依然要学会思考，尤其当设计需要跨越不同设备、不同平台时，要借鉴古人平均律的思想，在概念上思考普遍、可达的设计该如何实现。
除此之外，还要注意的一点是，虽然响应式设计能够实现多平台体验的一致性，但是用户不一定会有一致性的预期。也就是说，有可能用户不会把一款应用桌面版上的经验当成移动版的预期。有时，各个平台之间的联系性可能会非常模糊。至于要怎样设计，是继续使用响应式设计，还是根据设备的特点打造截然不同的体验，就仁者见仁、智者见智了。
需要记住以下几点建议。
（1）响应式的思考。
即便设计形式上不完全遵循响应式设计，但设计思想上要有“响应式”的意识，因为可用性好、普遍性高的设计是我们的共同追求。
（2）要有触摸至上的思想。
如果一个按钮的尺寸适合手指操作，那么这个按钮同样适合鼠标操作。反之则不亦然。适合鼠标操作的按钮尺寸往往不适合手指操作。触摸至上的设计思想能够确保网页或者应用适应不同的应用场景。
（3）要有普遍性的思想。
老话说的好,“早测试，常测试。”这里的“测试”可以换成“思考”。如果有需求，就早作打算，早点思考问题：设计到底该如何在不同的设备上实现基本一致的功能。
（4）要有移动优先的思想。
移动优先的设计策略有助于思考：对于用户来说，什么是最基本的？什么又是最重要的？只要将设计的重心集中于最基本的特点，那么，打造一致性体验将会很容易。
（5）要谨慎。
不同界面的交互特点不同，悬停状态就是个例子。鼠标无法实现触摸手势操作。小心这些限制和约束。
巴赫一直相信，钢琴上的每一个键都可以随意弹奏或者用来谱曲。他通过自己美妙的音乐证明了这一点，用方法制服了规则。
巴赫的平均律让作曲家和音乐家的手指能够随心所欲地跳动在钢琴上。
每一位设计师都想要在网页以及应用上构建伟大的用户体验，让设计超越媒介，在不同的设备上、不同的场景中表现出同样的惊艳。每一位设计师都想让设计具备更好的可用性以及可达性。这是设计师对用户的责任所在。
你，会怎样设计呢？
