你的设计为什么不好看?设计狮法宝——格式塔原理

原创 admin  2018-10-12 11:20:04  阅读 39 次 评论 0 条

格式塔原理——图形与背景、接近、相似、闭合、连续、简单、均衡

——格局塔心理学科是认知心理学中的一个重要理论,在视觉规划中已经有较大的影响。若去深究格局塔原理,或许需求适当长的时刻来学习了解,作为交互规划师和界面规划师,其实只需了解这几个原理的意义和使用方法,就可以对自己的规划做出辅导和支撑了。
下面来谈谈我自己对这些原理的了解:

图形与背景原理

——知觉协助咱们把图形从布景中分离出来。图形与布景的比照越大,图形的概括越显着,则图形越简单被发觉。

图例:当白色方块越来越大,它就逐渐的退居为布景,而橙色方块从布景逐渐的变为了图形。通过面积、颜色、概括等等,咱们能够较好的掌握图形与布景的联系。



实例:将签名档文字灰化,降低与布景的比照,使得签名档文字比昵称和头像更挨近布景,起到了弱化的效果。





接近原理

——间隔(方位)附近的各部分趋于组成全体。这是最简略、也是最常用的原理。

图例,知觉上更倾向于意识到“3组圆”,而不是“6个圆”:



一个最简单的应用实例:6个一排的按钮看上去有点多,而且“过”也混在其中了,将6个按钮的距离分开一点点,就可以将按钮分为两组,从而解决了问题。




另一个事例,产品想要在奖状面板上加一个共享按钮,交互建议按钮放在奖状外,由于奖状上加大按钮简单损坏奖状本来的全体感(从而可能要修正奖状),而共享按钮可能在除奖状外的多个图形上用到,导致对按钮的习惯度要求变高:
计划1——需求(请疏忽按钮颜色和质感,这并不是视觉稿)


计划2——交互计划(策划担心此计划会导致在较花的游戏界面中,按钮和奖状看上去不是一个全体)(请疏忽按钮色彩和质感,这并不是视觉稿)



实际效果——仍是觉得“共享给老友”是针对奖状的,对吗?这正是“挨近原理的力气”(假如再经过程序,给两块都加上一些暗影,就更全体了——类似原理)


相似原理
——在某一方面相似的各部分趋于组成整体。


图例,知觉上更倾向于意识到“3组圆(接近)”或“2种圆(相似)”,而不是“6个圆”:



实例:想想看,如果第二排按钮也是彩色…^_^




实例:利用相似的样式,使知觉自己将其编组。这个原理其实已经用的很多,就不多说啦。


闭合原理
——彼此相属、构成封闭实体的各部分趋于组成整体。


图例:知觉上更倾向于意识到“1个圈和1个点”,而不是“9个圆”:



实例:左右两个方案哪个看上去更简洁生动呢?




连续原理
——在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。


图例:知觉上会弱化这些分割所带来的“块”,而依然意识到“直线、圆、曲线”。



实例:最常见的就是表格了:




有时分为了简化界面,会去掉一些分隔线,导致“接连感”变弱,而“接近感”变强,使得感觉上更倾向于意识到“列”,而用户沉着受骗然会想要去当作“行”,这种沉着与情感各走各路的时分,就会带来不舒适的感触。此时咱们通常会树立一个“接连感“,一个起“引导、学习、辅助阅览”效果的条状布景,树立了一个“接连的规则“,当感觉意识到这个规则,不舒适的感触就会大大下降。




当然“连续“我们也可以解读为”当知觉轻松的发现一个视觉规律后,倾向于主动的将对象按照规律延续下去“,例如”一排点“




简单原理
——具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。


图例1:知觉上更倾向于意识到“1个对称的图案”,而不是“7个符号”:



图例2:下面四个图形的认知难度大约是“圆≈方≤星<多边形”。




个人认为,简单原理还可以解释为“与过去学习到的规律一样的、相似的对象更容易认知”,当然这其中也有“连续原理”的知觉连续性。
均衡原理
——知觉倾向于寻求视觉组合中的秩序或平衡。


图例:有没有觉得很不舒服呢?因为知觉会认为大圆更重,而图形给我们的理解与知觉正好相反。



如果改成这样,似乎好了很多,因为“空心“降低了大圆的”重量“。



实例:图1中,感觉给咱们的感触是“一个全体的小人站在布景上(QQGAME中最多的就是这种Avatar)“,而图2毫无预兆的”肢解“,打破了图1带给咱们的全体感,感觉上就会觉得不舒适。图三则做了一个窗户,让角色从窗户中钻出来,躲藏了一部分身体,奇妙地满意了感觉要求的调和感。





本文地址:http://www.uiwhy.cn/uistudy/uipost66.html
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?