1 位移类手势的描述维度

手势作为图形界面与用户之间沟通的方式之一，在便携电子设备上大量应用。与实体按键相比，它有着纯粹的简洁性和无尽的创造性，手指的个数变化、不同变量的组合能够创造出无数的操控方式。

位移类手势是指代那些通过手指接触屏幕后的位置变化从而操控电子设备的手势，本篇文章主要讲解单指操作的位移类手势，多指的位移类手势（如捏合）将放到后续文章中讲解。

一谈到位移类手势，大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而，当我们想仔细谈论他们三者之间的区别时，大部分设计师可能无法准确地描述。为了能够准确描述三者的区别，我们在这里引入三个维度的概念，它们分别是控制方式、稳定化效果、以及阈值类型，这三者的不同的变化组合可以创造不同的位移类手势，拖拽、甩动和轻扫之间的区别也是这三个维度影响的。当我们在讨论不同位移类手势之间的区别时，不如说是在讨论这三个维度之间的区别。比如常见的轻扫手势，因为这三个维度的变化就会产生不同的变种，而且不同变种在体验上也存在很大差别，若不分场景随意使用，很容易就影响用户体验。那接下来我们首先了解一下这三个维度。

1.1 控制方式

第一个维度是控制方式，它分为绝对控制和相对控制，也可以通俗的表达为跟手和不跟手，区别如下。

绝对控制/跟手：施加控制的一方（后文简称施控物）的某个属性变化与被施加控制的一方（后文简称受控物）的某个属性变化是对应的。

相对控制/不跟手：施控物的某个属性变化与受控物的某个属性变化不是对应的。

比如在网易云音乐的播放页（下图左），左右滑动黑胶时，手指是施控物，黑胶是受控物，手指的横向位置变化和黑胶的横向位置变化是对应的，即绝对控制。上滑调出评论页时（下图右），评论页的位置和手指的位置没有对应关系，手指的上滑仅仅控制评论页是否出现，即相对控制。

与相对控制相比，绝对控制允许用户去操控受控物的属性变化过程，因此给予了用户更强的掌控感。比如在微信读书阅读页边缘右滑，手指的横向位置与书籍封面的变化过程对应，模拟现实生活中慢慢合上书的感觉，如下图。

但是在有些场景，为了避免混乱，属性变化过程是不适合被用户绝对控制的，此时我们应采取相对控制的方案。比如 iOS 的相机中，左右滑动切换拍摄模式，由于前后不同模式之间的页面框架变化较大，切换时会有过多元素的属性变化，如果使用绝对控制就会导致切换拖沓且混乱，使用相对控制就能避免这个问题。

1.2 稳定化效果

1.2.1 定义

当我们使用手势控制某个受控物时，由于手势的某个属性（如手指位移）达到阈值，进而导致受控物的某个属性稳定在了特定状态的效果被称为「稳定化效果」，或者也可以称为「吸附」。

稳定化效果能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。

是否有稳定化效果是区别轻扫与另外两个手势即甩动和拖拽的重要维度，当某个位移类手势有稳定化效果，我们就将其称作轻扫。

以滑动切换抖音视频为例，当手指上滑的位移距离和释放速度其中的某一项属性达到阈值后，下一条视频会往上移动到一个固定的位置然后进入稳定状态，而不会出现停留在不完整的中间状态，如下图所示。

在 iOS 端的微信消息页左滑某条消息后会出现更多操作按钮，按钮会在手指滑动的距离达到阈值并松开后稳定在一个固定的大小，而不会停在类似下图左所示的混乱的中间状态。

在多内容选择的场景中，如果滑动与选中是绑定的话，一般需要使用稳定化效果。例如在 iOS 相机里选择滤镜时，滑动滤镜选项不但能够控制滤镜选项的位置，并且会自动选中一个位于中间位置的滤镜，位置的稳定化避免了被选中选项的不明确。

如果滑动与选中是分开的，比如美图秀秀的滤镜选项需要先滑动后选中，这种情况下稳定化效果不是必要的。

1.2.2 与效率的关系

不同的稳定化规则带给用户的体验差异是非常大的，最明显的差异是在效率方面。我们使用稳定化效果的强弱来理解，稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。

比如在比较常见的 banner 切换功能中（下图左），无论手指位移和释放速度的值有多高，banner 只能切换并稳定到下一个，不能够一次切换多个 banner。而在网易云音乐的首页排行榜中，一次滑动能够切换多个内容卡片。因此，我们可以说前者的稳定化效果比后者强。

拖拽和甩动虽然没有稳定化效果，但是也存在效率的高低。我们可以将其与轻扫放在一起做对比，如下图所示，拖拽、稳定化效果强的轻扫、稳定化效果弱的轻扫、甩动它们切换效率依次增加。

那么我们决定添加稳定化效果后，如何选择强弱程度呢？选择没有绝对的对错，整体来说主要考虑两点，业务诉求和用户诉求。例如在常见的 banner 切换中，banner  的总数量一般不会很多，业务的诉求是希望尽可能曝光每一个 banner ，使感兴趣的用户进行消费，因此这里比较适合做稳定化效果强的轻扫。在云音乐的排行榜案例里，不同用户感兴趣的榜单是不同的，稳定化效果弱的轻扫可以方便用户单次滑动切换多个，快速切换到自己感兴趣的榜单的大概位置。

百度 App 的表情面板原本是左右轻扫浏览表情，在一次改版中改为了上下甩动浏览。主要目的之一就是为了提高浏览效率、降低非首屏表情的曝光难度。

微信视频号的改版是一个典型的案例，旧版的微信视频号的视频流并不是类似抖音那样的全屏化形式和轻扫手势（下图右），而是占据屏幕尺寸三分之一到二分之一之间的卡片形式（下图左），并且使用甩动而非轻扫。视频号问世初期优质内容匮乏，社交推荐算法不完善，贸然模仿抖音式的全屏化形式和轻扫手势的话，会导致用户浏览到劣质视频时负面感受被增强且切换效率变低，反之卡片形式加甩动手势给予了用户更自由的选择空间，提高了用户的切换效率，降低了负面体验。等到如今时机成熟，再从卡片形式和甩动手势换成全屏化形式和轻扫手势就势在必行了。

在某些场景，用户需要先通过高效的方式选择特定区域的内容，然后进入聚焦状态进行内容浏览和慢速的切换，此时我们需要设计两种切换效率不同的手势应对前后场景的变化。如下图，在 iOS 的照片 App 中，先使用切换效率较高的甩动进行粗略切换找到目标图片大概位置，点击进入大图模式时使用切换效率较低的轻扫进行精确切换查看。

1.2.3 触发时机

触发稳定化的时机可以分为释放前和释放后，不同的时机带给用户的体验也不同。释放前稳定化指的是用户使用手指滑动屏幕时，手指位移达到阈值后，手指无需离开屏幕，稳定化即可被触发。如下图左，iOS 的相机滑动切换滤镜使用的就是释放前稳定化。释放后稳定化指的是用户使用手指滑动屏幕时，手指位移或释放速度达到阈值后，手指必须离开屏幕，稳定化才能被触发。如下图右，常见的 banner 切换。

释放前稳定化可以避免拖沓，增加切换效率，但是缺点是无法反悔回退且缺乏掌控感。反之，释放后稳定可以反悔回退，掌控感强，但是缺点是比释放前稳定化拖沓了一些。

1.3 阈值类型

阈值是能够触发变化的最小值。比如当水的温度达到 100 度时就开始变成水蒸气，100 度就是一个阈值，温度是阈值类型。在手指与屏幕的交互中，手指在屏幕上的某个停留时间、位移、释放速度、点击次数等都可以成为一个阈值类型，达到相应阈值后就可以触发相应的变化，常见的变化有受控物的位置、大小、不透明度等，理论上变化可以是任意的。

在位移类手势中，通常会用到的阈值类型有手指位移和释放速度，手指位移是用户在手指触摸屏幕时的位置与之后某个时间手指位于屏幕的位置之间的距离，释放速度是用户的手指在屏幕表面进行位移后离开屏幕那一瞬间的速度。

市面上的 App 暂时不存在仅通过释放速度判定而与手指位移无关的阈值判定方式，因为其不太符合常识。因此我们在设计位移类手势时，能够选择的阈值判定方式常见的有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。

当我们设计手势时，就需要考虑两者的区别。由于 ① 比 ② 增加了释放速度带来的额外移动距离，因此 ① 的主要优点是高效。但是由于我们无法预判释放速度带给受控物的移动距离长短，所以相对应的缺点就是易误操作和不精确。②就恰恰相反，由于不存在释放速度造成的不确定因素，它的优点是不易误操作和精确，缺点是低效。

甩动和拖拽之间的区别就在于阈值判定方式，甩动是 ① ，拖拽是 ② 。如下图，当在微信消息列表找相应的消息时，用户的诉求就是能够快速找到特定消息的位置，对特定消息的出现在屏幕的位置也没有特定要求，只要能够被手指点击到即可，因此选用甩动较为合适，但是对于调节音量、亮度这一类的操作，滑动的范围有限，因此用户对效率没有太高的要求，但是对于滑块位置的精确度有要求，因此选用拖拽是更为恰当的。

再举一个反例，在 Steam 移动端横滑首页的泳道卡片时（下图左），使用的手势是拖拽而不是甩动，浏览起来特别低效。更适合的做法应为甩动，会更符合此场景下的快速浏览的诉求，如下图右的豆瓣。

对于轻扫来说，使用哪种阈值判定方式有多种情况（如下图所示）。在本文中，根据阈值类型、稳定化效果以及控制方式的不同我将把轻扫分为 A-E 共 5 类（A-E的命名方式仅存在于本文章，因此在向其他人传达时，尽量使用在后文我介绍的手势描述而不是类别名称，以便于对方理解。）。后续会为大家仔细举例讲解，大家现在仅了解一下即可。

当我们在刷抖音视频时使用的手势就是轻扫，是否滑动到下一条视频进行播放的判定方式是① 判定手指位移和释放速度满足任意一个即可，对应的手势类别是上面表格中的轻扫A。如下图所示，在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向位移大于半个屏幕高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离但是手指离开屏幕时保留一个速度从而切换到下一个视频。大部分情况下用户都会使用判定释放速度的方式，因为既省力又便捷。

如果将阈值判定方式改为 ②仅判定手指位移，对应的手势类别是上面表格中的轻扫 B，并且位移的阈值设置得比较大的话，给用户带来的负面体验可能将是非常大的。比如下图中打开美图秀秀的短视频评论浮层后，想要下滑收起时，App 仅判定手指位移，而且这个位移阈值设置得比较大，对于希望通过快速滑动一小段距离收起浮层的用户来说体验很差。即使由于开发资源有限我们只能做到仅判定手指位移，我们也可以通过减少手指位移的阈值来降低负面体验。

但是某些场景下，②仅判定手指位移是更加合适的。比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页。这样处理的原因是在微信消息列表页，上下滑动浏览微信消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值的话，用户可能就极易在下滑消息列表时误操作，无意间打开小程序选择页。

因此，对于位移类手势，选用哪种阈值判断方式要依据用户使用场景和诉求，不能想当然地设计。

2 常见位移类手势解析

了解完三个基础维度后，我们再将其进行组合，从特定手势的角度更全面地理解它们的差异和使用场景。三个维度的排列组合能够生成十余种位移类手势，我列举出了常见的 7 类，如下图所示，这 7 类基本涵盖了 95% 以上的场景，我将一一举例说明。由于施控物控制受控物改变的属性一般都为位置，因此接下来在描述下面手势的定义时我都以受控物的位置变化进行举例。

2.1 拖拽

2.1.1 定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动，无论释放时手指是否仍有速度，受控物都会立即停止移动。（下图的动态演示由 Principle 制作，观看会有些不太直观，大家可以在文章结尾处下载 Principle 源文件后导入到手机里体验，源文件包含文章提到的所有位移类手势）

2.1.2 特点

精确度高但效率低。由于阈值类型仅判定手指位移且没有稳定化效果，拖拽适用于对操作精度要求高，对效率要求低的功能。

2.1.3 案例

在 iOS 设置中调节亮度时，在有限范围内，手指左右拖拽可以控制亮度变化。

2.2甩动

2.2.1定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指仍有速度，受控物将移动一段距离后才慢慢停止，移动的距离与释放速度呈正相关。若释放时手指速度为 0 ，则受控物立即停止移动。

2.2.2 特点

精确度低但效率高。由于阈值类型判定释放速度和手指位移，甩动适用于需要快速浏览较多内容的场景，如滚动浏览列表。

2.2.3 案例

在微信的消息列表页，使用甩动手势控制列表上下移动，若释放时仍有速度，列表将仍移动一段距离后才慢慢停止。

2.3 轻扫 A

2.3.1 定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时的速度和手指位移有任意一个达到阈值，受控物将稳定在一个新位置。若释放速度和手指位移没有任何一个达到阈值，受控物将回到原位置。

2.3.2 特点

由于轻扫拥有稳定化效果，因此它能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。接下来讲解的其他轻扫类型都有这一特性，就不一一赘述了。轻扫 A 与接下来要讲解的轻扫 B-E 的最大不同之处在于轻扫 A 的阈值类型为「释放速度和手指位移」，这让轻扫 A 与轻扫 B-E 有两点不同，一是轻扫 A 可以通过释放速度的快慢去控制内容的切换数量的多少，更加高效，二是轻扫 A 可以通过用手指在屏幕滑动很短的距离但离开屏幕时保留一个速度来切换内容，因此更加省力。

2.3.3 案例

在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向移动大概半个屏幕高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离并且手指离开屏幕时保留一个速度从而切换到下一个视频。

2.4 轻扫 B

2.4.1 定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指位移达到阈值，受控物将稳定在一个新位置。若释放时手指位移没有达到阈值，受控物将回到原位置。

2.4.2 特点

轻扫 B 与轻扫 A 相比唯一的区别是阈值类型减少了释放速度的判定方式，这提高了触发切换的难度，使操作成本变高，但是在某些场景下，这也降低了误操作的概率。如下拉刷新等。

2.4.3 案例

比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页，这样处理的原因是在消息列表页上下滑动浏览消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值判定方式，用户可能就极易在下滑消息列表时误操作，无意间打开小程序页面。

因此，当页面已存在一个滑动操作的情况下，还存在另外一个方向相同的滑动操作且仅会在边界情况下才能触发时，为了避免误操作，会将后者的手势设计为轻扫 B 。

上文提到，轻扫 A 的阈值类型为判定「释放速度和手指位移」，轻扫 B 的阈值类型为仅判定「手指位移」，由于前者的实现成本比后者高，导致本应适合做成轻扫 A 的功能有时只能妥协做成轻扫 B ，比如之前提到过的美图秀秀的短视频评论浮层案例，但我们也可以通过减少手指位移的阈值来降低负面体验，后文会讲解如何与开发同学沟通。

2.5 轻扫 C

2.5.1 定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是受控物并不随着手指的控制而同步移动，仅当释放时手指位移达到阈值时，受控物才开始移动并稳定在一个新位置。若释放时手指位移没有达到阈值，受控物位置则一直保持不变。

2.5.2 特点

上文讲到过释放后稳定化和相对控制的缺点，释放后稳定化比较拖沓，相对控制让用户缺乏掌控感。两者如果应用到了同一个手势（即轻扫 C ），就会导致用户在滑动屏幕时得不到任何反馈，用户会疑惑是否因为自己操作不当或是设备出现故障。只有当用户手指离开屏幕后才会发现触发了操作，整体的交互流程给用户一种滞后与延迟的感觉。

因此轻扫 C 与其他类别的轻扫相比存在劣势，但是它也存在很多的 App 的 H5 页面中，我的猜测是由于 H5 对于判定释放速度和绝对控制这两个维度与客户端相比难度大很多，因此只能退而求其次选择轻扫 C 这个较差的方案，实际上在同样的应用场景中用轻扫 A 替换轻扫 C 可以带来更好的体验。

2.5.3 案例

下图左是 QQ 的个性装扮的 H5 页面，卡片的切换使用的就是轻扫 C ，如果能够优化为轻扫 A 体验会更好，比如下图右的音街首页卡片的设计。

2.6 轻扫 D

2.6.1 定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是手指位移达到阈值前受控物并不随着手指的移动而移动。若手指位移达到阈值，无需手指释放，受控物将开始移动并稳定在一个新位置。若手指位移没有达到阈值，无论是否释放，受控物位置则一直保持不变。

2.6.2 特点

相对控制的方式降低了用户的掌控感，释放前稳定化减少了操作的拖沓感。使用此手势的场景是在多个对象之间切换时，我们不希望用户过于自由地操控对象之间的属性变化过程，并且牺牲掌控感从而增加单次的切换效率。

2.6.3 案例

比如 iOS 的相机中，左右滑动切换拍摄模式时，由于前后不同模式之间的页面框架变化较大，切换时会有不同元素的属性变化，如果使用绝对控制和释放后稳定化就会导致切换混乱且拖沓，使用相对控制和释放前稳定化就能避免这个问题。

2.7 轻扫E

2.7.1 特殊说明

上文我们讲到，通过轻扫手势 A-D 对受控物的绝对/相对控制都是存在于稳定化前，受控物一旦稳定化，就脱离了手指的控制，需要手指离开屏幕后再次接触屏幕开始下一次控制。

轻扫E的不同之处在于它可以在受控物稳定化后，仍然控制受控物朝着下一个节点稳定化，在每个节点之间切换时能够明显感觉到分段感，如下图案例所示。

由于轻扫E相对于轻扫 A-D 的特殊性，控制方式中的绝对控制和相对控制无法覆盖这个特殊现象，因此我们使用「多段相对控制」来命名轻扫E的这种特殊的控制方式。

2.7.2 定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动，若手指位移达到阈值，无需手指释放，受控物就稳定在了一个新位置，但是此时手指还是仍然可以操控受控物继续移动的，并且继续移动过程中如果手指位移达到阈值将会到达下一个稳定化状态。

2.7.3 特点

轻扫 E 适用于需要在多个对象之间快速切换和确认的场景，它的使用感觉很接近拖拽。如下图所示，我们可以这样理解，当被切换的对象数量接近于无穷大同时每个对象之间的距离接近无穷小时，轻扫 E 就可以视为拖拽。

2.7.4 案例

iOS相机人像模式切换打光方式、微信的通讯录滑动字母索引导航，它们都使用轻扫 E 来满足多个对象之间快速切换和确认的需求。

3 实战案例

了解完上述的维度和常用手势后，我们在脑中就可以形成一个思考框架。当我们要针对一个功能设计位移类手势时，就可以从阈值类型、稳定化效果以及控制方式这三个维度思考。接下来我用一个我参与过的实际项目作为案例给大家讲解一下思考过程。

本案例是网易云音乐陌生人版一起听中的一个功能，一起听的双方在听歌过程中会收到彼此共同信息，比如听歌口味相似度、是否同城、都喜欢哪些歌手等，目的是为了增加可玩性和互动性、降低退出率，鼓励用户互相了解、提高一起听过程中的社交体验。

为了营造仪式感和避免信息过载，共同信息的展示方式设计为了一次只能看一条，进入浮层后默认展示最新的一条，可以通过滑动查看上一条。因此为了避免出现两条同时占据展示区域的混乱状态（如下图左），我们为其添加了释放后稳定化效果（如下图右），同时为了方便用户可以快速浏览旧的共同信息，这里使用的稳定化效果是较弱的，用户可以通过滑动一次切换多个共同信息。

由于需要满足用户快速浏览旧的共同信息的诉求，阈值类型选用了「判定手指位移和释放速度满足任意一个即可」，用户可以通过控制释放速度进而控制信息的切换数量。控制方式则选择了掌控感强的绝对控制。最后的结果如下图所示。综合三个维度进行归类，此手势为稳定化效果较弱的轻扫 A 。

4 手势角度的处理

位移类手势的方向一般为上下或左右，但并不是一定要完全垂直或水平才能够触发手势。当上下滑动和左右滑动同时存在于一个页面时，默认会有一个容错角度，比如上滑时手指滑动方向只要左右偏移不超过 45° 都会被判定为上滑，如下图所示。

但是有时开发同学出现失误，导致容错角度没有均分，例如下图中触发上滑和下滑的角度极小，导致用户在上下滑动时非常容易误操作为左滑和右滑。

云音乐也曾有过类似的遗留问题，iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌（如下图 A ，现已修复），安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏（如下图 B ）。

因此，在验收阶段，除了上述的三个维度外，角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下，最好要切换不同的手持方式分别体验一次，因为有些问题只有在特定的手持方式下才能够被发现。

客户端的角度判定方式实际上是一个比较复杂的过程，上述的内容是简化的版本。后续将延展为一篇独立文章给大家仔细聊一聊。

5 客户端的差异

上文讲到，基础的三个维度即阈值类型、稳定化效果和控制方式决定了手势的类别，是设计阶段一定要定义清楚的。但是除此之外，设计一个手势需要定义的细节非常多。比如受控物的移动是否有速度曲线？手指位移与受控物之间的位移的比率是多少呢？这些都是开发阶段不得不面对的。幸运的是，安卓和 iOS 有系统封装好的一套系统组件可以调用，操作系统自行解决了刚才讲到的细节问题，但是 H5 框架下是无法调用系统组件的，手势的各种细节都需要前端开发人员自己编写，难度较大，大部分情况只能实现一些比较简陋的效果，这也是为什么在很多 H5 框架下的界面滑动的体验比较差的原因。

6 高效沟通

由于信息不对称，与开发的沟通过程中，很容易出现理解偏差。比较常见的错误有：将甩动误解为轻扫 A ，将轻扫 A 误解为轻扫 B 或甩动。如果造成效果达不到预期的情况，很多设计师不知道如何让开发同学修改，只能说“这个手势不丝滑，优化一下”，开发同学也是一头雾水，不知道往哪个方向优化。如果我们能够直接说出“阈值判定方式现在只有手指的位移，需要释放时的速度也能够触发跳转；这个位移的阈值太高了，滑动时很难触发跳转，需要把阈值改为 16pt ”类似这样准确的描述，就能够大大降低沟通成本，顺利验收。为了避免沟通出现问题，下面我将日常经验总结出现希望能够帮助到大家。

首先，一旦涉及到位移类手势，除了必要的文字描述外（可参考上述的手势定义的描述），最好给开发体验 demo 或者其他 App 上类似的效果，否则很容易产生理解偏差。各种 App 上的类似效果大家可以用本文的每个手势的案例给开发同学展示，但是 App 可能会更新，案例可能在未来某个时间就找不到了，所以我用 Principle 做了一个简易的基础 demo 集合（如下图，源文件在文章末尾下载），和我上述介绍的手势是对应的，大家可以拿着这个 demo 给开发同学演示大概的效果，也可以在这个 demo 源文件修改。

下载链接： https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密码: asto。

拖拽和甩动由于需要定义的细节参数都被操作系统提前封装好了，一般不需要我们给到额外的标注。但是对于轻扫，我们需要将细节定义清晰，下面将详细讲解。

6.1 阈值类型

上文讲到，阈值类型一般有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。①的开发成本高于②。

如果我们选用轻扫的阈值类型是①，开发同学编写代码需要两个参数的阈值，分别是手指位移和释放速度。手指位移阈值一般默认为受控物的1/2，例如下图的全屏短视频和 Banner 。

当然我们也可以自定义一个阈值，比如 100pt 、受控物高度的 1/6 等，没有特别的需要的话使用默认值即可而且也不用给开发同学特殊说明，但是如果有特殊需要想要修改默认值，就要告知开发同学你自定义的手指位移阈值。对于释放速度阈值，通常默认就非常的小，几乎是大于 0 即可触发，一般情况下使用默认值即可。

在本应该选用①的场景中，如果由于技术成本原因不得不选用②，需要注意的是由于缺少了释放速度的判定，手指位移的阈值我们需要设置得小一些方便用户触发，否则就会出现上文中美图秀秀浮层的那样的体验问题。经过我的实验，手指位移阈值一般定为 16pt 是比较适中的，既不会太容易误操作也不会难以触发。

6.2 稳定化效果

轻扫是一定存在稳定化效果的，关键在于告知开发是释放前稳定化还是释放后稳定化。从开发的角度讲，系统会监测用户的行为，用户在使用滑动时会有按下（down）、移动（move）、抬起（up）三个行为，释放前稳定化是在移动阶段判断阈值并触发操作、释放后稳定化是在抬起后判断阈值并触发操作，开发成本几乎没有区别。

上文提到过稳定化效果强弱的概念。稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。首先，我们需要确定单次滑动允许切换多个还是只允许切换一个，如果允许切换多个，开发同学会设定一个控制切换难度的系数，而只允许切换一个的话就不存在这个系数。通常我们也不需要修改这个默认系数，但如果想让操作更加难或容易触发，可以告知开发同学修改这个系数。

6.3 控制方式

绝对控制比相对控制的开发成本高，如果开发资源并不是很紧张，需要绝对控制的场景就不要退而求其次使用相对控制。涉及到轻扫手势一定要告知开发同学控制方式，否则很可能被视为相对控制处理。

7 手势排查

通过本文的学习，我们不但可以在开发工作进行前与开发同学高效沟通，保证开发工作的顺利进行，也可以对自家移动端产品的现有手势进行逐一排查发现问题点进行记录，并且找到合适解决方案，然后用准确的语言描述给开发同学。下图是我在进行手势排查后输出的表格，挑选出一些有代表性的案例给大家作参考，开发同学可以通过它快速明确问题，理解解决方案。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：Ballen成明

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

树形控件是种常见的设计模式，几乎与图形化用户界面同时诞生，通过结构化的组织方式逐级展示内容，让整体信息架构一目了然，非常适合以网页或桌面端为载体的 B 端产品和生产力工具，比如电脑文件管理系统。

使用场景

树形控件通常有以下 4 种表现形式：

可以把它们进一步总结为 2 个使用场景：

其中，树列表、思维导图在 2 个场景中都有应用，而树导航和树选择多以查看为主。不同的使用场景，在设计上会有不同取舍。可以把它们进一步总结为 2 个使用场景：

交互设计

结合树形控件的使用场景，对其的操作也如此分类。显然，「查看为主」时，对查看类操作的体验要求更高，而「编辑为主」时则相反。

新增节点

以新增节点为例，不同场景下用户有不同的诉求：

查看为主

可以考虑鼠标悬停到节点出现相关操作。

但此时较难预测的是用户到底是想增加一个子节点还是同级节点。一个完备的解法就是让用户选择。但实际业务中，此处可能还要选择节点类型，比如语雀要选择文档还是表格。所以「节点类型 x 层级选项」有可能导致选项过多。此时可以有两种处理方式：

针对第一种方法，我们需要额外思考一个问题：新建的子节点应该放在第一位还是最后一位？

我的第一反应是第一位，因为它离操作区域最近，从操作到反馈都很自然，也避免目录发生大幅度滚动，所以在语雀目录中是这样设计的。但是实际也有很多用户反馈希望是最后一个子节点，类似于1，2，3…… 的顺序从老到新排列。我没有办法去验证如果真的是加为最后一个子节点，会不会又有另一波反馈声音。后来我发现思维导图新增子节点就是新增在末尾，以及绝大多数产品也是加在末尾，所以下次我大概会选择放在最后试试。或者索性选择上述第二种方法来避免这个问题。

此外，界面上还需要提供一种方式，允许用户创建最顶层的一级节点。当界面较大时，可以放置在顶部，让用户更易发现。

编辑为主

相较于上述方法，可以给出更明确直接的界面操作和添加位置示意或快捷键。

语雀在进行目录改版时，本想统一「阅读页面」和「编排目录页面」的交互方式——采用「查看为主」的添加方式，却忽略了两个页面的用户诉求不一样。此时这里其实还可以借鉴思维导图的创建方式，使用Enter/Tab 键快速添加节点。

修改节点属性

结合实际业务，节点可能有不同属性，比如名称、类型、状态、优先级等。「查看为主」时，修改操作使用不多，可以考虑放入「…」中。

而「编辑为主」时，除了单个节点修改属性方便，还需要考虑连续修改多个属性，甚至是批量修改。如下图，树列表可以支持连续修改属性节点。

如下图，思维导图可以通过多选然后在格式面板统一修改属性。

调整结构

树形控件最有价值的部分就是其所表达的层级关系，常用调整结构的操作总结如下：

无论采用那种方式，都遵循以下设计原则：

拖拽调整

简单而言，设计上要解决以下问题：

1.如何让用户知道可以拖拽？

2.如何让用户知道可以怎么拖拽到哪里？

可以在拖拽中采用「插入位置符号」暗示用户，通常是一条彩色线条。应尽可能增加「插入位置符号」出现的机率，减少用户的困惑。设计时可以考虑上下左右两个方向的拖拽运动分别可以触发什么结果。

比如按以下方式简单把拖拽规则分为 3 大类，

当然在「插入位置符号」尽可能多出现的同时，也要让其出现的位置符合用户预期且易理解。

比如向左移动「非末尾子节点」，如果强行给以一个符合逻辑的响应，「插入位置符号」可能离当前光标很远，甚至在屏幕外，且放手后可能引起目录结构较大变化，那么不如选择此时拖拽无响应。

这里再介绍「把一个节点调整为另一个的子节点」的两种拖拽规则，分别适用于不同场景。

3.如何让用户快速拖拽到目标位置？

当用户掌握了拖拽规则后，就需要帮助用户快速实现自己的调整目标。拖拽过程中注意以下几点：

 ① 被拖拽节点可以半透明显示，以尽量少遮挡树形控件，方便用户定位目标位置。

 ② 被拖拽节点的原始位置可以以较弱的视觉效果展示，提示用户节点从哪里被拖拽。

 ③ 整棵树的结构不要发生变化，以免原先确定的目标位置发生位移。

 ④ 结构层级较深时，通过辅助示意帮助用户确定会将节点拖拽到哪一层级。

4.如何让用户确定拖拽结果满足自己的期望？

当以上问题都解决后，这个也许就不成问题。当然也可以增加二次确认的微交互。

非拖拽调整

调整结构也可以通过非拖拽的方式完成。拖拽是一种直观，但不轻松的操作，尤其是当树很庞大需跨屏拖拽时。此时可以增加按钮操作，直接指定目标位置，精确且快速。

         

当「编辑为主」时，调整结构也需要考虑批量操作。如下图，支持多选节点同时调整，被调整结构的节点有可能在原处于不同分支的不同等级，批量调整后会成为同一个字节的同级节点。

删除节点

删除是个比较慎重的操作，所以此处应该询问用户是只删除本节点，还是本节点及其下所有节点。

如果只删除本节点，首先本节点需要从树形控件中消失，以代表删除成功，然后其子节点可以上移一级，保证用户不会误以为内容丢失。

缩放视图

查看时，思维导图可视化效果更好。针对思维导图，需要考虑视图的放大缩小，适应视口/真实大小切换。比如下图语雀思维导图的「缩放视图」功能（不过这个设计把回到中心和适应画布藏的有点深）。

折叠层级

当树形控件庞大时，需要能够快速折叠/展开层级，包括全部层级或者某一层级。如果是一棵「私人树」，记住用户折叠的展示层级，并且在下次进来时仍旧保持。如果是一棵「公开树」，可以增加默认展开设置，比如下图语雀中编排目录的操作。

值得注意的是，折叠层级和缩放视图的操作都应该提供快捷键，会比通过界面操作更加高效，也不会打断查看过程。可以想象一下你正在一个会议中展示一张思维导图，在界面上操作「缩放视图」耗费更多时间，也会在夺走走观众的注意力。

附上常见查看操作快捷键，仅供参考：

上述部分快捷键会和浏览器自带快捷键冲突，使用时需要覆盖浏览器快捷键。

搜索和筛选

当节点数量很多时，树形控件应该支持搜索查找节点，搜索关键词可以高亮显示；或按条件筛选展示节点及其上级节点路径。

使用列表时，还有一个常见的操作是「排序」，但是整棵树「排序」和树形控件本身的层级顺序是相矛盾的。所以「树列表」基本没有「排序」功能。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：Ant_Design

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

1.在线医疗的加速发展

尽管我们对COVID-19还不够了解，但疫情流行已经为可穿戴设备、线上医疗和人工智能等数字健康的发展搭建了舞台。可以预见，到2021年，这些行业将继续发展。

同时，一些非凡的自我监控应用程序继续应用到可穿戴设备上，提供步数、睡眠、心率、血压的即时可视化数据。这些复杂的功能可以让用户掌控健康，并获知如何改变生活方式。

到2025年，全球医疗人工智能软件、硬件和服务市场预计将超过340亿美元。         

线上医疗，即医患病双方开展虚拟咨询。线上医疗之所以得以发展，是因为在疫情严重时期，提倡人们减少直接接触。可以预见，卫生服务部门希望将医疗资源和资金分配给最需要的患者，而这种线上的方式将继续的发展成熟。

还有人工智能，人工智能将赋能精准医疗、基因组学、新药研发和医学成像。以癌症治疗为例，借助人工智能的模式识别，医生可以根据患者的基因组成和生活方式定制个性化的治疗方案。

-------

2. VR再度崛起

虚拟现实（VR）是一项“未来主义”技术，在一段时间内很难成为主流，特别是其配件——Facebook的Oculus Rift、HTC Vive和PS VR等头盔的价格居高不下。

然而，《半条命：爱莉克斯》等新发行游戏取得成功；能够创造动态和创造性混合现实解决方案的开发者涌现；健康、展览和娱乐艺术等非游戏市场的需求增加VR技术将再次崛起。

VR游戏行业的全球收入预计将从2017年的4亿美元增长到2024年的24亿美元。

那么，非游戏市场是如何适应VR的呢？在疫情期间，GDC 2020以VR形式举办了讨论会，借助360度全景展台、网络研讨平台和聊天室，远程与会者也能参加互动。2021年，预计会有更多的组织者利用这项技术来触及全球更多的观众。

此外，为优化在慢性疼痛、焦虑和创伤后应激障碍方面的治疗，VR技术在数字健康领域将有更多的应用。甚至，VR技术可能在剧院和博物馆得以应用，让文艺的大门几乎对全公众开放。

------

3. AR更多应用于设计领域

增强现实（AR）是另一种“未来主义”技术。AR越来越流行。想在花园里见到一只真实大小的长颈鹿？想看看宜家家具在室内的摆放？甚至想尝试纹身？AR正以许多新奇的方式进入人们的生活。

AR产品的全球市场在未来四年内将激增85%，达到1650亿美元。

苹果公司已经在重建和重组产品，让日常用户更易上手使用。据美国《行业周刊》（Industry Week）杂志报道，苹果这家科技巨头正在研发数款AR产品

如：数字眼镜可以与iPhone无线连接，将电影、地图等内容发送给佩戴者。是不是很酷?

新的AR技术和应用出现，将刺激企业寻找能够创建AR界面和图形叠加的设计师。市场上出现了谷歌ARCore、Adobe Aero和XD(现在具有3D转换功能)等低价的设计应用程序，让沉浸式增强体验设计日渐成为现实。

-------

4. 语音UI将成为UX的组成部分

用户语音界面（Voice User Interface， VUI）无疑是2020年最热门的趋势之一。苹果、谷歌和亚马逊等知名品牌改变了搜索信息和使用智能家居设备的方式。

全球超过四分之一的线上人口正在移动设备上使用语音功能。

以VUI为例，要调暗灯光，只需说：“谷歌，调暗灯光”；或者也可以快速叫一辆优步，呼叫：“Alexa，叫优步。”这些语音命令现在已经深入到日常生活中，VUI技术的身影也正随处可见。

VUI无疑是主旋律，将VUI作为UX组成部分的企业估计将越来越多。因此，企业将寻找设计沉浸式语音体验的工具、技能和人才。

VUI是新事物，在设计应用程序或技术时，找到可以遵循的流程很不容易。但是，CareerFoundry从流行的设计思维中寻找方法，已经创建了简单的VUI框架。所以，到2021年，将会出现更多用于设计语音体验的工具和技术。

-------

5. UX的文化优化（情感化设计）将影响产品的UI

微文案（microcopy）是UI上帮助用户做某些操作的小段文字。没有好的微文案会让界面彼此脱节，会缺乏人情味。如果技术进步了，可语言缺乏人味，那么也难以和用户建立良好的关系。

根据伦敦的《语言内容设计报告》（Voice and Content Design London），英国人口的平均阅读年龄为9岁。

在2021年，UX文案撰稿人将会更加活跃，熟练的沟通风格会引起人们的共鸣。所撰的文稿引人入胜、独具特点和令人信赖。因此，他们在产品开发过程中将扮演着重要角色。

出色的UX微文案将为虚拟助手增添人情味、为用户查询提供上下文语境、简化反馈和引入人性化语言。Marshmallow、Gousto、Airbnb等公司的UX文案撰写人员在这一方面尤为出彩。

-------

6.行为设计

市场过度饱和，竞争激烈，要让用户选择您的产品或服务，需要对他们的内在需求有更深入的了解。知道是什么触动他们的心灵、什么是他们的痛点、什么能引起他们的反应，这些是提高产品活跃度和留存率的关键。

行为设计是一个刻意、系统地改变人类行为的框架。而这一框架需通过说服用户改变物理环境和数字环境。到2021年，行为设计的需求将会增加，从而吸引用户的注意力、增强社交圈子、改善健康、保持平静的心态、鼓励自我实现、让人们走上正确的道路，拥有更好的未来。

那些经科学验证能鼓励行为改变的技术将帮助企业确定新的设计策略，提高产品的用户生命周期价值；甚至能像苹果智能手表的洗手检测功能那样，鼓励人们采取新行为。

 

-------

7.用户隐私

2014年，剑桥分析公司（Cambridge Analytica，是一家进行资料探勘及数据分析的私人公司）丑闻启发了全世界——个人数据变得越来越有价值，比原油更有价值！在数十亿美元的行业中，技术平台不断在寻找新的方式来保持用户的点击量、阅读量和分享量。

技术平台可供用户点击、阅读和分享，从而赚了数十亿美元。

几年来，我们讨论了技术和社交媒体对人类的危害。Netflix在2020年上线的纪录片《社交困境》，特别探讨了社交媒体的兴起及其对美国社会的损害，专家们发出了警惕。

采用保护用户隐私的设计规范，创造出更多满足用户需求的“人性化”产品。如何在不询问太多个人信息的情况下提供出色的体验？还有，真的有必要让用户长时间停留在产品上吗

-------

总结

站在岁尾，我们翘首以盼，期待来年有更多令人兴奋的产品、创新和身临其境的体验。随着人们对生活方式和幸福感的认识不断提高，新的发展将从数字医疗开始，选用可穿戴和远程医疗的用户将持续增长。

身临其境的非游戏VR体验越来越多，未来技术将获得更多关注，甚至可能成为主流。我们可以看到通过“另一种现实”，参与展览、娱乐，甚至参加办公室会议的用户越来越多。

然后，展望AR和VUI的新设计过程。您如果尽早学习工具和技能，就可以超越传统的基于屏幕的体验做出创新。此外，UX文案将在塑造产品UI中扮演更重要的角色。

最后，行为设计包含一系列认知科学，这些认知科学可以为设计师和研究人员提供不同的人性化设计理念。当然，应该使用合乎道德的方式来构建引导用户的技术，从而确保用户的心理健康和需求始终走在设计的第一位。

所以，2021年应该是UX不平凡的一年。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：一百percent

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

不论是作品集还是项目汇报，都少不了UI效果图展示。虽然网上有很多样机模板可以用，但与其与胡乱套用，还不如自己学会怎么展示界面。

今天教大家一个简单的方法，只需五个步骤就可以立即提升界面展示的空间感。

看过之后，说不定你还可以举一反三，做出更多不同的创新。

 

1、准备界面

可以像这样把两个界面并列放到一起，这里我用的是一个正方形画布。

看起来很无聊就对了，因为这只是第一步。

 

2、旋转角度

如果什么东西都方方正正的，看起来会很没意思。更何况在三维空间看二维界面，肯定是不可能这么摆放得规矩。

于是我们把两个界面都向不同的方向旋转一点角度，例如下图右边是 -5 度，左边是 8 度。

同样是为了体现三维空间感，我们把这两个界面交叠一下，像是两张散落在桌面的扑克牌。

 

3、添加背景

什么东西都用白色背景多无聊？更何况很多界面本身就是白色背景，再往白色画布上放就要找不到边界了。

最简单的方法，就是把界面上的主题色直接用到背景上，这样即把界面体现出来了，又能保证整体色调。

但是这样做问题还是很明显：首先，背景太强容易分散注意力；其次，也许有少量页面用主题色作为背景，那就和画布区分不开了。

所以，比较简单的方法，就是把背景上的主题色往浅灰色靠一些，让它即保留在同一个色调，又不至于太抢眼。

另外可以给画布和界面都加个圆角，让它们看起来更有卡片的感觉。

 

4、绘制投影

阴影可以说是空间感的点睛之笔，所以很有讲究。

很多人直接给界面设置阴影效果，结果阴影紧贴着边缘，导致空间感较弱。

为了让阴影更加真实，最好是单独画一个阴影方块，叠放在两张界面之间。

这个方块可以直接用上层界面的形状，缩小一点、加大圆角并填充黑色，至于摆放位置，就想象一下自然投影效果吧。

 

5、模糊投影

投影肯定不能是一个黑色的圆角方块，所以要给它添加效果。

例如，我设置了 50 的模糊效果，和 20% 的不透明度。这个数值可以根据具体的情况，自己调节。

 

总结

第五个步骤完成后，和第一个步骤比起来，是不是感觉好多了？

你也可以用这个方法尝试不同的色调和排版：

 

原文地址：知乎

转载请注明：学UI网》如何提升UI效果图空间感？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

今天给大家讲讲每周任务页页面头图案例，讲讲这里面的思路，让大家吸收一波！本文头图强调颜色的横向丰富与纵向丰富，色相的差异化、颜色占比的问题、层次和饱满度，这样就能大大提升画面质感。

最近在做每周任务页页面，头图又是给我难够呛，我们先看下第一版到第三版的变化：

第一版

 

第二版

 

第三版

中间过程思考了很多，和大家分享一下。

 

1. 颜色的横向丰富与纵向丰富

什么是横向颜色？

其实就是同一饱和度、明度的颜色，色相不同，比如下面这组颜色：

虽然色相挺丰富，但是看多了会比较腻。

所以有时候我们就需要进行颜色的纵向延伸，也就是除了色相的不同，还有饱和度、明度的不同，比如：

 

2. 色相的差异化

之前在总结颜色的时候有说过，色相不要用的太正，会比较常规，因为人们看多了比较正的颜色，所以就会感觉没什么新意。

举个例子，同样是红色：

第一个红色就会比较正，如果没有相当足的功力，很可能做成过年、国庆的感觉，而第个组就会相对容易出效果一点！

当然，颜色本身没有好坏，要看怎么用，只是说不太正的色相对新手来说比较友好一些。

所以大家看下，色相从比较正的橙色变换色相后，瞬间感觉没那么老气了:

 

3. 关于颜色占比的问题

当然，这个案例中，除了色相以外，还有颜色完毕的问题，其实我之前很多作品，重色会占比多一些，比如下面这种:

而这次的每周任务页面希望能有一点轻松愉悦的感觉，别用太浓烈的颜色让用户压力太大。所以对我来说也算是一次小挑战。

所以我将重色占比缩小，只用在最前处的近景和字体暗部（蓝色部分）:

其他地方都是比较轻的颜色。

 

4.关于层次和饱满度

上面讲的都是关于配色的，接下来说下层次和饱满度。

因为这次的构图比较简单，就是中心构图，也没有什么大透视，那如何增加层次呢？

我使用三、四层云放在前面，这几本就把算是拉开层次：

但是有个问题，下面是有层次了，但是上面有点感觉空空的，于是又加了一点小元素进行点缀：

这样整体看起来就比较和谐了，这里面有个要说的点，对于小元素的颜色，一定要有前后关系，也就是用颜色的深浅、色相来体现：

这样看起来才不会生硬。

 

总结：

做到这里，越看越不顺眼，总感觉有点油腻，有点土，具体什么原因？怎么修改？因为不想写的太长，所以我们下期再仔细的聊一聊在保持基础框架不变的情况下，如何拆分画面来优化每一处细节，使第二版变成第三版的！

 

原文地址：菜心设计铺

作者：菜心设计铺

转载请注明：学UI网》最初我觉得这效果也太差了，最后没想到做的还不错！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

编辑导语：如今随着科技的不断发展，人们日常的生活也开始变得智能化，智慧生态逐渐进入到各种领域，从买菜到小区物业等等，如今很多都变得更加智能方便；本文作者分享了关于智慧社区平台订单支付及退款结算规则设计，我们一起来了解一下。

笔者现就职于一家房产集团旗下科技公司，整体负责公司各产品线；公司主营智慧社区项目，在当地小有规模，智慧社区平台包括物业管理系统、社区电商平台、社区IOT系统、居家养老系统、社区政务系统、二手房交易平台等6大系统。

各系统后台独立，为了方便小区业主，让用户在同一个APP上能享受物业服务缴费、线上购物、扫码充电、会员缴费等等功能，需在用户端设计不同的支付结算方式。

本文主要分享社区电商系统、物业管理系统、社区IOT系统的订单支付及退款结算规则设计。

一、平台支付及结算业务需求分析

1. 物业管理系统支付结算需求

物业系统为SaaS模式，B/S架构，使用平台公有云服务器，单独数据库分区，使用角色为平台合作的付费物业企业，支付结算需求包括：

• 物业费、车位管理费、电梯费等费项需根据后台账单生成支付订单，且用户支付后直接结算至物业企业帐户，不做分成；
• 代收水电费需对接远程水电表设备，用户可在线预充费用，并随时查看余额，用户充值金额结算至物业企业帐户，并定期结算给当地水、电主管部门；
• 业主报修工单支付费用需按照材料费、工时费区分账单，直接结算至物业企业帐户，且平台收取3%的服务费；
• 物业结算金额需满足“T+1”到账，即次日（工作日）到账；
• 所有订单支持后台手动操作退款。

2. 社区电商平台支付结算需求

社区电商模式以整合社区周边商家为社区居民提供便捷的O2O服务为主，入驻商家包括社区周边零售商和服务商。

零售服务场景主要是方便社区居民在线选购社区周边商品，提供线上下单，线下送货上门服务，基于之前的业务拓展，支持平台配送、快递物流、到店自提、商家送货上门4种配送方式，其中平台配送是整合物业服务人员进行社区周边的送货上门服务。

综合各种配送方式及业务场景，支付结算需满足以下需求：

• 订单支付金额需”T+7″直接结算至商家帐户；
• 支持单笔订单直接分润，分润结算方包括平台分润、代理商分润、物业分润、商家结算；
• 部分商品支持7天无理由退货；
• 已完成订单支持单个商品退货退款；
• 平台配送费支付到平台帐户，并按月结算给配送人员；
• 快递物流、商家送货上门的订单配送费直接结算到商家；
• 到店自提不收取配送费；

预约服务场景主要满足社区居民在线预购社区周边服务，支付结算需满足以下需求：

• 订单支付金额需在服务完成后“T+1”直接结算至商家帐户；
• 支持单笔订单直接分润，分润结算方包括平台分润、代理商分润、物业分润、商家结算；
• 用户在服务未开始前申请退款，可全额退款，上门后退款需扣除上门服务费；
• 服务完成后不支持退款；
• 服务单到期未预约服务时，自动全额退款给用户；

3. 社区IOT系统支付结算需求

社区IOT系统对接设备包括：社区一卡通、门禁、楼宇对讲、停车道闸、电动车充电桩等等；涉及到支付业务的有社区一卡通、电动车充电桩。

社区一卡通支付及结算需满足以下需求：

• 一卡通需同时满足门禁卡、储值卡功能；
• 可应用的支付场景包括：缴物业费、水电费、维修费等，社区内及周边购物消费刷卡，线上支付扣款；

电动车充电桩支付及结算需求：

• 按照充电时间预付费，付费金额结算至平台；
• 不满预订时间结束充电时，自动计算退款金额，原路退回；
• 安装独立电表，电费由平台定时结算给物业；

4. 积分、优惠券、付费会员支付及结算需求

包括以下需求：

• 以上各个支付场景，用户都可使用积分抵现，抵现金额由平台让利给商家及用户，随订单支付金额一同由平台结算给商家，实时核销；
• 优惠券分为平台优惠券及店铺优惠券，统一由平台审核发放，可用于支付抵现；
• 平台优惠券抵现金额由平台补贴，随订单支付金额一同结算给商家，实时核销；
• 店铺优惠券抵现金额，直接由店铺让利优惠给用户，实时核销；
• 用户可购买付费会员，享受会员特权；

二、结算规则设计及注意事项

由以上需求内容可以看出，各系统的结算场景、结算流程，包括结算对象都存在不一致，但C端支付入口在同一应用端，这就需要在后台针对不同的业务流程设置不同的结算规则。

笔者对标了国内多个提供聚合支付及分账服务的平台，综合考虑对接成本及费率，最终选择了某平台作为对接方。

结算规则设计及注意事项如下：

1. 物业缴费

• 支付方式：线上-支付宝、线上-微信、线下-支付宝、线下-微信、现金、银行卡刷卡、一卡通；
• 分账对象：物业企业（第三方支付平台扣除支付费率）；
• 分账方式：直接分账；
• 账单生成：根据费项设置的规则在物业管理系统后台生成账单后，同步到业主APP；

• 到账周期：T+1；
• 退款方式：由物业系统后台手动操作单账单退款；

注意事项：为了保证客户资金安全及平台免责，由第三方支付机构与企业直接签约，且提供单独的对账后台，便于企业查账，线下支付则直接结算至企业银行卡账号，系统只做账单记录。

2. 电商购物（包括使用积分、优惠券结算）

• 支付方式：线上-支付宝、线上-微信；
• 分账对象：平台、代理商、物业、商家共4方分账；
• 分账方式：资管平台分账；
• 到账周期：订单完成日起T+7；
• 账单结算及退款规则：平台配送方式包括快递物流、平台快送（类似美团骑士）、到店自提、商家送货上门，每种方式用户需支付的配送费不等，需分别计算，且需考虑用户使用积分、优惠券抵现及退款时是否选择全部商品退款等结算情景，总结分析订单状态及配送方式不同，共包含以下6种用例；

Case1：订单状态=待发货，配送方式=快递物流/商家送货上门

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为快递物流，物流费5元，使用平台优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为33.25元(33.25=（30+5）*（1-0.05）)；平台结算金额为-9.25元（-9.25=-10*0.95-1*0.95+24*0.05），负值，平台需结算给商家。发生退款后，用户可收到的退款总额为24元，+积分+优惠券；商家退款总额为33.25元；平台退款总额为-9.25元，负值，商家需退款给平台。

Case2：订单状态=待发货，配送方式=平台快送

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为小慧快送，物流费5元，使用店铺优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为19元（19=（30-10）*（1-0.05））；平台收到的结算金额为5元（5=5-1+（20*0.05））元，正数，用户结算给平台。发生退款后，用户可收到的退款总额为24元，+积分+优惠券；商家退款总额为19元；平台退款总额为5元，正数，平台退款给用户。

Case3：订单状态=已完成，配送方式=快递物流/商家送货上门，退款商品=全部订单商品

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为快递物流，物流费5元，使用平台优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为33.25元(33.25=（30+5）*（1-0.05）)；平台结算金额为-9.25元（-9.25=-10*0.95-1*0.95+24*0.05），负值，平台需结算给商家。发生退款后，用户可收到的退款总额为19元（19=24-5），+积分+优惠券；商家退款总额为28.5元（28.5=33.25-5*0.95)；平台退款总额为-9.5元(-9.5=-9.25-5*0.05)，负值，商家需退款给平台。

Case4：订单状态=已完成，配送方式=平台快送，退款商品=全部订单商品

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为小慧快送，物流费5元，使用店铺优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为19元（19=（30-10）*（1-0.05））；平台收到的结算金额为5元（5=5-1+（20*0.05）），正数，用户结算给平台。发生退款后，用户可收到的退款总额为19元（19=24-5），+积分+优惠券；商家退款总额为19元；平台需退款总额为0元（0=5-5）元，为零，平台无需退款。

Case5：订单状态=已完成，配送方式=快递物流/商家送货上门，退款商品=部分商品，部分商品总额/订单商品总额=α（保留三位小数）

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为快递物流，物流费5元，使用平台优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为33.25元(33.25=（30+5）*（1-0.05）)；平台结算金额为-9.25元（-9.25=-10*0.95-1*0.95+24*0.05），负值，平台需结算给商家。用户申请退款商品总额为20元,α=20/30=0.667，则用户可收到的退款总额为12.66元（12.66=20-1*0.667-10*0.667），退回积分667；商家退款总额为19元（19=20*0.95）；平台退款总额为-6.34元（-10*0.667-1*0.667+20*0.05），负值，商家需退款给平台。

Case6：条件：订单状态=已完成，配送方式=平台快送，退款商品=部分商品，部分商品总额/订单商品总额=α（保留三位小数）

计算规则：

示例：

设置店铺抽成比例5%；用户甲下单商品总额为30元，配送方式为小慧快送，物流费5元，使用店铺优惠券抵扣10元，积分抵扣1元，则下单后：用户需支付24元（24=30+5-10-1）；商家收到结算总额为19元（19=（30-10）*（1-0.05））；平台收到的结算金额为5元（5=5-1+（20*0.05）），正数，用户结算给平台。用户申请退款商品总额为20元,α=20/30=0.667，则用户可收到的退款总额为12.66元（12.66=20-1*0.667-10*0.667），退回积分667；商家退款总额为12.66元（12.66=（20-10*0.667）*0.95）；平台需退款总额为0元（0=-1*0.667+(20-10*0.667)*0.05），为零，平台无需退款。

3. 购买服务

• 支付方式：线上-支付宝、线上-微信；
• 分账对象：平台、代理商、物业、商家共4方分账；
• 分账方式：资管平台分账；
• 到账周期：服务完成日起T+1；
• 账单结算及退款规则：用户下单成功后，支付金额预存在第三方支付机构的资管平台，服务商家按照订单完成服务后，资金由资管平台T+1结算至商家帐户。服务订单完成前可申请退款，完成后不支持退款。

4. 一卡通支付

• 支付方式：线下刷卡支付；
• 分账对像：物业或商家；
• 分账方式：线下定期结算；
• 注意事项：一卡通需在商务局完成备案，并且是定向使用金额，接受商务局监管。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：人人都是产品经理   作者：正文

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

What 是什么

简介 ：包容格式是一种用于文本输入的模式，使用这种模式后，可以让用户输入文本内容时不用关心格式或语法，从而轻松达到预期目标。

例子 ：Google 搜索输入框

Why 为什么

用户操作界面时只是想完成某件事或某个操作，而不是考虑「正确」的格式或复杂的UI。计算机擅长弄清楚如何处理不同类型的输入。如果计算机无法正确处理多种类型或格式的文本内容，那么用户在输入内容时就会有明显的受阻感。

所以，让用户输入所需的任何内容，然后让计算机来处理结构或格式，才是一种比较理想的方法。这种模式可以极大地简化界面，并使其更容易被用户理解。

 相关资料：

https://zhuanlan.zhihu.com/p/343497540

When 什么时候使用

用户可能会输入不同类型、格式的文本内容，而我们希望用户可以不用太关心格式问题，同时希望界面保持简洁。很多时候，用户输入的数据可能类型、格式不一（例如存在空格、连字符、缩写或大写等等），如果提供不同的输入类型，那么界面就很可能不够简洁。这种模式可以很好地将数据类型有效处理。

使用条件：

• 输入内容存在不同类型或格式；

• 希望用户输入比较容易；

• 希望界面简洁；

How 如何使用

核心思想：将界面设计问题转化为编程问题。

我们需要考虑用户可能输入的文本类型：

• 简单的例子：只要求输入一个只有格式不同日期或时间；

• 复杂的例子：搜索某些关键词，根据关键词获得不同的结果；

由于业务场景不同，每个应用程序使用此模式的方式可能不同。只要确保软件对各种输入格式的响应与用户期望的一致即可。因此建议与用户进行真机测试。

Example 案例

案例 1：东方财富股票搜索框

用户需求：将特定股票添加到个人关注列表。

东方财富的股票搜索框，用来帮助用户快速找到目标股票。该搜索框就使用了「包容格式」这一模式。用户既可以输入股票代码进行查询，也可以输入股票的名称进行查询。

案例 2：Gumroad 信用卡输入框

用户需求：输入信用卡号

很多产品都有输入信用卡号的场景，用户应该只要输入16位数字，而不需要明确这 16 位数字的格式。输入的内容中是否带有空格对结果不应该有任何影响。

gumroad 的信用卡号输入框允许用户随意输入他们的信用卡号。信用卡号字段接受空格作为分隔符（不包含空格也可以），然后这个输入框会立即将输入的卡号格式化。

案例 3：macOS 日历创建日程

用户需求：创建日程

我们会有很多方式来表示日期，例如周一、星期一、2021/06/20、6-14 等等。在 macOS 日历中创建日程时，用户可以输入各种格式的日期，输入框都会正常识别到该格式，并按照其日期创建日程。

更多案例

你可以在下方查看「包容格式」更多的案例：

https://airtable.com/shr9tuJY8zKxAIdfo/tblXEEC6HykKOL3Ef

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：Ant_Design

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

用户体验设计需要考虑很多不同的因素，例如为用户创造新体验时需要考虑哪些内容？哪些规则能区分产品的好坏？文章整理了20条用户体验设计原则，希望通过这份简洁易懂的合集能够让你对用户体验领域有一个初步的概览和了解。

 

1.以用户为中心 

这是最常被提及的用户体验设计基础，当涉及到产品设计决策时，提醒我们要学会使用同理心，而不是仅凭个人的想法或意见。

真正好的用户体验设计是为用户量身打造的，用户的意见、痛点、愿望、偏好和需求对产品来说至关重要，所以在项目初始阶段需要投入大量的时间和精力去了解用户。

用户体验研究重点是了解用户，为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求，区分了设计任何人都可以使用的产品和为目标用户设计的产品。

一款特定的产品需要面对不同的目标群体，前期研究中需要了解目标人群需要什么并在产品中反映出来，这是针对性很强的设计研究。

 

2.了解信息架构

可能很多人对信息架构的定义很模糊，这里举个例子来具象说明一下信息架构的含义。

例如在一款产品中，如果把所有内容都堆到一个列表或页面中，可能我们将无法使用这款产品，所以我们看到大多数的App和网站都包含很多的导航和页面结构，按照内容重要程度有序地来组织内容。

信息体系结构的最终目标是帮助用户理解他们在看什么，并帮助他们找到需要寻找的内容。

信息架构在制作线框图或原型之前完成，因为它是产品的基础，有助于设计师考虑什么功能是最重要的，哪些是用户最需要的以及哪些次要内容可以隐藏起来等。

这种结构与产品的导航设计密切相关，有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。

信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容，点击任何元素都没有反应，会给用户带来很糟糕的使用体验。

 

3.考虑使用场景

没有场景，任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。

这条原则有助于设计师考虑还有哪些因素会影响用户和产品，很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。

例如在设计表单时，会尽可能的添加输入提示，最大程度地减少用户出错的机会。

 

4.了解一致性及其重要性

保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受，因为用户不需要再次学习如何操作，他们会回忆起之前的操作习惯并将其作为指导，这也解释了为什么同类型的产品例如电商类App页面设计的很相似。

保持一致意味着在需要时可以重复使用某些UI组件，并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时，所以按钮的状态应该是一致的。

从逻辑上讲，产品越大，这种一致性会变得越来越有挑战性，这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡，放弃的用户就会越多，在市场营销中，这通常被称为销售漏斗中的漏洞。

 

5.给予用户适当的控制权

这条原则意味着用户希望能控制产品，无论是完成任务还是定制满足他们需求的内容。

在设计过程中一直试图给用户尽可能多的控制权，例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等。

需要注意的是，当提供太多选项或用户太依赖于自己的选择时，用户可能会不知所措，造成所谓的选择悖论。所以在设计时要了解用户乐于掌控的余地，不能让用户感到使用压力。

 

6.把可用性放在首位

在整体上看，建立高标准的可用性是为用户做的最好的事情，有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。

可用性的重要之处在于要理解可用性的灵活性和重要性。

 

7.了解用户测试

结合可用性的概念，我们还要进行用户测试，这是设计师对工作进行测试的方式，对新的产品来说至关重要。

当设计思想和理念被转化为有形的原型时，设计师要观察真实的用户是如何与之交互的，可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。

测试通常分几轮进行，团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现，设计也随之发生了变化。

如果发生更改，将会进行新一轮的测试，通过这个过程，设计团队可以改进他们的工作，直到达到可用性标准。

 

8.少即是多

在创造力和创造独特事物的渴望中，很多设计师很容易无意中弄乱产品界面甚至产品本身。

功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击，但也会给用户带来负面体验，在设计时要学会克制并优先考虑真正关键的部分。

另外手机端的屏幕空间非常小，创建一个有效的布局，想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。

 

9.视觉层次

视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动，并立即了解最重要的内容以及这些内容与其他部分的关系。

视觉层次结构与布局设计紧密相连，帮助用户消化所接触到的信息。

创建层次结构从概念的草图开始，一直持续到完成设计。例如发送按钮通常会用绿色而是不红色，而次要按钮会显示为灰色或与背景混合，并显示“撤消”或“返回”。

 

10.了解用户的心智模型

为用户创建心智模型是尝试使用同理心的一种方式，是帮助设计师从用户的角度看待问题的工具。

做到准确就是直观的产品，用户不需要投入精力就可以使用它，而错误的思维模型会导致一些问题，例如界面混乱、高昂的交互成本。

为了匹配用户的心智模型，可以采用多种不同类型的研究方法，常见的方法包括卡片分类、决策树、对用户行为的密切观察，或者使用大量的数据来建立关键用户的心理模型。

 

11.设计中的讲故事

讲故事的方式更加直观，利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感，给用户留下持久的印象。

想出一种可视化的方式来传达复杂的内容具有挑战性，但同时也是有益的，可以更好地接近用户并将其作为提高产品可学习性的方法。

 

12.不要直接跳到高保真原型上

高保真原型是设计项目的最终目标，但是直接使用原型软件不断添加各种页面细节是错误的操作。

避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下，一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。

 

13.可访问性测试很重要

不仅要检查关键用户是否可以流畅地使用产品，还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。

事实上，残疾人和其他用户一样需要数字产品，但很多产品在设计时并没有考虑到这些群体，但这也提供了一个机会，为所有用户提供一个可以依赖的好产品。

 

14.熟悉并在用户体验设计中使用

我们知道为用户提供一致的设计有助于克服学习曲线，同时为用户提供熟悉的东西也有助于缩短学习曲线。

例如，大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮)，这意味着他们会本能地知道这些组件代表什么意思或者如何操作。

使用用户已经熟悉的东西并不一定会让产品的独特性消失，有经验的设计师会利用这种熟悉性来来创造一些独特的设计，同时也是直观的，不需要太多努力就可以使用。

设计一个完全不依赖熟悉度的产品可能是具有风险的行为，因为它很容易让那些不熟悉产品的用户超负荷，形成巨大的学习曲线，增加用户负担。

 

15.了解交付成果的力量

可交付成果是可以在整个团队中交付的内容，包括用户画像、心智模型、用户旅程以及线框图和原型等，是一种有形和具体的表现。

可交付成果是用户体验设计原则，可以帮助设计团队和其他利益相关者理解和交流概念。

▲ 用户画像可以捕捉理想用户，并提供可以相关联的真实面孔，是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤，有助于确保这些步骤确实可以轻松执行，并且整个过程很流畅。

这些交付成果服务于关键功能，设计师需要在整个项目中都依赖它们，不断转换为用户可以与之交互的真实有形的设计。

 

16.专业的原型设计工具

用户体验设计的过程不是线性的，而是一个循环。无论创建什么样的产品，都需要专业的原型工具，将基本框架放在一起，然后添加可能需要的所有细节。

从逻辑上讲，设计团队的具体需求会因团队而异，但一些关键功能例如团队协作、需求管理、交互设计和开发移交等，对于大多数团队来说是必要的。

 

17.精心管理产品需求

一切都从收集需求开始，然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易，但随着项目的进展，要保持列表的条理性确实是一个挑战。

除了创建需求和检查需求之外，还有一个问题就是调整需求，需要从设计、技术和业务各个方面来处理各种需求，还要确保这些需求之间没有相互矛盾。

 

18.了解移动和网页产品之间的差异

网页端和移动端产品最明显的区别是屏幕尺寸，这意味着所有的视觉层次结构和信息架构都将从Web到App发生变化。

移动端产品会有更多影响设计决策的因素，例如设备的操作系统、使用产品的环境等。了解移动端产品在导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。

 

19.利用UX设计模式

几乎所有的产品都专注于设计模式，它们可靠、易于查找并通过减少设计时间来为项目增加实用性。

▲ 当用户在谷歌搜索中输入的内容有问题时，谷歌会提供一个相关的搜索提示，辅助用户进行精确地搜索，解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。

 

20.使用合适的工具才能有效

拥有单一的内容来源可以为团队带来清晰性和高效性，如果线框和原型分散在多个渠道中，这种内容的集合就会变得很难达成。

通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题，防止产品细节没有表现出来或者被忽略。

 

最后

通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。

没有人知道用户体验设计在未来会引领我们走向哪里，不过我们可以确定，无论它带给我们什么，肯定都会很有趣。

 

内容参考：justinmind.com/ux-design/principles

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》掌握这20条用户体验设计原则，助力设计成长！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小

助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

随着设计团队规模扩大，人数快速增多，但每个人都带着自己以往工作经验和习惯，一些典型问题也相应显现：上手就干、主观设计、缺少方法、忽视跟进等等。所以我们撰写了「UI标准设计流程」，希望能为UI设计师提供对于设计支撑思路的共识，让设计更有价值。

 

从接到需求到上线后跟踪，我们把流程拆分为五个节点：需求分析-交互设计-视觉设计-视觉规范-方案验证。

当然，在设计流程中我们只表达不同流程中的行为目的及标准，相关方法论我们会配套一份「设计师成长指南」，不久之后再与大家分享。

 

1.需求分析

我们在接到一个设计需求后，要做的第一步是进行分析并确定设计目标。

我们需要：了解背景、用户和竞品，能准确理解产品定位和需求目标，评估需求的合理性和准确性，并提供相应策略；甚至洞见机会点，通过设计对业务产生正向价值。

 

背景分析

目的：背景分析是为了让我们在刚接触产品的时候，去洞察表面背后的东西。通过背景分析，能帮助我们快速切入产品，并根据已有信息去制定准确并具有说服力的设计策略。

行为：我们需要了解：产品的定位及价值是什么，它的现状如何，是否有既往的数据沉淀或经验总结。

 

用户分析

目的：对UI设计师而言，用户分析是为了让我们更好地了解产品，并拥有对整个产品的宏观思路。通过用户分析，能为我们的视觉设计提供方向，并为我们做出决策提供实际落点。

行为：我们通常需要了解：用户画像、用户需求、用户行为、用户路径等。

 

竞品分析

目的：竞品分析能够让我们获得行业内的优秀经验，减少我们的思维盲区，同时还为我们提供了一份可被量化的标准，使我们可以基于竞品去反推现有产品。

行为：UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。

 

需求评估

目的：在了解以上的通用信息后，我们要对需求进行评估，去决定采用哪种方式、制定什么样的策略。

行为：我们接到的需求，通常可以分为三种：全新产品类、产品改版类、功能新增或优化类。

对不同类型的需求，我们都可以用5个问题去评估：

1. 是否可被证伪？
2. 目标是否明确？
3. 投产比如何？
4. 是否有更优解法？
5. 是否有可预见风险？

基于以上问题，我们可以去协同交互、产品做相应调整和策略制定，甚至发现新的机会点并进行推动。

 

目标对齐

目的：设计为目标服务，所以我们要在设计开始前与需求方对齐目标，这也能为设计价值的佐证提供标准。

行为：设计目标通常有3种，我们可以从中去对需求目标转译：提升数据型、解决问题型、体验优化型、创新项目型。针对不同目标我们可以去制定不同的设计策略，并对策略的落地进行数据监测与分析，进行方案校正。

 

2.交互设计

在产品流程中，交互设计的作用在于，通过信息架构的组织去产出体验流畅的界面原型。

我们需要：充分理解整体流程与交互原型，基于设计原则去发现可优化的部分；同时能平衡产品、设计与开发的效益最大化，并驱动产品的体验提升。

 

设计原则

目的：设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则，能使我们在设计支撑时，拥有更丰厚的专业度和更敏锐的洞察力。

行为：我们需要去了解市面常见的Guildline如iOS、Material、UWP等，以及一些常用原则如菲兹定律、格式塔理论等等。

 

流程梳理

目的：流程的再梳理，可以帮助我们在视觉设计前，快速地理解和诊断流程逻辑。

行为：在流程再梳理的过程中，我们需要注意以下4个问题：

1. 功能是否完整？
2. 链路是否流畅？
3. 步骤是否冗余？
4. 是否易于理解？

基于以上问题，我们可以用自身的专业储备去推动流程的优化。

 

原型优化

目的：交互原型是需求内容的外在表现，通过原型优化，可以最大程度地避免视觉评审后的设计返工。

行为：在对交互原型优化的过程中，我们要重点注意以下4个问题：

1. 架构是否符合目标
2. 层级是否足够精简
3. 信息是否传达准确
4. 状态是否有所缺失

在视觉设计时，我们基于以上四点可以去同步优化原型，并根据经验去寻求体验和成本的最佳平衡。

 

3.视觉设计

视觉设计是产品与用户直接连接的媒介，优质而恰当的视觉设计，可以极大地提升产品吸引力。

我们需要：基于分析确定视觉方向、定义设计语言，输出完整且高质量的视觉页面。

 

设计情绪板

目的：设计情绪板可以为设计语言的构建提供可视化参考，也有助于我们前期快速与各方达成共识。

行为：我们通常基于分析，去确定设计关键词，并基于关键词去衍生映射物、建立图形情绪板，最终分析和确定设计方向。

 

设计语言

目的：设计语言是情绪板的具象表达，它将构建起用户对产品的视觉感知。

行为：在明确设计方向后，我们就要基于情绪版去定义设计语言，主要包括主视觉、色彩、字体、图标、图形、动效等。

 

典型页面

目的：典型页面是设计语言在场景中直观体现，这有助于我们制定设计规范，并为其他页面的设计提供参考。

行为：我们通常需要设计首页、频道页或其他具有示例作用的典型页面，在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等，以此为视觉规范夯实基础。

 

4.设计系统

在设计典型页面的同时，其背后其实已经对应了一套设计规范和组件，而我们基于此去整理并沉淀出设计系统，能极大地提升统一性和迭代效率。

我们需要：制定完整、清晰的基础规范，沉淀图标库、组件库等，并持续优化和更新，形成可持续沿用的产品设计系统。

 

基础规范

目的：基础规范是设计语言的沉淀，也是视觉变量的基本粒子。它可以保证页面的基本统一，同时我们可以基于不同业务快速地拓展其他主题。

行为：在我司，一份基础规范的构成包括：色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。

 

图标库

目的：图标规范可以帮助其他成员快速、准确地进行图标拓展，而沉淀的图标库也可以极大地提升产出效率。

行为：基于具体需要，我们可以设定多套图标风格，规范其栅格、笔画、圆角等，并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀，如空态插画、悬浮入口、徽章、商品等。

 

组件库 

目的：组件库是对常用控件进行设计规范、开发、封装的可被复用的集合，组件分而治之，可被自由组合，能保证设计品质、统一用户体验、提升产研效率。

行为：在我司，一套组件库通常包括：通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外，我们也会对常用模块进行梳理，沉淀业务组件库。

 

5.落地跟踪

在设计完成之后，我们需要对设计方案进行评审、验收及数据跟踪，以保证设计方案的落地并跟进调整。

我们需要：运用合理策略以保证设计方案的高质量落地，对方案上线后的用户反馈进行有效跟进，运用多种方式验证目标，迭代产品。

 

设计评审

目的：设计评审通常包含了交互与视觉，其目的在于审查设计方案中的可用性问题。

行为：在我司，视觉评审即终评，我们需要在视觉稿中标注出所有交互逻辑，并对潜在问题有预判，能与各方确认目标、分桶与数据埋点；同时我们要对开发实现有预判，能与研发确认实现细节。

 

设计验收

目的：设计验收是为了确保需求满足、体验流畅，并且设计细节能高质量落地。

行为：视觉设计师主要验收视觉细节的还原度，并且要在一定程度上对开发的适配、样式解法有预知，减少二次验收。同时需要保证验收有沉淀，利于后续跟进。

 

数据验证 

目的：数据验证除了分析分桶之外，也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。

行为：我们通常基于设计策略，去对数据进行筛选与分析，以此衡量设计对于目标达成的增益度。对于有问题的，能反思并且修改；对于结果好的，能总结并且沉淀。

 

设计复盘 

目的：设计复盘以结果为导向，我们可以通过复盘对设计策略的价值进行总结验证，并去发现、优化流程中的不足之处。

行为：我们需要陈述设计目标和策略，对设计价值进行验证，并能总结过程中的亮点与不足，制定后续计划、沉淀相关经验。

 

以上是酷家乐UED「UI标准设计流程」的所有内容，虽然它主要针对UI设计师而设，但相信它也能帮助到交互、体验设计师们去拨开乱麻，更好地为业务目标服务。

后续我们会与大家继续分享与之配套的「设计师成长指南」，它将基于Design Thinking为大家带来更全面的专业知识帮助。

同时我们也会沉淀基于该流程的几个典型案例，包括C端、B端、以及工具端，会在未来陆续与大家分享。

 

原文链接：酷家乐用户体验设计（公众号）（公众号）

作者：不戳

转载请注明：学UI网》让设计更有价值——设计流程指南

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小

助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

『 Ant Design是什么 』

众所周知蚂蚁集团的B端产品是一个庞大的系统，数量多且功能复杂，而且变动频繁，常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件，根据原子设计理论可以得到一些稳定且高复用性的内容。

随着这两年B端产品的逐渐白热化，越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁集团体经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范，降低冗余的生产成本，让设计者专注于更好的用户体验。

『 Ant Design设计原则是什么 』

针对B端产品反复出现的一些设计体验等问题， Ant Design 给出标准的设计原则，实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面，既减少了不必要的认知成本，又能够提升设计的效率。考虑到需要适应各种定制化的业务场景，设计原则具有一定的灵活性，万变不离其宗，通过了解设计原则的构建逻辑，高效组织信息、帮助建立用户与界面的互动等原则性要求，可以衍生出更具场景特性的设计方案。

① Ant Design设计原则的由来

可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则，并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充，我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明，这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。

② Ant Design设计原则的适用范围

1. 我们先说说『Ant Design 』的适用范围：

稍微了解 Ant Design 的小伙伴都知道，本系统是针对B端后台系统，承载媒介是PC端的浏览器。使用的人员主要包括：用户体验设计师、交互设计师、UI设计师、前端程序员等。

2. 再说说 『 Ant Design 设计原则 』的适用范围：

顾名思义『 设计原则 』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则 』是 Ant Design 系统的一部分，但是前文已经提到，此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华，所以设计师可以把这些原则运用到任何的设计领域，并不要局限于企业后台系统的PC端产品。

为了方便大家理解，讲一个小故事。故事来自于《写给大家看的设计书》，作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后，发现其中有一颗叫约书亚树的树，造型奇特，自己从未见过。于是决定出门转转，然而发现外面到处都是这种树。故事到这里就完了。

可能大家会想，这个故事要讲一个什么道理呢？简单来说就是，当你手中有个锤子，满世界都是钉子。当你了解到下面要讲的十个设计原则后，你会发现它们处处都适用。

③ Ant Design设计原则的内容

十大原则如下：

• 亲密原则（Proximity）

• 对齐原则 (Alignment)

• 对比原则 (Contrast)

• 重复原则 (Repetition)

• 直截了当 (Make it Direct)

• 简化交互 (Keep it Lightweight)

• 足不出户 (Stay on the Page)

• 提供邀请 (Provide Invitation)

• 即时反应 (React Immediately)

• 巧用过渡 (Use Transition)

『 如何运用Ant Design的设计原则 』

对于一个初级设计师而言，想要了解UI用户体验等知识，学习 Ant Design 的设计原则算是比较快能上道的，因为 Ant Design 是吸取了很多前辈的精华，提炼而成的系统。打个简单的比喻，对于设计师而言 Ant Design 就是设计师学习『 视觉规范 』，掌握『 设计原则 』最好的字典。

接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。

Ant Design 定义了10条设计原则，根据『 席克定律 』选项太多不易记忆，于是我找到了这些设计原则的共通性，将其归为4类，也就是大家只需记住四类设计原则，在工作中适当延展即可。

① 视觉层级清晰

包含 Ant Design 的设计原则有：『 亲密原则 』『 对齐原则 』『 重复原则 』『 对比原则 』。

「视觉层级清晰」的重要性体现在 交互前 用户看到的内容结构是清晰明确的 。一个层级混乱的界面，任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。

1. 亲密

如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。

1.1 纵向间距关系

• 纵向间距：在 Ant Design 中，通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。

• 增加元素：通过增加「分割线」来拉开层次。在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是「基础间距」。

1.2 横向间距关系

• 组合排布：为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。（注：栅格是另外一个模块的内容，这里不赘述。）

• 复选框内：在一个组件内部，元素的横向间距也应该有所不同。

2. 对齐

正如「格式塔学派」中的连续律（Law of Continuity）所描述的，人类的视觉系统往往倾向于将看到对象的直线继续成为直线，曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。

格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，「整体不同于其部件的总和」。——摘自「维基百科」

2.1 文案类对齐

如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。

• 推荐使用：标题和正文左对齐，使用了一个视觉起点。

• 不推荐使用：标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。

2.2 表单类对齐

• 冒号对齐：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。

2.3 数字类对齐

为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

3. 对比

对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。

注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。

3.1 主次关系对比

为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。

注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。

• 需要区分主次场景：

• 不需要区分主次的场景：「通过」和「驳回」都使用次按钮，系统保持中立。在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。

3.2 总分关系对比

• 总分关系：通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。

3.3 状态关系对比

常见类型有「静态对比」、「动态对比」。

• 静态对比示例：用不同颜色的点，来表明不同状态。

• 动态对比：鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。

4.重复

相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。

4.1 重复元素

重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

• 线框重复：

• 设计要素重复：

• 文案格式重复：

② 交互操作高效

包含 Ant Design 的设计原则有：『 直截了当 』『 足不出户 』『 简化交互 』『 即时反应 』。

「交互操作高效」的重要性体现在 交互时 用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题，却忽略用户能否理解流程如何操作，那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短，而是用户的心理时间是否太长的问题，就像我们打游戏往往会觉得时间过的很快，但是在等待页面加载时却不耐烦。

1. 减少打断

能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。

变化盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》

心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》

• 气泡提示：对于操作的反馈是必要的，下文会提到，但是为了减少打断用户，轻量级的反馈气泡提示即可。

• 输入覆盖层：鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。不用弹窗或跳转的形式编辑，只需要在触发图标附近弹出浮层即可，这样避免用户视动线的混乱，减少打断用户操作的心流。

2.缩短步骤

正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。

常规的编辑模式，界面都会跳出一个弹窗或者是一个页面跳转，无形之中用户走了更多的流程路径，如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『 足不出户 』的设计原则。

• 文字链/图标编辑：

状态一：在可编辑行附近出现文字链/图标；

状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。

• 多字段行内编辑：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。

• 拖放图片/文件：在早前很多产品在上传功能上，都是跳出弹窗再选择文件上传，现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。

• 模糊搜索：系统根据用户所查询的关键词，智能匹配可能的结果。

• 定时自动更新：新增的列表项「高亮」，持续几秒后恢复正常。不需要用户手动刷新，减少不冗余的操作。

3.避免回忆

人们在思考的时候，是需要依靠大脑神经元之间相互传递信号，而回忆是需要调用更多的的神经元传递信号，简单地说就是非常费脑子。

• 搜索历史：搜索历史的功能，可以减少用户的回忆，使得整个体验更加轻松愉悦。

4.信息降噪

根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互，起到信息降噪的作用。

费茨法则 ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。

• 列表嵌入层：将列表为多层级时，隐藏弱层级列表内容，可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容，鼠标悬浮即可展开。

• 标签页：标签也换可以将信息内容进行分类，让用户更易理解。

• 渐进式展现：用户在填写表单时，会根据当前录入的数据，展现下一项需要填写的内容，这样的展现方式可以屏蔽掉无关紧要的内容。

• 悬停即现工具：鼠标悬停时，出现操作项。这样将不重要信息或者操作隐藏起来，不会干扰到用户浏览其他重要内容。

③ 系统反馈即时

包含 Ant Design 的设计原则有：『 简化交互 』『 巧用过渡 』『 即时反应 』。

「系统反馈及时」的重要性体现在 交互之后 立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。

1.实时反馈

虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。

牛顿第三定律 ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》

• 实时预览：根据用户的输入，提供关于密码强度和有效性的实时反馈提示。

• 文字链热区：当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。

2.过渡反馈

人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。

Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。

Receding:  与当前页无关的信息元素应采用适当方式移除。

Normal: 指那些从转场开始到结束都没有发生变化的信息元素。

• 表格加载：网络不好或者表格数据过多，都有可能导致加载缓慢，这时有一个小动画可以缓解用户的焦虑感。

• 富列表加载：用户在打开列表时，页面无法做到一次性加载所有的数据，同时有为了减少翻页的繁琐操作，就有了下拉自动加载的。

• 页面加载：当用户访问的页面体量过大时，系统会通过给出倒计时或完成百分比，来缓解用户焦虑，并且给用户友好可控的感觉。

• 滑入与滑出：可以有效构建虚拟空间。  

• 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。

• 对象增加：在列表/表格中，新增了一个对象。

• 对象删除：在列表/表格中，删除了一个对象。

• 对象更改：在列表/表格中，更改了一个对象。

• 状态一：用户更改了「详情」中的值；

• 状态二：用户点击「保存」后，详情所在的网格出现「黄底」，表明该对象发生了更改；

• 状态三：底色持续几秒后，恢复正常。

• 对象呼出：点击页面中元素，呼出一个新对象。

3.结果反馈

用户常常会疑惑自己的操作是否成功了，哪怕是失败了也是需要系统反馈，这样才能安心进行下一步的操作。

• 页面反馈结果：

• 气泡反馈结果：

④ 用户自由可控

包含 Ant Design 的设计原则有：『 提供邀请 』『 足不出户 』『 即时反应 』。

「用户自由可控」的重要性体现在 交互前对下一步操作的预判；交互时 不论操作后的结果多严重都要允许用户自主决策；以及交互后 能否对自己的操作结果反悔。

1.未来预判

很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示，以表明在下一个界面可以做什么。  这样人机交互的过程往往更加自然、顺畅。

• 点击刷新：对于设计师而言，最常见的例子要属花瓣了，我们时长会沉浸在我们浏览的瀑布流卡片中，如果系统强行刷新当前页面，用户很有可能迷失。邀请用户主动更新，既不会错过新的消息，又不会导致我们的心流被打断。

• 未完成邀请：用户在当前页面无法完成登录操作，为了减少用户迷茫的焦虑感，系统告知用户点击“更改”链接，可以去向何处。

• 悬停邀请：鼠标「悬停」时，出现「选择此模板」的按钮。

2.自主决策

虽然系统中缺少不了一些危险操作或者不可逆操作(eg：删除、重置、重装系统等)，但是仍然要用户自主决定是否继续，我们能做的就是让用户再三确认。

• 弹窗提示：虽然弹窗打断用户心流，但是对于重要的操作，这样是最保险的方式。

• 删除知识库提示：是钉钉中，删除「知识库」这一重要内容，是不可逆的，系统需要用户谨慎操作。

3.准许反悔

如果说「自主决策」中提到的案例都是不可逆的，那「准许反悔」的后果严重性会弱一些，系统对用户的操作没有那么强的阻断性，所以要准许用户反悔的，

• 删除撤销：用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。

『 Ant Design的优点与缺点 』

① 优点

1.助初创团队快速产品快速上线

Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功，但是能帮助业务产品『正确的成功』或者『正确的失败』。”

如果团队有一个产品idea，我们需要通过最少的资源开发此产品并投入到市场中，通过听取用户反馈，验证idea是否可行，快速迭代最终做出更完善的产品。但理想是美好的，但现实是骨感的，在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间，前几个版本的产品通常用户体验非常差，这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式，需要磨合，设计和开发进度一延再延，结果错过了风口，市场被竞品抢占，还没上线就倒闭了。

Ant Design提供了一套完整的界面实现方案，即有代码框架能直接拿来提高开发效率，每个界面组件都经过蚂蚁金服多个项目的考验，具备优秀的用户体验。用Ant Design来做0-1，能快速发布用户体验优秀的产品，听取用户反馈，快速迭代。

当然，创业是九死一生，市场和用户口味都充满了不确定性，谁也没有能力保证产品是否成功，但是只要你能高效的产出质量优秀的产品，不断试错，说不定以后就能成功。

2.减少设计和开发的不确定性。

用 Ant Design 就能高效的产出高质量的产品，减少设计和开发的不确定性。

因为我们公司就使用了 Ant Design 的系统，所以时常会与前端小伙伴沟通，以下都是他们在使用过程的感想。

Ant Design 提供的大量功能比较全面且UI风格统一的组件，能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景，驱动了 Ant Design 团队通过对使用情况的观察汇总，整理出来了这么一个组件库。他们的经验积累如此之丰富，足以让这个库支持大部分其他前端开发者的需要。

其设计团队给出的设计规范相当详细且经得起推敲，令许多其他团队获益匪浅。

3.节省设计与开发的人力成本

我见过太多宣称自己在乎用户体验的公司，给用户的产品质量确实比较高，但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班，情绪消极，这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了，因为创新需要员工有充沛的精力和主动性，天天加班谁还有这精神。

用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担，能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福，他们重新恢复活力和激情能做出更有创意和竞争力的产品，给公司带来更大的收益，这是一个三赢的结局。

② 缺点

1.无法根据业务场景定制组件，灵活度不够

一定有小伙伴会有这样的疑问，目前市面上有这么多的第三方设计规范，例如 Ant Design ，Element UI，有必要自己造轮子做一遍吗？

这里要视情况而定，如果公司产品是初创期，而且研发人手不足，那确实没有必要自己造轮子。反之在资源足够的情况下，是有必要设计团队重新做一套属于自己产品的规范组件库的，因为B端自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。

2.组件细节深入度不够，只能“将就”使用

对于比较普通的设计解决方案是可以的，但是 Ant Design 包含的组件细节仍有不足，毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上，规范定义的越是精细，对于产品组件而言可延展性就越差，限制也会越多。而 Ant Design 只需要解决80%企业，80%的通用问题即可。

3.竞品同质化严重，视觉上无法脱颖而出

当市场大部分产品都在使用 Ant Design 设计系统时，产品的同质化就会很严重。为了避免这种情况发生，我们就有必要从设计语言、设计原则、设计组件三个部分开始，设计自己的规范。那些大厂的成熟的组件库该如何用呢？我认为应该把它当成一个字典，有不会的地方，可以去参考人家的成熟的解决方案。

『 总结 』

这篇文章简单的介绍了一下 Ant Design 是什么、 Ant Design 的设计原则是什么以及 Ant Design 的优缺点。当然也重点总结了一下，设计师如何运用 Ant Design 的设计原则，可以将这些原则分为四类：视觉层级清晰、交互操作高效、系统反馈及时、用户自由可控。希望大家通过这篇文章能够更深一步了解 Ant Design 的设计原则，并将其灵活运用到设计工作中。

参考文献：

《Ant Design 官网》

《设计心理学 1 》 [美] 唐纳德·A·诺曼 

《写给大家看的设计书》 美国罗宾·威廉姆斯(RobinWilliams)

《web界面设计》 Bill Scott    Theresa Neil

《维基百科》

《如何评价 Ant Design 这个项目（一个设计语言）？》 龙爪槐守望者

文章来源：站酷   作者：菜菜不甜 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务