恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
格式塔与设计
0.0°
2014-09-17 自译外文 经验/观点 原作者: Carolann Bonner 举报 34221 122 63 5

格式塔作为心理学上一个著名理论,强调的是整体性大于局部作用的重要性,灵活的利用格式塔理论我们将使我们的设计更加的易于用户解读。

现将使用频率最多的原则总结如下:

  • 相似性原则
  • 封闭性原则
  • 连续性原则
  • 闭合性原则
  • 邻近性原则
  • 图形与背景关系原则

我讲通过一些例子来描述每项原则,愿你能更好的理解。

相似性原则

人的潜意识会将视线内一些相似的元素自动整合成整体。


 

在众所周知的梵高名画《繁星》中,由于强烈的对比我们能轻易的识出夜空中的繁星:

•代表星星的圆球都是相同的黄色。

•绘制星星边缘的笔刷都是围绕着圆球中心的分布,且方向一致。

这两种相同的特性让我们轻而易举的将繁星从夜空中区分出来,并突出了繁星。

接下来我们观察Tumblr是如何应用相似性原则的。如下图所示,不同图标代表了发布博客的不同方式。

相似性体现在哪儿呢?

•每个图标下都有文字说明。

•图标的大小,文字说明的字体以及大小都是相同的。

•每个图标都被均匀的分布在了空间内。

从发布博客的过程中我们了解到什么?

•作为用户,我们知道这些图标都可以发布博客。

•我们也清楚的知道每个图标代表的不同意义,能满足我们不同的需要。


封闭性原则

当对象周围有环绕闭合的边界,视觉上会将此类目进行归纳分组。


我们将用Facebook页面的三个板块来讲解封闭性原则在交互中的应用。


第一,整体页面(截图中边框强调所示)。Facebook界面中有内容的页面都是白色背景,此外,通过浅灰色边框线将其与淡灰色背景相分离,形成封闭区域。

 

 

第二,正文页面。图片以及其所附加的标题,描述,成组展示,清楚的强调了页面所包含的主要信息。

 


第三,评论部分。社交板块所有的信息都是淡蓝色背景,以此形成一个封闭空间,用户可轻易的找到评论区。

 


这些封闭提供的功能可见性,将各个功能区分类,准确有效的显示了信息。


连续性原则

如果一个图形的某些部分可以被看作是连接在一起的,这些部分会被我们知觉为一个整体。


如图是Google Maps的路线截图,通常我们会把那一连串的小蓝点看作是一条路线。


在现实生活中我们的路线必定是一条线,但没有什么比虚线所展示的路线方向更为直观。通过GPS定位,地图中代表用户的小图标将根据用户的前进而在地图上移动,我们全然依靠蓝点组成的虚线为指引。

另一个应用了连续性原则是媒体播放器。

这条线所代表的是歌曲所播放的进程,当音乐播放时,颜色会发生改变。我们将第二个颜色的进程线作为第二线,随着音乐播放他会变长。当然,他不能超过初始线的长度。在此给我们的提示是当第二线与初始线完全重合,这段音乐即完成播放。

这种视觉效果的信息传达,我们不常用“名词”(箭头),而是“动词”(动效,播放进程中的交互)来阐述它。要知道这样会更直接的让用户了解播放进度。


闭合性原则

当图形是一个残缺图形,但主体有一种使其闭合的倾向,即主体能自行填补缺口而把其知觉为一个整体。

在Twitter的界面中,当你收到通知,一个显示了数字的方块会覆着在图标上。


直到阅读通知消息,这个提示消息都一直在。

仔细观察在The Urban Outfitters在线商店的网页,当你添加商品到购物车中会发生的一切。

 

• “添加到购物车”转换为“已添加”

•  添加数次会出现在导航栏中购物车的旁边

•  一个模块会从右上角向下滑,以再次确认你将添加商品。

一系列的提示都可知我们已经成功将商品添加到购物车,省去了再次打开购物车界面去确认的麻烦。


邻近性原则

空间中距离相近的元素会被看作一体。

如下是Twitter的个人信息界面:

头像,背景图,显示名称,用户名作为用户的基本信息成组显示。在用户基本信息之下则是用户在Twitter的使用情况。

截图中的粉色线覆盖在用户基本信息和Twitter使用情况之间,为这两区形成了分界,以避免由于位置的邻近而造成的信息混乱。

试看Twitter对临近性原则应用的另一个例子:

转发,收藏,还有评论推文等功能成组显示,且处在明显低于图文的位置。

粉色线条强调的部分显示了功能的分区,你能够根据数字与图标距离之间的远近来得知他们之间的关系。


留白

你可能一次次的听设计师说:我们需要更多的留白!而这种空白空间也就是负空间。

在很多情况下(并非所有),空白空间被用于形成封闭(在上文已经提到),是一种无形的边界。通过空白,我们能够清楚的区分各项临近的功能,使得整个页面看起来不那么复杂。

不用添加任何的线条,颜色或者其他元素就能够实现功能作用化。意味着没有任何元素的空白空间(负空间)在功能上等同于正空间。

这个想法也被应用在电话号码上。比起一连串的数字,我们更容易记住分段显示的号码。

E.g. 555-555-5555 vs 5555555555


图片与背景关系原则

在视觉传达中,有些对象突现出来形成图形,有些对象作为衬托成为背景。

  

在纽约时代的页面中,图片与背景关系原则体现如下:

•          白色,透明的背景减弱了你对原文内容的注意力

•          窗口四周还有着边界和轻微的阴影

在此你会自然的将登录窗口视作前景,而纽约时代主页作为背景。透明背景之下我们仍能够看清也看内容,可以知道我们并没有离开页面。当登陆之后,页面随即会发生改变,前景和背景的内容也将改变。

 

最小样式

 登录窗口的边界大约是1像素宽,阴影度也是相当微弱的,以保证视觉上的舒适。

当我们考虑最小样式时(与极简风格不同),我们必须知道:多少数值是我们尽可能做到能减少影响的。

Deiter Rams的终极原则曾说:尽可能的小,通俗点说就是在设计的过程中我们要避免过度设计,繁杂风格还有过多的步骤。

 

简化

一个界面的设计势必是融合了很多种不同的交互动作,在此我们希望的是尽可能用最少的动作来实现更多的操作。

如果我们不能做到这样,无关联的空白空间只能让用户烦扰。人们需要了解各项操作是如何实现整合来实现更优的交互体验。

 


希望你能应用上述的一系列原则,建立一个更直观的界面,为页面设计中所存在的问题找出合适的解决办法。

更新:2014-09-17

收藏

122人已收藏

Muselilys

Know your shabby.

  • 32

    作品

  • 501

    粉丝

  • 6

    关注

  • 设计师如何找到自己真正热爱的工作
  • 你的滚动条
  • Twitter设计总监谈“宏交互”
  • 乌托邦式UI构建者:Bret Victor
相关标签

    猜你喜欢

      2014-09-17 自译外文 经验/观点 原作者: Carolann Bonner 举报 34221 122 63 5

      格式塔与设计

      0.0°

      你确定要举报格式塔与设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年09月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      63
      122
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录