手势作为图形界面与用户之间沟通的方式之一，在便携电子设备上大量应用。与实体按键相比，它有着纯粹的简洁性和无尽的创造性，手指的个数变化、不同变量的组合能够创造出无数的操控方式。
位移类手势是指代那些通过手指接触屏幕后的位置变化从而操控电子设备的手势，本篇文章主要讲解单指操作的位移类手势，多指的位移类手势（如捏合）将放到后续文章中讲解。
一谈到位移类手势，大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而，当我们想仔细谈论他们三者之间的区别时，大部分设计师可能无法准确地描述。为了能够准确描述三者的区别，我们在这里引入三个维度的概念，它们分别是控制方式、稳定化效果、以及阈值类型，这三者的不同的变化组合可以创造不同的位移类手势，拖拽、甩动和轻扫之间的区别也是这三个维度影响的。当我们在讨论不同位移类手势之间的区别时，不如说是在讨论这三个维度之间的区别。比如常见的轻扫手势，因为这三个维度的变化就会产生不同的变种，而且不同变种在体验上也存在很大差别，若不分场景随意使用，很容易就影响用户体验。那接下来我们首先了解一下这三个维度。
第一个维度是控制方式，它分为绝对控制和相对控制，也可以通俗的表达为跟手和不跟手，区别如下。
绝对控制/跟手：施加控制的一方（后文简称施控物）的某个属性变化与被施加控制的一方（后文简称受控物）的某个属性变化是对应的。
相对控制/不跟手：施控物的某个属性变化与受控物的某个属性变化不是对应的。
比如在网易云音乐的播放页（下图左），左右滑动黑胶时，手指是施控物，黑胶是受控物，手指的横向位置变化和黑胶的横向位置变化是对应的，即绝对控制。上滑调出评论页时（下图右），评论页的位置和手指的位置没有对应关系，手指的上滑仅仅控制评论页是否出现，即相对控制。
与相对控制相比，绝对控制允许用户去操控受控物的属性变化过程，因此给予了用户更强的掌控感。比如在微信读书阅读页边缘右滑，手指的横向位置与书籍封面的变化过程对应，模拟现实生活中慢慢合上书的感觉，如下图。
但是在有些场景，为了避免混乱，属性变化过程是不适合被用户绝对控制的，此时我们应采取相对控制的方案。比如 iOS 的相机中，左右滑动切换拍摄模式，由于前后不同模式之间的页面框架变化较大，切换时会有过多元素的属性变化，如果使用绝对控制就会导致切换拖沓且混乱，使用相对控制就能避免这个问题。
当我们使用手势控制某个受控物时，由于手势的某个属性（如手指位移）达到阈值，进而导致受控物的某个属性稳定在了特定状态的效果被称为「稳定化效果」，或者也可以称为「吸附」。
稳定化效果能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。
是否有稳定化效果是区别轻扫与另外两个手势即甩动和拖拽的重要维度，当某个位移类手势有稳定化效果，我们就将其称作轻扫。
以滑动切换抖音视频为例，当手指上滑的位移距离和释放速度其中的某一项属性达到阈值后，下一条视频会往上移动到一个固定的位置然后进入稳定状态，而不会出现停留在不完整的中间状态，如下图所示。
在 iOS 端的微信消息页左滑某条消息后会出现更多操作按钮，按钮会在手指滑动的距离达到阈值并松开后稳定在一个固定的大小，而不会停在类似下图左所示的混乱的中间状态。
在多内容选择的场景中，如果滑动与选中是绑定的话，一般需要使用稳定化效果。例如在 iOS 相机里选择滤镜时，滑动滤镜选项不但能够控制滤镜选项的位置，并且会自动选中一个位于中间位置的滤镜，位置的稳定化避免了被选中选项的不明确。
如果滑动与选中是分开的，比如美图秀秀的滤镜选项需要先滑动后选中，这种情况下稳定化效果不是必要的。
不同的稳定化规则带给用户的体验差异是非常大的，最明显的差异是在效率方面。我们使用稳定化效果的强弱来理解，稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。
比如在比较常见的 banner 切换功能中（下图左），无论手指位移和释放速度的值有多高，banner 只能切换并稳定到下一个，不能够一次切换多个 banner。而在网易云音乐的首页排行榜中，一次滑动能够切换多个内容卡片。因此，我们可以说前者的稳定化效果比后者强。
拖拽和甩动虽然没有稳定化效果，但是也存在效率的高低。我们可以将其与轻扫放在一起做对比，如下图所示，拖拽、稳定化效果强的轻扫、稳定化效果弱的轻扫、甩动它们切换效率依次增加。
那么我们决定添加稳定化效果后，如何选择强弱程度呢？选择没有绝对的对错，整体来说主要考虑两点，业务诉求和用户诉求。例如在常见的 banner 切换中，banner 的总数量一般不会很多，业务的诉求是希望尽可能曝光每一个 banner ，使感兴趣的用户进行消费，因此这里比较适合做稳定化效果强的轻扫。在云音乐的排行榜案例里，不同用户感兴趣的榜单是不同的，稳定化效果弱的轻扫可以方便用户单次滑动切换多个，快速切换到自己感兴趣的榜单的大概位置。
百度 App 的表情面板原本是左右轻扫浏览表情，在一次改版中改为了上下甩动浏览。主要目的之一就是为了提高浏览效率、降低非首屏表情的曝光难度。
微信视频号的改版是一个典型的案例，旧版的微信视频号的视频流并不是类似抖音那样的全屏化形式和轻扫手势（下图右），而是占据屏幕尺寸三分之一到二分之一之间的卡片形式（下图左），并且使用甩动而非轻扫。视频号问世初期优质内容匮乏，社交推荐算法不完善，贸然模仿抖音式的全屏化形式和轻扫手势的话，会导致用户浏览到劣质视频时负面感受被增强且切换效率变低，反之卡片形式加甩动手势给予了用户更自由的选择空间，提高了用户的切换效率，降低了负面体验。等到如今时机成熟，再从卡片形式和甩动手势换成全屏化形式和轻扫手势就势在必行了。
在某些场景，用户需要先通过高效的方式选择特定区域的内容，然后进入聚焦状态进行内容浏览和慢速的切换，此时我们需要设计两种切换效率不同的手势应对前后场景的变化。如下图，在 iOS 的照片 App 中，先使用切换效率较高的甩动进行粗略切换找到目标图片大概位置，点击进入大图模式时使用切换效率较低的轻扫进行精确切换查看。
触发稳定化的时机可以分为释放前和释放后，不同的时机带给用户的体验也不同。释放前稳定化指的是用户使用手指滑动屏幕时，手指位移达到阈值后，手指无需离开屏幕，稳定化即可被触发。如下图左，iOS 的相机滑动切换滤镜使用的就是释放前稳定化。释放后稳定化指的是用户使用手指滑动屏幕时，手指位移或释放速度达到阈值后，手指必须离开屏幕，稳定化才能被触发。如下图右，常见的 banner 切换。
释放前稳定化可以避免拖沓，增加切换效率，但是缺点是无法反悔回退且缺乏掌控感。反之，释放后稳定可以反悔回退，掌控感强，但是缺点是比释放前稳定化拖沓了一些。
阈值是能够触发变化的最小值。比如当水的温度达到 100 度时就开始变成水蒸气，100 度就是一个阈值，温度是阈值类型。在手指与屏幕的交互中，手指在屏幕上的某个停留时间、位移、释放速度、点击次数等都可以成为一个阈值类型，达到相应阈值后就可以触发相应的变化，常见的变化有受控物的位置、大小、不透明度等，理论上变化可以是任意的。
在位移类手势中，通常会用到的阈值类型有手指位移和释放速度，手指位移是用户在手指触摸屏幕时的位置与之后某个时间手指位于屏幕的位置之间的距离，释放速度是用户的手指在屏幕表面进行位移后离开屏幕那一瞬间的速度。
市面上的 App 暂时不存在仅通过释放速度判定而与手指位移无关的阈值判定方式，因为其不太符合常识。因此我们在设计位移类手势时，能够选择的阈值判定方式常见的有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。
当我们设计手势时，就需要考虑两者的区别。由于 ① 比 ② 增加了释放速度带来的额外移动距离，因此 ① 的主要优点是高效。但是由于我们无法预判释放速度带给受控物的移动距离长短，所以相对应的缺点就是易误操作和不精确。②就恰恰相反，由于不存在释放速度造成的不确定因素，它的优点是不易误操作和精确，缺点是低效。
甩动和拖拽之间的区别就在于阈值判定方式，甩动是 ① ，拖拽是 ② 。如下图，当在微信消息列表找相应的消息时，用户的诉求就是能够快速找到特定消息的位置，对特定消息的出现在屏幕的位置也没有特定要求，只要能够被手指点击到即可，因此选用甩动较为合适，但是对于调节音量、亮度这一类的操作，滑动的范围有限，因此用户对效率没有太高的要求，但是对于滑块位置的精确度有要求，因此选用拖拽是更为恰当的。
再举一个反例，在 Steam 移动端横滑首页的泳道卡片时（下图左），使用的手势是拖拽而不是甩动，浏览起来特别低效。更适合的做法应为甩动，会更符合此场景下的快速浏览的诉求，如下图右的豆瓣。
对于轻扫来说，使用哪种阈值判定方式有多种情况（如下图所示）。在本文中，根据阈值类型、稳定化效果以及控制方式的不同我将把轻扫分为 A-E 共 5 类（A-E的命名方式仅存在于本文章，因此在向其他人传达时，尽量使用在后文我介绍的手势描述而不是类别名称，以便于对方理解。）。后续会为大家仔细举例讲解，大家现在仅了解一下即可。
当我们在刷抖音视频时使用的手势就是轻扫，是否滑动到下一条视频进行播放的判定方式是① 判定手指位移和释放速度满足任意一个即可，对应的手势类别是上面表格中的轻扫A。如下图所示，在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向位移大于半个屏幕高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离但是手指离开屏幕时保留一个速度从而切换到下一个视频。大部分情况下用户都会使用判定释放速度的方式，因为既省力又便捷。
如果将阈值判定方式改为 ②仅判定手指位移，对应的手势类别是上面表格中的轻扫 B，并且位移的阈值设置得比较大的话，给用户带来的负面体验可能将是非常大的。比如下图中打开美图秀秀的短视频评论浮层后，想要下滑收起时，App 仅判定手指位移，而且这个位移阈值设置得比较大，对于希望通过快速滑动一小段距离收起浮层的用户来说体验很差。即使由于开发资源有限我们只能做到仅判定手指位移，我们也可以通过减少手指位移的阈值来降低负面体验。
但是某些场景下，②仅判定手指位移是更加合适的。比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页。这样处理的原因是在微信消息列表页，上下滑动浏览微信消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值的话，用户可能就极易在下滑消息列表时误操作，无意间打开小程序选择页。
因此，对于位移类手势，选用哪种阈值判断方式要依据用户使用场景和诉求，不能想当然地设计。
了解完三个基础维度后，我们再将其进行组合，从特定手势的角度更全面地理解它们的差异和使用场景。三个维度的排列组合能够生成十余种位移类手势，我列举出了常见的 7 类，如下图所示，这 7 类基本涵盖了 95% 以上的场景，我将一一举例说明。由于施控物控制受控物改变的属性一般都为位置，因此接下来在描述下面手势的定义时我都以受控物的位置变化进行举例。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，无论释放时手指是否仍有速度，受控物都会立即停止移动。（下图的动态演示由 Principle 制作，观看会有些不太直观，大家可以在文章结尾处下载 Principle 源文件后导入到手机里体验，源文件包含文章提到的所有位移类手势）
精确度高但效率低。由于阈值类型仅判定手指位移且没有稳定化效果，拖拽适用于对操作精度要求高，对效率要求低的功能。
在 iOS 设置中调节亮度时，在有限范围内，手指左右拖拽可以控制亮度变化。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指仍有速度，受控物将移动一段距离后才慢慢停止，移动的距离与释放速度呈正相关。若释放时手指速度为 0 ，则受控物立即停止移动。
精确度低但效率高。由于阈值类型判定释放速度和手指位移，甩动适用于需要快速浏览较多内容的场景，如滚动浏览列表。
在微信的消息列表页，使用甩动手势控制列表上下移动，若释放时仍有速度，列表将仍移动一段距离后才慢慢停止。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时的速度和手指位移有任意一个达到阈值，受控物将稳定在一个新位置。若释放速度和手指位移没有任何一个达到阈值，受控物将回到原位置。
由于轻扫拥有稳定化效果，因此它能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。接下来讲解的其他轻扫类型都有这一特性，就不一一赘述了。轻扫 A 与接下来要讲解的轻扫 B-E 的最大不同之处在于轻扫 A 的阈值类型为「释放速度和手指位移」，这让轻扫 A 与轻扫 B-E 有两点不同，一是轻扫 A 可以通过释放速度的快慢去控制内容的切换数量的多少，更加高效，二是轻扫 A 可以通过用手指在屏幕滑动很短的距离但离开屏幕时保留一个速度来切换内容，因此更加省力。
在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向移动大概半个屏幕高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离并且手指离开屏幕时保留一个速度从而切换到下一个视频。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指位移达到阈值，受控物将稳定在一个新位置。若释放时手指位移没有达到阈值，受控物将回到原位置。
轻扫 B 与轻扫 A 相比唯一的区别是阈值类型减少了释放速度的判定方式，这提高了触发切换的难度，使操作成本变高，但是在某些场景下，这也降低了误操作的概率。如下拉刷新等。
比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页，这样处理的原因是在消息列表页上下滑动浏览消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值判定方式，用户可能就极易在下滑消息列表时误操作，无意间打开小程序页面。
因此，当页面已存在一个滑动操作的情况下，还存在另外一个方向相同的滑动操作且仅会在边界情况下才能触发时，为了避免误操作，会将后者的手势设计为轻扫 B 。
上文提到，轻扫 A 的阈值类型为判定「释放速度和手指位移」，轻扫 B 的阈值类型为仅判定「手指位移」，由于前者的实现成本比后者高，导致本应适合做成轻扫 A 的功能有时只能妥协做成轻扫 B ，比如之前提到过的美图秀秀的短视频评论浮层案例，但我们也可以通过减少手指位移的阈值来降低负面体验，后文会讲解如何与开发同学沟通。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是受控物并不随着手指的控制而同步移动，仅当释放时手指位移达到阈值时，受控物才开始移动并稳定在一个新位置。若释放时手指位移没有达到阈值，受控物位置则一直保持不变。
上文讲到过释放后稳定化和相对控制的缺点，释放后稳定化比较拖沓，相对控制让用户缺乏掌控感。两者如果应用到了同一个手势（即轻扫 C ），就会导致用户在滑动屏幕时得不到任何反馈，用户会疑惑是否因为自己操作不当或是设备出现故障。只有当用户手指离开屏幕后才会发现触发了操作，整体的交互流程给用户一种滞后与延迟的感觉。
因此轻扫 C 与其他类别的轻扫相比存在劣势，但是它也存在很多的 App 的 H5 页面中，我的猜测是由于 H5 对于判定释放速度和绝对控制这两个维度与客户端相比难度大很多，因此只能退而求其次选择轻扫 C 这个较差的方案，实际上在同样的应用场景中用轻扫 A 替换轻扫 C 可以带来更好的体验。
下图左是 QQ 的个性装扮的 H5 页面，卡片的切换使用的就是轻扫 C ，如果能够优化为轻扫 A 体验会更好，比如下图右的音街首页卡片的设计。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是手指位移达到阈值前受控物并不随着手指的移动而移动。若手指位移达到阈值，无需手指释放，受控物将开始移动并稳定在一个新位置。若手指位移没有达到阈值，无论是否释放，受控物位置则一直保持不变。
相对控制的方式降低了用户的掌控感，释放前稳定化减少了操作的拖沓感。使用此手势的场景是在多个对象之间切换时，我们不希望用户过于自由地操控对象之间的属性变化过程，并且牺牲掌控感从而增加单次的切换效率。
比如 iOS 的相机中，左右滑动切换拍摄模式时，由于前后不同模式之间的页面框架变化较大，切换时会有不同元素的属性变化，如果使用绝对控制和释放后稳定化就会导致切换混乱且拖沓，使用相对控制和释放前稳定化就能避免这个问题。
上文我们讲到，通过轻扫手势 A-D 对受控物的绝对/相对控制都是存在于稳定化前，受控物一旦稳定化，就脱离了手指的控制，需要手指离开屏幕后再次接触屏幕开始下一次控制。
轻扫E的不同之处在于它可以在受控物稳定化后，仍然控制受控物朝着下一个节点稳定化，在每个节点之间切换时能够明显感觉到分段感，如下图案例所示。
由于轻扫E相对于轻扫 A-D 的特殊性，控制方式中的绝对控制和相对控制无法覆盖这个特殊现象，因此我们使用「多段相对控制」来命名轻扫E的这种特殊的控制方式。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，若手指位移达到阈值，无需手指释放，受控物就稳定在了一个新位置，但是此时手指还是仍然可以操控受控物继续移动的，并且继续移动过程中如果手指位移达到阈值将会到达下一个稳定化状态。
轻扫 E 适用于需要在多个对象之间快速切换和确认的场景，它的使用感觉很接近拖拽。如下图所示，我们可以这样理解，当被切换的对象数量接近于无穷大同时每个对象之间的距离接近无穷小时，轻扫 E 就可以视为拖拽。
iOS相机人像模式切换打光方式、微信的通讯录滑动字母索引导航，它们都使用轻扫 E 来满足多个对象之间快速切换和确认的需求。
了解完上述的维度和常用手势后，我们在脑中就可以形成一个思考框架。当我们要针对一个功能设计位移类手势时，就可以从阈值类型、稳定化效果以及控制方式这三个维度思考。接下来我用一个我参与过的实际项目作为案例给大家讲解一下思考过程。
本案例是网易云音乐陌生人版一起听中的一个功能，一起听的双方在听歌过程中会收到彼此共同信息，比如听歌口味相似度、是否同城、都喜欢哪些歌手等，目的是为了增加可玩性和互动性、降低退出率，鼓励用户互相了解、提高一起听过程中的社交体验。
为了营造仪式感和避免信息过载，共同信息的展示方式设计为了一次只能看一条，进入浮层后默认展示最新的一条，可以通过滑动查看上一条。因此为了避免出现两条同时占据展示区域的混乱状态（如下图左），我们为其添加了释放后稳定化效果（如下图右），同时为了方便用户可以快速浏览旧的共同信息，这里使用的稳定化效果是较弱的，用户可以通过滑动一次切换多个共同信息。
由于需要满足用户快速浏览旧的共同信息的诉求，阈值类型选用了「判定手指位移和释放速度满足任意一个即可」，用户可以通过控制释放速度进而控制信息的切换数量。控制方式则选择了掌控感强的绝对控制。最后的结果如下图所示。综合三个维度进行归类，此手势为稳定化效果较弱的轻扫 A 。
位移类手势的方向一般为上下或左右，但并不是一定要完全垂直或水平才能够触发手势。当上下滑动和左右滑动同时存在于一个页面时，默认会有一个容错角度，比如上滑时手指滑动方向只要左右偏移不超过 45° 都会被判定为上滑，如下图所示。
但是有时开发同学出现失误，导致容错角度没有均分，例如下图中触发上滑和下滑的角度极小，导致用户在上下滑动时非常容易误操作为左滑和右滑。
云音乐也曾有过类似的遗留问题，iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌（如下图 A ，现已修复），安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏（如下图 B ）。
因此，在验收阶段，除了上述的三个维度外，角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下，最好要切换不同的手持方式分别体验一次，因为有些问题只有在特定的手持方式下才能够被发现。
客户端的角度判定方式实际上是一个比较复杂的过程，上述的内容是简化的版本。后续将延展为一篇独立文章给大家仔细聊一聊。
上文讲到，基础的三个维度即阈值类型、稳定化效果和控制方式决定了手势的类别，是设计阶段一定要定义清楚的。但是除此之外，设计一个手势需要定义的细节非常多。比如受控物的移动是否有速度曲线？手指位移与受控物之间的位移的比率是多少呢？这些都是开发阶段不得不面对的。幸运的是，安卓和 iOS 有系统封装好的一套系统组件可以调用，操作系统自行解决了刚才讲到的细节问题，但是 H5 框架下是无法调用系统组件的，手势的各种细节都需要前端开发人员自己编写，难度较大，大部分情况只能实现一些比较简陋的效果，这也是为什么在很多 H5 框架下的界面滑动的体验比较差的原因。
由于信息不对称，与开发的沟通过程中，很容易出现理解偏差。比较常见的错误有：将甩动误解为轻扫 A ，将轻扫 A 误解为轻扫 B 或甩动。如果造成效果达不到预期的情况，很多设计师不知道如何让开发同学修改，只能说“这个手势不丝滑，优化一下”，开发同学也是一头雾水，不知道往哪个方向优化。如果我们能够直接说出“阈值判定方式现在只有手指的位移，需要释放时的速度也能够触发跳转；这个位移的阈值太高了，滑动时很难触发跳转，需要把阈值改为 16pt ”类似这样准确的描述，就能够大大降低沟通成本，顺利验收。为了避免沟通出现问题，下面我将日常经验总结出现希望能够帮助到大家。
首先，一旦涉及到位移类手势，除了必要的文字描述外（可参考上述的手势定义的描述），最好给开发体验 demo 或者其他 App 上类似的效果，否则很容易产生理解偏差。各种 App 上的类似效果大家可以用本文的每个手势的案例给开发同学展示，但是 App 可能会更新，案例可能在未来某个时间就找不到了，所以我用 Principle 做了一个简易的基础 demo 集合（如下图，源文件在文章末尾下载），和我上述介绍的手势是对应的，大家可以拿着这个 demo 给开发同学演示大概的效果，也可以在这个 demo 源文件修改。
下载链接： https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q 密码: asto。
拖拽和甩动由于需要定义的细节参数都被操作系统提前封装好了，一般不需要我们给到额外的标注。但是对于轻扫，我们需要将细节定义清晰，下面将详细讲解。
上文讲到，阈值类型一般有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。①的开发成本高于②。
如果我们选用轻扫的阈值类型是①，开发同学编写代码需要两个参数的阈值，分别是手指位移和释放速度。手指位移阈值一般默认为受控物的1/2，例如下图的全屏短视频和 Banner 。
当然我们也可以自定义一个阈值，比如 100pt 、受控物高度的 1/6 等，没有特别的需要的话使用默认值即可而且也不用给开发同学特殊说明，但是如果有特殊需要想要修改默认值，就要告知开发同学你自定义的手指位移阈值。对于释放速度阈值，通常默认就非常的小，几乎是大于 0 即可触发，一般情况下使用默认值即可。
在本应该选用①的场景中，如果由于技术成本原因不得不选用②，需要注意的是由于缺少了释放速度的判定，手指位移的阈值我们需要设置得小一些方便用户触发，否则就会出现上文中美图秀秀浮层的那样的体验问题。经过我的实验，手指位移阈值一般定为 16pt 是比较适中的，既不会太容易误操作也不会难以触发。
轻扫是一定存在稳定化效果的，关键在于告知开发是释放前稳定化还是释放后稳定化。从开发的角度讲，系统会监测用户的行为，用户在使用滑动时会有按下（down）、移动（move）、抬起（up）三个行为，释放前稳定化是在移动阶段判断阈值并触发操作、释放后稳定化是在抬起后判断阈值并触发操作，开发成本几乎没有区别。
上文提到过稳定化效果强弱的概念。稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。首先，我们需要确定单次滑动允许切换多个还是只允许切换一个，如果允许切换多个，开发同学会设定一个控制切换难度的系数，而只允许切换一个的话就不存在这个系数。通常我们也不需要修改这个默认系数，但如果想让操作更加难或容易触发，可以告知开发同学修改这个系数。
绝对控制比相对控制的开发成本高，如果开发资源并不是很紧张，需要绝对控制的场景就不要退而求其次使用相对控制。涉及到轻扫手势一定要告知开发同学控制方式，否则很可能被视为相对控制处理。
通过本文的学习，我们不但可以在开发工作进行前与开发同学高效沟通，保证开发工作的顺利进行，也可以对自家移动端产品的现有手势进行逐一排查发现问题点进行记录，并且找到合适解决方案，然后用准确的语言描述给开发同学。下图是我在进行手势排查后输出的表格，挑选出一些有代表性的案例给大家作参考，开发同学可以通过它快速明确问题，理解解决方案。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
合理的移动导航设计能够尽可能地减少摩擦，引导用户去他们要去的地方。
这篇文章汇总了移动端导航设计最常见的样式、要注意的设计准则以及优秀的案例分析，一起来系统性地掌握这些知识～
简单来说，导航是用户从 A 点到 B 点的方式，是他们发现设计点并与产品交互的过程。
可能很多用户认为导航的目标是“在尽可能短的时间内让用户从 A 到 B”，但时间短只属于操作结果，这个结果需要依靠合理且简单的设计才能实现。
△ 一个页面中可以存在多种导航。例如在油管首页，有顶部导航栏、筛选器导航和底部导航，这些导航相互搭配为产品助力。
1. 汉堡菜单
围绕汉堡菜单有很多争论，但存在即合理，在合适的场景下汉堡菜单也能发挥大的作用。
来看一下汉堡菜单具备的优势：
△ 使用用户熟悉的设计可以事半功倍。例如美团和饿了么两个产品有着完全不同的主题色，但外卖点餐流程却是一样的，仍然是用户熟悉的操作，并没有因为产品的不同而改变点餐流程。
2. 底部导航
底部导航栏通常包含产品中最主要的导航链接，用户只需要简单的点击就能直观地在不同页面间切换。
△ 几乎每款产品都缺少不了底部导航栏，它方便用户单手操作，不需要太费力就能快速访问产品页面，提高可用性。
3. 顶部导航
关于顶部导航，可以看之前分享的文章，里面详细介绍了顶部导航的设计方法。
△ 顶部导航通常包含页面中最重要的信息，与其他辅助导航结合使用。
4. 卡片式导航
卡片式是一种出色的设计样式，支持改变各种形状和大小，并且能展示文本、链接或照片等各种元素。
随着网络上的内容越来越碎片化和个性化，卡片是在页面中聚合单个信息的好方式。
△ 为了改进体验，卡片可以个性化显示不同的内容。另外卡片很容易适应不同的屏幕尺寸，配合响应性设计。
5. 标签
标签往往是在一个大主题下同时支持多个选项，每个选项都转到不同的界面。
△ 标签通常用于在同一页面中的几个视图之间切换，展示内容上的差异性。而顶部导航栏有主页、搜索、收藏夹等多个图标，代表不同的功能。
6. 基于手势的导航
基于手势的导航可以让用户在所需方向上快速滑动，来完成特定的操作。
这种样式的优点在于，即使最没有经验的用户也很容易掌握，因为手势通常是直观的。
△ 国外大火的约会产品Tinder以及国内的探探，都使用了基于手势的导航样式，为用户带来滑动的乐趣。
△ 基于手势的导航并不是Tinder发明的，但这款产品无疑将这种流行带给了大众。经典的向左或向右滑动模式保持了事物的动态性、简单性和娱乐性。
7. 全屏导航
全屏导航是指将大部分屏幕用于导航操作，能够很好地将用户的注意力聚焦到具体的产品细节上。这是一种以连贯的方式提供大量导航的方法，可以立即帮助用户了解产品的功能。
△ 点击图片可以跳转到全屏大图导航中，能够更清晰地查看商品的外观状态。
8. 3D touch
最初是由苹果公司提供给用户的，这是一种创建导航快捷方式的方法，可以显示选定的 APP 的一些关键操作。
△ 苹果为手机创造了一种全新的快捷方式，同时提供了强大的可用性。
△ 3D touch另一个用途是内容预览，在处理内容选项时例如收件箱或文章列表时，这是给用户提供预览的好方法。
1. 导航需要直观明显
对所有类型的导航来说都是如此。在移动端中由于屏幕空间的缩小和交互成本的增加，导航体验的好坏会对产品产生很大的影响。
△ 从可用性角度来看，直观的导航对目标用户来说至关重要。这意味着需要进行严格的测试和大量的研究，可以使用卡片分类或树状图等方法来验证导航的可用性。
2. 考虑手指的位置
这点对于移动应用来说至关重要，没有用户想反复点击图标却没有反应。
△ 链接和按钮的尺寸需要足够大，以便大多数用户在第一次点击时就能成功点击。页面中按钮的尺寸最小通常保持在10mm。
3. 建立视觉层级避免混乱
小屏幕意味着更容易陷入混乱。即使页面中有少量的元素，如果元素没有平衡，用户仍然会有混乱的感觉。
△ 极简主义是UI设计的一种特定风格，通过必备的顶部导航栏、留白以及由大小、版式、颜色划分的视觉层级来规划页面内容。
1. Facebook
Facebook 的导航构成比较复杂，融合了多种不同样式的导航。
△ Facebook主页包括汉堡菜单、顶部导航栏和底部导航栏。通过这种方式，这家社交媒体巨头明确的将主要内容与次要内容分隔开。
2. Spotify
Spotif 作为音乐流媒体业务的巨头，即使对于新用户来说，页面的设计也容易理解和探索。
△ 以高度视觉化的形式突出每张卡片背后的关键内容，另外底部导航也可以完成繁重的任务指引。
3. App Store
App Store 是使用标签进行导航的好例证，每个标签代表了同一内容的不同方面。
△ 在排行榜中，用户可以浏览付费、免费和热门的标签页，从而快速建立一致性和对其他页面的感知。
4. Telegram
Telegram 可以供任何人使用，汉堡菜单提供了用户可能需要的所有关键导航选项。
△ 每个用户都能立即找出汉堡菜单，非常容易使用和理解，而且几乎不占用界面中的宝贵空间。
5. Yelp
yelp 在创建全屏导航体验时采用了一种稍微不同的方法。
△ Yelp将屏幕划分为两个不同的区域，实际上并没有将整个屏幕专门用于导航选项，而是将顶部用于导航选项，并在底部留下更多的负空间。
6. Trello
页面中的卡片是拉长的矩形，整齐有序地填满屏幕空间而不会让用户不知所措。
△ 卡片系统很好地代表了Trello简化复杂工作流程的能力，为用户带来整洁和方便。
7. Twitter
同样使用了多种导航混合的设计样式。
△ Twitter将导航重点放在底部栏上，涵盖了整个平台中四个主要的方面。
没有高速公路，我们很难便利地在城市间穿梭。同理，如果没有导航，一款 APP 的使用也会遇到很多麻烦。导航就像高速，不断在为用户提供必要的指引！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：Clip设计夹
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
对于任何手机应用程序，如果没有来自用户的一些初始和正在进行的输入，就不会发生任何事情。因此，手机产品设计师、开发人员和产品经理必须了解允许用户这样做的最佳方式。
虽然手机应用程序以及使用它们的用户通常是独一无二的，但是有许多常见的模式(新模式和旧模式)被用来解决这个特定的问题。
用户输入设计的6个目标
在我们深入研究模式之前，了解用户输入设计的六个主要目标是很重要的：
选择合适的输入和资料登录方法
减少输入量
设计有吸引力的数据输入屏幕
使用验证检查来减少输入错误
设计所需的输入文档
制定有效的输入控制
模式的概述
在记住以上设计目标的前提下，下面是我们在将本文中详细介绍的设计模式的概述，在我们的电子书《2014年手机用户界面设计模式》中有更详细的介绍:
1.智能键盘
2.默认值&自动完成
3.立即沉浸(或“惰性注册”)
4.操作栏
5.社交账号登录
6.巨大按钮
7.滑动操作
8.通知
9.显性控件
10.可扩展输入
11.撤销
1.智能键盘
Facebook记事本，Android联系人
问题
用户希望快速输入信息。
解决方案
当用户点击应用程序中允许输入信息的部分时，给他们与输入数据相关的键盘。这使他们不必在字母数字屏幕之间寻找正确的按钮，或者多走一步来访问键盘。这不仅方便了用户，而且还指示了需要从用户那里得到什么类型的输入。手机平台允许相应地标记文本字段，这允许在哪些按钮显示在更显著位置方面有一定的灵活性。
例如，在地址簿或拨号器中输入电话号码时，用户不需要完整的键盘。当他们点击这些字段时，数字小键盘就会弹出，而不是整个键盘，这样就减少了不必要的按钮，简化了操作过程。类似地，点击浏览器中的URL栏会弹出一个稍微修改过的键盘，其中“/”和“。com”按钮显示在空格键旁边，而不是符号键后面。通过连接到系统提供的这些智能键盘类型，你的UI可以根据用户当前尝试的操作进行调整。
2.默认值&自动完成
Skype, Flightboard
问题
用户希望快速完成操作。
解决方案
通过为用户提供预先填充的默认值或基于先前输入的数据的提示，预测频繁选择的项并使用户更容易地进行数据输入。这可以与自动完成功能相匹配，比如在谷歌Play Store搜索中，通过加速来显著改善用户体验。这种模式在标准化用户输入和在问题发生之前预测问题方面特别有用。例如，Skype会自动为输入的电话号码匹配国家代码。从用户的角度来看，这是有意义的，因为他们不习惯定期输入这些信息，但在这种情况下，这种匹配很重要，因为Skype是一个国际电话应用程序。
另一种实现方法是保存用户输入的最后一项，并在用户再次输入或搜索时显示这些最近使用过的项。例如，Flightboard在搜索框下面列出了以前使用过的位置，以避免用户再次输入。大多数地图或导航应用程序也采用这种模式，在搜索方向时自动输入用户当前位置，为用户节省几次点击，因为这是最常见的情况。
3.立即沉浸（或“惰性注册”）
Wunderlist
问题
用户希望在注册之前先尝试一下。
解决方案
越来越多的应用程序允许用户在任何事情发生之前——甚至是注册或登录之前——立即沉浸在应用程序中。
记住，他们一次只能做一件事，而且测试每个新产品的时间有限。随着应用程序的日益专业化，在扶持它们之前找到高质量的用户或客户越来越重要——他们可能会讨厌你的产品或很快意识到它不是他们想要的。向用户询问注册账户所需的信息可能是一件很困难的事情，而且会降低甚至是适合的访问者的注册率。在积极的方面，通过让他们立即体验你的产品，他们更有可能被吸引，因为他们能够在第一次体验时深入探索应用程序。这比我们接下来讨论的onboarding walkthrough UI模式更好，因为它向用户展示而非告诉他们应用程序如何工作。
对于Carousel或Duolingo等依赖用户数据来运行的应用程序来说，允许延迟注册是没有意义的，但Wunderlist或Houzz等应用程序可以允许用户在要求他们确认身份之前进入并使用该应用程序。通常情况下，注册会带来一些额外的好处，比如在Wunderlist中进行跨设备同步，或者在Houzz中创建一本想法书，这会让注册变得更有吸引力。延迟注册并不总是一个好主意，但是选择“注册前试用”可以很好地提高你的应用程序的参与度。
4.操作栏
Facebook Paper, Behance
问题
用户希望快速访问常用的操作。
解决方案
从应用程序的操作栏(或iOS术语中的“工具栏”)提供对重要操作的快速访问。虽然导航条主导了web和早期的手机应用程序设计, 但其他模式的使用，如折叠、滑出式工具栏和侧边栏、指向所有内容的链接、按钮转换、垂直的和基于内容的导航，产生了更简单的应用程序视图，用户可以专注于一级和二级操作，而不是二级导航。常见的操作有：在应用程序中搜索、共享和创建新内容。这个存留的菜单可以帮助用户熟悉UI，还可以通过专注于与用户相关的重要操作清除一些混乱。
5.社交账号登录
Beats Music, Flipboard
问题
用户需要一种更简单的注册和登录方式。
解决方案
整合社交账号登录方法，允许用户通过现有账户登录。这意味着他们少了一个需要担心的用户名/密码组合，同时，你也不必担心密码的安全性。Facebook、Twitter和谷歌是主要的OAuth登录提供商，根据平台和目标受众的不同，你可以在你的应用程序中提供所有这些或其中之一，而不是让用户建立一个他们可能会也可能不会在未来使用的单独的帐户。使用这个注册和登录模式也可以为你提供一些基本的关于用户的数据(当他们使用应用程序时，会自动填充数据), 同时，通过不强迫用户在刚下载的陌生应用程序中输入他们的详细信息，让他们更加舒适。这个简单的特性可以在很大程度上改进你的UX，因此这种模式正在成为一种期望。
6.巨大按钮
Tinder, Shazam
问题
用户希望立即知道他们可以采取哪些操作。
解决方案
理想的触屏点击目标大小可能是72 px,但是一些应用程序，像Tinder，也会给你巨大的按钮让你确切地知道该做什么, 无论你在什么位置，无论你在做什么，你都能很快完成操作——很难错过这些巨大的按钮,即使你没在仔细看。这在更简单的应用程序中尤其有价值，因为在这些应用程序中，用户需要执行的操作非常有限，因此更有理由让他们在各种情境中更容易地执行这些操作。例如，Shazam是用来看电视或听音乐的，它实际上只做一件事。对于试图在这种分心状态下进行多任务处理的用户来说，巨大的按钮是一个巨大的改进。
7.滑动操作
Carousel
问题
用户希望关注特定的内容。
解决方案
允许内容被滑动或移动。这为用户提供了一种非常直观的方式来处理屏幕上的信息。例如，谷歌中的“卡片”现在可以在你不需要的时候被滑走，以清理杂物;类似地，Tinder中的配置文件可以向左或向右滑动，以表示积极或消极的响应。这个模式与我们在导航模式中讨论的滑动视图不同。在这里，滑动手势被用于一项操作，而不仅仅是浏览。有些应用程序结合了两种滑动模式，比如Carousel，它可以让你通过将照片滑动到一边来浏览多张照片，也可以通过向上或向下滑动来分享或隐藏照片。邮箱推广了电子邮件客户端的左右滑动操作，允许你分别通过向右或向左滑动将邮件标记为已读或安排为待处理。Secret用让你发现新菜单的方式来让你发现新动作。向左滑动一个secret代表你喜欢它。
8.通知
LinkedIn, Facebook
问题
用户希望了解他们应该浏览的新活动或操作。
解决方案
通过标记新内容来突出最近的活动。这个模式有几种实现方式。例如，在标签上放置一个计数徽章是由iOS推广开来的，但现在这也可以在许多其他应用程序中看到，如LinkedIn、Facebook或Quora。Twitter在通知按钮上也这样做，但它在时间轴图标的顶部还有一个小点，以更微妙的方式指示新的活动。另一种显示通知的方式是在应用程序中使用一个向下拉的横幅来显示新活动。Facebook应用程序也能做到这一点，当新闻推送中出现新条目时，它会弹出一个小窗口。
9.显性控件
Secret
问题
用户希望快速访问那些二级的或仅与应用程序中的特定部分或内容相关的控件。
解决方案
清理杂物，让用户只在需要时才发现特定的操作。这些看不见的控件可以通过任何手势来访问——滑动、轻击、双击、长按等等(我们在手势模式中讨论过)。这使你能够将这些操作保留在屏幕之外，从而节省一些宝贵的空间。例如，Secret使用手势而不是可视控件。向右滑动，就会出现一个动作菜单，这是我们前面介绍过的折叠模式的简化版。在创建内容时，用户可以在背景上水平滑动或垂直滑动手指来改变背景的颜色和图案，或者在使用图片时，可以改变图片的亮度、饱和度或模糊度。没有其他控件允许你这样做——也不应该有其他控件。这种UI设计模式非常直观、清晰，你一定会看到更多这种类型的交互。Pinterest是另一个使用手势隐藏动作按钮的应用程序。长时间按下一个图像，就会出现一个按钮，用户可以通过将弹出控件拖动到该按钮上来对其进行固定或评论。
Uber是这种设计模式的另一种实现方式。Uber还可以让你在预订和查看车费估算之间进行切换，只要你选择了你想要的乘车类型，就可以通过点击滑块按钮来查看车费估算。这是一个简单而又重要的UI设计模式，每当我在做五件事的同时还想搭个便车，同时还要确保Uber不会用峰时价格来骗我的时候，它都会让我微笑。Snapchat和Facebook Messenger允许你在需要的时候通过滑走所有朋友的账户来访问这些功能。
10.可扩展输入
YouTube
问题
用户希望关注内容，而不是牺牲屏幕空间给控件。
解决方案
设计当用户点击时会展开的控件。这使得大多数控件在用户需要它们之前都不会出现。例如，YouTube和Facebook通过将搜索栏隐藏在一个图标后面来节省屏幕空间，当用户点击这个图标时，它就会展开成一个搜索栏。
11.撤销
Gmail, Chrome
问题
用户希望在没有中断(例如:确认)的情况下快速地执行操作，但是可以选择恢复意外操作。
解决方案
为用户提供一个简单的方法来撤销他们的操作，而不只是要求他们事先确认。在某些情况下，某个操作可能会导致不方便或数据丢失，例如删除电子邮件或编辑一些文本。用户可能因为不知道会发生什么而完成了一个动作;一个宽容的用户界面可以让他们体验到更多的参与感和友好。对于高级用户来说，撤销功能也很强大，他们会喜欢在整个过程中不用UI反复询问他们是否确定要继续操作，就能更好地控制局面。在解释将要发生的事情时，确认弹出窗口可能很有用，但是用户可能直到看到操作的结果才会理解其含义。在这种情况下，最好是让开，同时提供一个安全网络，以防出现错误。
获取用户的输入
时刻记录你应该从用户那里获得输入的位置，他们是否曾经查看过这些输入区域，他们使用这些输入控件的频率，他们从哪里来，又从哪里进入应用程序(即用户流)，等等。不断地重新安排、重新排序、调整大小和调整这些控件，直到你获得更多所需的操作。当然，当用户能够提供输入时，要深入考虑他们实际上是如何使用你的移动应用程序的——确保你在设计应用程序时没有遗漏什么明显的东西。
文章来源：站酷 作者：马克笔设计留学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为什么那么多人觉得应该先学UI设计再学交互设计，因为UI门槛低所以入手快。其实交互比UI更早出现，从需求理论可以看出人们在追逐主观体验的感受，在基础需求未被满足前是不会出现更高层次的需求的。所以UI设计让更多用户感受到了舒适和更好的体验。殊不知，如果底层的交互和产品的可用性未被满足，那么UI做的再好也是徒劳。
市面上大量出现同质化产品、设计，就是因为大家都在按照现有的，常用的模版在设计，现在其实比早两年会好很多，很多设计师已经开始从美化工作逐渐深挖到区分甚至自我驱动或者价值探寻的工作。
例如下面的案例，这是一个电瓶车电池租赁的一个产品。
从美观角度，左侧的界面更加简洁信息也有规律，有美观的banner和看起来让人有点击欲望的大按钮以及“令人觉得很热门”的热门租赁板块。当我不放出右侧的对比图时，大家在第一反应中，有多少人可以重启自己的视角，还是说已经被这个页面所拉入到不可自拔的漩涡中去了呢？
如果让你盯着第一个界面进行改版，我相信还是会有很多小伙伴可能只是会把底下的信息流挪上来，或者新增一些“我们觉得”有用的板块。但其实这整个形态就是错的，即便将错误路径3改成了路径2，你以然还是在错误的路径上，本质没变。所以为什么我们说要做正确的事而不是正确的做事。
交互不仅仅能够让产品好用的，也要让产品走对方向。
另外，UI也是交互的一部分，属于看的懂。好用可以分为看得懂，学的快，用的会，交互体现在人们日常所接触到的大部分媒介，并且与之产生联系。例如一把水壶，水壶的设计形式首先通过视觉让你感知这是一个水壶，如果把水壶的外形做成一个马桶，你觉得它还是一个水壶吗，这叫看的懂。学的快指的是当我看懂了之后我马上就可以对这个产品进行基础操作，例如装水、倒水。而用的会就是这个水壶更多的附加功能，例如烧水、定时、调温等等。
交互的媒介是不可缺少的，大家是否去研究过为什么古代人们撰写文字是从上至下，从右往左而现代人的习惯是从左右的？古代受限于工具、媒介，竹简是主流的记录文字信息的媒介， 有人会说竹简可以从做往右写不是非要从上往下啊，但是大家可以看到人们是如何打开进行阅读的，如果是横着阅读但是打开是上下展开就会非常不自然了。
所以在当时人们为了适应非常有限的工具资源，改变了自然的操作方式。但现代社会如果说你的产品不为用户的使用和场景去考虑，那基本也就凉凉了。
从2g到5g时代的发展，除了生活方式发生翻天覆地的变化外，我们所接触到的媒介也发生了变化，从2g时代以文字为主的信息到5g时代视频、游戏、影音等为主的信息化进步，让人们对信息的获取更加方便快捷。除了内容，外对于像移动手机这样的设备用户对其操作方式和习惯也有了更多的变化，从当初的搬砖按键手机到支持ar等新技术的超智能化手机，改变了我们的认知也改变了我们的生活方式。
平台迁移的交互成本，很多同学可能都玩过moba类游戏-dota，这是一款在电脑端战术竞技类游戏。在dota中我们经常使用的交互形式主要分为键盘和鼠标的控制，键盘用来控制技能的释放和其他快捷物品的使用，都是通过按按键的形式进行释放。通过鼠标右键来控制人物的移动和左键选择技能和物品释放的目标，这是端游中基本的交互行为与操作。
在现在非常火热并且模式和dota相似度很高的王者荣耀手游中，我们看到了，如何从端游到手游的交互迁移。从鼠标控制移动到左手拇指来控制移动，右手拇指来控制技能的释放，在这里大家要注意，在端游中技能的释放是可以非常精准的，并且可以指向性释放在某一个角色中，但手游不行。鼠标拥有移动、视角、释放技能、使用物品多个功能，但是在手游中我们无法做到选中某一个技能再点击到某一个角色上，所以手游中只能进行非指向性的预判技能释放。
同样在端游和手游的吃鸡游戏中，端游键盘控制人物移动，鼠标控制射击与视角，但是在手游中控制射击与视角就需要2个手指来完成非常不方便，也很影响射击的精度，但是如果做成吸附式准星那么也就失去了很多的乐趣。所以很多的厂商为了解决的这个用户痛点开发出了吃鸡专用的辅助设备，专门用来给多余的手指进行射击操作。
另外，大家如果做b端的同学应该也深有感触，平台迁移的成本非常高。想要把集成非常复杂的业务后台切换到移动端是一件很麻烦的事，因为在网页端我们有大量的空间和更自由的控件形式去承载信息，比如联动的左侧标签导航和顶部联动的标签导航，在增删改查的操作中显得清晰高效。但是到移动端上虽然可以到做联动导航，但是页面显示实在有限，很多的信息完全无法在一个界面中呈现，所以要么将页面进行左右滑动，要么拆分进行多步操作。但本身拥有复杂业务功能的后台系统就不适宜迁移到移动端上。
web端的工具和网页通常都会有撤销操作，按CMD（ctrl）+Z大部分都可进行撤销上一步操作，但是在移动端我们无法通过特定、或者统一的手势进行撤销，所以很多时候在表单输入的时候会有一键删除图标，却无法进行撤销。所以我在想是不是可以在用户一键删除信息后，删除按钮变为撤销按钮，有待考量。
到底什么是交互设计，这个问题其实是比较复杂的，也是我一直在思考的问题。所以也翻阅了很多文献，尝试做更多的案例来解释。交互设计的概念真的挺多的，光网上能够找到的定义就不下5种，这些对交互设计的定义中，比较频繁出现的是行为、场景、用户等词汇，交互设计到底设计的是用户的行为，还是设计用户正在交互的媒介或者是用户正在使用媒介这件事情，我觉得可能还是没有能够解释清楚交互设计的本质。
中国历史文字的演变，它并不是一个模仿的过程，而是一个从底层对文化、自由、精神、环境、人的深刻理解而发生的一种进化过程。但现在其实很多的交互形式都是来源于一些大流量产品的模仿，更多的是担心用户成本过高而妥协为满足用户预期。
事实上，为什么我们讲不清楚什么是交互设计，其实UI设计也一样，她绝不可能单纯的指代用工具绘制出用户界面，其实是因为信息不对成、词不达意或者叫做你说的比人听不懂。我可以举例的是我们的汉语
例如“你可以意思一下”，单就这句话，我们大概知道最关键的是“意思”二字，包含了特别多的含义，含义需要通过语境、使用场景来区分，说者的“意思”是想告诉听者什么呢？没人知道，是一口气干完一瓶酒，还是喝一口？还是送一点礼还是？应付一下？
当然这句话中的“可以”也很有讲究，加上“可以”说明你也能选择不“意思”，是不是觉得这7个字让我们整一句话都活了起来，说者与听者如果不在一个境中，听着就压根不知道说者的具体表达含义。
同样的，在设计领域，很多设计师喜欢用大气、高级、逼格、有呼吸感描述的自己的感受。 说出来自己都要笑出声，还有什么五彩斑斓的黑等等。就比如呼吸感这样的词，这个词听起来比较抽象，让听者都有点不太好意思追问什么是呼吸感，其实你问了，说者也不知道怎么描述。可能说者觉得现在信息太密集让人无法呼吸，但设计者觉得现在刚好，所以本身就没有一个标准，更多的就是主观的感受，让你不得不接受这个建议的原因是因为两者的身份。
我们用我们能够讲述的语言去描绘我们不懂的事物，再例如设计师和开发还原只会说往左移动10px，而不会说给这个view加上padding left 10px。还有你和开发为什么沟通起来那么累就是因为你俩完全无法站在对方的角度对这件事达成共识，设计师通常喜欢描述从左到右或者从上到下，但是在开发的语音认知理，他需要知道的是空间坐标，并且具体的移动单位。所以为什么我们那么鼓励广大设计师去学习一些开发知识，开发也尽可能的去补充设计背景。
在这里，交互设计师产出的交互说明文档就是能够帮助设计师与开发有一个更好的沟通，所以能力较强的交互设计或者视觉设计都能够把自己想表达的信息表达的很清楚。
再举个例子，不知道大家有没有编辑过问卷或者做过用户访谈，很多时候是不是觉得收集到的信息无效、无用，其实很多的原因是因为我们和用户对于这些问题压根不在一个频道，比如：你的问卷问的是，您喝酒的频率是多少，选项有：从不、偶尔、经常，在用户的眼里偶尔可能是1年喝一次，而我们觉得差不多1个月喝一次算偶尔，再比如访谈的时候问用户这个问题：您觉得您喜欢下面哪个页面的风格？用户：“什么是风格？”
所以交互设计师有一个能力久显得很重要了：让万物都可与之对话的能力，对话需要什么，是语言。
我们都知道，语言是我们沟通的根本，语言是由词汇按照一定的语法结构在不同的语境中所组成的复杂系统。不同的种族有不同的语言，不同的专业有不同的语言例如在围棋中有长、立、并、空、顶等等，例如在模型手办中有分线、渗线、勾线、补土等，这也都是在特顶专业领域中的一些术语，但这些并不是语言，只是在某个领域中大家总结出来便于沟通的文字符号。
所以我们再回到上方看一下定义，首先语言是由词汇所组成，词汇是由符号做组成，大家可能都听说过比如乐高啊、原子理论这样的组件搭建方法，但这些都仅仅只是规范，而并不是语言。语言拥有更强的普适性和通用性。
那么我所认为的语言他首先包含了能够组成词汇的符号，这些符号大概就是指：点、线、面、体、色彩由这些点线面体可以组成的词汇有：按钮、文字、图标、图片等。但是光有词汇不行，在汉语中有12种词类：名词、动词、形容词，在由句子组成的词汇中包含了不同的成分：主、谓、宾、定、状、补...这里不过多叙述。
语言很重要的一点它具有语境，语言的运用包含了看听读写4个方面，看和听指的是输入，读和写指的是输出，那么交互设计语言中，也包含输入和输出两种属性，例如输入指的是由不同“词汇”组成的“句子”，比如由标题、箭头、色块组成的一个itme，是一个可被理解、看懂的输入属性的控件。输出指的是该控件可被出发并且进行状态的变化和所进行的任务跳转。
这里的控件虽然有两个属性，但是还需要语境来帮助我们理解，一个是它本身所能够输出的默认状态的，比如点击之后的跳转页面，另外他也可以具备产品赋予的自定义属性，例如底部滑出picker。
还有，在汉语中“去买两个桃子吧”，这里的“两”肯能是虚数也可能是实数，但是在交互设计中，我们如何表示点击1下和两下或者是多次呢，一般单击的属性通常可以有一些特性的符号属性所表示出来，例如加下划线的文字、一个带箭头的item、一个图标、一个带有主色的文案等等，那么双击的话可以用双箭头来表示吗，当然不可以，双击在移动端的手势中具有放大、点赞、返回顶部、定位消息、定位光标等功能。
那我们发现如果把交互设计能够做成类似于语言的系统是非常有意思，并且有用的。这会让更多信息不对称的情况消失，不仅仅是设计师，在产品团队中大家都能够有一套共性的交互语言系统，无疑是一件非常提高效率的事。但是目前的很多交互规范的文档中，大多都是多种元素的拼合，给出常用的、可复用的控件、组件，但是大家依然还是无法从语言角度去创新，这就导致了很难会有新的、有用的交互形式的出现，比如很多搜索控件都是承载在顶部导航栏中，那么在做规范的时候也只能在这个组件上去微调，殊不知搜索这个控件的“语境”并不单单只能在页面顶部，例如高德地图做的就很好。这样一来，这个组件的常规规范形式就能和很多产品区分开来了，当然要视产品形态不同。
市面上有许多的新零售电商产品，页面中的信息流也是大同小异，但是无论是交互还是产品在做设计师必须要考虑的就是产品定位与当前状态。例如目前我们看到的都是以下的信息流样式，但是我们要知道，30000个sku和3000个sku的展示策略肯定是不同的根据算法的瀑布流在30000个sku中可以随意展示，但是3000个就不行了，很可能在算法的过程中用户会频繁看到重复的商品。所以使用双列布局的方法并不合适。
所以这样的产品首屏策略就显得非常关键。我们可以看到常规的电商产品中，首屏基本上都是呈现这样的策略，从顶部的搜索、分类、banner、分流入口、cta、营销瓷片区这样的布局，从基本上能够满足一个大量sku电商产品的所有需求，但是如果用户定位和产品本身的基础无法支撑起这样的场景又该如何去做首屏策略呢？
从交互角度入手，那么既然我们无法做到大而全，那么我们至少可以做到精准、限时，让用户上瘾的策略，上瘾模型这边不再赘述。所以类似云集在首屏的策略可以概括为整合搜索与banner、分流入口、cta、营销瓷片以及以时间为纬度展示的大图信息流。重点在于可随意控制的营销工具，以及时间轴的商品推荐，让有限的资源呈现更多的形式变化以及让用户有时间概念，每天固定时间来进行活跃。
通过交互手段我们也可以给运营工具更加灵活化打基础。例如我们经常看到的营销瓷片可以划分为非常多样式与可能性，并且在后台工具中灵活控制，同时除了日常的营销目的之外，在大促或者活动需求下更可以将整一个首屏切换为极具氛围的信息呈现。
最后总结一下，我认为交互设计也包含了视觉，所以我们在决定用什么样的设计形式之前需要考虑更多，入业务、用户价值等等，从而用更加有价值的交互策略提出问题、解决问题会比单纯的用规范去搭建界面更加有效。
不管是做UI设计还是画插画，有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够，其实不然。一个可能是大家总结的太少，从来都是凭感觉和运气去配色，但其实都是有讲究的。本文不会给大家重复讲解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，这些大家都可以从某度中直接搜到。我今天要给大家分享的是人们是如何认识色彩，并且在产品设计中使用的。
大家都知道，对于不同的颜色，我们对其的感知是不同的，有人觉得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那这是什么原因呢？首先我们要知道我们眼睛内存在两种感光细胞：视锥细胞和视杆细胞，视杆细胞能够感知光线强弱但无法感知颜色，而视锥细胞却相反，视锥细胞内还有3种对不同频率光敏感的细胞。我们经常会用到视锥细胞，而视杆细胞却用的少，更多的是在黑暗的环境中使用的多。
视锥细胞的三种类型分别是低频、中频和高频视锥细胞，分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感，它的范围包含的比较广，特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。
大家在平时生活中都能看到，在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识，因为这些非常醒目。更容易被红视锥细胞感知到，但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁的多。
我们来做个实验，如下图，大家觉得在中间的灰色块是纯色还是渐变色，可能很多同学看上去都会觉得是个渐变色，但其实它就是一个纯色，不信的同学可以自己在工具中尝试一下。
但如果你把这个色块拿出来后，不在这个环境中直接进行边缘对比，那就不会出现渐变的情况了。那光说原理，我们也来看一下在产品设计中需要注意的地方，因为在UI界面设计中我们通常需要把一些图片、卡片叠加放置，这样就会造成边缘视觉的对比，本来不明显的两个元素重叠之后变的很明显。所以例如一些标签的背景色和页面整体的背景色。
如果你想要让两个颜色接近的元素具有识别度，那么最好将这两个元素进行重叠摆放而不是分开摆放。另外，如果是卡片样式的设计，背景色一定不要过于灰暗也不要过于浅白，过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比，显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。
还有，为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理，因为文字和背景叠加产生的轮廓只是文字的轮廓，在我们的第一印象中只是一种符号，当它被赋予颜色之后我们才会意识到它需要我们去注意或者可被点击，但依然还是不够明显，所以为了强化可点击这个感觉，我们才用了线框、背景色、箭头等方式。
一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，所以例如闲鱼、马蜂窝等，主色都采用了黄色，黄色具有非常活泼、有趣、好玩的特性，无论是线上还是线下都使用了这个品牌黄色，从每一个线上元素的主色，到线下包装的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的，所以在线上的界面用起来会非常不和谐，和整体偏浅色、轻的风格对比起来太强烈，引起不适。
而且线上觉得还OK的颜色，由于印刷的原理，实物也会更加偏低饱和和偏暗。
我们在上一篇十万个为什么文章里提到了人们如何阅读信息，提到了一个视觉凹的概念。所以在界面中，什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品，使用了高亮色来引导用户视觉。
当然色彩的运用也会讲整个页面的层级凸显出来，而不单纯的用中性色来区分层级。
同样是上两张图，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的“4.7万”和“展开”却不一样，“展开”使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性-点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。
所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱
另外，UI设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺app中播放详情页面，当前板块标签和正在播放剧集的激活状态。
色彩除了上方所述的字段中的不同使用，在图片和整体氛围营造中也起了很大的作用，目前很多2c的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销板块的瓷片区域都会用品牌色在活动时段内进行氛围打造
在色彩的心理学上，大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面，可以看下方多种色彩的描述。
然而其实很多的产品使用的色彩和我们所认知的会有一些差别，比如咖啡品牌的主色选择，在我们常规人之中，咖啡应该是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色
在瑞幸刚出来的时候，很多人其实不太习惯把这个蓝色和咖啡结合起来，但是为了塑造品牌差异化，瑞幸一直将“蓝色”作为品牌的主基调，“小蓝杯”这一称呼不但让消费者感到亲切，也在众多的咖啡中有了属于自己的记忆点。在这支广告片中，主基调同样是使用蓝色，不但符合了当下消费者的视觉偏好，也在为用户留下记忆点之后，也让用户在看到蓝色时自然而然的想到瑞幸咖啡。
但凡各位使用了这样的配色，保证各位过不了试用期，相信我。所以大家千万要避开。
会让人产生“幻觉”！让人产生视觉疲劳，例如我将饿了么这个界面的色调调整一下大家看一下，不亮瞎算我输。
为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色。所以这个也是要避免的
让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点，所以我们常用的方法是6、3、1的色彩配比。
荧光色绝对不可以使用在UI界面中，尤其是主色。会让你瞬间失明！
在很多dribbble的飞机稿中，经常能看到这样的配色和练习。无论是在练习中还是实际项目中，这样的界面也完全无法让用户看到想看的信息，没有重点且轻飘飘的感觉。
说真的，这样的风格确实耳目一新，但个人觉得可能不会成为主流。因为它就和第五种一样：信息可识别性很差。就不说色弱的人群，就正常的用户来说大面积的白色+饱和度低的元素结合感觉就是得了“白内障”。另外我们常说的一点就是所有元素都强调就等于什么都没有强调，这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知，原则是轻量化却又需要那么多阴影，这样就有点自相矛盾的感觉。
为了营造这样的“新拟物”的轻量氛围，还不得不在整个界面中简化大部分元素，能不加文字就不能加文字，说的好听叫做使用了奥卡姆剃刀原则，有一句话一直非常影响我做设计：“设计是需要被简化的，但是简化的过程一定不简单”。所以不是单纯的简化所有元素为了达到这个风格的目的。
例如下方，两种对抗色重叠后会引起视觉闪烁的感觉。是不是觉得我有点帅的晃眼
首先我们必须要说，色彩肯定是需要结合产品和用户的定位去指定和提炼的，所以前期会需要去做一些研究例如用户画像，品牌冲刺或者是情绪板等方法。得到几类“真实的虚拟用户”，从而确定一些主色的方案。然后我们在主色的选择中需要避开上面体到的坑，并且对市面上的app进行总结，我们发现大部分的产品色，简单来讲在我们HSB模式中去色都在一个固定的范围，就像这样。
在上文中也说到用色比例的631法则，所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎，其实辅助色没有非常明显的1种或者两种，都是多色的辅助色方案，都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略，一个主色搭配多个辅色，如果有其他独立的板块可能需要重新定义专属的配色策略。
其次再定义中性色，比如字体和线条以及背景色。字体是为了让信息有对比，显示层级，那么通常给2-3种层级即可，至少2种，至多3种。在选择3个层次的中性色文字是，给大家一个建议：标题/正文文字颜色HSB的B值不要大于20.备注和次要文字b值不要大于50，默认文字不要大于80，大家可以去尝试一下，且中性色不得使用纯黑。
文章来源：站酷 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你是否有在听别人说某某原理法则时一脸懵B的时候？明明知道这个原理却说不出它的名字？不要紧，本文就来介绍与人机交互设计相关的15个常见的设计心理学原理，约13000字，帮助你了解产品的定位，需求目的和交互逻辑，洞悉用户的各种行为，也为自己的设计予以理论支撑。
1956年美国科学家米勒对人类短时间记忆能力进行了研究，他注意到年轻人的记忆广度为5-9个单位，就是7±2法则。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用交互设计上。
因为人脑处理信息的能力有限，所以它通过把信息分成块和单元来处理复杂问题。7±2法则应用很广泛，例如iPhone通讯录中的手机号码被分割成”xxx-xxxx-xxxx“的形式，还有银行卡号、身份证号，我们总是喜欢把一长串数字拆分开来读写，目的就是降低记忆成本，提高信息的易读性，从而达到视觉防错的作用。
Web导航栏选项卡数量不超过9个
在设计网页导航时，如果希望用户记住导航区域的内容或者一个路径的顺序，那么数量应该控制在7个左右（不超过9个），如苹果、Dribbble、behance等网站的导航分类。
Web导航栏选项卡数量过多时
如果导航或选项卡内容很多，可以用一个树状层级结构来展示各级别关系，但要注意其广度和深度的平衡。例如人人都是产品经理和Dribbble，把更多子类别收在二级目录里。
移动端选项卡导航
在移动端应用设计中，常见的电商app例如奈雪和乐凯撒分类模块，两个产品的商品分类布局形式很相似，都是用了选项卡的方式来分类商品，层级明确，相应的提升了用户找寻单品的效率。
Tabbar区标签最多不超过5个
在移动应用设计中，底部Tabbar最少3个，最多为5个（几乎没几个超过5个），这样做除了减轻用户记忆负担，超过5个会降低视觉和操作上的体验。事实上就算只有4个，我们也经常想不起微信底部的4个Tab分别是啥。
顶部导航栏页签
我们看到的大部分app顶部导航栏的页签数量都严格遵循了7±2法则，虽然在横轴可无限滑动，
但在显示区域只保持7±2法则的显示数量，例如马蜂窝、飞猪旅行等。
金刚区图标不超过8个
我们常说的“八大金刚”就是一屏显示8个图标，超过的则放在第二屏。如果两行10个，往往第十个是“更多”入口，总的来说也没超过9个。
banner文案不超过9个字
产品运营banner主文案字数通常控制在9个字以内，在设计时也通常把长标题一分为二排两行，便于用户快速阅读，提升点击率。
在交互设计中，7±2法则是减少用户认知负荷，提升用户体验的重要环节。同时还强调了在设计过程中对产品的预见性，避免在不断为产品添加功能时，破坏原有的视觉基础。
0无需说明书
乔布斯曾说过：“苹果应该创造所有人都可以使用的产品，即使没有用户指南”。
1 一看就会
简单易懂，看一眼就明白你想说什么，不用教学就知道怎么用。
2秒法则
所谓“2秒法则”，是指用户在使用某类系统时的等待时长不超过2秒。在极短的时间内展示重要信息，给用户留下深刻的第一印象。这里的2秒只是一个象征意义上的表达，也许有一点随意，但是这却是一个合理的数量级。我们熟知的“F”浏览模式其实就是间接缩短用户看到重要信息的时长，达到快速浏览的目的。
进入App的首页加载时间如果过长就会导致用户产生厌烦情绪，很容易退出甚至卸载App的行为。因此我们看到许多应用将首页加载时的空白页进行占位图设计。
下拉刷新也是一个设计点，为避免刷新时间过长，设计师通常会在加载动画上做文章。充满趣味性的动效能安抚用户焦躁不安的心情，无形中降低了用户对等待时间的感知。
APP里面的banner设计要有视觉冲击力，如果两秒之内没有抓住用户的眼球，可能就被用户忽略了。
因此，在设计互联网产品的页面时，用户等待的时间越短，用户体验越佳。反之，就会让用户产生焦虑的情绪。
3次点击法则
用户在3次点击之内如果还没有找到他们想要的信息或了解网站特色，他们就会离开该网站。这条原则突出了清晰的导航，符合逻辑的结构和易于理解的网站层级的重要性。(来自《众妙之门》P133)
其实在交互体验中，点击的次数往往是无关紧要的。只要每次点击都是无需思考的，毫不费力地顺势进行，那么用户的挫败感就会大大降低。如果你的网站能够让用户知道他在哪里，从哪里来，要到哪里去，并且能够让用户了解如何完成目标，这样的点击即使有10次也是没有问题的。例如，在京东购买一件商品需要经过“立即购买>确定>提交订单>选择支付方式”4次点击才能到订单支付页面完成购买，这过程中可能还穿插其他的点击行为（比如选择地址、优惠券），用户并没有感受到不方便，使用过程流畅而自然。
在可用性测试领域，“三次点击”定律一直是一个很具争议内容。体现在以下几点：
·研究表明，用户在超过3次点击还没到达想去的页面时，往往并没有退出网站，而是会继续多点几次；
·当把一个3次点击就能到达的流程改为4次点击的时候，用户发现目标页面的能力反而提升了600%；
·合理的导航系统比点击次数更重要；
·比起“3次点击”，有人提出了“1次点击”定律，即用户的每一次点击都应该让他们更接近目标，同时尽量减少能干扰实现这一目标的因素；
·用户抱怨要花很长时间才能找到某个产品，实际上他们是在抱怨无法找到想要的东西，如果用户找到了想要的东西，他们就不会抱怨点击的次数了；
英国心理学家William Edmund Hick认为，在简单的判断场景中：一个人所面临的选择越多，做出决定所花的时间就越长。有时候在选择中花费太长时间从而导致决策失败。
生活中我们也经常会面临选择困难症，比如早上起床就纠结今天穿什么？中午去食堂就会纠结吃什么？造成我们如此纠结的原因就是因为选择太多了（远古人就没这些烦恼，寻找食物时逮着什么就吃什么）。
在设计中的应用
应用到界面设计中也是如此，选项越多，意味着用户做出决策的时间越长。
例如APP Store首页，改版前的首页把众多app平铺出来，对目的不明确的用户来说选择有点多。改版后的首页大幅减少了App的数量，卡片的设计方式简洁且目标清晰。
不得不面对较多选项时， 对主要和次要的选项做视觉权重区分，做好设计上的归类，提升用户做决定的效率。例如美团外卖金刚区第一行5个入口的图标在尺寸和表现手法上都比下面的入口图标要大更醒目。“我的”页面把一些低频率功能或不太重要的功能收纳到“设置”里，此外还可以通过置灰、锁定等方法间接减少选项，降低干扰。
对于多流程的任务进行分步操作，让用户专注眼前任务。 例如Clubhouse注册时，把需要用户选择的选项分步引导完成，让用户能专注当前行为。
对于多种类别的选项应当做二次分类的区分，我们都知道电商平台的品类繁多，仅通过单一分类是不够的，比如数码频道下面还分相机、影音娱乐、数码配件、智能设备、电子教育等大的分类。商品详情页的筛选功能也是贴合使用场景来设计的，所以分类不怕多，就怕混乱。
适用边界
虽然选择越少，用户做决策的时间越短，但这并不是提高用户体验的唯一标准，过度的减少选项，可能导致负面效果。
如上图右，如果在删除App的弹窗中只有一个“删除”选项，没有明显的取消之类的途径，那么用户会觉得特别难受，感觉被强迫去删除。如果当下有急需使用手机处理一些事情，那么这样会把这种负面情绪给无限放大，让用户抓狂。
希克定律主要受影响于选项的多少，但是它不适用于需要高难度阅读的任务。例如考试试题每道题只给你A、B两个选项（学渣窃喜），那也太容易蒙了，这就是希克定律在答案试题中的局限性。
希克定律是一个可以适用于设计的指南，记住要尽量减少用户在一次决策中要做的选项，因为决策效率是一个产品导致用户流失的重要原因之一。引导用户在明确的选项之间进行选择，以便快速将他们送到某个地方（例如账单支付），这将大大提升用户体验并达到你的目标。
费茨定律由心理学家Paul Fitts提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。举例来说，你伸手去拿桌子上的咖啡杯，开始你的手臂迅速地往杯子位置移动，接着你会放慢速度直至找到杯子把手，这个杯子把手的大小与你“抓住”它有着一定的关系。
如上图所示，如果光标现在在任易地点想要去点击目标target，最短路径一定是D，最短路径上容错的最长路径是D+W，只要水平上移动超过了D+W你就点不到了，而这个点击动作所耗的时间是一个常数加上一个以D为正比W为反比的函数的和。
详细解释如下，图中红色方块代表点击目标，虚线代表移动路径，此时因为红色方块目标较大，所以用户从任何一处点击都很容易（可以用鼠标在屏幕任意点移至红色方块试试）。
相反，红色方块目标变小，快速点击就会困难很多，很难一次到位。
但如果红色方块目标很小距离很近的话，因为移动范围小，也能准确的点击到。
按钮越大越容易点击
在页面中，大而近的目标区域意味着用户不需要做太精细的调整就可以轻易的触达目标。比如页面中的大按钮。
将按钮放置在离开始点较近的地方
夸克浏览器的搜索栏就放在离手最近的屏幕底部区域，相比常见顶部搜索栏更方便操作，效率更高。
相关按钮之间距离近点更易于点击
注册登录界面，通常将「注册」和「登录」放到一起，不仅可以在视觉上增强用户对他们相关性的认知，还可以减少在他们之间的距离 。
适用边界
费茨定律鼓励减少距离，增加目标大小以提升用户效率，但反过来亦适用。比如iPhone关机按钮，没有使用点击关闭，而采用滑动操作，还把按钮放在屏幕顶部，这样明显增加了操作难度，进而避免了用户误操作。
App弹窗经常把“关闭”按钮放在卡片的右上角离手远的地方，希望用户先完成弹窗提示的任务。还有启动页广告，喜欢把“跳过”按钮放在难以点击的右上角（恰饭重要），以提高用户的误触机率提高转化。
思考小结
按钮越大越容易点击，因此在程序开发中，会增加按钮点击的热区范围，减轻用户精准点击的压力。但也不能过分的大，容易引起误触；
让相关联的内容更靠近彼此，用视觉手法增强用户对它们相关性的认知。距离产生美，注意不要靠的太近，会出事；
将按钮放置在离出发点较近的地方，比如页面主按钮一般会放在屏幕底部易操作区域；
屏幕的边角很适合放置像菜单栏和按钮这样的元素，因为在屏幕边缘和角落位置有“无限可选中”的属性，可以大胆操作而无需“微调”，参见macOS底部dock栏；
定律的反向使用可以适用一些特殊场景，比如想达到某种目的而降低按钮被点击的可能；
“任何事物都具有其固有的复杂性，无法简化”。
泰斯勒定律（Tesler’s Law）由Larry Tesler于1984年提出，也称「复杂度守恒定律」。
该定律认为：每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。
生活中很多我们习以为常，感觉便捷方便的生活方式，是无数卓越的数学家、工程师、设计师等无数的时间投入，才实现的某个小功能，是他们把这些复杂性转移到自己身上替我们简化了。
说回移动端，每个应用中都有其无法简化的复杂度，也不能按照我们个人意愿去除这些功能。这就是为什么飞机稿都简洁好看，而一搬到线上就面目全非。常见的复杂性转移有：“查看更多”、“查看全部”、“查看详情”、“展开和收起”之类的文字做转移跳转，比如：顶部导航栏的更多图标，就是将常用的功能整合并隐藏在首页设计的更多功能模块中，把用户的操作范围转移到另一个地方。
除此之外，还有一些降低操作复杂度的方法：
删除、组织、隐藏
视觉层面的“降噪”方法，删除会干扰用户操作的选项；功能分类明确，围绕用户行为组织信息内容；隐藏那些不常用而又不能少的功能，延迟及阶段性展示。总的来说就是将复杂的信息收起来，展示重要且简洁的界面。
简化交互设计
可以用代码节省用户操作时间的地方，是互联网人一致的追求。例如，B站的一键三连，用户长按点赞按钮，会同时触发点赞、投币和收藏，省时省力。
算法解放“生产力”
个性化算法就是通过技术手段，将用户复杂度降低，而转移到开发者身上。抖音为什么会让人上瘾？是算法知道了你的喜好，专推给你喜欢的内容而不用自己去找，谁都喜欢私人定制。这对用户来说是一件好事，但就像鲁迅说的：“你觉得好，一定是有人在负重前行”，这里的简化复杂的难度就转移到设计和开发身上了，还逼得机器去学习。例如抖音、淘宝、知乎首页推荐的内容都是基于你的喜好定制化推荐给你的。
我们常说以用户为中心去设计，就需要从用户角度出发，在交互设计中尽量简化操作的复杂度，降低学习成本。但如“复制粘贴之父” Larry Tesler (1945-2020) 所说：“任何事物都具有其固有的复杂性，无法简化”。因此，如何取得复杂度的“平衡点”就是重要的部分，是让工程师及设计师花费大量时间去降低产品的使用难度，还是在设计中保留一定的复杂度是我们需要思考的事。
该原理是由麦肯锡国际管理咨询公司顾问Barbara Minto提出的理论，她强调结论先行，论点自上而下。
你是否遇到过这样的场景，部门开会时有人口若悬河的讲了半天，到最后你都不知道他想说什么。所以如果开会时你会走神，这不怪你，只怪讲演者说话没有逻辑，没有重点。
金字塔原理指示结构化表达遵循结论先行的原则，即任何问题都能归纳出一个中心点，让受众能够第一时间清楚你想谈论的主题。然后由数个论据作支撑，而这些一级论据可以继续由数个二级论据支撑，如此延伸，状如金字塔。自上而下，上层影响下层。
应用到交互设计上，即将信息展示的重点与交互行为的主任务优先展示，再根据用户在这个界面上所愿意停留时间逐级给予更多细节补充。以京东的商品详情页为例，首先金字塔的最上层是用户目标明确直接进行“立即购买”的底部全局按钮，其次是商品的头图和用户评价这些，让用户了解更多信息，进一步促成购买，最后一层是提供商品相关的全部信息、参数、评分等，确保交易的最终完成。在这个过程中，用户在每一层花的时间也在逐级增加，呈金字塔状。
映射到设计师身上也是如此，从设计新人到设计总监，中间差的就是一个完整的设计技能金字塔。就像升级打怪，每完成一项任务获得相应的经验值，累积的经验值帮助我们更快的升到下一级。当把工作中的需要攻克的难题一一解决之后，你的设计水平会在不知不觉中更加精进，形成一套自己的设计风格，成为一名优秀的设计师。
有趣的是，把金字塔模型倒过来就成了“用户漏斗模型”。自上而下，激励用户成长。它告诉我们：
用户的需求是永远满足不完的，所以什么值得做，什么是可分阶段去实现的是决策人需要明白的。如乔布斯所说：“消费者并不知道自己需要什么，直到我们拿出自己的产品，他们就发现，这是我要的东西”；
不断完善主要功能，以满足金字塔顶的核心用户群。决策者常常添加一些自己想要的而不是用户想要的需求，比如在信息流中添加一个广告位；
如何优化完善产品架构，检验产品策略的合理性和完整性；
防错原则由世界著名的品质管理专家新乡重夫提出，即在过程失误发生之前加以防止，是一种在作业过程中采用自动作用、报警、标识等手段。使操作人员不用特别注意也不会失误的方法。
防错原则认为大部分的意外都是由于设计的疏忽，而不是人为操作失误，可以通过优化设计把过失降到最低。该原则最初用于工业管理，后来应用于界面交互设计中，当使用条件没有满足时，常常通过功能失效来表示。
自动检测提示
bilibili在登录时输入框没有内容或没有输密码时，登录按钮处于禁用的置灰状态，只有两者都满足了才可以正常点击。此外登录功能就可能会有用户名错误、密码错误、网络超时、邮箱错误等不同的错误。通常必须账号和密码同时满足且匹配才能成功。
Twitter发帖时只允许用户输入140个字，为了提醒用户，其解决办法是在键盘上方的工具栏上显示还能输入几个字符，超过会以负数警示。知乎发布文章标题过长时也会提示错误预警。
消除可能的失误
防错法则认为大部分的出错都是产品设计的不够优秀，而不该责怪用户操作疏忽，通过设计手法可以把出错率降到最低。防错法则的核心观点是，如何有效的在用户出错之前就尽量避免错误的发生。比如，美团外卖在接受短信验证码时，系统会自动提取验证码在键盘上方显示，用户点一下就可以自动填写，省去了跳出应用——打开短信——记住验证码——再输入的繁琐过程，有效预防了出错的机率。还有微信在绑定银行卡时也是通过扫描银行卡自动提取账号，避免手动输入的出错率。
将失误降至最低
二次确认，在一些比较重要的场景让用户二次确认，通常以弹窗的形式告知用户再次让用户考虑自己的行为结果，进一步降低出错率。例如，最近大家都在用的报税App，会在提交信息前再次确认。
视觉暗示
可在视觉（置灰或隐藏）上屏蔽那些不能选的选项，避免用户点击后才报错或点击没反应。
其次，一些不可恢复的操作，视觉上通常会给强标识。例如，删除短信时的文字颜色“变红”。
为用户犯的错买单
当用户输入错误信息时，比如打错字，系统应该给予用户想要的信息，而不是无动于衷，冷漠视之。
范围限制
其实限制用户的选择并不是一个好主意，但是如果有明确的规则来定义可接受的选项，那么限制用户可以输入的类型是一个很好的策略。例如，Airbnb订房可选日期和设置闹钟时的时间范围。
研究得出，使用产品时有77.7%的错误都是人为的，防错法则可以帮助设计师站在用户体验的角度考虑设计方案，做到操作前、中、后都有及时的反馈，预测到他们有可能发生的误操作状态，让用户更快完成目标，帮助用户减少出错率。
每次拿起U盘插入电脑时，我就呆住了，到底朝那个方向才是对的？
防呆（Fool-proofing）是一种预防矫正的行为约束手段，运用避免产生错误的限制方法，使出错的机会降至最低，进而达到“第一次就把工作做对”之境界。
设计师应谨记：不要认为用户是专家。比如，我们都知道“汉堡”图标就是菜单，点击这个按钮就会调出某些功能。但是设计师忘记了普通用户可能并不理解什么是汉堡包图标、什么是面包屑、什么是抽屉式导航、什么是3Dtouch、怎样双指滑动。更何况普通用户并不会研究App，在他们眼中产品只是众多工具中的一个。因此，一定要把交互和设计做的简单，通用的图标、功能和交互方式最好保持用户熟悉的样子，减轻用户重复学习的负担。每个页面应强调一个重要的功能而不应该让用户做选择题，这些都是有效防呆的好方法。
△页面的中主按钮更突出
防呆设计是预防错误发生的方法，让非专业、无经验的用户可以高效完成正确操作，不要让用户去思考，而是我们时时为用户思考。
又被称作“简单有效原理”：“如无必要，勿增实体。”
通俗点去理解“如无必要，勿增实体”可以理解为“不要浪费较多东西去做用较少的东西同样可以做好的事情。”或者表述为“在其他条件相同的情况下，要求得越少的那个就越好，越有价值”。
应用到设计学领域，该法则认为做产品时功能上不可过于繁琐，应该保证简洁和工具化。例如，产品中为用户提供了收藏功能是否就不再需要喜欢？提供了喜欢是不是不再需要收藏？一定要保证功能上的克制。不必要的设计元素会导致使用效率降低，还会增加不可预知的后果。建议在不损及功能的前提下，干掉多余的元素，当两个设计方案都能达到设计目的时，选择较为简单的那一个有利于更好地传达内容更好地用户体验。
总的来说，我们可以结合《简约至上》一书中提到的删除、组织、隐藏、转移四个策略来将复杂的设计和体验变得更加简单。
删除：关注核心，让用户注意力集中在自己要完成的目标上，删除不必要的功能、流程和造成视觉混乱的元素等；
组织：繁琐的功能通过分块，被组织成清晰的层次结构。还记得我们前面说到的“7±2法则”吗，把项组织到7加减2个块中；分块越少，选择越少，用户负担约轻；
隐藏：隐藏那些主流用户很少使用，但自身更新需要但功能。通过渐进展示和适时出现的方法减少干扰；
转移：把合适的功能转移到合适的设备上去。让用户感觉简单的一个重要前提，就是先搞清楚把什么工作交给计算机，把什么工作留给用户。
小测试，下列饮料中哪一种给你印象最深刻呢？文末揭晓。
可口可乐、雪碧、芬达、崂山可乐、7喜、美年达
雷斯托夫效应又称隔离效应（isolation effect），以及新奇效应（novelty effect），前苏联心理学家冯·雷斯托夫认为，某个元素越是违反常理，就越引人注意，收到更多的关注。
一样东西与以往经历明显不同就产生了经历差异。比如人生中的很多第一次，第一次高考、大学的第一天、初恋、第一份工作等等。该差异也会出现在新奇面孔、电话号码记忆中。奇特的面孔和特殊的电话号码更能被人记住。
该理论以多种不同的方式应用到设计中，最明显的就是如果想要突出某个重点内容，就要使它特殊化，通过色彩、尺寸、留白、字体粗细等设计手段。利用对比来凸显想要表达的重要信息。例如金刚区、tab栏的运营活动广告，特殊化的设计让它们在背景中脱颖而出。
个人中心的会员卡为了吸引用户注意，增加开通率，都成了重点设计对象。
与以往不同的界面设计可以更加的吸引用户，加深用户的记忆，同时扩大了活动对用户的影响力。例如每年淘宝的双11首页设计都与往常不同。
Google doodle 会在一些比较特殊的日子改变 logo 的设计，把logo设计成与这个日子相关的插画或涂鸦，与平时的 logo 形成差异化，帮助人们更好地记住这个日子。
因此我们在界面设计中，若想让用户对哪个模块或者是元素引起注意或点击，就可以打破常规对该元素进行强调设计，使他在背景中脱颖而出。但是不要任何元素都强调，因为什么都强调就等于什么都没强调，就没有重点，所以要谨慎使用这个方法。
回到开篇的题目，答案是「崂山可乐」。相比其他饮料，崂山可乐遇到的少，反而成了最特别的一个了。你的答案是什么？欢迎在下方留言探讨。
食之无味，弃之可惜
损失厌恶是指人们面对同样数量的收益和损失时，认为损失更加令他们难以忍受。 同量的损失带来的负效用为同量收益的正效用的2.5倍。比如，丢100块钱的痛苦感要远高于你捡到100块钱带来的幸福感，也就是说要至少捡到300块才能平复之前的心情。
生活中类似的栗子还有很多，比如旅游时，虽然这个景点很烂，人们依然觉得来都来了，还是要看完再走才“不亏”；吃自助餐时，明明吃不下那么多，可想到花了那么多钱，就要尽可能的多吃才算“回本”，真是应了那句话：“食之无味，弃之可惜”；花了50块买了张电影票，过了10分钟发现是部烂片，就算在电影院睡觉也不愿提前走，觉得这50块钱不能白花...
那么，该如何将“损失厌恶”赋能给产品设计呢？
最典型的莫过于电商App中的各类券满天飞，比如：买二送一、3件7折、倒计时xx小时后恢复原价等等。商家就是为了营造现在不买就会错过的套路，用户也会觉得失之可惜。一年一度的天猫双11，京东618，还有情人节、中秋节等各种有的没的节日都是商家利用“损失厌恶”心理为基础刺激消费。
我们App的用户粘性不太理想，增加一个“签到”功能吧，产品经理如是说。如是我们看到各种签到得礼品，赢红包等活动。中间还不能中断，要连续签到多少天才能得到奖励，用户也担心中断的损失。
某网盘下载文件时，会给你一个10秒VIP高速下载的体验，计时过后又恢复到龟速，让你恨的牙痒痒。虽然这招有点损，但用户体验到了VIP的快感，很多人还是会乖乖成为付费会员。
产品运营中会经常发一些优惠券，虽然知道自己不会用，也要先领了再说。这些券也都有时间限制，快过期的提醒也会加快用户决策。还有0元开通会员，套路是第一个月免费，次月开始按正常价自动续费，典型的“骗”进来养肥了再“杀”。
人天生会对危险的，不好的东西避而远之。如是我们就看到保险行业，他们会用一些负面信息（空难、车祸）刺激你，用户就会产生焦虑，自然就想规避掉这些概率小的风险。例如购买机票时的意外险，QQ退出登录时的提示。
还有就是有用户自己的内容的东西，一般不会轻易舍去。拿我个人来说，飞书一直是我的写作工具，后来看到几个更好用的软件，但要想到把原来的这么多东西全部转移过去也是件很心累的事，太麻烦，还是继续用飞书好了。QQ这个“古老”的软件，估计很多人好久都没打开过了吧，但是让你删了它，你还是不愿意的，因为那上面有很多青春的回忆。
用户会将大部分时间花在其它网站上，因此他们会希望你的网站也能像他们已经掌握的其它网站一样，拥有相同的使用模式和习惯。
Jakob定律是由Jakob Nielsen提出的，他认为用户在其他网站所积累的经验教会了他们如何使用网站，所以他们会希望你的网站可以与那些熟悉的网站一样，相似的使用方式，在使用你的产品、服务、内容和信息的时候，他们不会感到恐慌，而是轻车熟路。该原则鼓励设计师遵循常见的设计模式，以避免混淆用户或导致更高的认知成本。
例如YouTube2017年改版前后的对比，在新版中，网站框架和功能上几乎没动，只是在UI上做了顺应新的设计准则，比如调整字体大小、颜色、栏目间距等。整体上和旧版没太大区别，而且还给用户提供了旧版的选择。
在移动端App中也应如此，在具有相同功能的页面，尽量保持一致。大到页面底层框架（比如电商应用中的购物流程），小到UI设计中的一个按钮，一个图标，甚至一句微文案。
在设计产品时，要先延续大众早已习惯的概念模型。然后再从自己的产品出发，对其进行改善。而不是从零开始制定自以为是的流程。
日常使用的各类修图软件，版式都高度相似，中间是图片，各种滤镜、贴纸、调整等功能都放在底部操作区域，很多相同功能的名称都一样。这是用户最熟悉的布局，可降低用户在同类软件使用的学习成本提升使用效率。
也许你会质疑当所有产品都遵循相同都设计模式，会让产品同质化严重，答案是必然的。此时需要深入了解用户的目标和心智模型（用户访谈、用户画像、用户体验地图等），并将其应用到我们的产品设计中去，缩小我们与用户心智模型之间的差距，从而获得良好的用户体验。上文YouTube例子中，就是通过简单的用户授权（新旧版本选择），避免了心智模型的不一致会带来的问题，当用户准备好随时可以切换到新的版本。相反的案例Snapchat在18年设计改版时，因为新的布局未能确保改版前后用户心智模型的一致性，导致大量用户流向竞争对手Instagram那里了。
但是也要注意设备之间的差异，比如在移动端“汉堡包”式菜单是个不错的方案，可是放到桌面端可能并不太友好，因为大屏幕可视范围更大，小小的汉堡包图标很容易被忽略，这时候平铺出来可能会更好。
思考总结
1、用户会把在其他产品使用中已熟悉的操作习惯转移到另一个看起来相似的产品上；
2、利用现有的思维模型，使用户可以专注于自己的目标上，而不是学习新的操作方式；
3、在进行必要的改版时，请给用户过渡到新版本的机会，即可以选择短时间内继续使用旧版本；
看名称挺拗口，另一种翻译叫做“对角线平衡的和谐状态”。它告诉我们浏览页面是由左上至右下的视线流，左上角是视觉第一落点区，右下角是视觉最终落点区，因此右上角和左下角都是一个强烈的视觉盲点区，大多数时容易被忽略。
在进行信息排布时，将最重要的信息放在左上角，右上角和左下角添加辅助元素，右下角作为整个视觉落点可以展示重要操作。运用视觉元素来创建一条虚拟的“线”，让用户的视线跟随左上到右下这条对角线移动，符合用户习惯性的眼动规律。
古腾堡图表应用最典型的例子就是商品详情页，在界面的顶部展示商品图片、名称、价格、快递和优惠等用户主要关心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角则放置最终促成用户交易的购买按钮。
我们都知道一般页面按钮都在界面底部是因为离手近，方便操作，但不仅仅如此。还因为浏览是用户的第一行为，他们的视线会根据页面元素进行移动，最终停留在底部结尾的地方。
看各种社交产品评论、点赞的位置，就知道产品希望用户先干什么的想法。
弹窗的按钮摆放一般都是左「取消」右「确认」，目的是让用户最快地看到主要操作内容。
余额宝的「转出」在左，「转入」在右，毕竟谁也不想财往外流是吧。
既然如此，为什么“发布”页面的按钮都在右上角呢？因为发布页是属于“编辑页面”，需要用户谨慎操作，这里关注的核心应该是可编辑内容区域，而不是按钮本身。
类似的例子还有很多，设计中与此视觉流与节奏规律相似的还有F型布局和Z型布局，合理运用这些节奏模式，使用者会跟随你“设计”的视觉流和运动规律来浏览页面，有效提高用户阅读的节奏和理解能力。
美国心理学家亚伯拉罕·马斯洛（Maslow.A.H.）从人类动机的角度提出需求层次理论，该理论强调人的动机是由人的需求决定的。他将人类需求分成生理需求、安全需求、社交需求、尊重需求和自我实现需求，依此由低层次到高层次的过程。马斯洛需求层次理论最大意义就在于，它告诉了我们，人在满足了基本的需求之后，就要去实现更高的需求和目标。
马斯洛需求层次理论有两个基本出发点，一是人人都有需求，某层需求满足后，另一层需求才出现；二是在上层需求未获满足前，首先满足迫切需求，该需求满足后，后面的需要才显示出其激励作用。例如，在能感受到爱之前，他们的生理和安全需求一定要得到满足。
回归到产品，一款产品，最核心的是解决用户的需求。马斯洛需求层次理论，为产品的需求分析指明了方向。
生理需求：满足人的最基本需求，如衣、食、住、行、生理方面的需求。诸如美团外卖、淘宝、马蜂窝等为日常生活提供方便的应用；
安全需求：人生安全、财产保险，也是强需求。如是各类投资理财软件层出不穷。
社交需求：包括友情、亲情、爱情多个层次，满足人类社会关系，让每个人不再是孤单的个体。如是微信、微博、Soul、探探、陌陌等不同类型的社交软件多如牛毛；
尊重需求：每个人都有被尊重的需求，都希望展现自己，获得人们认可。此需求可以深度结合在社交需求中。
自我实现：最高层级的需求，完成与自己的能力相称的一切事情，实现自己理想的需要。结合到产品可以理解为能满足自己外在展示（炫耀）的需求，如各类美颜软件，美化后的照片晒到朋友圈，给人看到最好的一面。
由此规律可以看出，越靠近底层需求越是刚需，越往上，就变得越来越不必要，如自我实现，变得可有可无，不再是所有人的刚需。一个优秀的产品，深谙人性满足用户核心需求，才能形成持续稳定高用户粘性的产品。
序列效应法则又叫系列位置效应，是指一种记忆现象： 在列举项目时,排在最前面与最后面的元素，要比排在中间的更容易让人记住。
因为人们对排在头、尾的项目，要比排在中间的更容易记起来。比如我们都知道第一位登上月球的宇航员是阿姆斯特朗，却很少人知道第二位奥尔德林；班级里我们一般都知道成绩最好的第一名和倒数第一名，至于排在中间的很难记住。因此对排在开头的项目产生加强的回想效果，称为“首位效应”( primacy effect)。对排在结尾的项目产生加强的回想效果，称为“近因效应”( recency effect )。
分类页签中，我们通常都会记得“精选”、“热门”这类标签，是希望给用户进入App后看到的主要内容。这就是“首位效应”，把重要性高的内容放在首要位置。
我们都知道界面中“返回”按钮放在左上角，除了操作习惯和防误触外，还因为它出现在页面左上角最开始的地方，更长久地储存在长期记忆之中，需要“返回”时能够快速回忆出来。
tabbar数量不管是3个还是5个，用户通常都会记得第一个“首页”和最后一个“我的”，对排在中间的都会选择性的忽略掉。
有时候新上一个功能，产品想提高它的位置引起用户注意，会和“我的”互换位置。例如网易云音乐，新版本中把“我的”放在第三个tab，为了提升“云村”重要性，把它放置最后一个tab，正是利用了“近因效应”。
近因效应常用于及时进行反馈的设计界面中，比如点赞、评论、分享等功能置于底部不仅可加深印象，同时用户在看到有趣的内容，想要评论或分享时，不用等到文章看完即可操作。从而增强内容粘性，提高互动率。
用户的记忆具有系列位置效应，而且人的短期记忆非常有限，通过序列效应法则的应用，我们可以帮助用户减轻记忆负担。在排列项目时，把重要的放在首位或末尾，以达到最好的记忆效果。
文章来源：站酷 作者：Fyin印迹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
定义：
1.同一页面内不同模块描述
文章来源：站酷 作者：体验为王UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
交互成本是用户在与网站交互中必须执行以达到其目标所需的精力（无论是精神上还是物理上）。
理想情况下，我们希望用户访问网站并在他们眼前找到他们正在寻找的答案。这将意味着零交互成本，并且是检验可用性的里程碑。
不幸的是，由于大多数站点和应用程序都提供了用户可能想要做的许多事情，因此很少能达到零交互成本。大多数时候，用户必须四处浏览，阅读，可能滚动，找到有希望的链接，单击它，等待页面加载，然后重新进行整个过程。有时，一个新窗口可能会在现有窗口的顶部弹出，在这种情况下，用户必须将注意力转移到新窗口上，也许还需要回头看旧窗口以将信息集成到两个窗口中。在其他情况下，用户可能需要记住一页上的信息，然后将其应用于另一页。所有这些动作都需要认知努力并弥补了交互成本。
可用站点将实现各种用户目标所需的交互成本降至最低。也就是说，它们最小化：
阅读
滚动
环顾四周以查找相关信息
理解提供的信息
单击或触摸（不会出错）
打字
页面加载和等待时间
注意开关
内存负载-用户必须记住的信息才能完成其任务
这些用户动作对总交互成本的贡献不同。它们的相对重要性可能取决于用户-例如，阅读障碍的用户阅读时间可能比点击周围的时间困难，而操作障碍的用户可能会觉得点击困难。它们还取决于设备-连接到高速网络的台式机上的页面加载可能微不足道，但是如果蜂窝网络覆盖较慢，则移动设备上的页面加载可能会花费很长时间。
许多可用性准则都解决了使交互成本的各个组成部分最小化的问题。例如，网络写作规则通过推荐要点和简短的要点句子和段落来降低阅读成本。
让我们举一个简单的例子。假设我们要查找“仪式”一词的来源。我们将使用Dictionary iPhone应用程序执行此任务。我们将忽略在手机上查找应用程序所涉及的成本，并且在启动Dictionary应用程序后立即开始分析。
启动应用程序后出现的第一件事是启动屏幕。
在这一点上，交互成本包括等待几秒钟，以使启动屏幕消失并为应用程序的第一个可操作屏幕腾出空间：
在此页面上，互动成本来自定位搜索框。幸运的是，搜索框非常显眼地位于页面顶部，因此我们可以放心地认为，用户只需很少的精力就可以找到它。找到后，用户需要触摸搜索框以将输入焦点移到搜索字段中。搜索框是一个相当大且易于触摸的目标，因此交互成本也可能会降至最低。
接下来，用户必须编辑搜索查询。
当输入焦点在搜索字段中移动时，自动建议的词将自动显示。
用户必须查看自动建议并确定它们不相关，然后清除当前查询。他们可以通过按右侧的灰色x按钮（如果他们熟悉iOS规则）来执行此操作，也可以通过按触摸屏上的Delete键来逐个清除字符。
删除后，用户将开始输入目标词“仪式”。当他们开始输入内容时，关联词会显示在下方。用户可以检查关联词并决定是否要继续键入或停止并选择关联词。
选择（或键入）单词“ ceremony”后，用户必须按Search进入结果页面。他们需要等待片刻才能显示新页面：
用户必须推断Origin可能包含有关单词来源的信息。（对于大多数用户而言，这是一个简单的推论，因此认知成本很低；但是，如果改用“词源”一词，则某些用户可能会在阅读和理解其含义时遇到更多麻烦；因此，“来源”是更好的选择，因为它降低了交互成本。）
让我们总结一下交互成本的各个组成部分，以找到“仪式”一词的由来：
等待启动页面
搜索
输入几个字符
扫描自动提示列表，以查看所需单词是否在其中
如果否，请输入更多字符并在上一步中重复
如果是，请通过点击选择所需的单词
找到搜索框，然后点击将输入焦点移至该搜索框
阅读搜索框中显示的查询和自动建议
决定查询不相关
删除搜索框中显示的查询
键入或选择自动建议
点击搜索
等待结果页面
在结果页面上找到相关的词源信息
向下滚动页面并扫描内容以查找词源信息
找到标签并阅读
请注意，右侧还有更多隐藏的标签
推断词源可能是隐藏的标签之一
注意到滑动会向右暴露内容
向右滑动
阅读Origin并将该单词与目标联系起来，以找到单词的来源
点击词源
了解“仪式”一词的来源
如您所见，一个相当简单而轻松的过程需要很多步骤和子步骤；他们每个人都会产生互动费用。对于某些人而言，交互成本微不足道-例如，记住人们向右滑动即可显示更多内容，因此交互成本非常低，因为人们在移动设备或Web上已经多次遇到水平滚动。可以优化其他步骤以最小化交互成本；因此，在搜索框中使用灰色的小x按钮可以大大降低删除显示在搜索框中的查询的成本。同样，将按钮调大可以帮助点击目标。选项卡的位置和外观设计会影响人们找到选项卡的速度。（当然，选项卡本身的选择与使用其他方式来构造内容的方式也会影响用于在结果页上查找相关信息的位置的交互成本。）
请注意，对于前面各节中的某些步骤，用户可以有多种选择。例如，他们可以按灰色的x按钮删除当前字符串，也可以多次使用Delete键。或者，他们可以从自动建议列表中选择建议，也可以在最后输入字符串。
人们如何决定采取哪种行动？答案在于预期效用的概念：
预期效用=预期收益–预期交互成本
用户尝试最大化一项操作的预期效用：换句话说，他们权衡了每个操作的收益和成本，然后选择收益与成本之间最佳平衡的方案。
当有几种方法可以实现具有相似利益的相同目标时，用户通常倾向于选择使估计的交互成本最小的操作。
例如，许多人可能不会在自动提示列表中向下滚动以找到“仪式”一词，而是可能会再键入一个（或几个）字符，直到可见“仪式”一词为止，因为向下滚动小列表和扫描列表中的正确单词比击中一个甚至几个字符的成本更高。
这种类型的想法也普遍适用于站点级别。如果看起来真的很难在任何给定站点上实现其目标，则除非与初始站点进行交互的收益确实很高，否则大多数用户只会以较低的估计交互成本转移到另一个站点。举个例子，如果用户真的想购买Apple电脑，他们可能会坚持使用Apple的网站，因为他们不太可能在其他地方购买。在这种情况下，用户的动机确实很高，因此他们可能愿意忍受很高的交互成本。但是，如果用户要购买烧烤架，则可能不在乎是否从Home Depot或Lowe's或其他站点购买，并且会离开互动成本高的站点。
营销和品牌推广通常会增加与特定网站或品牌互动的用户动机和预期收益；可用性可以降低交互成本。两种方法最终都解决了增加使用站点或软件的预期效用的问题。
交互成本是可用性的直接度量。实际上，该概念早在人机交互时就被引入，以评估软件系统的可用性。所有的可用性启发将用户的交互成本降至最低。
从长远来看，快速评估设计的交互成本可以节省大量资金，因为它可以很好地衡量用户界面的难易程度。它也可以用作设计备选方案之间的比较工具：通常，将交互成本最小化的方案具有更大的成功机会。
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“今天吃什么啊？”
“不知道啊，看看大众点评，哪家店比较靠前”
“一会去看什么电影？”
“我看豆瓣上，这部片子评分特别高，我们去看这个吧”
当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时，面对的选择越多却越不知道如何做决定，或者当下做了决定觉会一直思考做的这个决定是不是最好的，选择困难变成了大众病。面对用户的选择需求各大平台都有自己的方式，帮助用户做决定的同时，引导用户购买目标产品，极大的降低了用户的选择成本，其中排行榜就是平台的常用套路。用户的选择成本是什么？排行榜为什么能够帮助用户降低选择成本？排行榜仅仅是用来降低用户的选择成本，为什么商家对排行榜也趋之若鹜？下面带你了解为什么人人都爱排行榜，及我们生活无处不在的“显性”“非显性”排行榜。你可能都不知道，我们的生活正在被各种排行榜所支配！
排行榜的本质是一个没有感情的信息筛选机制，某一相关的同类事物之间通过比较，反映同类事物客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可，比如我们买衣服会首选淘宝，电子类产品会首选京东，看电影会看豆瓣评分，这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选，由于锚定效应降低用户自己的选择成本，准备快速的做出选择。同时由于用户的从众心理或者羊群效应，也会对上榜主体产生强烈的品牌认可，为上榜主体带来更多的利益、强烈的荣誉感、甚至流量和平台背书标签，比如：B站的百大up主，各个平台排行榜的销量冠军、朝阳地区必吃榜第一名。那这一切背后的原理是什么？
一个完整的排行榜需要平台、上榜主体、用户三大组成部分，俗话说屁股决定脑袋，不同的定位决定了排行对三大组成部分不同的作用，当然背后的原理也不尽相同。
在没有各种应用前，当我们决定购买什么东西或去哪家消费，前期需要花费大量的人力、物力，搜集相关的信息进行整理集合后，对比集合信息后才能做出决定，也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后，做出择优决策阶段发生的成本或费用都是用户付出的选择成本（前两个阶段发生的成本是交易费用，而不是选择成本）。在备选集的建立过程中，包含的选择越多，用户选择的难度就越大，选择成本就会越高。
选择性排行榜在备选集建立完成后，利用沉锚效应在用户心理建立潜意识的目标参照，帮助用户完成择优决策，降低用户的选择成本。（另一方面平台在帮助降低选择成本的同时，也会影响这用户的最终选择，在接下来的平台侧方面会有详细的分析）
比如说：当我需要买个耳机时，如果在没有各大应用的前提下，我需要找到我身边的耳机发烧友或数码电子方面方面的内行人，收集信息建立备选集，但由于京东在电子设备方面的权威性，我会优先查看京东的耳机类排行榜，也就是说京东完成了前期的信息搜集及备选集建立，而用户出于对平台权威性的信任，根据平台给出的维度参照、品牌参照、价格、标签参照等信息，最终快速的完成自己的选择。整个过程就是用户在对锚的寻找，以及用户对信息确定性的寻找过程。
在马斯洛需求中，当个人的生理需求和安全需求被满足时，与他人建立情感联系或关系成为人们最强烈的需求，即社交需求。社交又分为：为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如：QQ音乐新增的扑通社区、微博明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。
无论是“功利社交”还是“共情社交”首先需要的是沟通，沟通的本质则是信息的流通，但当双方都没有可以沟通的信息时则社交不成立，而类似：微博热搜、今日头条、澎湃新闻等信息类排行榜，则给有社交需求的用户提供了相通的谈资。
在选择类排行榜中，提到的从众心理（又称羊群效应），是指人类由于对信息压力及规范压力，会希望融入到群体中寻求安全感的特性，即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感，会热衷于浏览此类排行榜来获取实时信息，融入群体生活。每天早上，在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件，在上班电梯或工作间隙讨论各自掌握的信息，及对事件的见解，甚至在与他人有相同的见解或之后，会对对方产生莫名的亲近感，满足自己的社交需求。
过年期间各家app纷纷推出自己的用户年度报告总结榜，不知道你有没有参与到其中，并分享到自己的朋友圈。在我们的平常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序，人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外，还需要了解自身在大数据下的自我确认，通过各种各样的榜单，判断自身的能力、情绪、价值等，来达到自我认同，否则就会感到焦虑不安。
加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解“社会是舞台，人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程，我们想要呈现给观众怎样的形象，需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己，为了维持自身的平衡防止崩溃，人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己，让用户更加清楚的认知自己，同时通过分享，满足自我确认以及他人确认的需求。
我目前只总结出这三种类型的排行榜，如果有小伙伴想到其他类型欢迎在评论区提出，一起参与讨论。
无论哪种排行榜，用户信任的基础都来自对平台的信任，那么用户为什么信任平台？排行榜对平台意味着什么？背后原理是什么？
对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性，选择成本是品牌经济学的核心，而用户对于排行的信任首先要建立在平台品牌的权威性下。
从我们记事起，我们对世界的认识来自自己的父母或老师，而这些教导我们什么是对、错，对当时的我们来说是权威的化身。长大后我们对于权威的认可更倾向于某一领域的专家，比如：医生、律师、教授等。认为处于权威地位的人在某一领域相对普通用户的判断更可靠，可以帮助普通用户节省研究问题的工作，做出更轻松的决定，虽然不一定是正确的。
搜索我们会第一时间想到百度，影视、书籍会想到豆瓣，想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性，形成品牌号召力，推动用户做出需求决策。另一方面排行榜中也会说明数据来源，比如京东会在排行榜页面有明确的榜单说明，豆瓣根据平台数据更新，汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明，减少用户做出决定中的思考、猜测，获得用户的信任，增强平台的权威性。那对于平台来说权威性的建立意味着什么？
平台权威性意味着说服力和影响力，在减轻用户的决策压力的同时，影响用户做出平台所需的决策方向；
每年苹果发布会都会带来范围极大的热度讨论，而app store内的热门推荐自带话题度和讨论热度
排行榜作为内容输出口，在平台权威性的背书下，产品优化自身的价值，而平台也可以通过排行榜优化自身平台价值
平台权威性下，可以通过多种方式达到盈利，比如苹果app store应用商店内的付费应用，百度的凤巢系统、微博热搜的第3、4位排名等。
在平台完成建立权威性开始利用排行榜进行商业变现时，比如百度、58的竞价排名，现在大部分应用会使用明显的方式告知用户，防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”，淘宝、小红书推荐猜你喜欢的“广告”。
上榜主体作为整个排行榜的内容中心，由于排行榜自带的竞争机制、筛选机制，使得用户会很乐于分享出去，比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。
由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度，以及各种潜在资源，比如：流量、资源、人脉、某一领域影响力、平台背书等等，这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感，比如bilibili不同粉丝量级会送出相对应的粉丝牌。
而平台方也利用上榜主体挖掘潜在的用户，为平台带来更多的新用户，加强平台权威性，形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量，带走平台用户的情况。比如去年和热闹的“巫师财经推出b站，签约西瓜视频”，各大平台也时不时会出现抢占流量up主的情况。
排行榜设计要达到用户攀比的效果，很重要的充分条件就是相同需求的好友基数足够大，这样才能构成排行榜设计成功的必要条件。
对于已有成功产品的公司，可以借助平台相互间的导流完成初试资源的搭建，比如：微信初期借助QQ好友流量，带来好友初期的爆发；抖音最初的活跃借助今日头条的流量输入。
不断推送已关注好友的信息流，当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交，你要先有这个人联系方式才能要求好友，关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等，不断社区建设推送动态信息流和好友卡片推荐。
当应用建立初期，没有很多的资源和内容时，需要平台自行填充内容，使得排行榜信息量大，增加用户活跃，才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等，或是平台pgc发布推送的内容。
面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化，根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。
在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成，其他则根据不同产品类型及产品需求决定是否展示。
在首页底部或顶部tab形式出现，多出现在以UGC或文字信息为核心的产品，以内容信息为主，常见以信息热度为主要功能的资讯、新闻类应用。比如：知乎、今日头条、36氪。
知乎热榜内容完全展开；36氪分为话题榜、人气榜，话题榜仅展示前5条，人气榜展示10条，仅在前5条有名次图标，在36氪热榜的中部还会出现收藏榜，综合榜。
而今日头条仅在整个页面的1/3处展示部分“头条热榜”，点击“查看更多”后，展开“头条热榜”及“今日关注”“北京热榜”，整个交互形式类似微博热搜。
首页功能入口处明显排行榜图标，优先级较高，常见自带推荐属性，能够帮助用户快速选择，减少选择成本，比较依赖榜单的应用。比如：豆瓣、音乐类、腾讯动漫等应用。
其中豆瓣、网易云音乐由于各种类型的排行榜很多，在图标点击开后，在当前页面平铺不同维度榜单类型，用户进行点击跳转；腾讯动漫相对榜单类型较少，在左边侧边栏切换不同的榜单。
用户查看商品详情时，可能会希望能够横向对比同类商品，才能最终决定购买那件商品。常见于电商类应用，比如：京东、拼多多、得物等。点击后进入不同的榜单页面，获取更多产品信息进行筛选。（淘宝的商品详情页没有排行榜，但在首页却存在隐形排行榜，在隐形排行榜模块会有详细说明）
当用户没有明确搜索目的时，搜索框的下方，平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户，比如：微博热搜、淘宝热卖、抖音热榜等。
没有明显排名及规则，但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前，位置越靠前，在用户心目中的默认位置越靠前，比如淘宝的“有好货”、编辑精选等。
在平台建立初期没有特别的内容供平台呈现，这时候就需要平台人工有目的的推荐一些内容，不同于“猜你喜欢”建立在用户的行为数据下，编辑推荐更多的平台希望用户看到的内容，一方面作为平台内容的输出口引导用户，另一方面内容是平台自己发布内容，也可以保证内容的高质量。
平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期，并且存在大量的平台用户使用数据，“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性，各大应用平台适用性强，一般出现在首页部分。
朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜，这些其实是用户自己确定了解自己，且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓，清楚的认识自己。
不知道大家小时候看没看过《第10放映室》，那是我最早关于排行榜的印象，里面会有各种最佳动作片总结、最佳男配角总结等等，以香港电影偏多，是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐，这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜，从众多选择中选择出部分答案，给出理由，而用户只需在已被筛选过的内容中进行决定，节省选择成本，比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定，但可以迎合用户对确定性需求的各种盘点性质的排行榜，比如抖音的TOP榜哥就是盘点各种内容，人物。
相比其他排行榜，筛选后的内容已经体现了用户的具体需求，高效明确的给用户提供选项，引导用户快速选择。
排行榜一般由必需的榜单头部、上榜主体，及非必需的榜单规则、更新信息构成；而上榜主体由必需的主体信息、排序，以及非必需的推荐理由、排名变化、热度信息构成。
好的榜单能够快速吸引用户快速找到自己的需求点，引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部。
当排行榜在整个应用中有且只有一个时，通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出，增加平台的品牌权威性。
有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况，为了平台的统一性、降低后期的维护成本，一般会使用可复用的榜单头部，如豆瓣、京东、QQ音乐等。
得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配，但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案；马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式，通过更换文案底图达到适用不同主题；京东就相对比较简单，只是更换标题的文案达到多主题适配。
排行榜上榜主体由于不同的场景业务需求，一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式，其中主体信息及排序为排行榜必须信息，而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。
纯文字的排行榜一般是以内容（或标题）加排名的形式出现，常见以信息为主的排行榜，比如微博、知乎、今日头条等以信息为主要关注点的应用，或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准，因此会在标题及排位外，增加各种突出热度信息的表现形式，如关注热度人数，或是“热”“新”“爆”等等表示热度的标签，如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化。
相对于纯文字形式，图文结合的排行榜因为图片信息的增加，使整个榜单主体占居更多的空间也可以展示更多的产品信息，辅助用户进行选择。
上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式，延续了用户阅读新闻类资讯的习惯；而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图，因此沿用至线上使用的也是竖版图片形式；而京东、大众点评、马蜂窝则使用方版的图片形式，大概是因为产品的多样性需要考虑多种图片的适配问题。（视频、游戏类由于使用场景大部分采用横版图片形式；但由于游戏封面、宣传海报也会有竖版的形式，比如：游民星空、小黑盒）
每当设计图文结合的部分，首先要考虑到底是采用左图右文还是左文右图的形式呢？可能很多人会说这两种形式没有什么大的区别啊，有什么可纠结的！或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的，因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。
人类对画面的阅读及扫描方式通常为三种布局方式，包括：古腾堡图（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中产品列表页中最常使用的就是F型布局模式，F型布局是雅各布·尼尔森（Jacob Nielsen）在公司进行眼动追踪研究后首次提出的。与其他模式相同的是，眼睛从上/左，水平移动到上/右，然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后，向右扫动的次数会越来越少，并且会随着向下移动，眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面，即自左向右自上而下的阅读模式，越向下信息获取效率会越低。
因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式，比如：腾讯动漫、爱奇艺、得物等等。
说到排行榜我们一般第一个会想到领奖台，很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜，平台用户的注意力大部分集中在第一名，而领奖台的形式模仿现实生活中的奖励形式和仪式感，将整个排行榜的关注范围从第一名扩展至3名，另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系，增加了第一名的高度。（目前这种形式我只在微博的明星势力榜及抖音的直播全站榜中有看到）
榜单规则是排行榜规则的描述，是平台权威性的体现。榜单规则有些平台本身具有数据库，会有相关的平台数据支持如京东；而汽车之家则依靠“汽车工业协会”外部的数据支持，增加平台的权威性及榜单的可信度；
信息更新一般存在在榜单头部和上榜主体的中间，有些是固定时间更新，也有类似微博热搜是实时更新的模式，而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。
排行榜的成功看似是人们对于选择困难、信息获取的解决方案，但归根到底因为人们对于不确定性的惧怕，无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式，结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同，排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑，以及用户操作行为背后的思考及心理效应，提出合理的设计，帮助用户了解产品功能，满足用户需求。
文章来源：站酷 作者：9号自习室
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
国内互联网近几年发展迅速，在很多方面都超过了一些其他国家互联网的发展阶段。随着国内互联网产品竞争日趋激烈，很多企业都把目光投向了用户量庞大的海外市场。而疫情对于全球经济的影响更是加速了海外市场的数字化进程。据 Sensor Tower 数据显示，2020年Q1全球移动互联网应用下载量达336亿次，同比增长了20.3%。
产品出海的第一道屏障就是语言。但若想打造一款能够适应海外市场的产品，只完成不同语种的翻译是远远不够的。在产品设计的过程中，我们需要考虑两个方面：国际化与本土化。
国际化+本地化的策略，也就是“glocal—global+local”，指的是结合国际统一和地区差异。这种策略在统一的前提下，通过灵活配置保障地区的个性化体验，既能满足统一维护提升产品效率，也能保障当地用户的特殊诉求，是一种性价比很高的设计方案。
产品设计的国际化
产品的国际化，即全球化。国际化的通用设计能够为产品打造一个全球统一的形象与内核。
Chrome的不同地区首页功能与样式基本一致
一套通用的设计系统和设计规范，既可以帮助我们在产品的国际化设计中 树立产品调性，又可以保证操作的 一致性，同时提升设计的 高效性。阿里旗下面向东南亚市场的购物平台Lazada在开发之初，通过使用Fusion Design的设计系统，大大节省了设计的时间。在如此复杂的电商业务场景之下，整套产品的设计最终仅3靠个设计师就完成了。
设计系统对产品研发成本的影响
除此之外，一致的内核也能够帮助企业在全球范围内建立起统一的品牌形象，增强 品牌的识别度与知名度。
产品设计的本土化
想要让产品在某一个市场上站稳脚跟，对于本土化的思考是必不可少的。本土化的核心是 因地制宜，根据地区差异相应调整产品策略。
UC浏览器在不同地区的首页布局
为什么说本土化对于产品的出海非常重要？其原因并不难理解。Charles Eames说过，“Recognizing the need is the primary condition for design.” 任何设计的本质都脱离不开对需求和问题本身的理解。好的设计是在对需求、动机、心理、环境等相关因素有了充分了解之后所产出的解决方案。
针对海外设计研究的思维框架
在考虑产品的本土化时，我们需要关注到用户的需求是什么、是否仍然成立，用户的行为模式是什么样的，以及整个外在社会物质、精神环境等方面的状况。蚂蚁金服团队通过海外本土化设计实践，总结出了一套“环境-人-需求“的研究框架，列出了可以去调研的多个方面。
蚂蚁金服-“环境-人-需求”出海产品设计研究框架（做了小部分修改）
需求（价值）
首先，我们要做的第一步判断就是原来的 用户需求是否成立。产品在原市场想要解决的问题，是否在新的市场仍然存在，即我们的产品是否 有用？这个问题的答案决定了原先的产品是否对于该市场的用户是有 价值的。如果有价值，那么就可以深入探索如何让用户用起来；如果没有价值，那么就需要进一步判断是否要继续开拓这个市场，以及如果继续开拓这个市场，在原有的产品形态上，我们能否通过改造的手段让它符合在新市场的用户群中挖掘出来的、不一样的 新价值？达到了“有用”的标准，我们则需要开始考虑“ 好用”的问题。只有满足“好用”这一条件，产品才能够被用户用起来、从而真正在新市场落地。在实现“好用”的过程中，我们可以关注以下几个层面的影响因素：
生活形态、价值观
生活环境与社会环境会塑造当地用户的生活形态与习惯。下图分别是日本和北美地区的新闻资讯类App。同样是推送新闻资讯，两者在表现形式上却大相径庭。可以看出日本的新闻App布局紧凑、信息量大、页面坪效很高；而北美的新闻App则更注重突出重点内容，信息密度相对来说并不高。
日本-新闻资讯类App
北美-新闻资讯类App
这种差异的背后，其实是两地上班族生活形态的差异。日本城市小、人口密度大，上班族通勤大多会选择地铁。而北美地区面积大，大部分人会驾车上班。驾车的人双手需要长时间控制方向盘，同时开车也需要持续注意路况，只能在间隙中查看新闻内容；而乘坐地铁的人双手更加自由，也有较长的通勤时间需要消磨，故可以接受更多的信息，也能够接受更繁琐的操作。
北美（左）和日本（右）各自的生活形态
有时候，某个地区的用户长期习惯的操作模式，会与主流的操作模式有所差异。设计师junu在个人博客中讲述了他为Melon（一个韩国主流音乐播放器）进行体验优化的一段经历。他发现Melon当时的播放操作逻辑比较冗长，用户需要先点选列表中的多首乐曲，再点击底下的播放键，此时Melon会将用户所选歌曲自动生成一个列表并进行播放。这和当时Spotify等音乐播放器“点击即播放”的主流交互逻辑相比，要更复杂和麻烦，尤其是在用户只是想要立即听到某一首歌曲的时候。因此，junu 提议引入“点击=播放”的操作方式。但当他们设计出了这样的优化方案后，却发现在测试过程中老用户们对这样的交互方式感到陌生和沮丧。基于用户反馈，最终，他们采取了一个折中的方案，既保留了原先的复选框作为多选操作的区域，让用户仍然能够选择乐曲生成列表并且播放；同时又引入了点击单曲直接播放的操作。相比第一版优化方案，用户的接受程度有了明显提升。
Melon播放器的点选操作逻辑
设备环境
10年前，高端大屏幕手机在东南亚和非洲市场普及率并不高，因此产品出海时需要考虑当地常见的设备是什么，并作出相应的适配。近几年，随着市场经济的发展以及中国手机的成功出海，即使是东南亚和非州的发展中国家，高端移动设备的普及率也已经很高，这为设计师在考虑通用性的过程中减轻了不少负担。不过，在为每个地区的用户做产品设计时，仍然需要调研清楚当地设备的使用情况，比如什么样设备更流行、普及率更高；如果某一地区的设备不够发达，那么设计的操作也需要考虑到设备不同所造成的差异。
业态/监管
在不同的国家或者地区，各个行业的标准与制度也可能存在很大区别。例如财会软件行业中，在北美和英国占据了重要市场份额的Quickbooks、Xero等公司，却无法成功打入欧洲一些国家的市场。因为财会软件本身的功能、流程设计与当地的财务制度是紧密相关的。在这样的情况下，欧洲本土的企业显然会对当地的政策和制度更加熟悉，也更容易设计出符合当地企业与会计需求的财会产品。
2015年，Airbnb进入中国市场。在最初的市场调研和用户调研之后，针对本土化，他们所迈出的第一步就是根据中国的业态环境对产品的前10%和后10%做了改造。其中，产品的前10%指的是登录这一类用户开始使用产品所需要进行的步骤，而后10%指的则是支付等用户完成一个完整流程所需要进行的操作。因为当用户进入到产品主要链路中时，其功能流程基本相通（搜索地点、挑选房间、浏览信息等），不需要做过多的改变；但产品的前10%和后10%则决定了用户能不能把产品用起来并不遇到障碍。因此，针对登录的部分，爱彼迎将原先的Facebook等第三方登录替换成了微信与微博账号的登录；而在支付的部分，爱彼迎引入了支付宝与微信支付的方式，打破了中国本土用户进入产品和完成订单的壁垒。
Airbnb产品中国本土化的“前10%与后10%”策略
社会经济
社会经济环境的不同代表着社会阶层状况的不同，它会影响人们在消费时的行为方式。蚂蚁金服在调研菲律宾市场时发现，当地拥有银行账户的人口仅占了总人口的34%，同期中国拥有银行账户的人口则占了总人口的85%。而这34%的人基本上都是当地的富人及中产阶层。在贫富分化严重的菲律宾，大部分普通民众是没有银行账户的。这一人口学特征很大程度影响了蚂蚁金服电子钱包业务对菲律宾目标用户的描绘，继而影响了产品各个层面的设计。
文化/宗教
在各个文化/宗教里存在着不同的意象，也会有各自的表达方式与禁忌等等。在某个文化下表示友好的行为，在另一种文化下可能是一种冒犯。这些都是在设计时需要去注意的。除此之外，在不同的文化/宗教语境下，人们会有不同的行为模式与价值取向，这里我们会引入一个模型——霍夫斯泰德文化维度模式，来对这一问题进行更详细的解读。
霍夫斯泰德文化维度模式（Hofstede’s Model of Cultural Dimensions）
霍夫斯泰德文化维度模式是荷兰心理学家吉尔特·霍夫斯泰德提出的用来衡量不同国家文化差异的一个理论框架。它可以帮助我们对于不同文化群体的价值观有一个较为全面的了解，从而更明白该文化群体中人们的行为倾向。此理论总结了衡量各文化价值观的六个维度：
使用他们官方网站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查询到各个国家的文化维度指数，也可以选择不同的国家进行对比。
在为特定地区的用户设计产品时，我们可以以从这些维度去解读他们的行为倾向，并据此提出相应的解决方案或者设计方案。滴滴团队在开拓墨西哥市场时，根据墨西哥的文化维度指数在产品的本土化上制定了从功能到外观等不同层面上的设计策略。
墨西哥地区的文化特征指数
滴滴墨西哥的本土化设计策略
这类源于文化差异的设计差异并不少见。在淘宝等国内的电商平台上，“按照销量排序”是一个被高频使用的功能，消费者们认为什么产品买的人多，什么产品就更好。这样的观念也催生了一大批店家刷单的行为。但当在北美的电商平台亚马逊上，我们会发现并没有按销量排序这个选项。因为美国的用户相对来说个人主义更强、更相信自己的判断和选择，他们不认为他人推荐的就一定是好的。
国内外电商平台对比
在企业即时通讯工具行业，国内的主流产品，如企业微信、钉钉等，都选择了蓝色这一比较沉稳的颜色作为主色调，在产品功能的形态上也偏向于严肃。而海外的办公产品Slack，视觉色彩更加丰富；整体的产品定位也更加活泼欢乐，常常会有“不严肃”的表达，比如在界面多处都使用了emoji。这样的产品形态差异，其背后是两种文化在放纵（享乐）/克制（严肃）这一维度上的差异。
企业微信与slack的产品风格对比
内容本土化
除了功能框架上的设计需要考虑本土化外，产品中运营内容的本土化也是不可轻视的一环。Spotify Design 团队在《 Designing for Belonging: Why Image Localization Matters 》一文中，记录了他们对于内容本地化的一些经验和思考。同样，内容的翻译仅仅是本土化的第一步。在地区之间区别不大时，完成内容的翻译便能够满足其他地区的需求。如下图中 “浴室歌单（ Songs to sing in the shower）”的播放列表，列表上的文案一经翻译，就能够推送给德国、波兰、以色列、意大利等一众国家的用户。但当内容的阅读群体有着更显著的差异时，仅仅翻译是不够的。在看到这张图片的时候，其他人种比如亚洲人可能就不会产生很强的代入感，也会缺少对产品的一种归属感（这个产品并不是为”我“设计的）。
Spotify "Songs to sing in the shower" 歌单
下图展示的是Spotify另一个歌单—— “快乐时光（ Happy Hits)" 的封面在不同国家的呈现形式。可以看到，面对文化差异更大的群体时，Spotify在保持了统一的样式风格的基础上，针对每一个国家和地区都展示了当地人在他们的生活中“快乐”的样子。这种本地化内容更加贴近当地用户，也能够让用户产生更强的连结感与共感。
Spotify "Happy Hits" 歌单
结语
回到那句话 —— ”Recognizing the need is the primary condition for design.“ 产品的出海其实只是我们在设计中会遇到的一种场景，在这个特定场景下我们的设计思考与其他场景下是互通的。如果仅仅完成了翻译这一步，那我们就忽视了在新市场下另一群用户的特征、需求、使用情景、操作习惯等关键信息。无论是不是在为产品的出海而设计，我们始终应该保持对用户的好奇，让最终的设计实现我们期望达成的目标。
文章来源：UI中国 作者：酷家乐用户体验设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在介绍重新定义的交互设计定律之前，我们先来回顾一下经典的《交互设计 7 大定律》
费茨定律告诉我们要节省操作时间应该怎么做：放大目标对象，减小目标距离。
席克定律告诉我们要节省决策时间应该怎么做：尽可能的减少选项的数量。
米勒定律告诉我们人类记忆的上限，所以要将信息数量控制在 4±1 内。
接近法则告诉我们相邻≈相关，所以要根据信息亲密性组织其位置关系。
泰思勒定律告诉我们复杂性是守恒的，我们要平衡复杂性的天平向谁倾斜，以实现整体效益最大化。
防错原则告诉我们用户出错是不可避免的，我们只能减少并降低其犯错的可能性。
奥卡姆剃刀原理告诉我们如无必要，勿增实体，设计要尽量的简约。
不知道你看完以上 7 个定律有什么感受，我的感受是，他们彼此之间有些重合（奥卡姆剃刀原理、席克定律、米勒定律都在传达信息要精简），但用其概括交互设计的精髓，又觉得不够完整（做到这几点就够了吗？），整体交互设计的精髓要义并没有表达地很清楚（如何用一句话来概括交互设计的目标？）
带着这几点疑问，我重新去思考到底什么是交互设计的底层设计目标？到底哪些交互设计定律能更好的体现其本质？以下是我思考的结果：
交互设计的终极目标是改变和影响用户的行为，达到期望的业务结果，比如下单率、搜索率等结果指标，结果指标因产品而异，不具有普适性，不可一言以概之。而在交互设计的过程中，以交互设计定律为指导的过程指标是通用的，几乎可以说放之四海而皆准，我把这四个过程指标概括为四字箴言：少快好省。怎么理解呢？
基于这样的过程指标，我挑选了 5 个设计定律来进行设计指导，下面我们逐一来看。
奥卡姆剃刀原理告诉我们：如无必要，勿增实体，即“简单有效原理”。对于工业产品适用，对于软件类产品也是如此。因为任何增加的非必要信息和功能，都会带来生产/维护成本的增加，以及用户认知/操作成本的增加。在现今这个注意力稀缺的时代，复杂会让人望而却步，也容易使人迷失，而精简的产品更利于人们的理解和操作。
典型案例：
小米的电视遥控器设计和传统遥控器设计相比，对奥卡姆剃刀原理的运用非常极致，相信大家都可以感受到精简前后的视觉/操作/认知负荷的降低。
我们再来看一个互联网产品设计的案例：
19 年初，外销浏览器做了一次视觉焕新大改版，从交互结构到视觉界面变化都比较大，所以我们就增加了新版本的滑屏引导，告诉用户有哪些界面及功能的变化，结果新版灰度期间，信息流渗透率下降了 33%，搜索下降了 18%，经过仔细的数据排查，发现都是滑屏引导惹的祸，当把滑屏引导去掉后，搜索和信息流的数据都恢复正向了。
19 年底，我们做的另一个运营活动也经历了类似的教训。当时锦鲤很火，我们就做了一个锦鲤大作战的小活动，画面精致，奖励也比较诱人，但是发现活动上线后转化率效果却不及预期，我们再次把矛头对准了蒙层引导，通过去掉蒙层引导，CTA 按钮场景化，并增加微动效，转化效果立刻得到了提升。去掉不必要的引导，让界面自己会说话，这也是奥卡姆剃刀原理的一个体现。
米勒定律告诉我们：人们工作记忆平均能记住的元素数量仅为 4±1。所以我们在设计时，首先要运用奥卡姆剃刀原理，尽可能的去做减法，尽量将数量控制在 4±1 的范围内。如果选项较多，且减无可减时，就需要对信息/选项进行分类和分组，保证类别的数量在 4±1 的范围内。
典型案例：
对于像手机号、银行卡号、身份证号这种类型的信息，因为其固有的信息长度无法做精简，所以在信息组织时就会采取分组的方式，保证分组的数量控制在 4±1 的范围内。
另一个案例也是关于我们的外销浏览器：
左一是改版前的页面，功能有 12 项之多，且产品认为减无可减了。我们的交互设计师通过对页面功能使用频度及产品功能的重要程度进行分析，将功能划分为了三大类：重要功能，常用功能，必备功能。然后通过强化、保持和收纳的方式将其进行右图所示的呈现，界面复杂度迅速降低，功能清晰度和操作便捷度显著提升。
多尔蒂门槛告诉我们：系统需要在 400ms 内对使用者的操作做出响应，这样才能够让使用者保持专注，并提高生产效率。
先来看一组模拟的响应效果：
△ 图片来自作者「超人的电话亭」
从这组图片可以感受到，当图片在 400ms 内时，是勉强可以接受的，但当时间延长到 600ms 及以上时，人们就会感受到明显的延迟、等待和卡顿感。
多尔蒂门槛对响应时间的上限给出了参考，而后续的研究则给出了更细致的响应标准，比如元素的点击反馈应控制在 0.1s 左右，尽量不要超过 0.14s，单个元素入场退场时间应控制在 0.2s 左右（入场一般比退场稍慢），而页面的转场时长根据页面大小和转场动效的复杂度尽量控制在 0.3s-0.4s 之间。只有响应时间符合上述标准，才不会让用户对产品的流畅性有所怀疑。
用户将大部分时间花在别人家的网站（产品）上，而不是你的。这意味着他们希望你的网站（产品）跟别人的有相同的操作方法和使用模式。雅各布定律告诉我们：作为设计师，我们必须要多研究把玩各种 App，这样我们才能够对当下产品的设计趋势有更直观的感受。
对于新入行的设计师，我会建议大家好好研究一下 ios 和 android 的 OS 规范，了解平台的特性，同时再翻翻下面这些书籍，了解各种常见的设计模式，丰富自己的设计组件库。
此外，在做某种特定类型的产品设计时，也非常有必要做行业及竞品分析，这样才能确保我们在做产品设计时，可以延续用户的主要视觉及行为习惯，减少用户的学习及使用成本。
以视频 App 为例，行业内的头部产品在产品框架及元素布局上都具有高度的一致性，这也是雅各布定律的一个体现。
操作前有预期，操作时有反馈，操作后可撤销。这是十年前我入行时接触到的一句话，我不知道是谁提出来的，但却是这些年我做交互设计最重要的一条参考原则，我将其简单命名为可感知性原则。
操作前有预期，指的是要符合视觉认知原理，符合行业设计习惯，让用户一看就懂。
操作时有反馈，指的是操作时要即时反馈，就近反馈，并且反馈合理。
操作后可撤销，指的是任何操作都尽量让其可撤销，让用户无后顾之忧，安心探索。只要存在用户行为的交互，这个准则都是可以用来检验的，以下图为例。
当我们想要删除某张照片时：
操作前有预期：工具栏位于默认的底部位置，有删除图标+文字明确示意的功能按钮，让用户一看就知道应该选择哪一项操作。
操作时有反馈：点击删除按钮时，删除按钮有一个灰色的点击态，随后马上出现一个确认弹窗，而且是就近位置出现，确认弹窗上提示简单，按钮用的是 CTA 的形式，操作交互一目了然。
操作后可撤销：当用户确认删除后，照片消失，但是还可以去最近删除的文件夹中，恢复照片。
到这里，交互设计 5 大定律就全部介绍完成了，围绕交互设计的过程指标，少、快、好、省依次展开，给大家介绍了奥卡姆剃刀原理、米勒定律、多尔蒂门槛、雅各布定律、可感知性原则。
也是为了满足米勒定律的 4±1 原则，我将交互设计定律浓缩成了 5 条，如果在此基础上加一条的话，我会在「好」的指标下，增加一条「格式塔原理」，它包含的 7 大设计原则。格式塔原理是做设计排版的基石，绝对值得所有设计师反复学习、研究和运用。
文章来源：优设 作者：VMIC UED.Joyce
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com