引人注目的UX设计背后的心理学
每天，您都会在线访问多个网站。他们中的一些给人留下了积极的印象，而另一些则使您在数毫秒内按下了后退按钮。您最终从一个网站购买了产品，而不是从竞争对手那里获得了产品。是什么引导这种行为？您为什么对某些网站感到满意却却避开其他网站？
这样做的主要理由之一是在用户体验设计中实施心理学。您喜欢的网站聘用的UX专家知道如何在与网站交互的每个阶段触发心理反应。在线心理学的使用是成功的，因为我们在人类生存的几个世纪中获得的某些进化特征在我们每天与世界各地的互动中仍然发挥着重要作用。
本文介绍了一些常见的UX元素以及它们背后的心理思维。
有关服务或产品的建议
例如，当您在机票预订网站上时，会在预订完成之前或之后获得有关酒店，餐厅或旅游选项的建议。在许多情况下，如果价格足够诱人，人们就会继续预订酒店或在餐厅预订。当您搜索抵押贷款时，同样适用，并且您还会获得有关债务管理或退休计划的建议。
图片：Skyscanner
这是一种称为“预期设计”的UX创意。目的是根据您在网站上查看的内容来建议您最可能需要的其他内容。这个设计思想是基于当我们在互动中感到被理解时更快乐的心理原理。这在所有领先的电子商务门户网站上也可以看到。
图片：Flipkart
这种UX设计的一种变体是在许多网站上延迟显示弹出框以进行加价销售或潜在客户。这也是可以预见的，因为它基于这样一个事实，即许多用户直到从站点上花费的时间中获得了一定的满意，才会对弹出框的内容不感兴趣。
显着性原则是另一个鼓励用户体验设计决定的心理原则。它说人们将注意力集中在当时与他们最相关的事物上。因此，正在寻找飞往夏威夷的廉价航班的度假者将很高兴看到提供经济实惠的住宿，甚至为他们的旅行提供融资选择。仅登陆页面以读取症状的用户将仅关注页面的内容，而不关注订阅弹出窗口。
限制用户选项
您选择的网站比强迫您跳过五个菜单来查找相同内容的网站更容易找到。这是因为我们发现很难做出决定时，有太多的选择。这是基于希克定律的心理原理：选择的负担。
图片：Apple
最好的UX设计人员了解这一点，并确保用户可以找到所需的信息，产品或服务而不会感到不知所措。
抢眼设计
图片：例如葡萄酒
如果网站或应用程序的设计精美（根据用户的描述），则立即导致对品牌的有利倾向。这是一种心理原理，称为审美可用性效应。如果您的网站漂亮，那么普通用户就会相信它比同一个利基网站的其他功能更实用，更值得信赖。关于吸引力的这种偏见也可以在离线状态下看到，因为研究表明，更具吸引力的人被认为比其他人更有能力和更友好。
此外，引人注目的设计可能使人们忽略网站或应用程序上的其他缺点。顶尖的UX设计人员花费必要的时间来获得任何项目的最佳美学效果也就不足为奇了。
醒目的颜色口音
图片：Paypal
诸如Trustly，PayPal，FreshBooks之类的品牌，以及您日常遇到的许多其他品牌都使用颜色强调点，以使您的眼睛指向CTA按钮，注册表格等。网站上的主要颜色为蓝色时，它们使用绿色，红色或黄色来表示突出这些区域，它会起作用！这些网站的任何访问者都可能会错过页面上的其他内容，但会看到这些部分以独特的口音仔细突出显示。
这是基于赫德维格·冯·雷斯托夫（Hedwig von Restorff）的心理对比原理，即人类更容易记住那些与其周围环境脱颖而出的东西。有趣的是，没有颜色被认为是最有影响力的。UX设计人员只需确定主导的颜色主题，并使用不会混入背景的另一种颜色作为重点选择。
产品差异化价格计划
这也称为“金发姑娘”定价技术。企业使用这种技术来销售“中档”产品。当您四处寻找虚拟主机计划时，您可能会看到更多。提供商通常列出三到五个订阅计划，并将中间计划突出显示为“受欢迎”或“热门”。
图片：Acowebs
许多人立即分析出最昂贵的计划和最便宜的计划，最终选择了所谓的中端计划。这是因为他们将其视为最高价值计划和入门级计划之间的完美中间地带。有趣的是，这些中端计划的价格没有像其他任何人一样受到严格审查，这使得它们成为提供这些品牌的品牌中最赚钱的。
这种定价技术之所以有效，是因为它基于取景的心理原理，该原理强调了人们在做出购买等决策时如何避免极端情况。它还显示了选择的呈现方式如何影响决策过程。
其他领域的更多用户体验设计师正在采用这一原理。现在，各种电子商务商店都提供多层定价结构或提供价格不同的相似产品。大型科技品牌也不例外。他们可能是这一原则的最大受益者之一。因此，下一次您发现自己忽略了中端选项规格，规格稍高但仍低于最贵机型的三星Galaxy设备时，您就知道了！
这是另一个例子。
图片：SEObirth
限时优惠
电子商务网站已经完善了使用限时报价创造产品需求的技巧。一些品牌会声明要约/产品“仅在接下来的X天内可用”，而其他品牌如亚马逊将显示详细信息，例如“仅剩5个库存”。无论哪种样式，两种策略都旨在引起您的相同反应：紧迫感，因为该产品很快将不再可用。
图片：亚马逊
这是基于稀缺性的心理学原理，该原理指出，与到处都有的物品相比，我们倾向于更加重视稀缺或不可用的物品。一个1975年的研究证实了这一原则。研究人员将相同类型的曲奇放在两个罐子中，但是第一个罐子有10个曲奇，而第二个罐子只有两个曲奇。研究参与者对第二个罐子的评价高于第一个罐子。
研究还发现，人们对以前丰富但现在稀缺的产品的评价要比总是稀缺的产品更有价值。经济学专业的学生不会对此感到惊讶，因为可用性的下降总是会触发需求的增长。
除电子商务网站外，其他具有在线形象的品牌也采用稀缺性原则。出售在线课程的企业家强调诸如“仅适用于前10名学生”，“一周内结束”之类的术语。其他人则为采取特定行动的人们提供独家利益，例如提交电子邮件地址，支付服务费用等。 。
当品牌试图销售“限量版”产品时，该原则也可以在离线营销中看到。
UX设计师之所以采用这种技术，是因为他们知道，即使产品或服务没有迫切需求，人们在产品或服务稀缺的情况下也会注意。
推荐书的战略定位
图片：ElegantReports
有没有想过为什么许多产品或服务网站的主页上都有推荐？为什么在做出购买决定之前总是要寻找推荐？这是因为社会证明的心理学原理。
当我们对任何事情都持怀疑态度时，我们会寻求同行的指导。这就是为什么您会发现人们在选择公司之前先在社交媒体上要求评论特定品牌的原因。在1969年社会科学实验强调了这一先天行为。研究表明，如果已经有足够的人参与，人们至少可以说服人们注意某些事情。
除了推荐之外，UX设计师还通过炫耀可信赖的从属关系（例如SEO专家从事的业务或以作家为特色的博客）来结合社会证明原则，订户数量，帖子中的股份数量以及产品的等级或服务，甚至获得的奖励数量。
图片：Acodez
电子商务商店通过显示名为“客户也已购买的商品”的部分来使它更进一步，以突出显示可能会使用户感兴趣的流行产品。
突出赠品
图片：皮特和佩德罗
如果您免费提供某些商品，在线用户现在或将来更有可能从您的品牌购买商品。这是基于互惠的心理原理。这就是为什么许多UX设计师强调任何交易的原因。
如果您要购买新鞋，则更有可能选择在其网站上提供“免费送货”的品牌。同样，您也可以在提供免费指南或免费咨询的登录页面上提交联系方式。
UX设计师结合对比和互惠的心理原理来创建高度转换的页面。
结论
达到既定目标的引人注目的UX设计并非偶然。最好的设计师知道，在线成功的关键是要吸引一般用户群的基本本质，他们会运用心理原理来实现这一目标。人类的在线行为是可以预测的。结合心理学和用户体验设计，您的品牌可以产生更好的结果。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前言
在这艰难又魔幻的2020年的尾声，有必要系统汇总下关于UI/UX的设计发展方向，为接下来的2021的开篇带个好头。本文在了解这些趋势的同时，分析特点并举例落地实例，来帮助大家启发创意设计工作的思考切入点。
流行趋势跟人们所处的环境密切相关，从最初的方块马赛克——>追求极度写实——>扁平风——>到现在的质感拟物，扁平设计霸屏的这几年，设计风又向更立体、丰富、更有层次感的方向发展，所以说趋势就是一个轮回。设计风格没有绝对的好坏，在审美达到一定疲劳时，就会开始出现新的设计风格。每一个新风格都值得设计师去拆解、思考，本质都是为了提升更好的交互体验。
而在进入下一个十年的过程中，我们对数字产品和体验的依赖将日益增长，预测真正胜出的将会是3D动画和用户界面/用户体验设计的结合设计，5G技术的发展，它将重塑了我们以前无法想象的交互方式，这将是一段充满创意、鼓舞人心的发展阶段。在这里让我们来看看未来那些不可忽视的设计趋势吧。
（注:图片来自网络，均标明出处及作者，若有侵权请告知删除）
1、3D与UI结合
随着且易用的3d软件工具的出现，3D 元素已经开始变得越来越受欢迎，而在这之前，UI界面一直被平面设计所主导。与 2D 不同，它提供了更为逼真的立体效果，从插画、动效、电商到平面视觉，在所有的设计类型中都能找到它，3D现实主义已是各个领域的大势。
圈中也出现了很多免费或付费的3D预设元素及场景组件，帮助3D小白更快地搭建出具有冲击力的视觉组合。
特点：
• 直观感受；
• 立体真实；
• 形态丰富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ✪
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
实例应用：
各大厂都开始纷纷尝试在产品中加入3D元素，将自家IP立体化，植入到各个品牌静态页面，加深品牌印象渗入。3D技术虽然已经出现有一段时间了，但是为了保证速度和性能表现，较少应用到产品中，随着软件技术的提升，立体渲染产品将开始慢慢运用到更多的界面交互、H5活动中。
▲闲鱼、QQ、花椒直播的3D启动页
▲得物（毒）的3D空间动效
网易云音乐每年的音乐总结报告都追随着的设计潮流，今年还可以自由选择人物形象，增强了用户的主观代入感，以下是每年的设计风格变化：
▲2018-渐变插画、2019-撞色渐变、2020-3D人物场景
▲2020-总结陈词H5
▲总结报告Banner的动效
其中IP立体化最多的当属K12教育领域，除了制作IP周边外，3D效果能适应丰富的运营场景，高度还原现实世界，给小朋友带来最真实的学习互动体验。
▲洪恩识字（3D学习场景）、腾讯开心鼠英语ABCmouse
▲IP在播放儿歌时的互动
值得一提的是今年苹果发布的macOS Big Sur除了玻璃拟态的变化，图标还加入了3D维度的拟物视觉层次。
苹果的 mac OS 的人机交互指南中也明确指出：“图标不仅是装饰性的，而且在与用户交流中起着至关重要的作用，它应该传达应用程序的主要目的并暗示用户体验。”这次扁平化和拟物化的结合，将又要引领一波设计趋势。
2、软渐变（Soft gradients）
过于强烈的渐变不再是趋势，大多数设计师都开始喜欢使用非常简单和微妙的渐变，如果产品的目标用户人群需要轻松温和的视觉环境，那么此风格再适合不过。
软渐变包括背景、阴影、反光，常与线条平面图形结合，应用于界面、网站、图标、icon等设计中。
特点：
• 低调温和
• 微妙渐变
• 清新愉悦
2.1、柔和背景
在设计网站中我们已经看到了许多非常精致，明亮柔和配色方案，混合两种以上的颜色来创造多彩的模糊背景。它使设计看起来非常现代、不打扰、清新而令人愉悦，其中画面内容是主要视觉焦点。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
实例应用：
▲咔咔、美柚
2.2、柔和阴影
柔和的彩色阴影使UI有了更微妙的深度变化，在图标设计中经常需要渐变或阴影来塑造物体，柔阴影使设计元素更丰富立体，并且它们有助于区分内容之间的层次结构。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
实例应用：
▲有道数学（已下架）
▲Uki
3、玻璃拟态（Glassmorphism）
去年新拟态掀起了一阵狂热，但这种模拟受到挤压的塑料效果（凹/凸层次感），在用户的阅读性上可能会出现问题，新拟态更适合用在局部的少量元素点缀，无法完整地使用在整套应用程序中。
▲Alexander Plyut
伴随着今年苹果发布的 MacOS Big Sur 操作系统的发布，新的拟物风格正式回归大众视野，整体风格应用了新拟态（Neumorphism）的设计思路，利用大量的毛玻璃质感和大量投影纵深感，能很好的突出前景信息，中和了扁平化图文带来的生硬不立体感。而Big Sur的图标也加入了 3D 质感设计，设计语言更为时尚简洁。苹果设计师 Alan Dye 在发布会上也提到了设计风格转变的原因，主要是希望「降低视觉的复杂度，让用户能够将注意力集中在内容上」。
而的玻璃拟态则更加注重垂直空间 z 轴的使用，背景多鲜艳色彩，在上空使用隔一层高斯模糊的毛玻璃质感，模糊的边界有细微的浅色边框，整体效果就是让元素之间有虚实结合的特殊空间。毛玻璃运用在界面中对关键信息起到强调作用，用户可以看到物体间的层次关系，哪一层在哪一层之上，就像物理空间中真实的玻璃一样。
特点：
• 透气磨砂
• 层级空间
• 简洁拟物
▲引领新拟态风格的Alexander的作品也朝着玻璃拟态变化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
实例运用：
▲毛玻璃视觉可追溯到2007年发售的Windows Vista，而当时的 OS X Yosemite 也大量使用了这种设计语言
▲的MacOS Big Sur操作系统
▲图标的变化
4、暗黑模式
暗黑模式是白色界面的相反版本，适用于午夜时分。之前用了很长时间微信的暗黑模式，突然切换成白色界面后，就像吸血鬼见到太阳光般刺眼，果然暗黑模式用久了还是比较舒服的。
暗黑模式和之前经常提到的夜间模式是有区别的，简单来说暗黑模式可以在任何场景下使用，并没有降低对比亮度；夜间模式则专为夜间场景设计，重在降低对比度，以降低在暗光环境下屏幕对人眼的刺激。
特点：
• 突出内容
• 减轻干扰
• 沉浸体验
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ✪
实例应用：
▲有道词典
▲爱范儿（ifanr）
最常使用暗黑模式的车载系统：
▲小度车载
暗黑模式的灵感最早引起大家注意的应该是抖音，在这之前大部分的应用都是白色为主，抖音整体黑色界面带来的沉浸以及轻打扰体验还是很棒的，在这之后也相继出现了以黑色为主的APP设计：
▲MOO音乐(可手动切换颜色模式)
▲Space FM
5、多彩高对比度界面
受Material Design调色板的影响，2020年用户界面趋势的一定不能少了亮色和荧光色的，可以作为主色也可以作为辅色，简约的界面中明亮大胆且对比鲜明的色彩一直都处于增长趋势。荧光色一直是90后喜欢的风格，我个人就非常喜欢荧光色，现在要是谈到该风格的受众主力军可是90后啊。
颜色是为界面添加信息和情绪以及使其看起来美观和吸引人的最有效方式之一，对比鲜明的颜色在白色和黑色界面上都能很快吸引用户的注意力，这种风格已经成为清新、酷炫、数字时代的代名词，而在2021一趋势还将会继续影响UI、平面、广告、插画等领域。
特点：
• 活泼大胆
• 对比鲜明
• 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在网站设计中的应用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
实例应用：
▲GoFun出行
▲开言英语
6、抽象几何元素
从上世纪初开始，抽象构成中的简单几何形状就已经用于视觉艺术中，多用于主背景主题或色彩细节，使用钢笔工具编辑最简单的形状（正方形，圆形、椭圆形），加上不同的颜色或渐变，让设计看起来既规则又有趣。
几何图形可以运用到UI设计中 ，将它们混合在一起以创建马赛克的效果，形成具有品牌意向符号的记忆点。
特点：
• 规则组合
• 品牌印象
• 重复记忆
▲Johnny Nova
▲Vladimir Gruev
实例应用：
最近看到的一组原色视觉刚好融合了高对比度+几何这两种风格，那就是SHINee的正规六辑合辑《‘The Story of Light’》，采用红黄蓝三色加上圆形、正方形、三角形的大块面积来打造画面空间及变化，带来极具视觉冲击的音乐色彩与魅力。
▲专辑的主视觉
当然，几何形状不止用于色彩图案细节，在UI界面布局中经常使用大块面图形，这种设计方法受到越来越多的关注。
7、极简风
极简设计的前身是2010年代中期精巧又花哨的设计，这种设计已经存在很长一段时间了，但在2020年，人们每天需要消化的信息量越来越多，所以现在用户想要尽可能避免“视觉垃圾”，这也是为什么我们会选择更简洁专一的界面。
特点
• 专注信息
• 清晰易用
• 简单操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
谈到极简主义，就不可避免会涉及到无键趋势，因为按键越少就意味着设计越简洁，而这种简化过的设计将让手势操作和语音交互更为流行。
▲Taras Migulko
▲Gleb Kuznetsov✈
实例应用：
▲夸克浏览器的夸克宝宝
8、将视频应用到UI中
在 2020 年，信息的触达的速度将会变得更快，而视频是很好的载体，各个年龄段的用户都喜欢观看引人入胜的动画，无论是选择通过短视频还是电影的方式来推广产品，都很好地灌输品牌理念，建立与受众群体的关系，加强用户忠诚信任感。
特点：
• 营造氛围
• 类型多样
• 品牌调性
▲Fireart Studio
▲Ehsan Rahimi
实例应用：
▲moo音乐登录页
▲虾米音乐欢迎页
9、插画与3D的界线越来越模糊
艺术插图从2017年开始到现在仍然很流行，几乎适用于任何类型的设计行业，是设计领域中最热的趋势之一。插画的视觉能很好的帮助用户理解产品背后的故事，为了把故事讲好，我们可以创造出一个品牌人物，赋予他人格，为他制造一些故事和冲突，最终帮助我们解决产品问题。这是在产品设计中讲好故事的基础，至于讲故事的方式，在 UI 和 UX 中都有使用，原理一样只是落地方式不同。
在2018年的蜘蛛侠平行宇宙中我们就已经看到了3D与插画的结合，艺术家保留了人物在美式漫画中的的线条笔触，把“手绘”的细节和质感都放大到了荧幕上，在剧中还采用对比强烈的大色块扩大了视觉张力，分分钟把漫画书甩到面前，让人忍不住惊呼，索尼的艺术家们是怎么把片子做得这么酷！
▲3D人物的画笔触感
▲画面光源处由波普圆点组成的背景
▲纸本漫画书中的“声音词”
▲漫画经典线条
▲Entei Ryu在3D建模使用插画质感
▲Minh Pham ✪在ui界面中的尝试
实例应用：
腾讯旗下音乐平台JOOX最近的概念宣传片，从MG、三维、定格、插画多个风格之间来回切换，给我们带来了一个多元的音乐世界。各大视频网站还搜不到，不能直接链接视频地址，喜欢的朋友可以关注微信视频号“UoU_Studio”观看完整视频。
在3D开始迅速发展的阶段，二维与三维之间的界限变得越来越模糊，插画作品也可以具备强互动性，而3D插画与动效的结合提供了一种奇妙的新方法，希望能够看到未来插画更多的可能性。
10、更多的微交互动效
最后一点，还是要强调动效在UI中的的作用，微交互最早出现在 2018 年，让用户更好地理解系统如何工作，并在引导其获得更好的体验方面扮演着非常重要的角色。它们在 UI 设计中决定了一个 App 或网站是普通还是优秀，从点击反馈、加载等待、导航交互等等，为用户界面设计增加了动态性，交互性和直观性。
动效起到的作用：
• 引起人们对应该做什么或接下来将要发生的事情的关注；
• 创造流畅和视觉愉悦的过渡；
• 带给使用者美观的享受；
• 指导我们进行复杂的操作；
• 确认用户使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
实例应用：
▲GoFun选择车辆后的页面转场动效
结尾：
2020的趋势在满足用户的美学要求上，侧重内容和感情表达，还会根据不同设备载体、新的技术而变化，为用户提供的丰富体验。
借用Adobe设计副总裁 Jamie Myrold 的一句话：如今设计师要思考的，绝不仅仅是设计一款App、网站或设计工具。我们要思考的是人类的需求、用户的需求，打造真正人性化、多元化与包容性的设计。
设计趋势还在快速增长变化，有些趋势总能长期霸屏，未来还将迎来更多新技术，每个设计人员都可以找到自己喜欢的方向，不管哪种趋势，最重要的是如何学习并合理地运用到产品中，以产生最大的设计商业价值。
文章来源：UI中国 作者：_阿丹a_
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2020年结束，此时正是一个很好的时间节点，我们共同探寻2021年即将拥有怎样的未来。本文将带你发现，即将在2021年流行的十种移动用户体验设计趋势。
蓝蓝设计的小编 http://www.lanlanwork.com