童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

UI设计中的格式塔原则

5月25日 飞凤谷投稿
  用户界面设计并不全是关于漂亮的像素和闪亮的图形,它主要是关于沟通、性能和便利性。
  你是否曾经观察过天空,注意到一团不同寻常的云,像一个熟悉的动物或物体?你有没有想过,为什么或者如何通过观察一团蓬松的气体来建立这种联系?这都是因为你的大脑运作方式!
  图一
  你的大脑总是试图通过比较以前的经验或视觉模式来理解这个世界,并把这些点连接起来。它有自己的“怪异”方式来感知形状和形式,分组信息,填补空白,绘制大图。
  了解你的大脑如何工作将有助于你成为一个更聪明的设计师,掌握视觉沟通的操纵者。它可以帮助你确定在任何特定情况下哪些视觉元素是最有效的,因此你可以利用它们来影响用户的感知、引导他们的注意力,并最终引起行为的改变。这个方法对于以完成目标为导向、解决问题、无意识设计、用户界面的设计上都格外有用。
  “伟大的设计师理解心理学在视觉感知中的强大作用。当别人的目光与你的设计创作相遇时,会发生什么?他们对你所分享的信息有什么反应?”
  Autodesk品牌内容策划师LauraBusche
  现在很清楚,视觉设计和心理是相互联系的,并且可以相互影响。格式塔原则可以帮助我们理解和控制这些联系。
  什么是格式塔?
  格式塔(德式造型)是20世纪20年代由德国心理学家提出的一组视觉知觉原理。它建立在“一个有组织的整体,被认为大于其各部分之和”的理论基础上。
  “整体不是各部分之和。”
  库尔托夫卡
  格式塔原则试图描述当某些条件适用时,人们是如何看待视觉元素的。它们是建立在四个关键思想的基础上的:
  1。出现
  人们倾向于通过物体的粗略轮廓来识别它们。相较于一个细节丰富的物体,我们的大脑能更快的识别一个简明清晰的物体。
  图二
  2。物化
  人们可以识别物体,即使它们有部分缺失。我们的大脑将我们所看到的东西与记忆中的熟悉模式相匹配,并填补空白。
  图三
  3。多稳定性
  人们常常会用不止一种方式来解释模棱两可的事物。我们的大脑会在寻找确定性的选择之间来回穿梭。因此,一种视角将变得更加主导,而另一种视角将变得更难看到。
  图四
  4。不变性
  人们在识别简单物体时,不会受到它被旋转、缩放、变形的干扰。我们的大脑可以从不同的角度感知物体,尽管它们的外观不同。
  图五
  以下是格式塔原则,它可以为今天的UI设计提供参考。
  邻近
  排列在彼此之间的邻近元素被认为比那些放置得更远的元素更相关。这样,不同的元素主要被看作是一个组,而不是单个的元素。
  图六
  邻近原则如何适用于UI设计?
  我们可以在UI设计中使用邻近原则来分组相似的信息,组织内容和整理布局。它的正确使用将对视觉交流和用户体验产生积极的影响。
  如原则所述,相关的项目应该保持紧密的联系,而不相关的项目应该保持更远的距离。白色的空间在这里起着至关重要的作用,因为它创造了对比,引导用户的眼睛朝着预期的方向看。空白可以增强视觉层次结构和信息流,便于阅读和浏览布局。它将帮助用户更快地实现他们的目标,并深入研究内容。
  图七
  我们几乎可以在任何地方应用邻近原则,从导航、卡片、图库和横幅到列表、正文和分页。
  共同区域
  与邻近原则类似,将放置在同一区域内的元素被视为分组。
  图八
  共同区域原则如何适用于UI设计?
  共同区域原则特别有用。它可以帮助信息分组和内容组织,但它也可以实现内容分离或充当焦点。它提升了层次结构,可扫描性,并有助于信息的推广。
  共同区域的原则可以将许多不同的因素组合在一起,使它们在更大的群体中保持统一。我们可以通过使用线条,颜色,形状和阴影来实现它。它经常被用来使某个元素突出,表示交互作用或重要性。
  图九
  一个绝佳的运用公共区域理论的例子就是用户界面上的卡片;一个定义良好的矩形空间,包含不同的信息。横幅广告图跟表格也是很好的例子。
  相似
  与不具有相似视觉特征的元素相比,具有相似视觉特征的元素被认为更加相关。
  图十
  相似性原则如何适用于UI设计?
  我们倾向于把相似的元素看作是分组或模式。我们也可能认为,它们的目的是相同的。相似性可以帮助我们组织和分类一个组内的对象,并将它们与特定的意义或功能联系起来。
  有很多不同的方法可以让元素们看起来相似,从而被用户认为是彼此关联的。这些特征包括颜色、大小、形状、纹理、尺寸和方向的相似性;其中一些比其他的更具交际力(例如颜色大小形状)。当相似发生时,一个物体可以通过与其他物体不同而得到强调,这被称为“异常”,可以用来创造对比或视觉重量。通过增加可浏览性、可发现性和整体信息流,将用户的注意力吸引到某个焦点内容上。
  图十一
  我们可以在导航,链接,按钮,标题,呼叫动作等等中使用相似性原则。
  闭合
  一组元素通常被认为是单个可识别的形式或图形。闭合也发生在对象不完整或部分不封闭的时候。
  图十二
  闭合原则如何适用于UI设计?
  正如闭合原则所指出的,当我们面对适当的信息量时,我们的大脑会通过填补空白并创建一个统一的整体来得出结论。通过这种方式,我们可以减少信息交流所需的元素数量,减少复杂性,使设计更加吸引人。闭合可以帮助我们最小化视觉噪音并传达信息,在一个很小的空间内强化一个概念。
  图十三
  我们可以在图像学中使用闭合原则,在这种情况下,简单有助于迅速而清晰地传达意义。
  对称
  对称的元素往往被认为是归属在一起的,而不管它们之间的距离,都给我们一种牢固和有序的感觉。
  图十四
  对称原则在UI设计中如何应用?
  对称的元素简单、和谐、美观。我们的眼睛寻求这些属性,以及秩序和稳定,以了解世界。因此,对称是快速有效地交流信息的有用工具。对称让人感觉舒服,有助于我们专注于重要的东西。
  对称的构图是令人满意的,但它们也会变得有点沉闷和静态。视觉对称往往更具动态性和趣味性。在任意一种对称设计中加入不对称的元素都能让用户对这个元素印象深刻从而吸引到用户的注意力,这种方法非常好用,比如当你希望吸引用户兴趣、或者像促进用户做出操作的时候。
  图十五
  对于作品集、图库、产品展示、列表、导航、横幅和任何内容丰富的页面,使用对称性都是很好的。
  延续
  排列在一条线或一条细曲线中的元素被认为比那些随机排列或排列在一条粗线中的元素更相关。
  连续性原则在UI设计中如何应用?
  图十六
  连续线之后的元素被认为是分组的。线段越光滑,我们就越把它们视为统一的形状;我们的头脑更喜欢阻力最小的道路。
  连续性帮助我们通过构图来解释方向和运动。它是在对齐元素时进行的,它可以帮助我们的眼睛平滑地在页面上移动,帮助我们阅读信息。连续性原则加强了对分组信息的感知,创造了秩序,并通过不同的内容片段引导用户。中断连续性可以标志着一段内容的结束,让人注意到新的内容。
  图十七
  行和列的线性排列是连续性的好例子。我们可以在菜单和子菜单,列表,产品排布展示,轮播,服务或过程进度显示中使用它们。
  共同的命运
  向同一方向移动的元素被认为比向不同方向移动或根本不移动的元素更相关。
  图十八
  共同命运原则在UI设计中如何应用?
  无论元素有多远或者它们可能出现的差异多少,如果它们一起移动或变化,它们都被认为是相关的。即使隐藏元素本身的真实运动,它的移动效果也可以通过其它视觉元素来反衬出来。
  当元素移动同步时,共同命运原则更有效;在同一个方向,同一时间和速度。它可以帮助将相关信息分组并将结果与行为联系起来。同步运动的中断可以吸引用户的注意力并将其引导至特定的元素或特征。它还可以建立不同分组或状态之间的关系。
  图十九
  我们可以把命运共同原则用在可扩展菜单、折叠条目、小提示、滑块、滚动条和手势操作提示等。
  结论
  用户界面设计不仅仅是漂亮的像素和闪亮的图形。主要是关于沟通,性能和便利性。格式塔原则总是能够帮助我们实现这些目标;为用户创造愉快的体验,并为企业取得巨大成功。
  
  英文原文:GESTALTPRINCIPLESINUIDESIGN
投诉 评论 转载

UI设计中的格式塔原则用户界面设计并不全是关于漂亮的像素和闪亮的图形,它主要是关于沟通、性能和便利性。你是否曾经观察过天空,注意到一团不同寻常的云,像一个熟悉的动物或物体?你有没有想过,为什么……尼尔森10大可用性原则在Airbnb的应用本文聚焦Airbnb产品,描述10大可用性原则的应用场景,希望能够帮助你更系统地理解10大可用性原则。一、系统状态的可见性Visibilityofsystemsta……鹅厂设计师运营视觉设计经验分享:什么促使你点击?但凡能撩拨你情绪的,必将赢得点击。怎样的画面能让用户眼前一亮从而愿意点击?奇葩说、杜蕾斯、头号玩家这些爆款运营视觉设计是如何产生的?有没有一些底层规律和工具方法?对于许多……小米loT精益设计之路来自小米设计总监的分享本文作者将从三个方向(产品设计、米家App设计、插件设计),三个维度(社交网络、家庭关系、IoT大数据),来阐述小米“精准化设计精品化设计”思维,让你清晰了解小米生态链、智能家……从交互角度看微信订阅号改版微信最近刚刚更新了订阅号的展示逻辑,大家都在纷纷讨论订阅号的这次改版可能产生的影响。沐风今天从交互设计师的角度,解读微信的此次改版。1。更扁平的信息流微信公众平台的……取消、返回、关闭的交互逻辑平时在工作中取消返回关闭,都是为了解决页面的跳转逻辑,一般在页面的左上角,但到底什么时候用取消返回关闭,每个APP的做法都不太一样。本文主要以iOS的原生APP和各行业标杆的A……从生活细节看交互设计人机交互形式必然起源于人人交互,一个极为优秀的人机交互设计师,必然在待人接物上有着让对方舒适的处理方式。Livingbyempathicdesign,换位思考,先一步预测对方的……iOS设备4个常见的差异化设计这4个常见的差异化设计,同时也是符合iOS人机界面指南所描述的界面设计三大要点的:导航、视图、控件。最近入手了一台二手iPadmini2,体验了一些比较热门的iOS应用在……实例解析交互方案如何影响产品数据?设计目标是产品目标和用户目标的总和,好的交互设计方案是设计师平衡产品目标和用户目标之后得出的。许多互联网从业人员对“交互设计师的存在有什么意义”抱有疑问:在很多公司里,产……实例分析:交互设计如何提升产品转化率?本文作者结合自己所做的一些关于提升转化率的项目,就此为案例来探讨一下,在这个过程中,交互设计需要思考的方向。转化率,这是一个互联网团队经常会提及的名词,在某些团队里,转化……让设计师毁掉图标的6个诱惑设计图标的时候,一定要抵制住这6个诱惑!所有伟大的图标都是一样的伟大,所有失败的图标都玩着不一样的戏码。和绝大多数优秀的设计一样,最优秀最伟大的图标大多是隐形的。……如何遵守设计规范,才能获得最大收益?熟练掌握iOS、Android设计规范是一个设计师必备的工作技能,几乎每家公司都要求做自己的设计规范。当我们在工作中考虑去做一件事的时候,首先应当思考的是这件事情能带来什么收益……
UX设计中的环境元素思考短期记忆与用户体验:为脑力的局限而设计大型的视觉设计系统都是怎么设计出来的?聊聊保险电商的产品主图设计转场动效的5个核心规则日期选择器设计总结定义设计原则,驱动设计决策菲茨定律与未来交互方式浅析麦当劳玩具的微交互设计规范详解组件控件结构体系:导航类7种诀窍,创造利于记忆的用户体验为流畅的交互体验,创建完美的用户流程
明朝历史汉唐之后黄金时期天子守国门君王死社稷女子5天吃6斤车厘子中毒是真的吗今日星座运势美国神婆(美国神婆2021年星座大全)医院感染管理活动周实施方案郭碧婷这才是“嫁对人”的模样!穿条阔腿裤,仿佛走路都带风热评 42岁黄晓明身材管理到位拍大片秀肱二头肌满满荷尔蒙偏爱折火一夏(旧人折火一夏全文)AG战胜WE收获六连胜,一诺再现射手开团,世冠正赛近在咫尺热 青春毕业季语录精选中长发烫什么卷好看中长发如何打理博物记古早“鸡安碗”热博聚热点网 产假申请书

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界