UI设计中的格式塔原则

honghu2

UI设计中的格局塔原则

用户界面设计其实不满是关于标致的像素和闪亮的图形，它主如果关于沟通、机能和便当性。

你是不是曾察看过天空，注重到一团分歧平常的云，像一个认识的动物或物体？你有无想过，为甚么或若何经由过程察看一团疏松的气体来创建这类接洽？这都是由于你的大脑运作方法！



图一

你的大脑老是试图经由过程比力之前的履历或视觉模式来理解这个世界，并把这些点毗连起来。它有本身的“独特”方法来感知外形和情势，分组信息，弥补空缺，绘制大图。

领会你的大脑若何事情将有助于你成为一个更聪慧的设计师，把握视觉沟通的把持者。它可以帮忙你肯定在任何特定环境下哪些视觉元素是最有用的，是以你可以操纵它们来影响用户的感知、指导他们的注重力，并终极引发举动的扭转。这个法子对付以完成方针为导向、解决问题、偶然识设计、用户界面的设计上都非分特别有效。

“伟大的设计师理解生理学在视觉感知中的强高文用。当他人的眼光与你的设计创作相遇时，会产生甚么？他们对你所分享的信息有甚么反响？”

– Autodesk品牌内容策动师Laura Busche

如今很清晰，视觉设计和生理是互相接洽的，而且可以互相影响。格局塔原则可以帮忙咱们理解和节制这些接洽。
甚么是格局塔？
格局塔（德式造型）是20世纪20年月由德国生理学家提出的一组视觉知觉道理。它创建在“一个有组织的总体，被认为大于其各部门之和”的理论根本上。

“总体不是各部门之和。”

– 库尔托夫卡

格局塔原则试图描写当某些前提合用时，人们是若何对待视觉元素的。它们是创建在四个关头思惟的根本上的：
1.稻草网 呈现
人们偏向于经由过程物体的大略轮廓来辨认它们。相较于一个细节丰硕的物体，咱们的大脑能更快的辨认一个简明清楚的物体。



图二
2. 物化
人们可以辨认物体，即便它们有部门缺失。咱们的大脑将咱们所看到的工具与影象中的认识模式相匹配，并弥补空缺。



图三
3. 多不乱性
人们经常会用不止一种方法来诠释含糊其词的事物。咱们的大脑会在寻觅肯定性的选择之间往返穿梭。是以，一种视角将变得加倍主导，而另外一种视角将变得更丢脸到。



图四
4. 稳定性
人们在辨认简略物体时，不会遭到它被扭转、缩放、变形的滋扰。咱们的大脑可以从分歧的角度感知物体，虽然它们的外观分歧。



图五

如下是格局塔原则，它可觉得今天的UI设计供给参考。
临近
分列在相互之间的临近元素被认为比那些安排得更远的元素更相干。如许，分歧的元素重要被看做是一个组，而不是单个的元素。



图六
临近原则若何合用于UI设计？
咱们可以在UI设计中利用临近原则来分组类似的信息，组织内容和收拾结构。它的准确利用将对视觉交换和用户体验发生踊跃的影响。

如原则所述，相干的项目应当连结慎密的接洽，而不相干的项目应当连结更远的间隔。白色的空间在这里起着相当首要的感化，由于它缔造了比拟，指导用户的眼睛朝着预期的标的目的看。空缺可以加强视觉条理布局和信息流，便于浏览和阅读结构。它将帮忙用户更快地实现他们的方针，并深刻钻研内容。



图七

咱们几近可以在任何处所利用临近原则，从导航、卡片、图库和横幅到列表、正文和分页。
配合区域
与临近原则雷同，将安排在统一区域内的元素被视为分组。



图八
配合区域原则若何合用于UI设计？
配合区域原则出格有效。它可以帮忙信息分组和内容组织，但它也能够实现内容分手或充任核心。它晋升了条理布局，可扫描性，并有助于信息的推行。

配合区域的原则可以将很多分歧的身分组合在一块儿，使它们在更大的群体中连结同一。咱们可以经由过程利用线条，色彩，外形和暗影来实现它。它常常被用来使某个元素凸起，暗示交互@感%8kLB8%化或首%5T411%要@性。



图九

一个绝佳的应用大众区域理论的例子就是用户界面上的卡片；一个界说杰出的矩形空间，包括分歧的信息。横幅告白图跟表格也是很好的例子。
类似
与不具备类似视觉特性的元素比拟，具备类似视觉特性的元素被认为加倍相干。



图十
类似性原则若何合用于UI设计？
咱们偏向于把类似的元素看做是分组或模式。咱们也可能认为，它们的目标是不异的。类似性可以帮忙咱们组织和分类一个组内的工具，并将它们与特定的意义或功效接洽起来。

有不少分歧的法子可让元素们看起来类似，从而被用户认为是相互联系关系的。这些特性包含色彩、巨细、外形、纹理、尺寸和标的目的的类似性；此中一些比其他的更具寒暄力(比方色彩>巨细>外形)。当类似产生时，一个物体可以经由过程与其他物体分歧而获得夸大，这被称为“异样”，可以用来缔造比拟或视觉重量。经由过程增长可阅读性、可发明性和总体信息流，将用户的注重力吸引到某个核心内容上。



图十一

咱们可以在导航，链接，按钮，题目，呼唤动作等等中利用类似性原则。
闭合
一组元素凡是被认为是单个可辨认的情势或图形。闭合也产生在工具不完备或部门不封锁的时辰。



图十二
闭合原则若何合用于UI设计？
正如闭合原则所指出的，当咱们面临得当的信息量时，咱们的大脑会经由过程弥补空缺并建立一个同一的总体来得出结论。经由过程这类方法，咱们可以削减信息交换所需的元素数目，削减繁杂性，使设计加倍吸惹人。闭合可以帮忙咱们最小化视觉噪音并转达信息，在一个很小的空间内强化一个观点。



图十三

咱们可以在图象学中利用闭合原则，在这类环境下，简略有助于敏捷而清楚地转达意义。
对称
对称的元素常常被认为是归属在一块儿的，而无论它们之间的间隔，都给咱们一种安稳和有序的感受。



图十四
对称原则在UI设计中若何利用？
对称的元素简略、调和、雅观。咱们的眼睛追求这些属性，和秩序和不乱，以领会世界。是以，对称是快速有用地交换信息的有效东西。对称让人感受惬意，有助于咱们专注于首要的工具。

对称的构图是使人得意的，但它们也会变得有点烦闷和静态。视觉对称常常更具动态性和意见意义性。在肆意一种对称设计中参加不合错误称的元素都能让用户对这个元素印象深入从而吸引到用户的注重力，这类法子很是好用，好比当你但愿吸援用户乐趣、或像促成用户做出操作的时辰。



图十五

对付作品集泡泡交友、图库、产物展现、列表、导航、横幅和任何内容丰硕的页面，利用对称性都是很好的。
持续
分列在一条线或一条细曲线中的元素被认为比那些随机分列或分列在一条粗线中的元素更相干。
持续性原则在UI设计中若何利用？


图十六

持续线以后的元素被认为是分组的。线段越滑腻，咱们就越把它们视为同一的外形;咱们的脑子更喜好阻力最小的门路。

持续性帮忙咱们经由过程构图来诠释标的目的和活动。它是在对齐元素时举行的，它可以帮忙咱们的眼睛腻滑地在页面上挪动，帮忙咱们浏览信息。持续性原则增强了对分组信息的感知，缔造了秩序，并经由过程火星直播分歧的内容片断指导用户。间断持续性可以标记着一段内容的竣事，让人注重到新的内容。



图十七

行和列的线性分列是持续性的好例子。咱们可以在菜单和子菜单，列表，产物排布展现，轮播，办事或进程/进度显示中利用它们。
配合的运气
向统一标的目的挪动的元素被认为比向分歧标的目的挪动或底子不挪动的元素更相干。



图十八
配合运气原则在UI设计中若何利用？
不管元素有多远或它们可能呈现的差别几多，若是它们一块儿挪动或变革，它们都被认为是相干的。即便暗藏元素自己的真实活动，它的挪动结果也能够经由过程其它视觉元夙来反衬出来。

当元素挪动同步时，配合运气原则更有用; 在统一个标的目的，统一时候和速率。它可以帮忙将相干信息分组并将成果与举动接洽起来。同步活动的间断可以吸援用户的注重力并将其指导至特定的元素或特性。它还可以创建分歧分组或状况之间的瓜葛。



图十九

咱们可以把运气配合原则用在可扩大菜单、折叠条款、小提醒、滑块、转动条和手势操作提醒等。
结论
用户界面设计不但仅是标致的像素和闪亮的图形。主如果关于沟通，机能和便当性。格局塔原则老是可以或许帮忙咱们实现这些方针; 为用户缔造舒畅的体验，并为企业获得庞大乐成。

英文原文：GESTALT PRINCIPLES IN UI DESIGN

原文地点：

译者：板板，微信公家号：「微信ID：DR_DDC」

本文由 @板板 翻译公布于人人都是产物司理。未经允许，制止转载。

题图来自 Pixabay，基于 CC0 协定