最新公告
  • 欢迎您光临xd素材中文网xdsucai.cn,服务于广大UI设计师。立即加入我们
  • 借助视觉层次结构和颜色心理吸引用户的注意力

    实现这些目标的关键是什么?视觉等级和色彩心理学。

    什么是视觉层次?

    视觉层次结构是访问者处理网站上元素的顺序。因此,例如,访问者首先注意到您的号召性用语(CTA)按钮还是标题图片取决于您的视觉层次。

    无论您是否故意设计了视觉层次结构,都确实有一个。不管是好是坏,每个页面的布局都会以特定顺序引导用户浏览内容。当您控制视觉层次时,可以有目的地引导访问者的注意力。

    如果您的技术没有清晰的视觉层次结构,则很有可能用户将不知道最重要或最不重要的元素是什么。这会使他们感到困惑,迷失,沮丧或可能同时感到这三个。这些体验破坏了用户的信心,这就是为什么应通过实施本文概述的技巧不惜一切代价避免使用它们。
    什么是显着性?
    突出才能使事情脱颖而出。塑造意识,知觉和专注力的是神经和心理因素。这是利用访问者的短期记忆(希望是长期记忆)的三个先决条件。

    有五种主要方法可控制您网站上元素的显着性:

    1. 大小:看起来较大的元素在视觉层次上自然较高。
    2. 对比度:在视觉层次上,与众不同的元素更高。
    3. 位置:页面上较高的元素在视觉层次上较高。
    4. 空格:空格较多的元素在视觉层次上较高。
    5. 颜色:具有某些颜色的元素将具有不同的视觉显着性。

    在本文的其余部分,我们将重点介绍视觉层次结构和颜色心理学之间有价值的交集。这是一个简单的两步过程,您可以按照此过程建立视觉层次。

    步骤1:确定业务目标的优先级

    作为用户体验设计师,大多数项目的首要任务之一就是了解利益相关者的价值。以用户为中心的设计理念正逐渐被以利益相关者为中心的设计所取代。用户体验设计师需要满足他们所有项目利益相关者的需求,而不仅仅是最终用户。

    尽管视觉层次结构是用户注意到页面组件的顺序,但重要的是要使他们注意到的内容与您的优先级相匹配。

    如果您尚未明确定义业务目标,则无法设计视觉层次。相反,您可能最终会陷入主观反馈炼狱:“将其粉红色。没有红色。等一下,更大。也许小一点。不,不……要小得多。”

    在任何设计项目中,重要的是要了解如何在视觉层次结构中上下移动事物。您应该澄清业务重点,并使用标准规则来应用颜色系统,而不是在颜色上进行自我斗争。

    当Rena(我们的高级设计师和我的姐姐)从事项目时,我们最终的打磨工作就是对视觉层次进行这些微调整:

    弹出此元素。

    不要让该组件引起太多关注。

    确保用户无意识地注意到此组件。

    等等…

    调色板定下来后,我们就不会再争吵了,因为已经有一个完整的系统来决定规则。在这里,我们通过权衡取舍来巧妙地应用这些规则。

    如果我们无法进行微调整,那是因为我们的设计系统存在缺陷。一个好的调色板和设计系统将帮助您克服大多数UX应用程序和未来几年的设计挑战。

    为了正确引导用户浏览页面,您需要问自己以下问题:

    一旦知道了业务优先级,诀窍就是将其转换为人们可以与之交互的页面体系结构和UI。当访问者完成页面上的任务时,这两个问题的答案必须非常明显,以至于他们甚至不需要问他们:

    如果明确传达了您的优先事项,那么体验将非常直观,以至于用户将通过您的技术来进行飞行。在良好的行为设计中,我们可以教育,激励和控制用户的注意力,而无需他们的有意识的努力。这就是使良好的设计直观的原因。

    做到正确,用户总是知道他们在哪里,下一步该怎么做,并确信他们很容易完成任务。

    步骤2:选择正确的调色板

    在锁定您的业务目标之后,该选择适合您目标的调色板了。

    从行为设计的角度来看,好的调色板必须满足多种竞争需求。它必须是实物品牌,具有正确的认知联想,并能唤起正确的感受。从用户体验的角度来看,它必须帮助您创建清晰的视觉层次结构并与用户进行交流,而无需他们的有意识的努力。

    由于显着性是建立直观视觉层次的关键,您可能会问,哪种颜色最显眼?

    这是一个需要解决的问题,因为通过更改饱和度,阴影等,可以轻松修改任何调色板的视觉层次。这意味着您可以构造色调的任何组合以形成任何视觉层次。

    尽管可能性无穷无尽,但对色彩和显着性的研究仍为我们提供了一些良好的起点。在AlterSpark,我和团队将有关色彩心理学的几篇科学论文翻译成视觉指南。我们从字面上为仅报告数字的科学论文增加了色彩,并填补了许多空白。

    翻译了Camgoz,N.(2000)的论文后,我们对不同色调的自然显着性有了很好的认识。下表显示,开箱即用的绿松石,红色甚至红紫罗兰色的显着性峰值。

    显然,您可以(并且应该)更改每种色调的饱和度,色调等。但是,这项研究使您自然而然地知道哪种颜色将主导其他颜色。

    我们还绘制了消色差的显着性,也称为黑色,白色和灰色。我们发现类似的趋势,总体上,白人引起的影响最少,而纯黑色的影响最大。

    请记住,您的上下文可以改变一切。因此,这些都是大多数情况下最常见的趋势。

    3.建立一个显着的调色板

    为了构建显着的调色板,我使用了UI Color Psychology Map。这是我开发的工具,旨在帮助我的学生将UXD和图形设计的策略与行为设计原则融合在一起。

    在AlterSpark,我们使用UI颜色心理学地图来创建具有清晰视觉层次结构的调色板,用于交互式产品和活动。

    色彩有助于交互项目。一个好的调色板将表达您的品牌颜色,导航系统和通知系统,同时满足您对无障碍设计的所有法律和道德要求。

    从行为科学的角度来看,它必须传达正确的认知关联,情感关联,并在需要时弹出行为改变原则。

    而且,我们不要忘记要满足的最重要,最困难的一个因素:它不应该“丑陋”。

    为什么我开发了UI颜色心理学模型

    我开发了UI颜色心理学地图,以帮助我的学生解决调色板设计中的一些主要问题。

    在教行为设计10年的过程中,我学到的是图形设计师可能在色彩处理方面拥有最好的教育和技能,但是他们经常缺乏在策略上运用色彩的基础。许多设计人员将美学优先于功能,而功能可能是UX杀手。

    用户体验设计师通常具有良好的设计策略和认知心理意识。但是,很少有人对颜色理论有任何了解,并且往往过于注重功能,以至于无法保留调色板。除非他们接受过专门培训,否则他们可能缺乏对容易融入色彩的情感设计和动机心理学成分的了解。

    另一方面,从事行为设计的人有时过于专注于理论,以至于无法将心理见解转化为现实世界的产品。

    我开发了UI颜色心理学地图来帮助缩小差距。不久之后,我开始在内部项目中使用此工具,然后在客户工作中使用。今天,它是我所做的所有交互式设计工作的主要内容。

    闭幕

    色彩心理学不是魔术,也不是黑白(双关语)。但是,它将使您的产品更具吸引力,更直观,并可能带来超越纯功能设计的情感品质。

    但是,同时考虑大小,对比度,位置和空白时,您将开始看到有意义的视觉层次结构。这将使您的技术更加直观和更具说服力。

    即使颜色不能修复不良产品,但使用正确的调色板正确实施清晰的视觉层次结构也会对效果欠佳的产品产生巨大影响。它也可以使优质的产品变得很棒。

    通过将行为设计原理与UXD融合在一起,我们可以创建更好的用户体验,使所有利益相关者更加满意。

    xd素材中文网,提供优质的设计资源,有xd源文件,sketch源文件,设计规范,实用的商业ui设计教程。
    xd素材中文网 » 借助视觉层次结构和颜色心理吸引用户的注意力

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    xd素材中文网
    致力于ui设计领域

    发表评论

    • 100会员总数(位)
    • 24642资源总数(个)
    • 464本周发布(个)
    • 57 今日发布(个)
    • 210稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情