想学习更多关于网页前端设计的技巧,网页排版的知识可以去学习一下《欧美范网页设计实战课程》,相信你将会有更多的收获~

你有没有注意到天空中有一种异常形状的云,类似于熟悉的动物或物体?你有没有想过,为什么或如何通过看一个蓬松的气体块来建立这种联系?这都是因为你的大脑是如何工作的!

你的大脑总是试图通过比较以前的经验或视觉模式和连接点来理解世界。它有自己的“奇怪”的方式来感知形状和形式,分组信息,填补空白,画出大局。

了解你的大脑是如何工作的会帮助你成为一个更聪明的设计师,掌握视觉传达的机械手。它可以帮助你确定哪些视觉元素在任何给定的情况下都是最有效的,所以你可以使用它们来影响感知,直接关注并引起行为改变。当涉及面向目标、解决问题、直觉设计时,特别有用的是:用户界面设计。

“伟大的设计师理解心理学在视觉感知中的强大作用。当某人的眼睛满足你的设计创意时会发生什么?他们的思想如何反应你的作品分享的信息?“——Autodesk品牌内容策划师Laura Busche

很显然,视觉设计和心理学是相互联系的,可以相互影响。格式塔原理有助于我们理解和控制这些联系。

格式塔原理是什么?

格式塔(德国的形式、形状)是20世纪20年代德国心理学家开发的一组视觉感知原理,它建立在“一个有组织的整体,被认为大于其部分之和”的理论之上。

“整体不是部分的总和。”—— — Kurt Koffka

格式塔原理试图描述人们在特定条件下如何感知视觉元素。它们是建立在四个关键理念上的:

1.出现

人们倾向于以一般概括的形式来识别元素。我们的大脑识别一个简单、明确的对象比一个详细的对象要快。

2.物化

即使有部分缺失的人也能识别物体。我们的大脑与我们记忆中熟悉的模式相匹配,并填补了空白。

3.多重稳定性

人们通常会用不止一种方式解释不明确的对象。我们的大脑会在寻求确定性的替代品之间来回跳动。结果,一个观点将变得更占主导地位,而另一个观点将变得更加难以理解。

4.不变性

人们可以独立于旋转、缩放和翻译来识别简单的物体。我们的大脑可以从不同的角度感知物体,尽管它们的外观不同。

下面是格式塔原理,我们可以运用它来UI设计。

接近

彼此靠近放置的元素比分开放置的元素更会被感知。这样,不同的元素主要被视为一个组,而不是作为单个元素。

接近原则如何应用于UI设计?

我们可以在UI设计中使用邻近原则来分组相似的信息、组织内容和整理布局。它的正确使用将对视觉传达和用户体验产生积极的影响。

原则上,相关的项目应该保持密切的联系,而无关的项目应该进一步分开。留白在这里起着至关重要的作用,因为它产生对比度,引导用户的眼睛在预期的方向。留白可以提升视觉层次和信息流,有助于易于阅读和扫描布局。它将帮助用户更快地实现目标并深入研究内容。

从导航、横幅到列表、正文文本和分页,我们几乎可以将邻近原则应用到任何地方。

公共区域

类似于接近原则,放置在同一区域内的元素被认为是分组。

通用区域原理如何应用于UI设计?

公共区域原则特别有用。它可以帮助信息分组和内容组织,但它也可以实现内容分离或作为焦点。它增强了层次性,可扫描性,并有助于促进信息。

公共区域原则可以将许多不同的元素保持在一起,使它们在更大的群体中统一。我们可以通过线条、颜色、形状和阴影来实现。它通常可以用来将元素引入前景,指示交互或重要性。

一个很好的公共区域例子是UI模式;一个定义良好的矩形空间,具有不同的信息位。banner和列表也是很好的例子。

相似性

有相似的视觉特征的元素被认为比那些没有相似特征的元素更被人感知。

相似原理在UI设计中如何应用?

我们倾向于感知彼此相似的元素分组。我们也可能认为它们有同样的用途。相似性可以帮助我们组织和分类一个组内的对象,并将它们与特定的含义或功能联系起来。

有不同的方式使元素被认为是相似的,因而是相关的。它们包括颜色、大小、形状、质地、尺寸和取向的相似性,其中一些颜色比其他颜色更为强烈(颜色>大小>形状)。当相似性发生时,物体可以通过与其他物体不同而被强调;这被称为“异常”,并且可以用来产生对比度或视觉重量。它可以吸引用户对特定内容(焦点)的注意,同时协助可扫描性、可发现性和整体流程。

我们可以在导航、链接、按钮、标题、命令动作等方面使用相似性原则。

闭合

一组元素通常被认为是单个可识别的形式或图形。闭合也发生在物体不完整或部分不被封闭的情况下。

闭合原理如何应用于UI设计?

当闭合原理陈述时,当我们提出正确的信息量时,我们的大脑会通过填补空白和创建一个统一的整体而得出结论。通过这种方式,我们可以减少沟通信息所需的元素数量,减少复杂性,使设计更具吸引力。闭合可以帮助我们最小化视觉噪声和传达信息,加强概念在一个相当小的空间内。

我们可以在logo中使用闭合原理,有助于快速、清晰地传达意义。

对称性

对称元素往往被认为是归属在一起,不管它们的距离,给我们一种坚定和秩序的感觉。

对称原理在UI设计中如何的应用?

对称元素简单、和谐、视觉愉悦。我们的眼睛寻求这些属性以及秩序和稳定性。因此,对称性是快速有效地传递信息的有用工具。对称感让我们专注于什么是重要的。

对称的组合物是令人满意的,但它们也会变得有点钝和静态。视觉对称往往更具动态性和趣味性。将不对称元素添加到另一个对称的设计中,有助于吸引注意力,同时也能产生印象;例如,可以用于对于任何兴趣点或调用动作都有用的东西。

在画廊、产品展示、列表、导航、横幅和任何内容重页中使用对称性是很好的。

延伸

在直线或曲线中排列的元素被认为比随机排列或在苛刻线中更吸引人。

连续性原理在UI设计中的应用?

连续性的元素被认为是分组的。线段越平滑,我们越能看到它们是一个统一的形状;我们的思维更倾向于阻力最小的路径。

连续性帮助我们通过构图来解释方向和运动。它发生在对齐元素,它可以帮助我们的眼睛顺利通过页面,协助易读性。连续性原则增强了分组信息的感知、创建顺序和引导用户通过不同的内容片段。连续性的中断可以指示一个部分的结束,注意一个新的内容。

行和列的线性排列是连续性的好例子。我们可以在菜单和子菜单、列表、产品配置、转盘、服务或进度条显示中使用它们。

共同命运

朝向同一方向移动的元素比在不同方向移动或者根本不移动的更被感知。、

共同命运原则在UI设计中怎么应用?

不管元素的相距有多远,或者它们看起来不一样,如果它们移动或改变在一起,它们被认为是相关的。这种影响甚至可以在其他视觉元素的运动暗示时发生。

当元素同步运动时,共同命运原则更有效;在相同的方向上,在同一时间和速度上。它可以帮助将相关信息分组,并将结果与动作联系起来。同步运动的中断可以吸引用户的注意力并将其引导到特定的元素或特征。它还可以建立不同组或状态之间的关系。

我们可以使用共同的命运原则在可扩展菜单,工具提示,产品轮播,视差差异和指示按钮中运用。

结论:

用户界面设计并不是关于漂亮的元素和闪闪发光的图形。主要是沟通,性能和便利性。格式塔原理帮助了我们实现这些目标,为用户创造一个愉快的体验,为企业带来巨大的成功。

如果你喜欢这篇文章或觉得它有用可以点❤~ 也可以扫下图二维码进群交流哦!

如何成为视觉传达的大神——格式塔原理相关推荐

  1. go interface 转int_大神是如何学习 Go 语言之反射的实现原理

    反射是 Go 语言比较重要的一个特性之一,虽然在大多数的应用和服务中并不常见,但是很多框架都依赖 Go 语言的反射机制实现一些动态的功能.作为一门静态语言,Golang 在设计上都非常简洁,所以在语法 ...

  2. ssm框架requestmapping找不到_从MVC原理开始手敲一个MVC框架,带你体会当大神的乐趣...

    每一个程序员,在刚入行时学的第一个框架应该就是ssm了,其他的各种学习框架都是后期在工作中,随着业务的不断复杂,在工作和bug中不断成长起来的,但是最经典的应该还是最一开始的时候ssm框架吧 当时刚学 ...

  3. c lambda表达式 select 改变字段名称_大神是如何学习 Go 语言之浅谈 select 的实现原理...

    很多 C 语言或者 Unix 开发者听到 select 想到的都是系统调用,而谈到 I/O 模型时最终大都会提到基于 select.poll 和 epoll 等函数构建的 IO 多路复用模型,我们在这 ...

  4. 星火视频计算机原理,各专业上岸大神助你搞定专业课!| 初试专业课冲刺经验贴合集...

    原标题:各专业上岸大神助你搞定专业课!| 初试专业课冲刺经验贴合集 距离2021考研仅有 23天,为了能够帮助大家更高效地把握住考前最后的时间,小招特地收集了多篇学长学姐们的经验贴,从中整理出Hust ...

  5. linux写脚本实现作业检查,救大神帮忙调试linux系统上用qsub提交MS作业的脚本,万分感激!!! - 第一原理 - 小木虫 - 学术 科研 互动社区...

    在linux系统上已经安装好了MS8.0,也设定好了环境变量,可以直接用RunVASTEP.sh -np 24 job_name & 提交作业,但是不能分配节点,qstat也看不到作业.现在想 ...

  6. !!! 格式塔原理及应用

    http://blog.myspace.cn/e/405054695.htm 格式塔原理及应用 格式塔心理学派断言:人们在观看时眼脑共同作用,并不是在一开始就区分一个形象的各个单一的组成部分,而是将各 ...

  7. 这个得学起来!超实用的格式塔原理小科普

    编者按:看了那么多的格式塔科普文章,仍然不懂?有这篇就够了!想要在界面排版.网页设计中让整体视觉井然有序,舒服协调,格式塔就是必须掌握的知识咯,今天的教程用深入浅出的方式给同学们科普格式塔原理以及在设 ...

  8. 怼完Sophia怼深度学习!细数完大神Yann LeCun 这些年怼过的N件事,原来顶级高手是这样怼人的...

    图片来源:PCmag.com 十多个小时前,深度学习大神Yann LeCun语出惊人,他宣布放弃"深度学习"这个词.因为媒体对这个词的炒作言过其实,混淆了大家真正的工作,而&quo ...

  9. 一周AI回顾 | 特斯拉AI负责人说神经网络正在改变编程,机器学习大神Bengio新论文专注RNN优化

    本期一周AI看点包括行业热点.投融资.业界观点.技术前沿以及应用等方面. 行业 英特尔将同AMD合作PC芯片 共同对抗英伟达 <华尔街日报>援引知情人士的消息称,英特尔将发布一款移动处理器 ...

最新文章

  1. 全变量进气系统伺服马_三种伺服电动缸系统的特点
  2. [IE9] 如何让你的网站在IE9和Win7任务栏上更闪亮
  3. 勤于思考:从客户端中检测到有潜在危险的 Request.Form 值
  4. PHP IDE phpstorm 快捷键
  5. 5.jQueryAjax
  6. CSS3之background的调整和增加的属性
  7. Linux服务部署之NTP时间服务器
  8. Android设计模式之——解释器模式
  9. 一声叹息:我们内心里的那些恶毒
  10. 模块A:大数据平台搭建(容器环境)
  11. 系统架构师成长之路(二)
  12. 数据结构与算法学习笔记02-单向链表
  13. 字节跳动面试官:千峰java培训多少钱
  14. (转)高盛报告:人工智能、机器学习和数据将推动未来生产力的发展
  15. 调用百度地图API实现动态走航路线图
  16. 短视频入门,第一步应该如何做?超详细,3分钟学会轻松上手
  17. 抖音小店开店前要准备什么?入驻流程是什么?
  18. html简洁的错误页面设计,40个非常有创意的404错误页面设计
  19. sql数据库质疑恢复办法
  20. 【docker】ubuntu18.04 安装 python3、vim、rz

热门文章

  1. vc2010设置为静态编译
  2. BSCI验厂13个执行领域注意事项分享
  3. 微博营销之微博软文撰写的几个技巧
  4. VMware虚拟机电脑硬盘如何分区图文详细教程
  5. 多项式加减(数据结构乱杀+完整实验报告)
  6. redis未授权访问致远程植入挖矿脚本
  7. 明洋智能电表架构信息
  8. VIEWGOOD(远古)大科普:高清直播技术在网络电视中的运用
  9. 人类基因组计划完成20周年,发现DNA双螺旋结构70周年
  10. ERROR c.a.d.p.DruidDataSource - [init,905] - init datasource error, url: jdbc:mysql://xxx.xxx.xxx.xx