发布时间:2020-4-24 分类: 电商动态
心理学和设计通常与良好的用户体验密不可分。学习设计心理学的知识是每个设计师必须掌握的技能!
翻译内容:
我一直认为心理学和设计是用户体验的重要组成部分。每当我们的目标是满足人们的需求时,我们的职业就要求我们同情解决问题的目标。当我继续理解心理学在设计中的作用时,我偶然发现了格式塔心理学理论。
那么,什么是格式塔心理学?
格式塔心理学是一种思想学派,它将人们的思想和行为视为一个整体。当我们试图了解我们周围的世界时,格式塔心理学表明我们不仅仅关注它的每一个小部分。相反,我们的大脑倾向于将对象视为更大整体的一部分。这个心理学派在人类感知研究的现代发展中发挥了重要作用。来源: verywellmind
这次发现格式塔理论的过程让我完全理解如何将这些原则融入我的设计中。因此,在本文中,我将与您分享如何将这些原则作为我的设计应用于我遇到的以下代购源码网站和应用程序。
1. 亲密性
当物体彼此靠近时,它们被视为一个整体而不是独立的。来源:Hubspot的博客
以下是使用亲密度原则来解决设计问题的示例:
△标题和链接相距太远
正如我们所见,在线预订&游轮和学习更多点太开放,这使它们看起来像两个独立的元素。如果我们绘制一个线框来表示它,上面的例子如下所示:
△线框
整个组件彼此分开,因为没有什么可以将图片,标题和链接联系在一起。因此,亲密原则是我们的解决方案指南。通过将三个单独的元素分组到一个组中,您可以使它看起来像一个整体:
△中心标题和链接
在我的解决方案中,使用亲密原则,我通过中心对齐缩小了标题和链接之间的距离。通过这种方式,可以组合三个元素(图片,标题,链接),这有助于我们解决不一致的问题。
2. 相似性
当对象看起来相似时,相似性原理就会发生,人们通常将它们视为一个组或一个模式。资料来源:graphicdesign.spokanefalls.edu
在下面的设计问题A中,我标记了蓝色文本。原因是在这个界面上,“Heavy Data User”和“Flexible Maximizer”是一组类似的数据——它们是用户界面上的两个切换标签。
△设计A
那么,是什么让这两个元素无关?
可能有很多答案,但最引人注目的问题是没有任何东西可以将这两个元素组合在一起,这使得它们看起来彼此独立。正如我们所看到的,很明显界面的品牌颜色是绿色,但突然出现蓝色文字颜色。通过这种方式,相似性原则就派上用场了。
我的解决方案是设计鼠标单击状态以切换颜色填充以创建相似性并将其设计为选项卡样式。 (译者注:单击鼠标时,左右样式将互换。)
对于设计问题A,可以通过重新设计来优化它以增强用户体验。但现在,我们使用相似性原则以最少的步骤改进其设计。
在设计B中还有另一种使用相似性原理的方法:
△设计B
在问题2中,让我们拆解它的基本组件:
标题:40px常规
内容文字:20px Regular
文字链接:20px Regular
乍一看,我们可能会认为这是一个没有问题的设计。但是当我们仔细观察时,问题就出现了,它发生在内容文本和文本链接上,它们共享相同的文本系统样式(20px Regular),这会混淆用户并缺乏信任。当他们浏览代购源码网站时,他们可能会犹豫不决,可能会使用鼠标反复尝试单击文本和文本链接。
那么我们如何解决这个问题呢?
使用相似性原则,我们需要稍微调整文本系统风格:
标题:40px常规
内容文字:20px Regular
文字链接:20px Bold
我们通过加粗文本链接和添加指南图标使这种类型成为内容的对比。通过这些修改,我们在整个文本链接中创建了相似性,从而加快了用户识别和运营效率。
创建文本系统时,请选择具有各种字体粗细(精细,浅色,常规,粗体等)的字体。我们的目标不应该是仅使用字体大小进行比较,而是使用字体的字体粗细来进行比较设计。阅读更多《让设计细节更高级的10个实用小技巧》
3. 焦点
重点是感兴趣的区域,图片的重点或差异,以吸引用户的注意力。来源:粉碎杂志
我们将通过两个设计问题来研究如何应用焦点原则:
△图像来源:电信
在上面的例子中,元素的布局实际上没有问题。但是,信息级别的主要和次要内容使用相同的按钮样式。
我们可以看到此界面的目标是让用户下载APP,而常见问题解答只是一个帮助文档。为了让用户更好地了解他们的APP,我们的解决方案如下:
△设计解决方案
使用焦点原则,我将常见问题解答按钮更改为边框按钮样式,以便为应用按钮提供足够的焦点。同时,我也改变了他们的顺序,主要操作放在右侧,次要操作放在左侧。原因是古腾堡图形定理,基于这个定理,右边的两个点(在“Z&rdquo”的第一点和最后一点)是用户期望采取行动的地方。所以这里,提示语句放在左侧,重要操作放在右侧。
我们经常看到一些按钮设计问题,为不同的功能按钮设计相同的样式(注册,取消,查看更多,阅读等)。
建立一致性不是很好吗?
是的,我们都知道一致性在用户体验设计中起着重要作用,但我们称之为功能的一致性。如果我们想要创建相同的按钮设计以满足不同的功能,则可能导致不一致的用户体验并可能影响用户的操作目标。按钮设计一致性=相同的按钮功能。
现在让我们看看问题2:
△两个按钮具有相同的视觉层次
同样的问题也出现在这个设计中。 “确定”和“取消”按钮共享相同的设计样式,这要求用户仔细阅读按钮上的文本以了解提交和取消。
使用焦点原理可以减少读取按钮文本所需的时间,因此这里是设计解决方案B:
我们交换按钮位置并将按钮上的OK更改为Submit,使其更准确,并告诉用户一旦他们点击按钮,就会触发提交操作。
4. 共同区域
共同领域的原则与亲密原则密切相关。这意味着当对象位于同一个封闭区域时,它们被认为是同一组元素。来源:用户测试
像Spotify一样,迪士尼和Netflix随机放置,没有规则,我们认为它们不是一个群体。要使问题更清晰,请创建线框表示形式:
从上面的线框中可以看出,它更可能是多个单个元素而不是四个元素。因此,使用共同的区域原则设计解决方案:
△新线框采用共同的区域原则
在在线框图中,使用笔划将所有元素包含在各自的类别中,以使它们看起来是一个组而不是一个元素。以下是它的工作原理:
除了边界框之外,我用一个小图标替换了底部句子“计划999及以上的六(6)个月免费Netflix”并将其放置在Netflix的右上角,为功能列表创建了更多空间。单击,将出现工具提示。
这四种格式塔心理学知识应该可以帮助您完成设计工作,您可以使用更多的格式塔原则来解决更多的设计问题。
原文链接:https://uxdesign.cc Riel M