当前位置: 首页 > 设计资讯 > 理论文摘 > 正文

好的设计必定源于用户的心理

2018-08-10 1599 0

《aboutFace3交互设计精髓》中作者说,设计有三个模型:心理模型、表现模型、实现模型。

心理模型:用户在从未看过你产品的时候,根据原有经验,心理所想象的样子。

表现模型:用户看到的你的产品的样子。

实现模型:程序通过代码实现的产品运行的规则等。

当表现模型越接近心理模型时,用户的体验越好。

     那用户的心理模型到底是什么样子的?如何让表现模型趋近心理模型?

产品的用户心理模型既包含整个地球人类的共性,又包括产品用户群体所独有的特性。文章重点讨论共性问题。影响人类共性的因素:外部环境与内部系统。今天先讨论部分内部系统。


 

中央视觉和周围视觉

    一头青山羊在一片草原上专心致志地吃草,此时,一头饥饿的狼悄悄地躲在灌木丛中,狼伶俐的眼神死死的盯着,突然,一跃而起,扑向羊,说时迟那时快,羊一个激灵,迅速得躲开了狼的捕杀,狼又追上去……草原上展开了一场厮杀战。

 

    为什么专心致志吃草的羊能够观察到狼的扑杀?在视觉中,分为中央视觉和周围视觉(来源于设计心理学),中央视觉对聚焦的视野(视野下的那一下片草)负责,周围视觉对周围环境负责。在生物的进化中,生物要想生存,就要避开天敌,周围视觉就是用来发现危险,传递危险信号的,而最容易被识别的危险信号就是突然的动画。

中央视觉和周围视觉在设计中如何利用?举个栗子。

 

    对输入框特别长的字段,如果提示文字放在后边,由于视觉聚焦在左侧,会容易忽略掉。所以我们会考虑放在上边或下边。

如果是这样子的备注,是否容易被忽视呢?(留给大家思考)

下图中滚动的banner,或右下角闪烁的广告,会被忽视吗?

上图中滚动的banner条或者右下角的动画,会引起视觉的强烈注意。所以动画若非必要,谨慎使用。


 

 

知觉特性:选择、理解、整体

知觉是指人对客观事物的整体认识,比如看到下图知道是一个足球,而不是一个球体。


 

下图中,你看到了什么?

你看到了鼠标和小白点。有没有看到黑色的屏幕?

1.选择性:人只能感受少量或少数刺激,而对其他事物只作模糊的反映。通常来讲,人容易将特殊的、面积小的比面积大的、被包围的比包围的、垂直或水平的比倾斜的、暖色的比冷色的,以及同周围明晰度差别大的东西都更容易知觉为对象,而非背景。

    下图中,当鼠标悬停到某部分信息时,为此部分信息添加了淡淡的背景色。这部分信息相对于其他信息来讲是不同的,这部分信息成为知觉的对象。鼠标到地方通常是视觉流经过的地方,即用户更关注的点,这样能够让用户对信息更加聚焦。


 


 

上图中,你看到了什么?

2.理解性:人们以已有的知识经验为基础去理解和解释事物,并用词语加标志的特性,以使它具有一定的意义。

    上图中只是一些黑色的点,但人们往往会去试图理解和解释它。

    在我们对界面的交互设计中,一定记得,基于业务场景、用户特点进行设计,突出重点和主要内容,不必要的东西不放,否则就会引起用户的注意和思考,进而影响到用户体验。这也是设计中常说的奥卡姆剃刀原理:如无必要,勿增实体。

比如下图中圈出的图标,在本页信息中,基于业务,基于用户,并没有什么用处,放在那里会引起用户的思考和迷惑。

    所以在设计的过程中一定要去梳理业务需求和用户需求。确保页面上的功能是用户需要的,或者是能够带来商业价值的。否则一些可有可无的功能不仅不能帮助用户,反而会起到干扰作用。那么至于什么样的功能是有用的、有价值的、体贴的,我们如何找到用户痛点,并从痛点出发得出需求和功能点,在以后的文章中,进行详细的讨论。


 

3.整体性:人们倾向于把个别的属性整合起来,去把握整体。那人们是如何整合的呢?

3.1接近性,对于距离较近的东西,被理解为相关性更高,更容易被知觉为整体。所以在设计时,相关度较高的放在一起。同样相关度不高的要区分开来,这样用户扫一眼,不需要思考,就可以把握清楚内容的亲疏关系。也可以引导视觉流。

比如下图的设计,用户容易理解为两列内容,而我们实际的内容关系是横向的。

改版后

在最近流行的简约设计中,去除复杂元素,比如分隔线,使用留白进行分隔,便是利用了这一特性。

 

3.2相似性,人们容易把形状、颜色等一样或相似的东西知觉为一个整体,并倾向于赋予同样的意义解释。

在设计的过程中,利用相似,保持一致性,使用户基于原有经验进行快速解释,减少思考。

比如平台样式所有页面保持一致,用户不管走到哪一步都会知道,她正在使用我们的产品,而不会认为跳转到了别人家的页面。在设计中使用约定俗成的一些样式,用户基于习惯可以很快理解我们的产品,减少学习的成本。

 

<待续>

反对教条主义。。。。。。。。。。。。。。


 


8
评论区(0)
正在加载评论...
相关推荐