余果的博客

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

Introduction

user

余果

一个产品设计师。了解详情


Featured

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

余果

欣喜的是,继《众妙之门》之后,人民邮电出版社继续推出了《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网站就好了,干嘛要花钱买书?

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

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

缺憾

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

1.翻译

本书作者是来自全世界的作者,十几个人共同完成本书,而中文翻译却只有一人。所以某些章节的翻译质量就相对有点差了,比如第五章——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)

第十章:如何制作图书(就像这本书一样)

user

余果

一个产品设计师。 了解详情