设计动态 产品设计 交互设计 经验分享 设计教程 全部文章

经验分享

做UI设计更重要的是读懂设计背后的认知心理学

首页  /  文章  /  经验分享  时间:2016-12-28  来源:互联网

  设计其实是一件非常“不靠谱”的靠谱工作,听起来很拗口,但其实真正做设计的人都知道,在新的移动互联网时代,一个好的设计不是靠美与丑来简单评判的。

  设计不是随心所欲的天马行空,也不是人云亦云的盲从,要懂的背后的准则才能设计出靠谱的产品。

  认真研读《认知与设计-理解UI设计准则》记下读书笔记。

  我们的感知存在偏差

  我们的视觉经过优化更容易看到结构

  我们探索和利用视觉结构

  1.我们的感知存在偏差

  我们对周围的感知受到过去+现在+将来三方面的影响

  (1)经验影响感知(过去)

  如下图所示:

  如果此时是房地产经理给你看此图,会看到5个建筑物排成一排。

  如果广告公司经理给你看此图,会看到四个白色字母LIFE。

  你看到的,是别人告诉你看到的是什么。

  心得:必要的文案提示,可以给用户先入为主的意识。

  心得:设计产品时,一定要给用户画像,分场景,分类型如:新用户,活跃用户,专家用户等,因为不同场景的心智模型影响用户在各个场景下的期待。

  (2)环境影响感知(现在)

  下图中,蓝色线条其实是一样长的,但是视觉却骗了我们,因为我们的感知是受环境影响的。

  (3)目标影响感知(未来)

  目标决定了看到的结果。

  如,给你一个任务,去新浪云查看MySQL的价格,当你查看完了再问你是否提供了CDN服务?虽然都在一个页面里,但是你可能完全不记得看到过这个。因为带着目标去查看,其他因素都被忽略了。

  心得:你看不到与你目标无关的东西。

  心得:设计时要将影响感知的因素考虑在内

  1.避免歧义(若不能,文案注释告知)

  2.保持一致

  3.理解用户目标

  2.我们的视觉经过优化更容易看到结构

  我们的视觉是整体的,自觉对视觉输入构建结构,这就是格式塔原理

  格式塔原理:

  (1)接近性

  上图我们可以看出,左边是两行雨滴,右边是两列雨滴,我们会自觉的给雨滴根据他们的距离分组。靠近的看成一组。

  (2)相似性

  我们可以看到,居左,居中,居右,两端对齐,四种方式样式很相似,能明确的感觉出是属于一组。

  (3)连续性

  视觉会填补遗漏部分。如下图,虽然右侧点吹风没有画完整,但是我们依然能认知出他是电吹风。

  如下图,虽然是非连续色块,我们依然可以很容易看出是IBM

  (4)封闭性

  视觉系统强烈倾向于看到物体,一部分可见的对象会被感知为一个物体

  (5)对称性

  视觉系统会根据对称性原则脑补出完整的图像

  (6)主体/背景

  背景中要传递信息,按时主体,显示品牌气质,有助于内容表达的情绪。

  如下图,背景图与主体传递的信息是一致的。

  3.我们探索和利用视觉结构

  心得: 结构化呈现内容,更容易被理解。

  如果有一大段文字,没有人会愿意阅读,在设计时,一定要把大段的内容结构化,如做成表格,提取重要元素,分层次精炼的表达。

  1.信息分各个小段

  2.信息端中分字段

  3.重点突出

  如下图所示,用下图代替长达几百字的描述,更加清晰,可读性更高。


特别说明:本站所收集的素材版权归原作者所有,在此仅供学习参考,请勿用于任何商业用途!
经验分享回到首页

欢迎交流点评