前端交互视觉——众妙之门2

余果 2012-05-02 书

欣喜的是，继《众妙之门》之后，人民邮电出版社继续推出了《Smashing Book 2》的译本——《众妙之门2》。《众妙之门2》是一本大视角的前端设计类精选书籍，章节内容精选自Smashing Magazine网站。这不是第一本《众妙之门》的再版，而是一本全新的书。

1.大视角 具有不同背景、教育水平和经历的人对于设计有着不同的看法。平面设计师从一个角度看待设计，交互设计师从另一个角度看待设计，而程序员又从一个角度看待它。本书教会我从更大的角度来看待问题。

我是专职的前端开发，平时写代码和研究前沿CSS3/HTML5也比较多，所以有时候就会陷入到“为了上流而上流”的状态，我承认，自己有时候会更多地由于想用新技术的考虑，而不是公司目标的考虑而做出一些决策。

另一个例子是有的时候我会由于代码架构方便的原因，更喜欢复用模块。从代码的角度看这是对的，但我不知道对于公司目标来说有何帮助，我应该如何说服产品经理采用我的建议，我至多只能说“一致性更为美观”。

本书第八章《Web设计和用户行为的心理学》里说：“人们在一瞬间决定是否相信你的网站，这个决定是无意识的。”人们会不信任具有这些特点的网站：

• 使用了太多的字体和文字大小，并且给太多的文本着色。
• 页面上具有太多信息，并且看起来很混乱。
• 页面上具有太多动画，尤其是过时的业余动画。
• 屏幕上有太多的彩色区域，并且没有 把它们协调成一种颜色模式。

很棒！我们有自己的小视角，冥冥之中知道是什么可能是好的，但我们不知道原因，以上就是原因。从用户目标和商业目标两方面来考虑，就能扩展我们的视野，实现我们的价值。 2.理性 我喜欢给出统计结果的设计书，不喜欢讲大道理的设计书。

本书有一些非常好的例子，第九章《电子商务网站的设计模式》给出了大量商务网站的统计数据。这些商务网站都是国外的英文网站，因为中国人和外国人在不同的网络环境下，具有不同的心智模型，所以我们无法直接参考本章的统计结果，但对于统计方法我们是可以借鉴的。

我不喜欢很多玄乎的设计书，昏昏欲睡。我是很理性的人，希望设计师给我讲道理的时候给出统计、设计模式、心理学上的解释。

说到心智模型，第八章给出了非常精辟的解释。用户对于网站会有一个期待，这就是心智模型，网站的交互设计师需要做出一个交互原型来，就是概念模型。如果用户的心智模型和网站的概念模型是一致的，那么用户就没有学习成本，如果差异很大，用户就会困惑，或者需要培训。

用户的心智模型不一定是完美的，交互设计师不需要完全适应用户的心智模型。但是交互设计师需要理解用户的心智模型，从而知道如果需要改变心智模型需要做什么。

心智模型很多都可以提炼成设计模式（pattern），2.3分析了一些设计常见的pattern，3.3则分析了一些移动UI设计的pattern。

想起最近网易新闻发文控诉腾讯新闻抄袭其UI，我觉得手机新闻阅读的用户都会有一个类似的心智模型，而且手机上的pattern也就那么多，交互类似是非常正常的事情。像path那样创新的pattern才是非常了不起的进步。  3.跨学科 本书作者来自不同的领域，有心理学的，也有研究游戏的专业人员。从这些角度来看用户和网站的关系是非常有趣和启发性的。 4.精选 可能被问到的一个问题是：我看smashing magazine网站就好了，干嘛要花钱买书？

第十章作者有回答：“……在一个位置提供了所有的内容，具有组织合理的结构，经过了认真仔细的准备、更新和编辑，并且没有包含不必要的信息（比如广告），因此可以节省用户的时间。”

当然还有英文不好的同学，看中文能节省时间。

本书并不完美，有一些缺憾是因为翻译的原因，还有一些是因为中西环境差异的原因。

本书作者是来自全世界的作者，十几个人共同完成本书，而中文翻译却只有一人。所以某些章节的翻译质量就相对有点差了，比如第五章——web开发中的红旗。一方面是知识广度的原因，一方面也有精力的原因吧。

希望以后这种类型的书籍翻译也可以采用众包的模式，交给多个人来翻译。我会很乐意翻译前端方便的内容~

2.中西环境区别

第六章web版式的未来中讲到，字体是版式中非常重要的一个部分。其实在中文中，字体也不是那么重要。常用的字体只有雅黑和宋体。讲到版式就只涉及到行距、字距和边距了。本章花大功夫来写的英文字体都对国人没什么感触。

此外第十章——如何制作图书——讲了自己出版图书需要做的一些事（他们就是这样做的！）其实在中国大家都懂的，只能交由出版社。

希望编辑能在内容筛选上做一下二次过滤，引入一些更符合中国国情的部分。

下面我列出章节名称和对应推荐阅读的职业。不是鼓励各专业独立开来，只是作为参考信息。

ID (Interactive Designer) —— 交互设计师/产品经理

VD (Visual Designer) —— 视觉设计师

FD (Front-end Developer) —— 前端开发

第一章：优秀平面设计的原则 (ID/VD)

第二章：看得见的设计与看不见的设计 (ID/VD)

第三章：设计移动用户体验 (ID/VD/FD)

第四章：创建草图、创建线框和原型开发 (ID)

第五章：Web开发中的红旗（警告标志）(FD)

第六章：Web版式的未来 (VD/FD)

第七章：把游戏设计原理应用于用户体验设计 (ID)

第八章：Web设计和用户行为的心理学 (ID/VD)

第九章：电子商务网站的设计模式 (ID/VD)

第十章：如何制作图书（就像这本书一样）

我写字的地方迁移到公众号啦~欢迎关注我的公众号：余果专栏