1、表单是什么？

表单是我们在网页和APP中使用频率比较高的模块，大多是数据采集的功能，并且都是需要用户自己填写或者编辑的，因此会在很多功能模块中见到，例如12306的信息填写页，个人中心信息、评论和动态发布以及登录页等等。

2、结构

1、减少不必要的表单项目

我从项目当中最深切的感受就是产品太抠了，网页上的信息哪个都舍不得删，整个搬下来，导致页面使用下来用户的体验很差，虽然很多时候表单里的一些内容是无法去掉的，但是还是希望能够简化表单，如下图所示：

用户注册表单时要一并填写姓名和生日，这种与注册无关的信息填写除了增加用户的提高留时间之外，降低对产品的好感度

2、信息的排序从易到难

信息的填写最好是从用户相对无抵触的信息开始逐渐到隐私的信息，而不是一开始就让用户萌生退意，如下图所示：

12306、爱彼迎以及知乎的个人信息填写都比较多，但是将信息分类以后，就增加了页面呼吸和节奏感，从而帮助用户更加轻松完成表单。

而且这里在设计的时候需要注意的一个是分割形式，上图的三个例子分别使用了背景分割和留白分割，其中留白分割在填写时使用的比较多，因为大家要注意的是在编辑状态是有很多填写提示的下划线，背景分割或者分割线分割势必会造成视觉上分割感更强，因此在编辑状态留白风格是比较好的选择办法。

但是展示的时候分割线确实比较好的选择办法，如下图所示：

3、标签

在表单中，标签问题比较多的在于标签的位置放在那里，我们经常看到的有左对齐、右对齐、顶部对齐和浮动标签。如下图所示：

浮动标签和顶部对齐目前来说是使用的比较少的情况，这种位置符合自然视线，能够快速帮助用户完成表单，但是却用的不是很多，因为关于表单的填写，产品还是希望用户能够慢下来的，通过左右阅读，让用户仔细阅读标签，如下图所示：

目前手机端使用较多的是右对齐为主，毕竟用户理解和填写速度都属于适中。

4、操作

在操作的设计问题上，我们一般拿不准的就是不知道按钮要放在界面右上角还是下方，我们先说第一种：

1、界面右上角

这是目前不管是设计还是使用，都是界面中出现频次比较高的一种方式，如下图所示：

这种形式适用于界面信息内容不多，并且用户的可控性比较强，在UGC的产品中较多出现。

优势：按钮的视觉层级不是很高，方便用户更专注于当前页面的填写

缺点：按钮在右上角，不太方便用户一只手操作。

2、固定在界面底部

用主题色作为按钮的主色，并且固定在界面底部位置，如下图所示：

优点：位于屏幕下方，方便用户点击，同时视觉层级高能够吸引用户的注意力

缺点：会遮挡表单，导致用户会错过一些信息，因此这样的按钮大部分都是会放在信息不重要或者不用完全都填写的表单界面上。

3、固定在表单底部

这里的底部与第二种不同，第二种是固定在界面的底部，但是这种是固定在表单的底部，如下图所示：

5、提示和验证

帮助提示大多出现在产品的登录页和隐私信息的填写界面，不同的步骤需要考虑不同的情况。

1、未填写

未填写时给与用户的提示，这种情况是最常见的表单形式，如下图所示：

将需要用户填写的表单信息给予的一定的提示和解释，安抚用户在面对大量需要填写信息时的情绪。

2、填写后

填写验证后出现报错或者不符合要求时，需要作出反馈，可以有下图几种情况：

6、反馈

1、操作前

在用户未对当前页面有操作时，按钮需有不同的表现形式，让用户对操作的行为及结果有预先的心理感知，如下图所示：

很多操作前的按钮都会置灰，显示不可点击的状态，除了给用户提示之外，也是为了避免误操作，当然现在还有一种方法就是如果误触页面会有提示

2、操作后

点击按钮后给页面增加一些微动效，提起用户的兴趣，同时提升表单的转化率。

转自；站酷-潘团子

沉浸式体验就是让人专注在当前的目标情境下感到愉悦和满足，进而忘却真实世界的情境。自iOS 13终于推出“Dark Mode”黑暗模式之后，沉浸式体验愈发受到推崇，各路产品在体验上纷纷跟随，设计出匹配系统的的Dark Mode。可很多设计师就会问，为什么沉浸式设计就一定要是深色的呢？

为什么沉浸式设计大都偏深色？

在《设计的法则》一书中，对沉浸的解释使用的是心流理论，简而言之就是利用人的感官体验和认知体验，营造氛围让参与者享受某种状态。沉浸式设计中，即要有吸引用户的无缝链接的完整故事链条，还需要营造主题场景空间，通过场景延伸融合故事情节，适时制造有趣的互动体验节点等等。从而使用户沉浸其中，忘却真实世界。

可见沉浸式设计的关键是吸引，用户的视线首先被吸引过来。现在大家花10S钟体验一下眼睛的观感，盯着下图左侧的白色背景的界面10S种，转而盯着黑色背景的界面，感受如何？

观看白色界面的时候可能感觉很正常，轻松自如。转而看黑色呢？轻松自如的氛围立马被打破，要挺直腰板认真察看敌情了，整个的都精神起来，甚至变得有点紧张，这就是为什么沉浸式设计大都是偏深色的原因。深色首先让用户感知到的是注意力迅速集中起来，不然总觉得看不清或者会错过什么？所以说深色更容易让人进入沉浸式体验模式，所以在设计上被引用的很多，但浏览深色，眼睛很快就会变得疲劳，而且沉浸式设计只有深色模式吗？答案肯定不是的。

沉浸式体验该怎么设计

黑色能让人注意力迅速集中起来，但除了黑色还能有其它沉浸式的设计方式吗？突然想起Segment.io的创始人Ian Storm Taylor告诫设计师们远离黑色，原因是它会让所有的其它颜色黯然失色。当然我个人非常不赞同这种说法，因为设计好不好不能用颜色来下定论。沉浸式体验需要尽可能地调动五感，长时间吸引住参与者注意力，尽可能排除其它干扰。例如迪士尼主题乐园，利用感官刺激达到心流状态；玩游戏，各种技能与挑战匹配主人的认知达到心流模型。

我们先来总结沉浸式体验具备哪些特点：被吸引去、全身心投入、目标明确、即时反馈、主控感 、无忧无虑、主观时间感改变。这些特点需要营造一种“代入感”，这种“代入感”转变为设计需求就是我们常说的场景化设计、抓眼球设计、故事化设计、情感化设计。

场景化设计

用户被吸引往往是置身于某一种场景之中，场景的设计代入感很强，这是感官和认知相结合在一起的体验形式。迪士尼乐园的游玩项目几乎把这种场景式设计用到了，巴斯光年星际营救、创极速光轮、爱丽丝梦游仙境等等，几乎每个项目都在引用场景化设计，让游客瞬间融入其中。

场景化设计打开的是空间维度，体现了一种空间感纵深感的设计。再就是采用模拟现实的表达更趋向引入场景化设计。

抓眼球设计

抓眼球的设计，几乎是所有设计师最擅长，这好像是最能体现我们专业特长的地方。也是甲方最喜欢用的相关词，说了，我们就要那种是视觉冲击力超级震撼的画面，一下子就能抓住用户的眼球。甲方这一句话背后，也不知道要设计师出多少轮方案才能企及那个高度，说多了都是泪。

抓眼球的设计往往结合那种酷炫光影的表达，呈现出极光的未来科技感，重金属等质感很强的设计，吸引用户的眼球。

故事化设计

听首歌会让人不禁沉浸歌的意境之中，看电影完全被情节所吸引。就如同最近特别火的电视剧《庆余年》付费提前点播事件，造成了结局大泄露。印证了那句话，咱能忍得住不看吗？条漫也是当下超级人们的设计形式表达，因为这种设计的故事性很强，内容一下子就吸引住用户的认知体验。

故事化设计多以插画、条漫的形式来表达，恢弘的场景体现故事的画面感，通过内容深深吸引用户的心智模型。

情感化设计

情感化的设计也算是近两年被提及相当多的设计形式，情感化设计是一种引发用户共鸣的情绪化表达。这种情绪化表达，可以是这种及时反馈的体验感，也可以是这种触动用户的动效。唐纳德《情感化设计》一书中，将情感化设计分为三个阶段对应到产品中的设计。

第一阶段：本能水平的设计——人是视觉动物，对外形的观察和理解是出自本能的。如果视觉设计越是符合本能水平的思维，就越可能让人接受并且喜欢。

第二阶段：行为水平的设计——行为水平的设计可能是我们应该关注最多的，特别对功能性的产品来说，讲究效用，重要的是性能。使用产品是一连串的操作，美观界面带来的良好第一印象能否延续，是否能有效地完成任务，是否是一种有乐趣的操作体验，这是行为水平设计需要解决的问题。

第三阶段：反思水平的设计——反思水平的设计与物品的意义有关，受到环境、文化、身份、认同等的影响，会比较复杂，变化也较快。这一层次，事实上与顾客长期感受有关，需要建立品牌或者产品长期的价值。只有在产品/服务和用户之间建立起情感的纽带，通过互动影响了自我形象、满意度、记忆等，才能形成对品牌的认知，培养对品牌的忠诚度，品牌成了情感的代表或者载体。

情感化设计反馈出来设计的本质问题与产品的内在价值无关，而在于联络产品和用户之间的情感纽带。产品真正的价值是可以满足人们的情感需要，最重要的一个需要是建立其自我形象和其在社会中的地位需要。当以物品的特殊品质使他成为我们日常生活的一部分时，当它加深了我们的满意度时，爱就产生了。

写在最后

沉浸式体验表达的用户的在情境下进入的心流模型，引发感官和认知体验的共鸣。我们常见的“Dark Mode”黑暗模式更易于引入用户的沉浸式体验，但并不代表沉浸式体验设计只有深色模式，通过上文的层层分析，我们发现沉浸式体验的设计方式主要分为场景化设计、抓眼球设计、故事化设计、情感化设计这四个模块的设计。

阅读时间：大约9分钟

目录

• 前言

• 7±2法则

• 费茨定律

• 希克定律

• 格式塔原则

• 色彩心理学

• 冯·雷斯托夫效应

• 奥卡姆剃刀原理

• 总结

前言

最近正好在学习用户体验方面的知识，也查阅了相关的资料和文章，输出是最好的输入，所以把整理的相关文档写下了，也是将所学的知识再巩固下，欢迎大家一起探讨。

7±2法则的定义

7±2法则出于美国心理学家George A. Miller1956年发布的论文《神奇的数字7加减2：我们加工信息能力的某些限制》。Miller最早对短时记忆能力进行了定量研究，他发现人的短时记忆能力的广度为7±2个信息块。

这说明人的大脑短时记忆的容量大约为“7”，并在7+2与7-2之间浮动，因此，心理学家把这个神奇的记忆容量规律称为“7±2法则”。由7±2法则我们可以得出，一般人接受新事物的记忆容量大约是7,最多不会超过9。

心理学家Alan Baddeley质疑7加减2规则。Baddeley（1994）翻出Miller的文章，发现那并不是真正的研究报告，只是一次专业会议的讲稿。Miller基本上是自言自语，猜想人能够同时处理的信息量有没有固有的限制。

此外，Nelson Cowan（2001）等研究者也追随了他的脚步。现在研究表明，那个“神奇的数字”其实是4。（无论是7±2还是4，便于我们记忆同时也协助我们工作提升效率就是最好的数字）

George Mandler（1969）指出，人们能分门别类地记住信息，并且如果每个记忆类别里只有1～3条信息，那么人们能够出色地回忆起来。当每类超过3条信息时，记忆效果就会相应下降，每类有4～6条信息时，人能记住80%；储存信息条数越多，记住的比例就越低，当每类有80条信息时，人只能记住20%（如下图所示）。

举个直观的例子，以下随机给出10个词语，你看一遍能记住几个？

桌子   电脑   椅子  水杯   铅笔   地图   绿植   键盘   鼠标   文件

7±2法则的运用

1、组块记忆

为了改善不稳定的工作记忆，人们会采取一些有趣的策略。其中之一就是将信息“组块记忆”。

也就是把数字分为3-4-4来记忆，抖音的登录账号、美团的Dialog弹窗都是遵循的这一原则。

包括现在在生活中，我给别人发手机号码或者是身份证号的时候都会选择这个原则，自己看着也清晰，也便于对方将信息分类。

2、优化选项

网易新闻和今日头条的导航都遵循了7±2法则，更多的信息左侧滑动即可。

3、页面布局

7±2法则还可以帮我们将页面分组，将内容按照属性分类，使页面更有条理性和层次感，用户能的完成自己的操作，例如：饿了么

费茨定律的定义

任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

用数学公式表达为时间 T = a + b log2(D/W+1)。

T=移动设备所需时长；a,b是经验常量，D=设备起始位置和目标位置的距离；W=目标的宽度大小。

费茨定律的理解

1、设备当前位置和目标位置的距离D越长，所用时间越长；

2、目标的大小W越大，所用时间越短。

费茨定律的应用

1、按钮放大，点击更容易

闲鱼和印象笔记，一个是直接发布闲置，另一个是直接创建笔记，都属于核心功能，将用户最想要或最直接想点击的按钮外漏、放大；增加可点击区域来满足用户的需求。

2、让相关的内容更接近

淘宝、京东的加入购物车和立即购买，在视觉上让用户增加了他们相关性的认知，也减少了两个按钮操作之间的距离和时间。

3、页面的边和脚适合放一些按钮和菜单

安卓手机删除应用时的操作、Potoshop软件顶部菜单等、Mac操作系统的底部应用等，无论我们怎么操作，鼠标都不会超过这些区域。

希克定律的定义

希克定律 — 原称希克海曼定律（Hick Hymalrs 1aw），是一种心理物理学定律。

一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。

希克定律的应用

希克定律的应用很广泛，不仅是在产品上，在生活中也随处可用。

和同事每天都会遇到的问题，一到中午，同事就会问，吃什么？每日一问，看着商场众多美食，真是发愁，但如果她换种问法：我们今天中午吃海底捞还是和府捞面，这样的询问是不是就节省思考和作出选择的时间？

遥控器的设计也是，看到下面两个遥控器的样式，你会感觉哪个好用，很明显是右边小米的遥控器，老人再不用教的情况下就可以自己操作，左边的拿起来我们要花很多时间是研究如何使用，可能刚学会，想进行下一个操作的时候又要去花时间研究，是不是很闹心？

猿辅导APP中，导航默认的是所有的课程，对于学员来说选择自己想要学习的课程，比较浪费时间，右侧的设计就是将我们不感兴趣的课程关闭推荐，剩下的课程大大缩短了我们选择和寻找的时间

格式塔的定义

格式塔（德式造型）是20世纪20年代由德国心理学家提出的一组视觉知觉原理。它建立在“一个有组织的整体，被认为大于其各部分之和”的理论基础上。

格式塔的应用

在我们做设计的过程中，常用的是原则有：简单性、接近性、相似性、连续性、闭合性等

1、简单性原则

简单原理适用于设计中的三角形构图，均衡构图，对称构图，向心构图，摄影中的对角线，X型构图等。这些构图方式都是为了把复杂的信息元素通过简单的方式让观者易于理解。

58同城和爱奇艺首页都是均衡和对称的构图

2、接近性原则

一个页面中，如果两个元素是接近的，给用户的感觉他们之间就有相关性

在支付宝我的页面中，个人信息都是有相关性的，所以放一起遵循了接近性原则

3、相似性原则

我们的眼睛很容易关注那些复杂环境中外表相似的东西，可以利用相似原则组织好界面中的信息和层级关系。

相似性原则在UI设计中也很常见，网易邮箱、腾讯视频都采用了相似性原则

4、连续性原则

人的视觉有追随一个方向上的连续性，以便把不关联的元素联系到一起。

我们在APP中常看到列表也是连续性原则的应用

色彩心理学定义

在自然欣赏、社会活动方面，色彩在客观上是对人们的一种刺激和象征；在主观上又是一种反应与行为。色彩心理透过视觉开始，从知觉、感情而到记忆、思想、意志、象征等，其反应与变化是极为复杂的。色彩的应用，很重视这种因果关系，即由对色彩的经验积累而变成对色彩的心理规范，当受到什么刺激后能产生什么反应，都是色彩心理所要探讨的内容。

色彩心理学应用

• 黑色：精致和力量

• 白色：干净、精致、纯洁

• 红色：勇气、激励、力量；也能激发欲望

• 蓝色：冷静、安定、信任、安全

• 黄色：乐观、欢乐

• 绿色：平衡、可持续的增长

• 紫色：皇权、精神意识、奢华

• 橙色：友谊、舒适、食物

• 粉色：平静、女性化、性

一说到美食，我们能想到的颜色就是橘色，暖色系，因为这个颜色会增加食欲

插播一个知识点：美团外卖选择的橘色，跟美食相关的颜色，我们可以理解，但饿了么平台为什么会选择蓝色而不是暖色系呢？饿了么是以科技为主导的，核心并不是美食，所以选用了科技蓝

在一些电商类网站都会将加入购物车、立即购买颜色设置为红色，因为红色可以刺激人的眼球，来增加点击的欲望，还有微信群和朋友圈的未读，都设置成红色

颜色也是影响人们的情绪，比如长时间在橘色的环境下呆着，会使人焦虑不安，所以一些餐厅在颜色、灯光选择上都会选择用一些暖色系，蓝色和褐色，会使人平静，适合一些酒吧；

但色彩也不能滥用，它是具有联系和含义的，例如：红色代表赤字，即经济困难；也可以代表警告、危险等；绿色代表环保、通行，所以在选用颜色上也要考虑它的含义和意义，要谨慎。

冯·雷斯托夫效应定义

冯·雷斯托夫效应告诉我们，某个元素越是违反常理，就越引人注目、令人难忘。

Hedwig von Restorff在1933年检验了这个理论。她让实验对象观看一系列相似的物品。如果其中某个很特殊，比如说有聚光灯照射，那么相比其他物品，受试者就更容易回忆起这件物品。

比如，下面这个红西红柿

如果你想要让某物引人们的注目，就要使它特殊化，可以通过色彩、尺寸、留白等方式来引起注意

例如：小红色的红色按钮、苏宁易购一套节日气氛的首页

奥卡姆剃刀定律定义

奥卡姆剃刀定律（Occam's Razor, Ockham's Razor）又称“奥康的剃刀”，它是由14世纪英格兰的逻辑学家、圣方济各会修

士奥卡姆的威廉（William of Occam，约1285年至1349年）提出。这个原理称为“如无必要，勿增实体”，即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。”

奥卡姆剃刀定律的应用

我们在进行页面设计的时候并不是内容越多越好，信息飞速发展的时代，大家都讲究快、效率，我只要通过这个APP尽快达到目的为好，繁冗的功能对用户来说只会降低用户体验感，抖音APP底部的导航开始是文字加icon，后来发现图标会影响整体的效果，因为当视频播放的时候，下面的Tab识别度会降低，经过改版，将icon去掉，文字放大，CTR也上去了，之后小红书就开始参考抖音的改版：我不管你去掉的原因是什么，CTR上去就行

总结

一句话在回顾下文章的定律

7±2法则：一般人接受新事物的记忆容量大约是7,最多不会超过9

费茨定律：A和目标B的距离越长，所用时间越长；A大小越大，所用时间越短。

希克定律：选择越多，花的时间就越多，选择的数量增加，做出决定的时间也会跟着增加。

格式塔原则：常用的是原则有：简单性、接近性、相似性、连续性、闭合性

色彩心理学：颜色也是影响人们的情绪，选用上要谨慎

冯·雷斯托夫效应：某个元素越是违反常理，就越引人注目、令人难忘

奥卡姆剃刀原理：简单有效原理，去繁从简

转自：站酷-麦小兜Sarah