为你的眼睛做UI设计-格式塔心理学应用于Web UI 设计 [
为你的眼睛做UI设计
格式塔心理学应用于Web UI 设计
本章内容组织结构--译者注
引言
界面设计不仅仅是将各种令人困惑的零零碎碎安排妥当，而是在给定的规则之内将产品的作用发挥到极致。并且简洁而不混乱，好看而不失内涵。
设计的难点在于人们一眼就能决定是否会继续使用你的产品。因为视觉是人类最主要的感觉。所以你设计的产品必须清晰而明确地提供其存在的价值与意义。
本书中，我们涵盖了体验设计、界面设计、和心理学的知识。初学者能学到怎样将格式塔的基本理论运用到Web UI设计当中，而中级读者能从反面教材中吸取教训，学习如何平衡界面元素之间的差异性与相似性，以及如何使用颜色来表达相应的情感。
为了使本书更加实用，其中包含了33个公司的案例分析。其中包括Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom, Bose, AIGA 等等。
像大多数的电子书，本书简单易读，实用性强。我们将各种理论分解，分析好的设计到底好在哪里，并且通过案例来教会你如何运用这些理论。
我们很高兴能分享我们的知识。如果这本书对你有所帮助，我们会很欣慰。
致UI设计爱好者
Jerry Cao
Kamil Zieba, Krzysztof Stryjewski, and Matt Ellis
格式塔心理学应用于Web UI 设计
不得不承认，生活中我们经常或被幻觉所欺骗。
眼睛是如何欺骗大脑让人惊奇，但更神奇的是视觉会覆盖其他感觉。格式塔学说指出视幻觉是视觉科学。
Photo credit: “Duck Rabbit Illusion.”Wikipedia. Creative Commons 2.0.
格式塔原则分析我们视觉的灰色地带。那些原则解释了人们是如何看到事物及事物在布局、透视、大小等等方面是如何挑战我们的视觉经验的。
我们来简要的看一下格式塔的内容和在实际UI设计中的应用。
Gestalt principles bring to light the grey areas of human vision
格式塔设计原则的基础
格式塔来源于德语，代表“形状、结构”，在20世纪早期被用于描述心理活动。
Photo credit: “Gestalt Principles Composition.”Wikipedia.Creative Commons 2.0.
在1910年，心理学家Max Wertheimer 铁路的灯光在开关时会产生一种幻觉好像灯光会在一个圆中移动，即使并没有经过特意的控制。这种我们我们看到的幻觉和实际物体之间的差异促使格式塔几十年接下来的发展。
在Wertheimer 和他的同事对于视觉观察方面的理论发展了将近5年之后，他的这套理论就运用在了web 设计上了。这套理论解释了亚里士多德简单而经典的一句话“事物的整体比将其拆分后的部件奇妙得多”同样这句话也适用于视觉方面。在视觉观察领域，这些理论尤其适用于web UI 设计。
让我们看一下4条格式塔原则
1. 整体性
当我们尝试分辨一个物体时，我们的眼睛试着找出物体的轮廓，然后去比对脑中的记忆。当我们观察到一个物体整体的一部分时，我们会通过其大致的轮廓鉴别出来。
这张图经常用来解释格式塔原则。我们能一眼看出这是一条狗，而不是“一只脚、一个头、然后把它们拼起来。。。”
web设计中的应用 ：形状和轮廓应该优先于更少的细节（无论细节多么高大上）。如果用户不知道一个按钮是可以点击的，那么这个按钮再怎么花哨都毫无用处。 就像我们在Interaction Design Best Practices中讲的这些符号具有释义功能（功能可用性）
2. 具化性
当视觉刺激太不协调时，我们的大脑会自动填充丢失的信息。这能帮助我们在视觉受限或模糊时理解我们所看到的东西。
Photocredit: “Rei cation.”Wikipedia. Creative Commons 2.0
上面的每一个图片都耍了一点小把戏。在现实生活中，它们都是模糊的不完整的图形，但是我们的大脑仍然能赋予了它们意义。例如在A图中，我们的大脑理解成3个黑色的圆通过一个白色的三角形连接了起来。
web设计中的应用 ：近距离在web 设计中是有一定用处的。只要你提供足够的信息将其联系到一个物体，你的用户就会感受到这一点并填补中间的空白。这意味着你要适当留白，将留白当成是一种设计工具而不仅仅是空白。
Treat white space as a design tool,not as an empty canvas.
3. 组织性
如果一个物体有一种以上的解释，我们的大脑在同一时间只能予以一种解释方式，不可能同时看到两种及以上的解释方式。我们盯着一种理解方式的时间越长，这种解释方式就越占主导作用。
Photo credit:“My Wife and Mother in Law.” Wikimedia.Creative Commons.
这是一张的的视幻觉图片，我们能够看到一个年轻的女人或者是一个老太太。但我们不能同时看到这两种解释方式。
web设计中的应用 ：设计中避免多种解释方式。对你的设计进行多次检查，以防用户可以以多种角度理解你的设计。通过界面设计影响用户的使用体验及使用行为。可用性测试能够帮助你发现这些问题，即使测试者是个小白。
4. 恒常性
就像具化性，恒常性使我们大脑理解视觉矛盾的另一个策略。不管物体如何旋转、透视、角度改变甚至轻微畸变我们都能认出这个物体。
Photo credit: “Invariance.”Wikimedia.Creative Commons.
在以上的例子中，我们能分清A和B，即使他们长得很像。同样我们也能理解A、C、D是同一种物体，即使他们被分开了。
web设计中的应用 ：也许恒常性不想其他格式塔原则一样对web 设计有直接的影响，但是它经常被运用于图灵测试（一种区分人和计算机的程序），恒常性是人类仍然超越计算机的方面。
5个最有用的格式塔原则
1954年，在Wertheimer首次在火车灯光中发现视幻觉后的十几年，Rudolg Arnheim将格式塔原则写进Art and Visual Perception:A Psychology of the Creative Eye.按照Carolann Bonner的建议，在设计中有5个经常使用的原则：
1.相似性
2.主体背景关系
3.组织
4.闭合
5.延续
1. 相似
当物体看起来相似时我们就认为们是相似的。
在web 设计领域为了能最快最简单的传达出信息，所以存在很多暗喻。通过视觉上将物体设计得相似，我们就能直观的表达其中的含义。
只需惊鸿一瞥就能发现相似性。在以下设计机构Green Chameleon给出的案例中导航栏图标看起来都不一样，但是在颜色、大小、位置、间距都暗示着各个图标代表着的网页导航设计中的同一层级（最高层级）。
Photo credit:www.greenchameleondesign.com
在悬停操作方面，一个交互动作就是悬停在图标上，会有文字滑出对其进行深一层次的解释。这种交互方式在垂直导航方面应用较好。它不仅节省了空间，而且没有牺牲其功能（使图标的隐喻变得有意义）。
这些属于交互模式和一致性，在Interaction Design Best Practices中有所讨论。一个好的设计师会运用相似性原则来表意的同时优化用户体验。
2. 主体背景关系
元素被分为主体和背景。Steven Bradley 列出了3中主题背景关系。
Photo credit:www.moddeals.com
在上面的例子中，Moddeals展示一个图案时使用了主体与背景关系的方法。当小广告跳出来时，页面其他部分变灰，层级退后为背景。另外用户仍然能够滚动页面，但是小广告仍会在那里，从背景里独立出来。
Photo credit:http://tannbach-modul.zdf.de/
在主题背景关系方面为德国电影Tannbach设计的网站运用得更加细致。
为了强调电影中的人物关系，设计师让两个模特清晰的立于模糊的背景中，通过运用颜色和排版，真正的界面变成了首要层次，而这对情侣变成了第二层次。其结果是用户视觉上盯着这对情侣同时也能在网站中浏览。
这绝对是格式塔原则的绝佳应用，当你把主体清晰地显示在一个模糊的背景上时你不用刻意去解释它的意义。
3. 组织性
不相同的项目仍然可以被放在一起，并看起来相似。格式塔原则建议至少使用2种方法来组织物体显示它们之间的关系：
围绕 — 将不相似的物体通过明确的界限围绕起来能够使它们在用户眼里有关系的。
接近 — 相互靠近的物体会看起来相似，特别是和其他的组别相距较远时。这和Hick’s Law 中的时间与空间元素相关联，同样在Interaction Design BestPractices也有所描述。
Photo credit:www.facebook.com
上面的Facebook网站的例子运用了围绕和接近的原则。
整个的页面—标题、照片、描述、评论等等都是封装在一个线框里的，与灰色的背景分隔开，同时运用了围绕和主体背景关系原则。在页面里，像“Like”,“Comment”和“Share”紧紧地靠在一起，暗示着它们都是个人与该页面之间的交互接触点（不涉及它们在字体、大小、颜色方面使用的相似性原则）。
将操作按钮放置于相关项目旁边，用户则省去了寻找、记忆、以及更深层次的挖掘。通过更简单的点击用户与其目标之间的距离被缩短了。通过复杂的解释将系统简化帮助用户达到心理预期。
4. 闭合
根据我们刚才谈到的具化性原则，闭合原则就是通过在物体之间添加间隙将事物分隔开。设计师可以充分利用这一点，首先在局部设计时留下一些空隙，然后通过极简主义的宣扬传达出优雅的格调。
下面是Abduzeedo网站栅格化输出的例子。即使在各块内容之间并没有明显的界限，但是三个图片依次排列将三块栏目相互分开而不是一大块。
Photo credit:www.Abduzeedo.com
闭合原则在交互方面也有应用，在动作（button）之间增加间隙传达出了一种意义。
Photo credit:www.UrbanOut tters.com
设计师Carolann Bonner 说：Urban Outfitters 的用户通过闭合原则可以跳过许多步骤，让“Add to Bag” 这个动作更加顺畅。点击查看“Add to Bag” 让我们分析一下其中的步骤。
1. “Add to Bag” 按钮变成“Added!”
2. 在导航栏中的购物袋图标旁边的数字变成1
3. 从购物袋下拉一个对话框从视觉上确认了该物品已经添加到购物车了。
最后我们已经清楚地知道一个物品已经添加到了购物车里了，我们不需要再到购物车中去确认及修改物品（可能增加交互障碍）通过正确地省略步骤，界面在提供充足的反馈同时将交互轻量化。Andy Rutledge wrote an excellent piece提供了更多闭合原则在web UI 设计方面的运用。
5. 延续性
和闭合相关，延续性原则阐释了用户的视觉有一种从一个物体到另一个物体的趋势，在设计布局时直线具有强大的视觉趋势。
在下图中人们能够看到一条直线和一条曲线，而不是一条弯的蓝线和一条弯的绿线。这使延续性比颜色优先级更高，延续性是一种很好地能够展现物体之间的相似性的工具。
Photo credit:www.uxpin.com
这就意味着用户会将排列成直线或曲线的事物视为同一类事物。
延续性在站点导航时会很有用，排列成同一直线的项目将会视为同一层级。
在CreativeBloq的导航栏的第一排所有的导航项目代表了网站内容的种类。在导航栏第二排代表了内容的分类。因为运用了延续性原则，网站不需点明其中的差异。
Photo credit:www.creativebloq.com
更多格式塔原则，查看helpful tutorial。
小结：
理解格式塔原则让我们更好的管理视觉层级，帮助设计出更舒适的作品，增加与用户之间沟通的可能性。将普遍原则—整体性、具化性、组织性、恒常性和细化原则—相似、闭合、主题背景关系等等融合起来将会使web界面设计提升一个等级。
