标签 - UI
本文介绍五种心理学理论及其设计应用，希望能够帮助你对设计中如何使用心理学有一个新的认识。
一、双重编码理论（Dual-Coding Theory）
双重编码理论是由加拿大心理学家佩维奥在20世纪60年代末、70年代初提出的知识认知表征理论。
这一理论认为，对现实存在的言语和非言语两大类信息，人发展了相应的两个存储系统——言语系统和意象系统。前者专门编码、组织言语信息，后者则处理有关非言语的物体和事件的信息，形成事物的心理意象。
佩维奥认为，言语系统和意象系统既相互独立，又相互联结。意象系统以整体的、同步的方式组织信息，言语系统则是按序列的、离散的方式组织信息，反映出听说言语时所包括的听觉运动系统的时间特征。（解释来自https://www.pmume.com/view/n5b0h.shtml）我们可以用以下的图片来理解这个理论。
这个理论简单来说就是人们通过语言联想和视觉图像来促进学习和记忆新的知识，当图像和文字搭配使用时，人们能够更快地回忆信息并更快地学习。这个理论的运用非常广泛，从我们使用的软件产品中可以发现几乎每个产品都使用了这个理论。
花一秒钟时间浏览手机，你会发现许多文字信息会与图像/图标搭配呈现。有人可能会说这是从视觉上让整个界面更加美观，但实际上，这正是用了双重编码理论，让用户更容易理解和记忆。
让我们看一下上面的例子。
左图是领英鼓励用户加入Recruiter Lite功能的屏幕截图，领英通过在每个功能旁边添加图标来使用双重编码理论。
通过实施这种模式，人们可以分解每个功能，这有助于更快地掌握信息并在他们的记忆中留下印记。因此，这有助于促进和影响人们按下激活按钮。
让我们再看一下右侧的屏幕截图。
右图与左图文字信息相同，但没有任何图标。很明显，当用户查看此布局时，很难掌握每个功能的重要性。坦白地说，用户可能只是浏览一遍，然后退出页面，因为对他来说这只是一堆文字。
因此，作为设计师，记住当我们显示有价值的信息时，有效地传达信息至关重要。
如果做得正确，人们将能够更快地理解该消息，因为它将简化易学性，使产品受益并补充布局。
二、冯·雷斯托夫效应
该理论也称为隔离效应，它指出人们能够识别和记住与一组相似元素不同的元素。
如下如所示，看看下面的图片，你首先会注意到什么？一定是中间的图形是吧？
这就是冯·雷斯托夫效应，这种非自愿理论在设计中经常使用，设计师设计的产品会影响最终用户的发展方向。
注
运营类活动的交互组件规范编写结合实际设计需要，首先从行为心理学、动机理论的角度出发，论述组件对用户行为的影响以及原因，然后再一一说明使用场景，对组件使用时需要注意的地方、常见的错误进行论述。
一、说明
倒计时组件在交互设计中常用于表达活动或活动重要道具、奖励等的开始/结束，通过限时营造稀缺性，让用户产生渴望以及机会渐逝的损失感，进而激励用户行为。
倒计时促进用户行为的心理学原理来自于稀缺性与渴望、亏损与逃避心，这两种都是负向行为动机，相比于正向行为动机，它们会让用户感到心里不适，人们会为了消除不适而采取行动，但是，这一动机对行为的激励效果更加有效。
“在可以统计的大多数情况下，人们对‘损失东西价值’估算要高出‘得到相同东西价值’的两倍。—丹尼尔·卡内曼”。当然因为是负向动机，也要注意组件滥用带来的反作用。
倒计时组件一般包含说明字段(可选)、辅助图标(可选)、倒计时部分，结合场景表意明确即可。也有用文字表示的，不常见，不做讨论。
二、示例
三、设计要点
3.1 倒计时后状态失效的情况
这是运营类活动中最常见的倒计时使用场景，表示倒计时时间结束后，对应元素的状态由可用变为不可用。
它利用了人们‘损失厌恶’的心理，即我们认为某样东西(已经拥有的或本来可以拥有的)即将逝去，生理上就会有冲动去避免这样的情况发生。用倒计时展示机会的渐逝状态，逐渐强化用户的‘损失逃避心’，可以促进用户行动。
当然用户采取行动时，要确保流程简单、操作便利，让用户能顺利消除这种心理不适，如果在行动过程中，因为设计的原因，让用户感到麻烦或者困惑，用户很有可能会完全的无视你的‘倒计时’，只是为了避免在后续流程中无能为力的感觉。
所有红包、优惠券的可用时间都是这种倒计时的使用案例。
3.2 倒计时后状态可用
表示只有倒计时时间结束，对应元素的状态才可用，在倒计时时间段内用户无法使用某项功能或完成某个操作，这是利用稀缺性影响用户行为的一种设计技巧。很多游戏开始新一轮都需要‘体力值’，体力值用完后需要等待一定的时间才能恢复，在这一段时间内，用户内心会‘备受煎熬’，企图继续游戏，这与让用户‘心满意足’的玩耍然后好几天不再来相比，能更好的促进用户复访。
当然这个时候也是实现业务转化的好时机，可以设置某些业务转化行为，用户一旦完成，倒计时即可结束，或者直接获得想要的‘道具’。
这一技巧在运营类活动中使用率较低，提高用户复访率的场景一般设定为长期
我们可以构建更具包容性的产品，创建一个满足大多数人需求的基线体验，然后创建偏好设置来满足您的边缘案例用户的需求。
作为设计师，在设计界面时，我们经常对用户做很多假设。我们不应该这样，但无论如何我们经常这样做。
没有确定性，我们只能为理想的用户设计。这不可避免地会给那些不适合我们的典型用户的用户体验留下漏洞。
那么，我们为什么要构建可定制的接口呢？因为你应该关心你的用户。
如果你是一个餐馆老板，你不会强迫一个不喜欢洋葱的顾客吃洋葱。那么，如果用户不想让视频自动播放到他们的feed中，为什么还要要求他们呢?
我敦促产品团队和设计师通过取消对体验的控制来解决这个可用性问题。作为设计师，我们不应该为用户的体验做出重要的决定；相反，我们应该允许他们根据自己的喜好定制如何与我们的接口交互。
没有人比用户更知道如何完善体验。通过将控制权交还给用户并让他们决定如何更好地满足他们的需求，我们可以构建更具包容性的产品。
创建一个满足大多数人需求的基线体验，然后创建偏好设置来满足您的边缘案例用户的需求。
左撇子
大约10%的人口是左撇子，他们只占用户的一小部分，所以仅仅为他们设计是愚蠢的。但他们仍然存在。
如果您的应用程序中有一个重要的操作是重复执行的。例如，喜欢某个帖子，那么为什么不让用户能够决定将该操作放在最适合他们的位置呢？
一些手势和动作可能会对惯用左手的用户造成不必要的拉伸。
播放
Instagram App
这可能是个人喜好，但我更喜欢不自动播放的视频。特别是在Instagram上，因为现在不可能回到我错过的部分。
这可以是一个简单的开关设置，但会有很大的不同。
字体大小和样式
Medium App
允许用户在易访问性工具之外自定义字体大小，为用户提供了更舒适的阅读首选项。
尤其对于阅读应用程序，我认为这是必须的，我很惊讶越来越多的新闻应用程序不提供这个选项。我想在更多的阅读应用程序中看到一个选项来调整背景颜色、字体大小、重量、颜色、行高、字体族等。
在我的Kindle上，我更喜欢用比默认字体更大的字体阅读，因为它让我的眼睛感觉更舒服。如果不需要斜视，我可以读得快得多。
在一些需要较少阅读的应用程序中，一些用户可能喜欢比默认字体更小的字体，或者可能更大胆。
这是一个简单的调整，可以使阅读在你的应用程序更舒适的用户。
听起来
Calm App
我喜欢Calm应用程序让我在应用程序的背景中自定义轻松的场景和音乐。有时雨水刚刚好，
做图标设计时，为了效果好看而强行附会各种复杂元素后，图标设计的设计效果或许会背离初衷。
人类大脑对图像的记忆远远胜过于对文字的记忆，因为左脑具有语言、数据、逻辑推理等功能；右脑具有音乐、绘画、空间几何、想像、综合等功能。左脑的记忆回路是低速记忆，而右脑的是高速记忆，右脑处理图形图像的速度是左脑处理文字速度的60万倍，所以对于图像更能让人过目不忘，使得图形成为设计中的标配。比如我们看到齿轮就想到设置、房子寓意首页的入口、山和太阳组合表意图像相册等。这些图形已经在大脑中形成记忆轨迹，用户接受起来更快，体验更好。
图标设计的优势
大脑对图形的处理记忆的优势，道出了设计图形可以更好地引导用户。体验设计里的图形更多体现图标上，图标设计除了有助于大脑更好记忆，还有什么其它优势能让图标成为我们体验设计的标配？我们概括了如下5点优势。
1：快速理解，视觉体验更好
看到图标，不用看介绍就能传递给用户具体的含义，有助于快速理解，视觉体验好过于纯文字的表达。比如天气的图标，根本不需要有文字注释，早已经形成视觉记忆。
2：易国际化，不用单独翻译各个国家语言
产品左上角的一个左箭头，轻松理解返回的操作，但如果用文字写上“返回”，不翻译过来，国际化也很难扩展。这个体验我们经常会遇到，体验国外一些APP的时候，被这些国家的语言阻断操作的进程。比如下面旅游类的图标，即使语言不通也大概能明白寓意。
3：易形成统一的品牌形象
图标有很多种表现手法，每一种设计的独具匠心都可以自带流量，对外形成统一的品牌形象，这就是为什么我们总是要制定设计规范，让整个产品的设计风格统一。Same的统一设计，形成独特的品牌传播。
4：优化产品，无需更多注释
图标可以表达出含义，就不需要那么多文字的注释，在设计上就显得更简洁，产品的逻辑更清晰，很好地优化了产品体验。如下图标不用文字解释就能清晰地传递出寓意。
5：好看，就是最好的理由
体验设计的核心就是好看、好用，放着图标可以提升整个设计的格调，那为什么不呢？如下没有这个动态图标的设计，比单独文字的表达丰富了很多。
图标设计的原则
上面列举了图标设计的一些优势，那怎么设计图标才能显现这些优势呢？才能起到正确引导用户的作用呢？图标设计需遵循如下5点设计原则。
1：符号化，越简单越好
图标就是一个LOGO，提炼出表意清晰的元素开始符号化，设计的越简单易懂越好。如下图标的图标从寓意元素中提炼出的符号设计，简单易懂。
日常体验不同APP，总能发现一些设计亮点。
你在设计时有没有这种情况：
刚设计完的界面觉得效果、交互都考虑得很完美了，但是提交给老大的反馈却是太常规了，更可气的是老大还不给你说具体的问题，让你自己去想……然而，当你想破脑袋好不容易做出一版，老大却说：“不行，这版和上一版有什么区别？”你结巴着说：“之前一版是卡片风格，这一版是大字体风格，给人的感觉都是不一样的……”老大：“所以咧？”（看着低着头的你~）老大：“动脑子想想，重新再做一版，优先考虑功能和交互，比如……”你：“恍然大悟~”
设计没亮点一般有三个原因：
没有亮眼的功能；没有亮眼的交互；没有亮眼的视觉。在设计时评价一个界面的好坏并不是你的界面如何炫酷，而是你的功能是否满足用户使用，你的交互是否让用户有一个好的体验，最后才是你的界面要让用户觉得舒服。
但是功能和交互在设计时我们大多的参考来自竞品，以及我们常用的软件。所以我们的设计稿就会出现上面说的太常规的问题，并没有结合产品具体来考虑，那么我们如何才能让我们的功能和交互有亮点呢？
这需要我们平时下功夫，定期去体验不同APP，查看优秀的作品，将一些功能、交互不错的点都记录下来，量变决定质变，这样你的界面才会变得丰富起来。
上篇我和大家分享了10条我平时的功能亮点记录笔记，本篇文章我将继续和大家分享我记录的趣设计。
熊密：设置落锁时间
熊密APP是我在做界面练习，翻花瓣的时候发现的，看到这个APP的截图就觉得很有意思。
当我下载体验后发现，熊密不仅视觉设计很独特，在交互上也能看到细节的设计，比如个人中心的设置落锁时间。
使用熊密私密日记，当切换到其他APP返回时，可根据需要设置落锁时间，避免落锁太快，反复输入密码；适用于操作频率、安全指数较高的金融记账类APP中。
钉钉：密聊
养成定期体验APP的习惯说起来简单，但是做起来却是很难。当今天我翻遍了手机中所有的APP，还是一个亮点都没找到时，就觉得不开心。
不过刚好我要用钉钉请假时，发现经常用的钉钉也埋藏着功能亮点，所以大家一定不要小瞧经常用的软件，比如钉钉的密聊。
消息已读后自动销毁，在各端不留痕迹，消息禁止拷贝转发，头像名字打码防截屏，这样不用担心消息被泄露了。
随喵：随机话题
这里大家也许会问，你们在哪里发现这么多APP的，告诉大家知乎是个好地方。
我在知乎发现了很多我都没有听过、但是00后们用的小软件，在其中也发现不少的亮点，比如随喵聊天界面的随
五篇系列目前已经到最后一篇啦！今天我们一起看下响应式UI，相对前面4部分，最后这个部分会略难一些，不过看完今天看这篇文章，应该没想象的那么难了。这篇文章以前有大致写过，今天这版本我已经优化补充了。
如今屏幕复杂，多厂商设备尺寸不统一，自Phone X问世后，国内手机厂商的各种安卓X也出来了。
各种尺寸平板等，设计适配难度上升，公司层，产品侧要求多端体验一致，作为设计师的我们更加有责任去了解如何去做多端统一体验，提高设计效率
为什么要学习响应式布局
首先它能够使界面元素在任何大小屏幕尺寸能够灵活适配，保证功能布局和体验的一致性。
毫无疑问, 响应式布局设计对于现今安卓和IOS端碎片化屏幕是非常重要的，它能使我们在最小的资源的情况下完成设计适配，它的工作原理通过断点系统来判断读取布局方式。
断点其实就是媒体查询值，比如我们平时做的 Phone 和 Pad 的适配，又或者其他终端适配，就是通过设定断点来让程序读取对应的布局（断点设定可以根据屏幕分辨率或者屏幕尺寸）
响应式布局的运用范围
响应式布局不只是在Web端用得比较多，当然他也在其他终端也运用比较多，如电脑，pad ，手机，以及车机系统（某些需要考虑全局一致的项目上）；
为什么响应式布局在今天运用依然是很重要的，因为目前使用的系统被2大厂商分离割据，微软移动领域的占比很少，暂不提，苹果一家自成一派，安卓系统占比市场很大，包括国内外很多厂商的定制化系统+自己出硬件设备，尺寸不一，这就导致如今碎片化屏幕。
我们作为软件服务提供商，当然希望一套设计能在多端使用，节省成本，同时保持一致的体验。因此响应式布局就这样一直很重要。
常用的布局模式
1. 流线布局
流线布局：指在界面中的内容元素控件在屏幕显示区域内进行相对拉伸，以达到布局完整的目的，比如上面Pad应用横竖屏切换
2. 等比缩放
等比缩放：定义是指在界面中元素在相对位置进行等比缩放，从而达到解决横竖屏显示相对较好的UI界面,这种布局不会对界面造成布局重构影响，开发成本低，适配简单，一般使用于音乐、视频、电商、杂志期刊App等领域带有图片宫格布局，界面等比放大后这种大图显示效果比较有视觉冲击力前提是需要足够高清的资源支撑
youtube的截图
3. 拓展布局
拓展布局定义：在屏幕可显示区域类元素增加或者减少，常用于应用商店、音乐、视频、电商等带有宫格布局等场景。
如上面youtube的截图就是布局最好示例