手势作为图形界面与用户之间沟通的方式之一，在便携电子设备上大量应用。与实体按键相比，它有着纯粹的简洁性和无尽的创造性，手指的个数变化、不同变量的组合能够创造出无数的操控方式。
位移类手势是指代那些通过手指接触屏幕后的位置变化从而操控电子设备的手势，本篇文章主要讲解单指操作的位移类手势，多指的位移类手势（如捏合）将放到后续文章中讲解。
一谈到位移类手势，大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而，当我们想仔细谈论他们三者之间的区别时，大部分设计师可能无法准确地描述。为了能够准确描述三者的区别，我们在这里引入三个维度的概念，它们分别是控制方式、稳定化效果、以及阈值类型，这三者的不同的变化组合可以创造不同的位移类手势，拖拽、甩动和轻扫之间的区别也是这三个维度影响的。当我们在讨论不同位移类手势之间的区别时，不如说是在讨论这三个维度之间的区别。比如常见的轻扫手势，因为这三个维度的变化就会产生不同的变种，而且不同变种在体验上也存在很大差别，若不分场景随意使用，很容易就影响用户体验。那接下来我们首先了解一下这三个维度。
第一个维度是控制方式，它分为绝对控制和相对控制，也可以通俗的表达为跟手和不跟手，区别如下。
绝对控制/跟手：施加控制的一方（后文简称施控物）的某个属性变化与被施加控制的一方（后文简称受控物）的某个属性变化是对应的。
相对控制/不跟手：施控物的某个属性变化与受控物的某个属性变化不是对应的。
比如在网易云音乐的播放页（下图左），左右滑动黑胶时，手指是施控物，黑胶是受控物，手指的横向位置变化和黑胶的横向位置变化是对应的，即绝对控制。上滑调出评论页时（下图右），评论页的位置和手指的位置没有对应关系，手指的上滑仅仅控制评论页是否出现，即相对控制。
与相对控制相比，绝对控制允许用户去操控受控物的属性变化过程，因此给予了用户更强的掌控感。比如在微信读书阅读页边缘右滑，手指的横向位置与书籍封面的变化过程对应，模拟现实生活中慢慢合上书的感觉，如下图。
但是在有些场景，为了避免混乱，属性变化过程是不适合被用户绝对控制的，此时我们应采取相对控制的方案。比如 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：如今随着科技的不断发展，人们日常的生活也开始变得智能化，智慧生态逐渐进入到各种领域，从买菜到小区物业等等，如今很多都变得更加智能方便；本文作者分享了关于智慧社区平台订单支付及退款结算规则设计，我们一起来了解一下。
笔者现就职于一家房产集团旗下科技公司，整体负责公司各产品线；公司主营智慧社区项目，在当地小有规模，智慧社区平台包括物业管理系统、社区电商平台、社区IOT系统、居家养老系统、社区政务系统、二手房交易平台等6大系统。
各系统后台独立，为了方便小区业主，让用户在同一个APP上能享受物业服务缴费、线上购物、扫码充电、会员缴费等等功能，需在用户端设计不同的支付结算方式。
本文主要分享社区电商系统、物业管理系统、社区IOT系统的订单支付及退款结算规则设计。
物业系统为SaaS模式，B/S架构，使用平台公有云服务器，单独数据库分区，使用角色为平台合作的付费物业企业，支付结算需求包括：
社区电商模式以整合社区周边商家为社区居民提供便捷的O2O服务为主，入驻商家包括社区周边零售商和服务商。
零售服务场景主要是方便社区居民在线选购社区周边商品，提供线上下单，线下送货上门服务，基于之前的业务拓展，支持平台配送、快递物流、到店自提、商家送货上门4种配送方式，其中平台配送是整合物业服务人员进行社区周边的送货上门服务。
综合各种配送方式及业务场景，支付结算需满足以下需求：
预约服务场景主要满足社区居民在线预购社区周边服务，支付结算需满足以下需求：
社区IOT系统对接设备包括：社区一卡通、门禁、楼宇对讲、停车道闸、电动车充电桩等等；涉及到支付业务的有社区一卡通、电动车充电桩。
社区一卡通支付及结算需满足以下需求：
电动车充电桩支付及结算需求：
包括以下需求：
由以上需求内容可以看出，各系统的结算场景、结算流程，包括结算对象都存在不一致，但C端支付入口在同一应用端，这就需要在后台针对不同的业务流程设置不同的结算规则。
笔者对标了国内多个提供聚合支付及分账服务的平台，综合考虑对接成本及费率，最终选择了某平台作为对接方。
结算规则设计及注意事项如下：
注意事项：为了保证客户资金安全及平台免责，由第三方支付机构与企业直接签约，且提供单独的对账后台，便于企业查账，线下支付则直接结算至企业银行卡账号，系统只做账单记录。
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），为零，平台无需退款。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：人人都是产品经理 作者：正文
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
简介 ：包容格式是一种用于文本输入的模式，使用这种模式后，可以让用户输入文本内容时不用关心格式或语法，从而轻松达到预期目标。
例子 ：Google 搜索输入框
用户操作界面时只是想完成某件事或某个操作，而不是考虑「正确」的格式或复杂的UI。计算机擅长弄清楚如何处理不同类型的输入。如果计算机无法正确处理多种类型或格式的文本内容，那么用户在输入内容时就会有明显的受阻感。
所以，让用户输入所需的任何内容，然后让计算机来处理结构或格式，才是一种比较理想的方法。这种模式可以极大地简化界面，并使其更容易被用户理解。
相关资料：
https://zhuanlan.zhihu.com/p/343497540
用户可能会输入不同类型、格式的文本内容，而我们希望用户可以不用太关心格式问题，同时希望界面保持简洁。很多时候，用户输入的数据可能类型、格式不一（例如存在空格、连字符、缩写或大写等等），如果提供不同的输入类型，那么界面就很可能不够简洁。这种模式可以很好地将数据类型有效处理。
使用条件：
输入内容存在不同类型或格式；
希望用户输入比较容易；
希望界面简洁；
核心思想：将界面设计问题转化为编程问题。
我们需要考虑用户可能输入的文本类型：
简单的例子：只要求输入一个只有格式不同日期或时间；
复杂的例子：搜索某些关键词，根据关键词获得不同的结果；
由于业务场景不同，每个应用程序使用此模式的方式可能不同。只要确保软件对各种输入格式的响应与用户期望的一致即可。因此建议与用户进行真机测试。
用户需求：将特定股票添加到个人关注列表。
东方财富的股票搜索框，用来帮助用户快速找到目标股票。该搜索框就使用了「包容格式」这一模式。用户既可以输入股票代码进行查询，也可以输入股票的名称进行查询。
用户需求：输入信用卡号
很多产品都有输入信用卡号的场景，用户应该只要输入16位数字，而不需要明确这 16 位数字的格式。输入的内容中是否带有空格对结果不应该有任何影响。
gumroad 的信用卡号输入框允许用户随意输入他们的信用卡号。信用卡号字段接受空格作为分隔符（不包含空格也可以），然后这个输入框会立即将输入的卡号格式化。
用户需求：创建日程
我们会有很多方式来表示日期，例如周一、星期一、2021/06/20、6-14 等等。在 macOS 日历中创建日程时，用户可以输入各种格式的日期，输入框都会正常识别到该格式，并按照其日期创建日程。
你可以在下方查看「包容格式」更多的案例：
https://airtable.com/shr9tuJY8zKxAIdfo/tblXEEC6HykKOL3Ef
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
众所周知蚂蚁集团的B端产品是一个庞大的系统，数量多且功能复杂，而且变动频繁，常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件，根据原子设计理论可以得到一些稳定且高复用性的内容。
随着这两年B端产品的逐渐白热化，越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁集团体经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范，降低冗余的生产成本，让设计者专注于更好的用户体验。
针对B端产品反复出现的一些设计体验等问题， Ant Design 给出标准的设计原则，实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面，既减少了不必要的认知成本，又能够提升设计的效率。考虑到需要适应各种定制化的业务场景，设计原则具有一定的灵活性，万变不离其宗，通过了解设计原则的构建逻辑，高效组织信息、帮助建立用户与界面的互动等原则性要求，可以衍生出更具场景特性的设计方案。
可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则，并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充，我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明，这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。
稍微了解 Ant Design 的小伙伴都知道，本系统是针对B端后台系统，承载媒介是PC端的浏览器。使用的人员主要包括：用户体验设计师、交互设计师、UI设计师、前端程序员等。
顾名思义『 设计原则 』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则 』是 Ant Design 系统的一部分，但是前文已经提到，此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华，所以设计师可以把这些原则运用到任何的设计领域，并不要局限于企业后台系统的PC端产品。
为了方便大家理解，讲一个小故事。故事来自于《写给大家看的设计书》，作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后，发现其中有一颗叫约书亚树的树，造型奇特，自己从未见过。于是决定出门转转，然而发现外面到处都是这种树。故事到这里就完了。
可能大家会想，这个故事要讲一个什么道理呢？简单来说就是，当你手中有个锤子，满世界都是钉子。当你了解到下面要讲的十个设计原则后，你会发现它们处处都适用。
十大原则如下：
亲密原则（Proximity）
对齐原则 (Alignment)
对比原则 (Contrast)
重复原则 (Repetition)
直截了当 (Make it Direct)
简化交互 (Keep it Lightweight)
足不出户 (Stay on the Page)
提供邀请 (Provide Invitation)
即时反应 (React Immediately)
巧用过渡 (Use Transition)
对于一个初级设计师而言，想要了解UI用户体验等知识，学习 Ant Design 的设计原则算是比较快能上道的，因为 Ant Design 是吸取了很多前辈的精华，提炼而成的系统。打个简单的比喻，对于设计师而言 Ant Design 就是设计师学习『 视觉规范 』，掌握『 设计原则 』最好的字典。
接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。
Ant Design 定义了10条设计原则，根据『 席克定律 』选项太多不易记忆，于是我找到了这些设计原则的共通性，将其归为4类，也就是大家只需记住四类设计原则，在工作中适当延展即可。
包含 Ant Design 的设计原则有：『 亲密原则 』『 对齐原则 』『 重复原则 』『 对比原则 』。
「视觉层级清晰」的重要性体现在 交互前 用户看到的内容结构是清晰明确的 。一个层级混乱的界面，任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
纵向间距：在 Ant Design 中，通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。
增加元素：通过增加「分割线」来拉开层次。在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是「基础间距」。
组合排布：为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。（注：栅格是另外一个模块的内容，这里不赘述。）
复选框内：在一个组件内部，元素的横向间距也应该有所不同。
正如「格式塔学派」中的连续律（Law of Continuity）所描述的，人类的视觉系统往往倾向于将看到对象的直线继续成为直线，曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，「整体不同于其部件的总和」。——摘自「维基百科」
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
推荐使用：标题和正文左对齐，使用了一个视觉起点。
不推荐使用：标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。
冒号对齐：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。
需要区分主次场景：
不需要区分主次的场景：「通过」和「驳回」都使用次按钮，系统保持中立。在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
总分关系：通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
常见类型有「静态对比」、「动态对比」。
静态对比示例：用不同颜色的点，来表明不同状态。
动态对比：鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
线框重复：
设计要素重复：
文案格式重复：
包含 Ant Design 的设计原则有：『 直截了当 』『 足不出户 』『 简化交互 』『 即时反应 』。
「交互操作高效」的重要性体现在 交互时 用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题，却忽略用户能否理解流程如何操作，那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短，而是用户的心理时间是否太长的问题，就像我们打游戏往往会觉得时间过的很快，但是在等待页面加载时却不耐烦。
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
变化盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
气泡提示：对于操作的反馈是必要的，下文会提到，但是为了减少打断用户，轻量级的反馈气泡提示即可。
输入覆盖层：鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。不用弹窗或跳转的形式编辑，只需要在触发图标附近弹出浮层即可，这样避免用户视动线的混乱，减少打断用户操作的心流。
正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
常规的编辑模式，界面都会跳出一个弹窗或者是一个页面跳转，无形之中用户走了更多的流程路径，如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『 足不出户 』的设计原则。
文字链/图标编辑：
状态一：在可编辑行附近出现文字链/图标；
状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。
多字段行内编辑：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。
拖放图片/文件：在早前很多产品在上传功能上，都是跳出弹窗再选择文件上传，现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。
模糊搜索：系统根据用户所查询的关键词，智能匹配可能的结果。
定时自动更新：新增的列表项「高亮」，持续几秒后恢复正常。不需要用户手动刷新，减少不冗余的操作。
人们在思考的时候，是需要依靠大脑神经元之间相互传递信号，而回忆是需要调用更多的的神经元传递信号，简单地说就是非常费脑子。
搜索历史：搜索历史的功能，可以减少用户的回忆，使得整个体验更加轻松愉悦。
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互，起到信息降噪的作用。
费茨法则 ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。
列表嵌入层：将列表为多层级时，隐藏弱层级列表内容，可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容，鼠标悬浮即可展开。
标签页：标签也换可以将信息内容进行分类，让用户更易理解。
渐进式展现：用户在填写表单时，会根据当前录入的数据，展现下一项需要填写的内容，这样的展现方式可以屏蔽掉无关紧要的内容。
悬停即现工具：鼠标悬停时，出现操作项。这样将不重要信息或者操作隐藏起来，不会干扰到用户浏览其他重要内容。
包含 Ant Design 的设计原则有：『 简化交互 』『 巧用过渡 』『 即时反应 』。
「系统反馈及时」的重要性体现在 交互之后 立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
牛顿第三定律 ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
实时预览：根据用户的输入，提供关于密码强度和有效性的实时反馈提示。
文字链热区：当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
Receding: 与当前页无关的信息元素应采用适当方式移除。
Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
表格加载：网络不好或者表格数据过多，都有可能导致加载缓慢，这时有一个小动画可以缓解用户的焦虑感。
富列表加载：用户在打开列表时，页面无法做到一次性加载所有的数据，同时有为了减少翻页的繁琐操作，就有了下拉自动加载的。
页面加载：当用户访问的页面体量过大时，系统会通过给出倒计时或完成百分比，来缓解用户焦虑，并且给用户友好可控的感觉。
滑入与滑出：可以有效构建虚拟空间。
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
对象增加：在列表/表格中，新增了一个对象。
对象删除：在列表/表格中，删除了一个对象。
对象更改：在列表/表格中，更改了一个对象。
状态一：用户更改了「详情」中的值；
状态二：用户点击「保存」后，详情所在的网格出现「黄底」，表明该对象发生了更改；
状态三：底色持续几秒后，恢复正常。
对象呼出：点击页面中元素，呼出一个新对象。
用户常常会疑惑自己的操作是否成功了，哪怕是失败了也是需要系统反馈，这样才能安心进行下一步的操作。
页面反馈结果：
气泡反馈结果：
包含 Ant Design 的设计原则有：『 提供邀请 』『 足不出户 』『 即时反应 』。
「用户自由可控」的重要性体现在 交互前对下一步操作的预判；交互时 不论操作后的结果多严重都要允许用户自主决策；以及交互后 能否对自己的操作结果反悔。
很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示，以表明在下一个界面可以做什么。 这样人机交互的过程往往更加自然、顺畅。
点击刷新：对于设计师而言，最常见的例子要属花瓣了，我们时长会沉浸在我们浏览的瀑布流卡片中，如果系统强行刷新当前页面，用户很有可能迷失。邀请用户主动更新，既不会错过新的消息，又不会导致我们的心流被打断。
未完成邀请：用户在当前页面无法完成登录操作，为了减少用户迷茫的焦虑感，系统告知用户点击“更改”链接，可以去向何处。
悬停邀请：鼠标「悬停」时，出现「选择此模板」的按钮。
虽然系统中缺少不了一些危险操作或者不可逆操作(eg：删除、重置、重装系统等)，但是仍然要用户自主决定是否继续，我们能做的就是让用户再三确认。
弹窗提示：虽然弹窗打断用户心流，但是对于重要的操作，这样是最保险的方式。
删除知识库提示：是钉钉中，删除「知识库」这一重要内容，是不可逆的，系统需要用户谨慎操作。
如果说「自主决策」中提到的案例都是不可逆的，那「准许反悔」的后果严重性会弱一些，系统对用户的操作没有那么强的阻断性，所以要准许用户反悔的，
删除撤销：用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。
Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功，但是能帮助业务产品『正确的成功』或者『正确的失败』。”
如果团队有一个产品idea，我们需要通过最少的资源开发此产品并投入到市场中，通过听取用户反馈，验证idea是否可行，快速迭代最终做出更完善的产品。但理想是美好的，但现实是骨感的，在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间，前几个版本的产品通常用户体验非常差，这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式，需要磨合，设计和开发进度一延再延，结果错过了风口，市场被竞品抢占，还没上线就倒闭了。
Ant Design提供了一套完整的界面实现方案，即有代码框架能直接拿来提高开发效率，每个界面组件都经过蚂蚁金服多个项目的考验，具备优秀的用户体验。用Ant Design来做0-1，能快速发布用户体验优秀的产品，听取用户反馈，快速迭代。
当然，创业是九死一生，市场和用户口味都充满了不确定性，谁也没有能力保证产品是否成功，但是只要你能高效的产出质量优秀的产品，不断试错，说不定以后就能成功。
用 Ant Design 就能高效的产出高质量的产品，减少设计和开发的不确定性。
因为我们公司就使用了 Ant Design 的系统，所以时常会与前端小伙伴沟通，以下都是他们在使用过程的感想。
Ant Design 提供的大量功能比较全面且UI风格统一的组件，能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景，驱动了 Ant Design 团队通过对使用情况的观察汇总，整理出来了这么一个组件库。他们的经验积累如此之丰富，足以让这个库支持大部分其他前端开发者的需要。
其设计团队给出的设计规范相当详细且经得起推敲，令许多其他团队获益匪浅。
我见过太多宣称自己在乎用户体验的公司，给用户的产品质量确实比较高，但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班，情绪消极，这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了，因为创新需要员工有充沛的精力和主动性，天天加班谁还有这精神。
用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担，能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福，他们重新恢复活力和激情能做出更有创意和竞争力的产品，给公司带来更大的收益，这是一个三赢的结局。
一定有小伙伴会有这样的疑问，目前市面上有这么多的第三方设计规范，例如 Ant Design ，Element UI，有必要自己造轮子做一遍吗？
这里要视情况而定，如果公司产品是初创期，而且研发人手不足，那确实没有必要自己造轮子。反之在资源足够的情况下，是有必要设计团队重新做一套属于自己产品的规范组件库的，因为B端自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。
对于比较普通的设计解决方案是可以的，但是 Ant Design 包含的组件细节仍有不足，毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上，规范定义的越是精细，对于产品组件而言可延展性就越差，限制也会越多。而 Ant Design 只需要解决80%企业，80%的通用问题即可。
当市场大部分产品都在使用 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
面对企业级产品，由于系统复杂度和业务领域的专业壁垒，用户、产品、业务、技术的理解和分析难度都远远高于C 端。特别是进入业务深水区，技术术语层出不穷，角色链路错综交织，场景越来越复杂，在理解和分析业务上设计师需要耗费的精力越来越多，设计师如何高效且深入的分析业务，直接影响到设计解决问题的深入度。基于蚂蚁金服CTO 线的业务土壤，我们不断尝试打磨，探索出以JCD 为核心的企业级产品设计思维，助力设计师在深耕业务上有章可循，有方法可用。
做企业级产品 3 年多，刚从 C 端业务转过来时，最大感受是对业务理解起来很艰难。随着经验的增加，对 0 到 1 产品驾驭起来轻车熟路，可到业务深水区，还是感觉痛苦。技术术语层出不穷，用户角色多，一个用户身兼数个角色，系统之间的关联关系也很复杂，随着业务的深入设计师会感觉对产品逐渐失去掌控力。一个简单的芝麻信用分，需要 20-30 个中后台产品和各种角色一起协同支撑。然而复杂是守恒的，系统复杂性的总量是一个衡量，当前台的呈现更简单时，隐藏在幕后的复杂性就增加了。
我们面临系统的复杂性表现在三个方面：
多角色，重协同。
链路长、错综交杂。
技术术语多，业务难理解。
但企业级产品会有一个主线，是从「事情」的角度出发，关注一件又一件事情被完成。企业场景下我们再把事情描述的具体一些，就是一个又一个的 Job 。设计师要做的就是通过设计，包括参与的角色、使用的工具以及协作方式等，让 Job 被高效完成。
我们先对比一下，从「用户」视角和从「Job」视角出发，关注的维度有哪些差异呢？从用户视角出发我们需要关注用户的个人痛点、情绪、兴趣、人种志（年龄、性别、收入）等信息，会更关注人，核心是为了满足用户的需求。在Job 视角下，需要关注 Job 的目的、参与角色、协作方式、工具等信息，而且 Job 对角色是有要求的，比如航空公司飞行员，按岗位要求，他需要不断提升自己业务能力，每年要去复训两次，学习新的技能和知识来满足岗位对飞行员这个角色的要求。
基于我们的业务土壤，以及出发视角，我们探索出一套适合企业级产品的设计思维，JCD（Job - Centered Design ）以 Job 为中心，设计完成 Job 所需要的一切，包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它是一套适用于企业级产品设计的发现问题、解决问题的方法论。
在 JCD 设计思维下，将设计流程分为四个阶段，发现、构思、呈现、度量。每个阶段下有不同的方法、产出、资产。Ant Design 在「呈现」阶段帮设计师大大提升了效能，设计师才有更多的精力投入到「发现」阶段去更深入去理解业务和角色。接下来重点分享一下在发现阶段的两个方法，角色分析和业务分析。
常用的 C 端的用户画像，如下图，会关注用户人口统计学的信息，如名字、性别、年龄、所在地、家庭情况、用户的习惯、爱好等信息，这些信息在复杂的企业级产品中是不需要去关注的。
在JCD 的视角下，我们企业级产品的角色画像应该关注的三个维度：角色概览、工作能力、工作内容。而工作内容是最核心需要关注的信息，包括了工作的描述、工作的痛点、需求和使用的工具。
一个角色往往需要完成多个Job，描述一个Job 包含：
四要素：情景、角色、活动、目标。
一个句式：在什么情景下，角色需要完成什么样的活动，来达成一个目的。
举个例子，在飞行前 1.5 小时（情景），角色（飞行员）需要去查看飞机情况（活动 A ）、气象情况（活动 B ），来判断能否起飞（目标）。
为了给设计提供具体的依据，我们需要进一步纵向解构Job，来构建 1 个完整 Job 场景，设计师可以阶梯式对一个 Job 进行拆分，Job 下面有多个 Activity，Activity 下面有多个 Task 组成，Task 下面有不同的 Action，到这种颗粒度可影响到设计界面中的具体元素。
看一个具体案例，如何拆解一个 Job，首先用我们的上面的四要素和句式描述。Job：飞行前 1.5 小时，飞行员需要查看飞机情况、查看气象情况，来判断能否起飞。在飞行员这个角色的 Job 里包含了两个 Activity ：1. 查看飞机情况；2. 查看气象情况。查看气象情况这个 Activity 下包含了三个 Task：1.查看起飞地天气；2.查看降落地天气；3.查看备降地天气。
每个 Task 下面会有不同的 Action。除了 Job 的纵向拆解，我们还需要关注每个 Job 场景下的需求、痛点、费力度、成就感。
做好一件复杂的事情，往往需要多个角色在多个工作场景中协同配合。我们会以Job 场景为核心，梳理角色之间的协作关系，建立全局视角。比如，在飞机起飞前，机组飞行员查看飞机和飞行信息、查看起降地天气等；同时乘务组空姐们为此次飞行做相应准备工作。准备完毕，机长会通知机组和乘务组开始登机。上飞机后机组需要检查驾驶舱情况，乘务组检查客舱情况，检查完毕，会一起协同机场地勤人员安排乘客登机。完成登机后，飞行员需要联系机场管制申请起飞........ 设计师可以通过Job 场景去串联角色之间的协作关系，如下图。
以上是「角色分析」的方法，是从 Job 出发洞察角色的工作需求以及协作模式，帮助设计师构建角色协同的全局观。
业务分析的方法是借鉴面向实体的思路帮助设计师去深入分析复杂业务。企业级产品中会有各种技术术语、复杂的数据流转、业务逻辑等，我们需要一个系统的方法来分析和理解业务，为设计提供准确有深度的信息输入。我们的用户大部分是软件工程师，这个思路可以让设计师在理解和认知上对齐用户的心理模型。我们业务分析的有三个维度：
产品定义
实体建模
业务逻辑
通过以上三个维度，从纵向和横向去深入和全面的理解业务。
通过沟通交流、桌面研究的方法，去了解产品和用户相关信息，熟悉相关概念和技术背景、沉淀信息资料，来收集产品的信息，具体的产出有名词库、产品画布、产品的关系图、业务结构图、产品形态图等，这里不展开详述。
实体建模是本次分享的重点，实体建模按照面向实体的思想分析业务，围绕实体进行问题和内容抽象和分析，聚焦于产品内实体和实体间的关系，以及实体的生命周期的分析。
我们先看什么是实体，参考领域建模（此处感谢幻星给实体的定义）给实体一个定义：实体是产品中客观存在，具有唯一标识的并可以相互区分的业务载体，通常包含属性和行为。
企业级产品系统的实体，很多情况下都是熟悉的字母，陌生的单词，在设计之前设计师如何去准确、系统的去分析实体。
举个例子，现实世界中，「机票」是一个实体，在产品里，可以把「机票订单」看成一个实体。围绕着机票订单，我们梳理出它的基本属性信息，以及它具有的所有状态和对应操作，设计师可以进一步把这些状态和操作梳理出一个「机票订单」这个实体从产生到消失整个生命周期经历的过程。这些分析可以作为后续任务流程和设计细节的信息输入。
一个实体不能构成一个产品，一个系统会有很多实体存在，我们需要进一步去梳理「机票订单」与系统中其他实体的联系。在下图的案例中，机票订单与机票是聚合 n：1 关系, 一张机票订单会包含多张机票，机票订单与收支明细是关联 1：n 的关系，一张机票订单会关联到多个收支明细，比如会有支付成功、退款等明细。
以上是实体建模的过程，产品定义和实体建模都是对业务内容层进行理解和梳理。但是我们的业务除了内容外，还有很多复杂的业务规则、业务流程，我们也需要进行梳理和分析，这样设计师才能对业务有全面的理解。
所以我们需要把结合实体、业务规则、业务流程，进一步梳理业务逻辑。最终会得到一张业务逻辑图，不仅能够帮助设计师洞察到业务的本质，也能帮设计理解业务的全貌。
第二个方法业务分析，是通过面向对象分析思路去深入的理解业务，为设计提供更精准，更有逻辑的依据。
回顾以上三部分内容，JCD 是什么？Job - Centered Design 是以 Job 为中心的设计思维。JCD 的定义：以 Job 为中心，设计完成 Job 所需要的一切，包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它包含了原则、流程、方法&工具、产出&资产，上面重点分享了其中两个方法「角色分析」和「业务分析」。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这是5月参加阿里设计周“智能与计算”分论坛后的感想小结，因为论坛大部分在讲算法和实现方式，所以在这里我就其中的AI与设计相关部分做一些深入分享。
我的思路大概分为三个部分：AI时代的来临；AI如何影响设计；未来的设计何去何从。
第一部分：聊聊AI时代来临，设计的世界发生了什么变化？
每个时代的设计都有不同的定义，农业和工业时代的设计更多是指设计师通过手工制作的方式阐释自己对美感和艺术的理解。
到了信息时代，设计除了要考虑美感，还要考虑是否实用和好用。设计的对象开始从真实世界转向数字世界，设计思想开始考虑以用户为中心的设计；设计方向也增加了很多领域，包括都多媒体艺术、游戏设计、网页设计、移动应用设计等。
在人工智能时代下，AR设计、智能硬件逐渐发展，设计的改革更多考虑的是如何将真实世界和数字世界进行融合，如何在自己产品上更好地阐释艺术、美感和实用性。
第二部分，AI如何影响设计，设计因为人工智能而产生了哪些改变呢？
结合论坛的内容，我觉得从以上五个方面产生了较为深远的影响。
人工智能帮助设计师解决在创意过程中面临的一系列问题，将重复劳动变得自动化 ，节省设计师大量的时间，减轻设计师的工作量。
数据驱动自动生成，取代人工建模，减少了设计的时间成本。通过组件标准化，来构建三维几何，然后geometry格式入库，最后由渲染引擎绘制。
再比如，双11期间有1.7 亿个BANNER，都来自阿里的“鹿班”AI设计系统。设计数据—机器学习、训练模型—生成设计结果并评估。如果这些工作量由人工来完成，那么设计师真的就成了“没有感情的作图机器”了。
当今社会，随着产业智能的发展，在这个变革中，挑战不单单来自技术，也来自客户对智能数字体验的极致追求。这给开发人员和设计师都提出了全新的难题，在可视化领域，通过技术和设计两个角色更紧密的捆绑，产生了让人欣喜的化学反应。
从原始数据到图表并不是直接的，它需要经过交互的分析，得到指标结果，最终以可视化图表呈现，而呈现的视觉方式是多样化的。
这就是所谓的两种数据，三层讲述：
第一步是原始数据的准确转译，工具需要数据对接能力，即对现状的讲述。
第二步是分析过程，从脚本模式跨入数据驱动，让数据的分析变得可知可信。
第三部是观点数据的表达，也就是创作强化，将结论以可视化的多样形式被表达。
这是根据地图的原始数据得到的多种可视化设计方案，同一份原始数据，却得到了不同的形式表达。
因为仅仅有准确的数据结论是不够的，因为数据需要更好地被讲述和表达，如果仅仅将数据呈现给用户，那么理解难度将会大大提高，而设计是为了让产品变得更加容易使被理解和使用。
第二点，体现在建筑的三维可视。
首先，在二维地图选取建模范围，通过智能化的处理，根据数据构建初始的三维地图。
然后通过数据联动，将城市建筑虚拟还原。
整个过程从数月—> 数周—> 数天，时间大大缩短，人力成本减少，释放更多的精力去进行创意工作。
建筑三维化的应用：比如车道级地图。
相比于传统地图，车道级地图导航在信息精细度、定位准确性、动态信息丰富度上有大幅提升。
车道级导航能清晰显示道路上的虚实标线、自己的车行驶在哪条车道上，还能在地图上看到车身摄像头和雷达检测到的周围车辆、锥桶、防撞桶等。
当设计对象从单个产品转变到用户的经历和当前环境时，设计师不能只考虑自己的产品体验，需要从大局出发，思考每个产品之间的联动，考虑不同场景下自己的产品如何服务用户以及如何与其他产品联动。产品设计从单体变成一块需要考虑兼容上下左右外部环境的拼图。
智能化的场景的改变对设计有哪些影响呢，我们来看这张图：设计的场景从有形—>无形、静态—>动态、永恒—>瞬间的转变。体验设计的趋势从GUI到TUI(实体交互)，再到Radical Atoms，场景的改变对设计的影响维度不是单一的。
设计场景在AI时代不仅局限于手机，还涉及到实时场景的设计情况。
比如谷歌的实时翻译、语音翻译。输入与输出是同步进行的，这就对设计提出了新的要求。
此外，还有语音智能VUI，彻底打破了以往的交互体验，改变了人和工具之间的互动关系，反向塑造着人类的认知方式和学习行为。下面来看一个小爱5.0案例：
对话是人与人之间交换信息的普遍方式，语音交互设计涉及系统学、语言学和心理学，因此它比 GUI的交互设计更加复杂。
体验设计经历了PC时代、Mobile时代，现在进入IoT体验时代。设计的解决方案与技术的发展息息相关，设计和技术互相促进带来新的体验革命，设计师一直在探讨和实践在新技术环境下的新体验设计，并基于出行、医疗、社区、政务等行业持续挖掘服务聚合模式与场景体验的创新。
在新零售的场景下，购买和支付流程发生了改变，这就需要设计师重新思考消费者的心理地图。例如无人零售、Amazon Go、支付宝IOT支付等等。下面来看一下Amazon Go的案例：
如何让用户使用更便捷、体验更顺畅；要向用户提供什么样的服务，如何让用户注意到我们的产品，如何向他们传递企业的服务价值和特点，这是IOT新零售下需要设计深入研究的方面。
在云端实现企业产品的全区域管控，监控的设计视觉和交互又是不一样的，比如论坛上的案例：荷鲁斯之眼、全区域覆盖的云监控等等。
通过对多个实体空间中的数字设计探索，重新塑造人与空间的交互界面，提升人们对于空间的使用体验。下面举个例子：
AT&T discovery district是一个数字化的互动商业社区。
它从重新审视建筑本体开始。通过虚实和光影的变幻，营造出了实体空间体验，空间本体就是对话的那个界面。实体空间和数字内容的结合，构建出人与建筑之间新的交互界面。
广场的数字球体入口，人的位置和数量变动，球体内的灯光也会跟随变动。
人工智能促使了交叉学科的工种产生：数字体验设计师、创意工程师。这两种职业是做什么呢？面对正在到来的智能时代，体验设计师和创意工程师将共同面对“AI”这一全新的命题，在智慧工地、智慧教育、数字警务室、神经符号AI等应用中，提炼出智能感设计方法、利用图形技术能力自研产品并赋能业务。
数字世界中的设计师：横跨了艺术、文化、科学、商业多个学科；从传播学、心理学、应用科学和统计学进行用研，去解决用户遇到的问题。
它不仅涉及到需求分析和产品设计，还贯穿至产品运维、测试、发布、分析，从设计洞察中做出创新设计。
未来的设计师将融合人工智能和创意编程技术，在世界数智化的大潮中找到新的定位和新的机遇。
第三部分，在人工智能时代下，未来的设计会走向哪里？新时代的设计师怎样找准自己的定位呢？
人工智能的成熟对部分设计师来说简直是灾难性的打击，之前无论是通过技法还是数据分析才能完成的工作，人工智能一下子就可以完成，后续根本不需要这么多设计师来完成这些工作。那么设计师是否会被人工智能取代？我们先来看一张人类能力地图：
这张图中，海拔高度代表这项任务被计算机执行的难度，不断上涨的海平面代表计算机现在能做的事情。从图中可以看出，目前人工智能水平预警线距离代表艺术的山峰还很远。
人工智能没有人类的跨领域推理、抽象类比能力，也没有人类的主观能力如灵感、感觉和感受；更没有人类特有的灵魂、爱、意识、理想、意图、同理心、价值观、人生观等，这导致人工智能在未来很长一段时间内都无法很好理解人类的心理和行为是什么，在解决推理和情感问题时会不尽人意。
设计除了解决问题外，还涉及对美的理解和创作，美感是对美的体会和感受，它是复杂的，包含了历史、文化、环境、情感等客观因素和主观因素，所以在不同的时代、阶级、民族和环境中，有着不同文化文化修养和个性特征的人对美的定义也不同。
人工智能依赖数据和经验解决问题，它能解决大部分智力可解决的问题，但解决不了需要情感和美感才能解决的问题。而设计的擅长领域，是人工智能不擅长的：跨领域推理、抽象能力、常识、审美、自我意识与情感。那么AI与设计的关系怎样的呢？
设计是为了解决问题。人工智能使机器代替人类实现认知、识别、分析、决策等功能，其本质是为了让机器帮助人类解决问题，也就是说，人工智能在一定程度上也是一种设计，它会创作出与人类思维模式类似的解决方案。所以AI与设计师是一种共生关系。因此设计师不用杞人忧天，担心自己被人工智能取代。
随着AI 技术的成熟，设计必定会发生新一轮的变化，在未来，更多领域和行业需要用到界面设计、人机交互等技能，各行各业的设计师需要掌握以上技能才能更好地服务当前业务。那么未来的设计将走向哪里呢？
新一代的设计师是“与互联网共同成长的一代”，相信在未来几年里有更多的新晋设计师会掌握编程开发能力以及其他能力，综合素质会比目前的设计师更强，所以我们要保持终身学习，懂得如何将自己的能力和经验转换为优势，这样才能在设计道路上不被超越。
那设计师可以从哪些方面来应对智能时代的机遇和挑战呢？
每一代人都有被下一代人取代的风险，但有些很厉害的人就不容易被取代？因为他们在不断创造价值。无论在社会、行业还是在企业里，当具备一定的影响力后，他们能更容易积累人脉和资源，然后反哺自己的价值，就跟滚雪球一样，当雪球越大，他们越不容易被别人取代，设计师需要有这样的意识。
设计师需要懂得更多领域的知识和技术才能拓宽自己的视野，这些领域包括但不局限于传感技术、网络技术、智能仿真技术、虚拟技术、生物技术、纳米技术等。因此科学与艺术是可以并且很有必要相通与交融的，设计师一定要学会跨界思考。人工智能时代下，数字世界和物理世界会逐渐融合，大到城市建设、公共服务、衣食住行和医疗；小到智能家居、穿戴式设备，这些机会将会留给已准备好的挑战者，所以设计师一定要拓宽自己的视野，不要把自己的目光局限在界面设计上。
如果不想被人工智能领先，人类的设计应该是创新的（未成熟、未被发现规律的），包含更多元素的（更多复杂参数如历史、文化、环境、情感等），“设计”这个词语就涵盖了以上元素。人工智能在艺术设计上还远远达不到人类的水平，深耕艺术设计将会为设计师带来更多机会。
在人工智能时代下，当产品基本都能满足永不需求时，能为产品带来活力和差异的除了自身的底层技术基础，更多的是艺术型设计师的理念和风格，以及自身的品牌。就像时尚品牌优衣库和Gucci，单件商品两者的品牌和设计所带来的的利润差距巨大，相信未来的人工智能产品也会面临类似的问题，设计师应该考虑如何为产品赋予更多价值，如何彰显用户的个性。
既然AI是一个强大的工具，那么我们要思考如何运用它来创造更多的价值。AI能够快速便捷地获取大量信息，帮助设计师拓展自己的视野，不断更新自己的世界观，从新的视角看待问题和解决问题。除了快速获取信息外，设计师也应该考虑如何通过AI提高自己的工作效率，例如哪些纯劳动力工作交给AI去做效率会更高；哪些工作可以和AI一起协同完成更能激发创意。
最后，用一本科普书改编的话来结尾：一想到，还有95%的问题留给开发同学，我就放心了。
最后附上一张本文的脑图：
参考资料：
[1]阿里设计周.智能与计算.2021
[2]薛志荣.AI改变设计.2019
[3][美]詹姆斯·弗拉霍斯.智能语音时代.2019
[4][美]梅瑞狄斯·布鲁萨德.人工不智能.2018
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
智能家居越来越普及，智能化的生活是由一个个智能设备组成，这次通过近距离体验智能面板，来研究一下它们是如何提升产品体验的。
随着互联网的发展，生活智能化越来越普及，各类智能产品逐渐出现到人们面前，在体验的过程中，其实里面有很多细节需要深挖和思考。很多产品细节的背后都是为了提升用户操作效率、兼容用户使用场景、满足用户情感表达，以最终达到对用户体验的提升。作为智能产品的设计师只有充分了解市面上的智能产品，才能设计出更好的产品。
开关对于每个人都不陌生，它用来控制设备的状态，传统开关的数量和要控制的设备数量有关，设备越多，开关越多，为了简化人们的操作，智能面板孕育而出，它不仅可以操控家中单独的设备，还可以对一系列设备进行联动控制。
1. 使用场景
室内近场控制，满足用户家中近距离控制设备的场景。
2. 产品选择
Gira、ORVIBO、绿米
为什么选他们？
3. 研究方向
本文将从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
Gira g1
TFT 屏、KNX 协议、定价 8000 元起
KNX 属于欧洲总线技术，稳定性最好，需要从设计阶段介入，高门槛的技术要求让 KNX 难以实现全民普及。
ORVIBO 智能开关
多点触控电容屏、Wifi、蓝牙、Zigbee、定价 899 元
Wifi、蓝牙、Zigbee 属于无线通信技术，稳定性不如 KNX，但免布线，易扩展，利于全民普及。
Aqara 智能开关 S1 触摸屏
IPS 屏、zigbee 协议、定价 899 左右
通过以上分析，Gira 的人群定位是有全屋定制需求的高消费人群，其他两个品牌的人群定位是面向尝鲜体验的广大普通消费群体。
1. 功能点对比
通过功能列表中的对比发现，三个品牌的产品都通过场景联动设备执行来提高人们的操控体验，通过左右滑动来快速切换功能模块类型；
Gira 和 ORVIBO 支持快速返回首页、面板内排序；
ORVIBO 的个性化体验最好，它具有语音控制、设备自动添加、设备自动归类功能，这些差异点让它比其他两个产品更加智能。
以 Gira G1 为例，从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
界面整体用以黑白灰为主，搭配少量颜色，给人简洁干净的感觉；
思考：智能面板除了具有功能属性，还具有装饰属性，黑白灰为经典搭配，可以更好兼容各种家装风格，还可以更好的展现内容；少量的颜色用来强调正在运行的设备状态。
辅助色大方向上使用两对互补色，在色环上形成了一个矩形，通过调节亮度饱和度达到统一和谐多彩的效果。
主要分为 2 大层级：功能卡片列表、设置为第一层级，设备控制为第二层级；
对于 gira 这种全屋定制的产品，家中一般会有很多设备，功能卡片放置在第一层级的好处是，便于用户浏览锁定目标功能卡片。
区域 1 显示 KNX 协议类型，室内外温度，时间；这部分内容占比很小，说明这些内容用户不常用，但用户会偶尔还是会看一下；
区域 2 为房屋名称，返回上一级、返回首页、设置、展示形式切换，这一区域全局置顶显示，用户在多级操作后，可以很快速的返回到首页；
区域 3 显示设备、场景的数量，用户可以清楚的掌握家中设备场景的数量；
区域 4 为设备场景列表，用灰色背景来强调主操作区域。
一屏最多 6 个设备，通过左右滑动来展示更多设备
思考：为什么不是上下滑动，而是左右滑动
有 2 点猜测：
卡片内容从上到下依次为设备场景 icon、名称、状态及快捷操作；
用户可以通过 icon 快速锁定设备类型，通过名称确定目标设备，进行快速操作；
各功能模块独立划分，快捷操作区域可以很好的兼容不同设备的功能键。
操控界面划分为 2 部分，一部分为信息展示区，内容为设备名称、所属区域；
另一部分为控制区，这部分区域固定，可以让不同的设备控制看起来更统一；
大面积区域留给核心功能，辅助功能布局在四周，便于用户准确操控。
设备控制界面通过左右划动快速切换其他设备，不需要返回菜单界面。
手掌长按屏幕，可唤起提前设置好的开关功能，这时面板相当于简单的开关，可以很快速的关闭开启所在区域的灯。
Gira 这样做还原了开关的本质，当想要开启或关闭该房间内的灯时，就不需要到菜单界面找这个设备了。
灯
灯操控界面用刻度形式表现，每一度为一个刻度，并且还可以通过中间的加减号进行精确到 1 个百分比的亮度微调，品牌方想为用户打造成清晰准确调控的形象；
但在实际使用场景中，我们不大会对灯进行这么精确的调节。
温控器
温控界面同样可以精确调节，每 0.5 摄氏度为一个刻度；
温控的精准调节，就比较贴近我们日常的使用习惯，温控器控制界面是没有开关的，因为目标人群家中多数是中央空调，随便就可以关闭，对于大户型的用户来说是不友好的。
右下角的定时按钮可以让设备在特定时间内以某一状态运行。
窗帘
窗帘的状态值与操控条左右排列，这样的排布好处是可以让操控条长度最大化，便于用户控制；
窗帘控制界面只分为有调角度的和没有角度的；
窗帘操控条竖直排列，向上滑到顶部为窗帘全开，滑到底部为全关；
窗帘的行程和角度都用百分比的形式展现。
设计设备控制界面的思考方向一般有 2 种：
1. 界面控制方式要和设备的实际运行方式一致
这种思考方向要考虑实际窗帘有左右运行和上下运行之分，上下划动的操控方式来控制左右运行的窗帘会有认知上的偏差；
百叶帘的角度有正向和反向转动之分，如果只按最后的遮光百分比来做，会造成设备兼容问题。
也就是说为了模拟真实的操控方式，需要设计出若干不同种类窗帘控制界面。
2. 界面控制方式与设备运行结果关联
这种思考方式不需要考虑窗帘的种类及开合方向，将所有种类的窗帘行程及角度归为开、关两种结果状态，
就像 Gira 这样，只需要做两套界面就可以兼容几乎全部的窗帘设备。
Gira 竖排控制条的优势
如果横向布局，那么左右滑动切换设备时，会触发控制条左右手势，造成误操作。
背景音乐
设备列表中背景音乐卡片的快捷按钮很特别，由静音、播放、下一曲组成，我们设计的时候一般会做成对称的：上一曲、播放、下一曲，Gira 并没有这么做，因为在背景音乐的使用中，一般有几种需要快速响应的场景：用户在家中发起临时谈话，需要暂时安静一下；不想听了；这首歌的风格不喜欢；
背景音乐操控界面功能和音乐应用差不多，唯一不一样的是，底部可以快速切换歌单，可以很快速切换不同音乐风格。
文件夹功能
随着设备、场景的增多，用户可以根据自己的喜好将设备或场景归类放置，便于快速定位功能卡片；
点击文件夹卡片，进入到显示着众多功能名称的文件夹界面，点文件夹，才能进入功能卡片列表，为什么要多一个文件夹查看的界面。
我们想象一下有这样一种场景：面板中有几十个功能卡片，用户想开启娱乐场景，这个场景好像在客厅文件夹或走廊文件夹里，于是去客厅文件夹快速翻看这里面有没有，再点进去操作。
Gira 这样做符合用户在功能卡片多的情况下快速选择的习惯。
排序功能
可以通过拖动来调节设备卡片在菜单中的位置，省去了去后台设置的步骤；
定时功能
定时列表用具象的时钟来体现开始运行时间，还用黑白来区分夜晚和白天，对于用户来说扫一眼图片就可以知道运行时间，这种体验很好。
以 ORVIBO Mix Pad 为例，从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
整体运用深色色调，使用几何图案作为背景；
用白色体现基础信息，用色彩强调设备场景的状态及天气信息；
运用圆角元素，更加生活化。
颜色运用比较丰富，以蓝、橙两互补色为主，其他颜色分别为它们的邻近色；既能保持强对比，还能让颜色变得柔和。
主要分为 2 大层级：首屏、设备控制界面、场景列表、闹钟为第一层级；设备类型、设置为第二层级；
智能面板一般装在墙面，用户站立操作，用户不可能花太长时间来操控；
欧瑞博的人群为广大普通消费群体，家中的设备不会太多，设备控制界面层级前移，可以方便用户直达控制区，用完即走。
首页主要分为 2 个区域：
日期天气区
时间、日期、天气状况信息，可以满足用户日常出门关注的内容，并且在这个区域有多种表现形式供用户选择，既保持个性化还不失统一感。
快捷控制区
可以将常用的功能置顶在首页展示，最多设置 2 个，用户在首屏既能看到日期天气还可以控制设备，大大提升了屏幕的利用率和用户的操作效率。
这样做的好处：
当用户准备出门时，看了一眼面板上的天气，点一下关玄关灯，就可以直接出门了，不需要滑到灯的菜单界面找到玄关灯然后再关闭它，真的很方便。
底部有向上滑动提示，告诉用户下面还有重要内容。
卡片内容左右排布，从左到右依次为 icon、名称及状态、快捷控制，这种排布的好处是可以缩小每个卡片的高度，从而提高屏幕利用率；
但有个问题就是，左右排布的方式，内容最多呈现 4 个文字，需要考虑这几个字能否清楚的定义该卡片功能。
上滑可以查看全部功能卡片，给用户在手机上浏览信息的熟悉感；
在新的操控设备运用用户熟悉的交互方式可以降低用户的学习成本；
移动端上常见的手势对应结果有：左右滑——代表切换，向下滑——代表唤起相关功能设置，向上滑动——浏览更多信息。
用户在首屏左右滑动就可以切换不同功能模块，不需要返回上一级，在设备类型少的情况下，这种盲操会比较方便。
下滑进入功能类型选择、系统设置界面，这一区域相当于导航，可以实现功能模块间的快速切换。
多种手势的组合可以在有限的屏幕内操作更加灵活，但手势太多会带来一些问题：
针对以上问题解决的方法可以是：
场景卡片分为未激活、运行中、运行结束三种状态；
场景运行状态变化在卡片 icon 区域体现，既传达了运行的过程，又不会打扰到用户。
点击卡片列表最底部的编辑按钮，可以选择将某一功能卡片置顶到首屏，方便用户快捷操作。
将普通灯、场景、门窗等操控方式相近的设备进行了归类显示，并且和空调、色温灯、背景音乐等设备放置在同一层级；
从交互体验层讲：由于家里的普通灯、场景、门窗的操控方式简单统一、数量多，按照类别整合在一起便于查找控制；
从视觉层讲：设备操控界面布局形式多，会给用户造成整体视觉上的不统一，增加学习成本。
空调
空调控制界面，只能通过左右滑动以整数的形式来调节温度，开启中的时候，背景会有对应模式的色彩氛围效果，给用户更直观的感受；
底部只保留用户最常用的模式、风速、风向三个功能。
色温灯
色温灯界面默认为用户推荐 6 种不同场景下使用的色温选项，底部提供亮度调节功能，用户只需要去选择，大大缩短了用户的操作路径。
个性推荐在电商类产品中很常见，推荐机制基于对用户行为习惯的分析，需要强大的后台数据支持，智能家居这一块通过穷举用户生活中的设备使用场景、目的从而提炼出对应的功能选项可以大大提升产品使用体验。
窗帘
窗帘控制界面采用半写实风格，给用户更加直观感受，学习成本低，拖动窗帘区域就可以进行行程的控制，由于没有微调按钮和行程状态百分比，所以无法做到窗帘精准控制；
选择这种写实的设计风格，需要考虑设备控制界面布局、样式对新增窗帘类型的兼容性。
背景音乐
背景音乐默认界面只保留了当前播放音乐封面元素，更多复杂操作被隐藏到了下一级界面，用户在当前界面可以进行暂停、播放、收藏等简单操作；
在小屏幕中做设计时，有时候会在一个层级界面中堆砌许多功能按钮，使界面变的臃肿，一来容易让用户误操作，二来让用户找不到重点功能，操作效率低下；
我们在处理这些信息时应该结合使用场景，按用户的使用频率进行权重划分，将权重低的进行隐藏处理，突出核心功能，减轻用户操作负担。
智能家居厂商大多都是靠卖硬件赚钱，欧瑞博巧妙的运用会员机制结合背景音乐功能来售卖音乐服务（49 元一年），更加具有互联网商业思维。
在语音设置中，可以选择是否开启语音控制，系统默认 2 组唤醒词激活语音控制；
欧瑞博为用户提供了更便捷的语音控制功能——快捷口令，说出指令就可以快速执行，由于没有房间、设备名称的限定，这个功能只能实现面板内所有同类型设备的开或关，适用于小户型简单的场景。
传统上添加一台新设备需要：选择要添加的设备——选择网关——输入正确Wifi密码——进入设备配网流程——配网成功——设备名称设置，操作流程繁琐，中间稍微有些环节没有操作对，最后就无法成功添加设备，欧瑞博通过简化中间过程，成功解决了这一痛点。
用户可以在面板中直接设置首屏的风格样式，系统一共有 3 种风格外和一个随机演示选项供用户选择，并且这三种风格的功能架构是一样的，只是对背景图、元素大小、布局做了设计区分。
以 AQARA S1 为例，从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
整体使用黑色做背景，用白色体现基础信息，底部的色块元素貌似起装饰作用，和天气情况并没有联系；
首屏主要分为日期时间和环境状况 2 个区域，天气、温度、湿度、空气质量信息并行排列，个人认为用户对这 4 个信息的关注度是不一样的，看看我们手机上的天气 app 的信息排布就知道了，这样并列排布会让用户分不清主次。
颜色以蓝色及其邻近色为主，搭配少量的对比色，整体色调统一。
主要分为 2 大层级：首屏、设备控制界面、场景列表为第一层级；设置为第二层级；
形式和欧瑞博一致，都是为了让用户更便捷的操控；
但进入设置页面，设置主题类型的步数比欧瑞博的多一步，用户设置完成后还得一步步返回，这里可以将用户常用的“显示”内容上移一个层级，减少页面跳转次数；
AI 手势这种有特色的功能隐藏的太深，不便于用户的使用。
绿米同样运用左右滑动进行首屏、场景列表、设备间的快速切换，对于相同类型的窗帘设备，并没有整合成列表放置同一屏，而是另起一屏，设备多的时候就会存在操控效率低的问题。
下滑进入系统设置界面，这个区域只有一个设置功能，有点浪费空间，索性就把设置下一级的功能选项移到下拉页面，还能提高用户的操作效率。
场景运行过程以进度条的形式在卡片底部体现，对用户的干扰小，并且只传递出开始到结束的过程，没有成功提示，这种逻辑是正确的，因为面板只是传达出了一个命令出去，具体什么时候传出、接收设备是否正常运行，这些信息面板是获取不到的。
场景列表与设备控制界面一个层级，温控器、调光灯运用半圆的元素作为控制区域，新颖的设计风格是绿米智能面板的特色；
仔细看，会发现设备控制界面不统一，相同功能的开关按钮，在不同的设备中位置却不一样，还有就是普通灯是偏写实的 3 路开关样式，其他界面却是抽象的圆环几何样式，不统一的界面会增加用户的学习成本。
空调
空调控制界面，通过上下滑动以整数的形式来调节温度，新颖的操控方式让用户加深对品牌的印象；
底部开关、模式、风速同级展示，这里存在几个问题：1、用户在设置空调时很容易误点关闭按钮；2、缺少常用的风向调节，功能缺失造成较差使用体验。
灯
普通灯可以在 App 中设置 1、2、3 路开关样式，这种形式同样存在问题：一屏最多放三个开关，屏幕下方大片区域空置，利用率低。
窗帘
窗帘控制界面显示窗帘的名称及行程状态；窗帘的开、合，绿米给了 2 种方式：滑动控制、全开全关按钮；
增加暂停功能可以提升使用体验，因为用户在操控窗帘设备时，会以窗帘实际的运动行程为依据来决定窗帘需要开合到什么程度，而不是看界面上窗帘的位移，当用户觉着窗帘行程可以了，按暂停键就可以准确停留在用户想要的位置上。
调色灯
调色灯用户可以自定义或选择系统推荐的颜色；
为了涵盖大多数的用户偏好，调色灯的 4 个推荐色采用色环上差距大的颜色，并且根据用户使用场景筛选出常用的几种色调，排除了用户不常用的绿色、紫色、粉色。
用户可以根据自己的使用偏好，将最常用的功能模块页面放到第一屏，这个功能在一定程度上可以提升操作效率，当设备多，还是需要切换很多屏。
用户使用面板分为：紧急情况、常用情况，紧急情况不一定常用，就像出门需要关灯；常用情况不一定紧急，例如看时间
绿米为了让用户便捷，给出默认页自定义功能，存在的问题是：如果用户把灯作为开机第一页，那么日常中看时间要翻页；日期时间作为第一页，开关灯需要翻页，都不是特别便捷。实际上可以做成像 Gira 那样，通过增加手势唤起快捷开关功能，首屏留给日期时间，既满足了日常需要，又能满足紧急需求。
通过上述分析，我们得到了这些产品的共同点与差异点，以及背后的思考方式，了解共同点可以让我们弥补自己产品的不足，不被市场淘汰；学习它们差异化的思考方式可以帮助提升我们产品的竞争力。
作为一名合格的设计师，除了学习视觉技法和理论，还应该多玩、多看、多思考真实的线上产品，体验其核心操作流程，推敲和思考产品设计背后的原理和逻辑，才能不断提升体验设计思维。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：Aaron杜斌
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
智能产品的设计过程中，常常用到动效设计，那么动效设计用在哪些地方及对提升智能设备体验带来什么帮助，是这篇文章要讲的。
上期回顾：
通过大小、位置和透明度的变化，使得界面与界面之间、界面上元素的出现和消失都有关联，让用户和产品的交互过程更流畅，给用户更好的体验。请看以下案例：
1. Nest 温控器控制界面
Nest 温控器从时钟转变到温控调节界面的过程中，时钟的指针向圆心收缩，周围的时间刻度生长并一起向中心收缩，指针收缩动效对应温控调节界面温度值的显现，时间刻度的生长收缩动效对应温度刻度的显现，由于元素之间进行有关联的变化，操控过程中会有丝滑流畅感。
2. Gira 窗帘设备
当用户调节行程时，中间的控制点跟随手指实时运动，而进度条会有延时拖拽效果。为什么会是这样呢？原因是：用户在控制面板上的操作是需要由面板向窗帘设备发送指令的，也就是说面板上控制窗帘到窗帘设备运行中间会有一小段时间间隔，用户会有延迟感，所以 Gira 在控制窗帘行程的过程中，进度条为了与窗帘设备运行同步，加入延时效果，让用户感觉操控响应快的错觉。
3. Nest 新款温控器
用户在滑动切换功能时，功能 icon 会按照先后顺序由大到小变化，由于连续性运动，每个元素运动都有衔接，会有流畅操控感受。
4. Nest 智能锁
用户输入密码后至锁打开这段时间，数字依次向下消失，锁 icon 逐渐出现并且打开，体现出柔缓的感觉；实际上动效有时候可以弥补设备执行缓慢的不足，当设备需要长时间才能执行时，这段时间加入动效，动效运行时间和设备实际执行时间一致，用户就会觉得很顺畅；也可以让动效运行时间小于设备执行时间，这时用户会觉得操控反应更快。
通过动效能够帮助用户使用功能，对功能的方向、位置、唤出操作、路径等进行暗示和指导，方便用户在最短的时间内来学会操作产品的一些功能。请看以下案例：
1. Amazon Echo
用户第一次设置好监控后，通过放射动效提示用户双击屏幕，通过上下扩张的箭头动效提示用户可以通过手指来进行监控画面的放大缩小。
2. Lenovo Smart Clock
当设备第一次配好网重新开启后，通过遮罩、圆点大小位置运动搭配文字告诉用户长按屏幕可以控制什么功能。
顶部弧形的上下变化，告知用户下拉可以控制什么功能。通过简单的元素既能起到提升用户的作用，还不打扰用户。
通过动效给用户展示需要的内容及产品侧想让用户了解的内容，让用户更乐意更易于理解，强化功能感知。请看以下案例：
1. B&O 触控音箱
双击音乐标题，进度条从左向右生长出现、操控点放大出现，既强调了进度条这个隐藏功能，还暗示用户可以拖动操控点从左向右拖动操作。
2. Google Nest Hub 调光灯界面
用户从列表进入调光灯界面时，调光条灰底从左向右弧度生长，随后当前亮度条生长出现、亮度值出现，先暗示了用户可以从左向右弧度操作，后强调了当前设备状态。
3. Google Nest Hub 睡眠质量检测界面
用户查看睡眠质量数据时，睡眠质量标题信息渐隐渐现，睡眠数据条、数字生长，让数据展示有主次之分，强调了用户想要看的内容据，更人性。
在产品设计里面有一个非常重要的原则：让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示，还有一种方式是让用户知道当前产品运行的状态，是正在等待还是正在加载，还是正在下载或变化，那这种状态的告知也是增强用户操纵感的方式之一。请看以下案例：
1. LG 智能洗衣机
当用户往洗衣机里加入衣物后，出现量杯倒入洗衣液的动画，告知用户当前洗衣机正在进行哪一个环节，我们分析一下这里加入动效的用意，首先，一般的洗衣机没有屏幕，有的话也就显示当前的功能选项，LG 的这款洗衣机是液晶屏，那么它的定位就是高端人群，通过融入动效，打造差异化，提升使用体验，加深用户对 LG 品牌的印象。
2. Lenovo Smart Clock 起床闹钟功能
用户设置好起床时间后，系统会根据时间段自动进行背景颜色的过度，来模拟天色的变化，直观的告知用户当前的时间是白天还是晚上或是黄昏。
3. Orvibo 除湿界面
设备进行除湿的过程中，面板上圆形元素进行旋转，伴随粒子扩散效果，模拟水分子消失的过程，直观形象的告诉用户现在正在做什么。
4. Lenovo Smart Clock 猫眼通话界面
用户接通猫眼后，通话 icon 进行电播扩散动效，模拟声波扩散效果，准确的向用户告知当前通话中的状态。
5. Google Nest Hub 语音唤起
当用户说话唤起语音控制时，原先的全屏画面收缩，响应用户的指令，四周留白，为通话内容提供展示空间，然后彩色点元素起伏变化，通话内容出现，告知用户已接收到指令；随后彩色点元素旋转加载，体现正在执行中。在语音控制的每一个环节都加入动效反馈，会让用户觉得他不是在和一个冰冷的机器讲话，富有人情味。
6. Orvibo 窗帘控制界面
运用轻拟物效果和与实物一致的运动方式，用户可以直观的看到窗帘的行程位置与开合状况，大大的提升了产品易用性。
面对一款新的智能产品时，用户可能不知道怎么操作它，通过动效向用户交待页面内容之间的关系，让用户清楚的知道从哪里来，到哪里去，更易于理解从而可以快速上手使用。请看以下案例：
1. Nest 温控器设置界面
温控器的设置模块通过左右滚动以便在有限的屏幕中展现，那么模块的下一级页面跳转做成像 App 那样左滑切入是无法明确层级内容的，此时需要一个与左右滑动不一样的动效来区分模块的切换，Nest 运用翻转效果，强化了层级感，清楚交待了页面翻转后面的内容与页面前的关系。
2. Google Nest Hub 设备控制界面
用户从顶部导航中进入设备列表过程中，设备列表页面从右向左进入，暗示用户“当你想返回上一级，可以左滑离开哦”，用户上下滑动设备列表时，屏幕左边滑动条出现，更加明确了“左滑返回上一页”的功能；
当用户通过列表进入操控界面以及切换功能页时使用淡入淡出的效果，弱化它们之间的跳出感，来强调它们是一个层级的内容，从细微处可见 Google 的设计师在动效的使用、选择上非常克制，值得我们学习。
3. Google Nest Hub 日程提醒界面
用户发出查看日程安排的命令时，日历界面从左到右进入，告诉用户这是一个新的页面，接着日期数字 21 进行大小位移变化，月份不做变化，为了强调这是 21 号的日程，2 条日程信息按照时间先后从下向上运动，交代了日程处理的优先级。Google 设计师将信息展现的每一步都让用户看的清楚明白。
在可用性良好的前提下，通过一致性、趣味性的动效设计和创新的交互方式为产品增加亮点，带来更惊喜的体验，传达产品的气质与态度。请看以下案例：
1. Google 多端运行动效
在品牌塑造上，Google 已被证明做得极为成功，而且在视觉表现层面，Google 系产品具备着“一致性”和“连贯性”，这让 Google 获得了品牌识别上的利益。在不同设备的动效设计中，Google 都统一使用代表品牌的红、黄、蓝、绿颜色和几何图形，遵循化繁为简的设计准则，通过简洁贴近真实的运动方式，让产品更有人情味，让用户更加专注于内容。
2. 智能圆镜
用户在靠近圆镜设备时，镜面中心人脸识别 icon 缩放，周围点元素波动扩散，吸引用户的同时，传达出科技感。
3. Apple HomePod 命令反馈界面
当 HomePod 在执行一项指令时，顶部的屏幕会出现彩球融合翻转动画，多变朦胧的色彩可以唤起用户情绪，球体间的融合过程让产品生动有趣，让用户感受到品牌的人情味。
4. Apple Watch 洗手提示界面
Apple Watch 洗手功能开启后，会有一个 20 秒的倒计时，倒计时以肥皂泡沫消失扩散的形式展现，很贴合当前洗手的情景，让原本一个普通的倒计时变得生动且有趣味性，用户更加乐意使用，强化了用户对品牌的感知。
5. 智能温控器
这款温控器已经有一定年代了，当时那个年代，能用到温控器，那就很有科技感了，智能温控器还将流动的线条动效运用至透明背景上，向用户传达了超前的科技感，只要见了就会记住这款产品。
下面为大家整理了一份动效在产品中的应用场景以及设计思路：
实际上智能产品中的动效设计，并不是要向用户炫技，也不是做的越炫酷越好。动效是以解决问题为目的的一种手段。我们要去观察现有好产品的动效设计落地点及分析他们的小心思，从而运用至自己产品中，提升产品使用体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：Aaron杜斌
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
相比于去年发布的 macOS 11 和 iOS 14 的 WWCD 2020，今年的 WWDC 确实是显得变化没有那么大，在系统视觉层面上，macOS 12，iOS 15，iPadOS 15，watchOS 8 似乎并没有那么多「革命性」的改变。老实说视作为一次日常的产品功能迭代就好了。
不过，iOS 15 当中有不少颇为不错的新功能，比如实况文本（Live Text），功能更强的 Spotlight，全新的 Safari 浏览器，全新的安全机制，等等等等，这些功能足以为用户提供更好更安全的使用体验，但是另外一方面，有很多功能对于设计师和开发者这边有着巨大的影响。
目前来看，Facetime 的多人通话的升级，共享当前界面和屏幕给他人的 Shareplay 很大程度是为了应对全球疫情之下，用户被封闭和隔离的使用场景，这些功能需要系统级的支持。
而从照片中获取文本信息的实况文本功能、超强的聚焦搜索功能，还有新的相册自动生成回忆视频的功能，则和苹果自身在机器学习领域的挖掘息息相关，对于想要在这一领域有所建树的团队，可以参考这些内置的功能，如何用好神经网络的软硬件，可以参考相关的开发文档。
关于 iOS 15 在我看来最值得聊且对于设计和运营有较大影响的部分，其实是全新的通知推送系统，以及 「专注模式」这一功能。在整个发布会结束之后，苹果的 HIG 页面当中，只有一小部分的内容随着新系统的发布而随之更新了，而这其中就包含信息推送和 「专注模式」的部分。
信息推送和当下用户日常内容和信息消费习惯紧密关联。越来越多的 APP 和越发频繁的信息推送给用户带来的信息压力已经成为一个广泛存在的问题，一直到今天，这个问题都没有一个足够完美的解决方案。
针对注意力管理的问题，iOS 15 所给出的解决方案算是一个比较折衷且比较合理的处理机制。
在基础的信息推送内容的视觉设计上，iOS 15 针对通知栏的小卡片的排版视觉进行了优化，放大了 APP 图标并置于卡片的左侧，对于通讯类 APP 当中用户发送的信息，则采用了用户大头像 + APP 小图标 的组合形态，增加信息来源的辨识度，并以这种形式更清晰地告知用户，所收到的信息的来源，以及它的属性。
iOS 15 还可以根据用户设置的时间表或者所处的模式，快速收集每天收到的的通知，构建成为一个较大的通知摘要大卡片，而摘要的内容呈现将会按优先级进行智能排序，位于顶部的卡片相关度最高。（所以 APP 通知推送会因为这种机制开始一轮新的内卷么？）
值得注意的是，新的推送摘要因为是按照优先级排列，所以各种 APP 当中优先级最高的通知将会被汇总到一起。
摘要信息的组织并不是借助单一算法来实现的，同样的，其中用到了机器学习的功能，借助神经网络芯片来更好地对信息进行针对性的筛选，并推送给用户，以图更好的体验。
在原本的 iOS 14 当中，对于单个 APP 的推送管理方式比较简单，除了「关闭」，就只能选择「隐式推送」，
在 iOS 15 当中，用户可以针对单个 APP 的推送进行更细致的选择和处理：
更多选项当中，可以选择让 APP 「静音一小时」或者「今天不再推送」以避免干扰。
整个 iOS 15 的通知处理的机制都是围绕着降低用户信息载荷的目标来进行的，除了管理层级的细化，专注模式更是之前 iOS 14 中「勿扰模式」的全面升级。
其中，为了对推送通知进行更加细致的处理，通知功能的类型也有了更为详细的分类，并且在 HIG 设计规范进行了更为详细的说明。相关详细内容在第四节。
「专注模式」是为了应对信息过载的问题，并且试图改善推送通知影响用户注意力的情况，希望借此来帮助用户更加专注于进行中的任务。
系统基于常见的几个使用场景，提供了「个人」「工作」「睡眠」三个场景，并且保留了之前的「勿扰」模式，单击底部「+」号还能添加更多模式，其中还包括「驾驶」和「游戏」等不同的预设场景模式。
除了「勿扰」模式之外，其他模式下，用户可能会收到与这些场景相关的应用，而用户可以在 iOS 15 的系统智能推荐之下，快速增删当前模式下可以推送通知的 APP。
在指定模式下，用户收到的推送通知的内容、类别都会高度相关，降低干扰性。
同样的，为了搭配不同的专注模式，还可以基于模式设置特定的主屏和桌面小插件，成为当前模式下的信息和管理中心，更加方便地管理当下的任务，达到「专注」的目标。
而「专注模式」更为智能的一点，是系统会根据地理位置信息，有意识地提醒用户是否要切换模式：
同时，当用户将手机设为特定模式之后，绑定同一帐号的其他设备也会自动切换到同一专注模式之下，达到统一管理的目的：
当然，除了基于位置进行「专注模式」的切换之外，用户可以通过右上角下拉的「控制中心」对「专注模式」进行手工的切换管理。
而无论是新的通知系统还是「专注模式」，在信息管理的颗粒度上都比以往更加细致，这很大程度上是基于新的推送通知的类别管理，这一部分内容在 HIG 设计规范上已经得到更新，并且有着非常详细的说明。
下面是关于推送通知章节更新的主要部分（考虑到篇幅，对部分非关键内容进行了精简）。
https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/notifications
用户希望收到他们关心的事情的通知提醒，但并不总是喜欢被打扰。为了帮助用户管理整体体验，需要在发送任何通知提醒之前获得用户的许可；系统允许用户在「设置」>「通知」中更改，并调整推送提醒样式，可以预览，并且可以和 Siri 交互。用户还可以在「设置」>「专注」中让所有通知都静音（某些地区的政府警报除外）。
相关开发人员说明，请参阅 UserNotifications。
在 iOS 15 及更高版本中，用户可以通过指定专注模式时间，设置专注模式下通知推送的具体行为，而进行细粒度的管理。专注模式可帮助用户在他们为睡眠、工作、阅读或驾驶等不同状态下，定义这一时间段内通知推送的具体行为。
用户可以筛选出哪些通知或者 APP 可以在特定专注模式下，被推送给用户。比如在工作专注模式下，用户可能希望收到来自同事、家人以及工作相关的 APP 推送的信息，用户可能还希望收到时效性较强的通知。
尽管专注模式下，可能会有一些通知被延迟推送给用户，但是通知信息在收到的时候即立刻发挥作用。
想要定制化地推送信息，那么你需要确保你的 APP 能够支持信息直接推送，就像电话或者短信样的通讯通知（communication notifications），而其他类型的弱时效性的推送则使用非通讯通知（noncommunication notifications） ，而想要支持通讯通知，你需要引入 SiriKit ，这也意味着用户可以使用 Siri 来进行自定义通知推送行为。具体的参阅INSendMessageIntent和UNNotificationContentProviding。
为了更好的方便用户针对推送通知进行管理，你需要对你的 APP 的推送通知的中断级别进行定义，不同级别的定义决定了通知何时推送，系统在不同状态下是否要推送，以及如何处理。目前，将推送通知的中断级别划分为4个等级：
具体的属性还可以参考下面的表单：
值得注意的是，这4个层级是逐渐递进的，因为后两种推送通知需要的优先级较高，所以最好获得用户的许可。
此外，在设计通知推送系统的时候，还有3个关键的注意事项：
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：陈子木
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们都知道，数据是支撑决策的重要依据，于是我们可以看到，几乎所有的产品，都会具有数据统计分析的功能模块。往大了说，比如数据中台；往高端了说，比如数据大屏、数据看板、数据驾驶舱；往本质了说，其实就是数据的统计分析。作为一个非数据型产品经理，或者是初级产品经理，该怎样设计这个功能模块呢？
如果你刚好为此苦恼，不妨试一下我最近研究的这三步曲：统计+分析+可视化！
关于数据统计分析，首先表达一个我蛮认同的观点：
好的数据分析师，要像眼科医生一样：配眼镜可能有很多专业的方法，有很多专业的工具，可在配的过程中，医生纠结的不是自己的理论，而是关注用户看得清不清楚，不断问用户“这样可以吗？这样更清楚吗？再这样试试呢？”
—— 接地气的陈老师
相信在工作中，大家经常会碰到一些“孔乙己”式的数据统计分析，一开口就是“xx 指标体系”，再加上一大堆什么“权威的、标准的、BAT 认定的”这之类的修饰词汇。这特么就是典型的虚假数据分析啊，因为这些大多数时候，耗时费力，却没有解决实际问题。
并且这种虚假的数据统计分析，还有它遵循的理论模型：
而真正的数据统计分析，就像太极拳的精髓一样：“只重其义，不重其招，你忘记所有的招式，就练成太极拳了。”（以解决业务问题为根本）
要搞数据的统计分析，那第一步我们得先有数据，也就是数据的统计工作。提起数据统计，那自然绕不开数据埋点。如果你们公司从来没整过埋点这个事，那也不用大费周章，因为界内已经有很多成熟的埋点公司了，例如神策、友盟等等，直接花钱办事就完了，也不贵。
我们今天研究的，是通过埋点，能够获得哪些数据呢？总结下来，大概有这么五类：
埋点获取五类数据
来来来，我们逐个剖析一下，这几类数据，具体都包含什么，以及获取这些数据有啥用。
1. 整体概况
实时数据意义：可以获取到每个小时的产品实时数据，帮助你了解产品目前的实时情况。
使用概况意义：产品整体的使用情况，包括用户量、访问情况、留存等，帮助你对产品整体指标有一个大致的了解。
2. 用户获取
渠道访问意义：每个渠道的用户的使用情况，包括渠道中新用户的占比、留存等，帮助你了解产品在获客层面上的优势与不足。
版本数据意义：每个版本的使用情况，帮助你了解在产品升级的过程中，是否在活跃和留存方面有所改善。
3. 活跃与留存
访问流量意义：产品的每日访问数据，指标集中在新老用户的访问行为上，提供访问次数、时长、次数分布、访问时段高峰等指标，帮助了解新老用户在使用产品时的一些行为特征。
用户留存意义：提供用户 7 日，次日，次周，次月留存的数据，帮助你了解新老用户的使用粘性。
4. 事件转化
自定义事件意义：用户自定义关键事件，系统会自动生成该事件的发生次数、人数以及分布情况，也就是能够看到用户都在干啥。
收益类事件意义：用户自定义收益类事件，系统会自动生成该事件的发生次数、人数以及分布情况，会根据你选择的数值类型属性，计算该数值的总值、人均值以及次均值。也就是能够看到用户都咋花钱的。
5. 用户特征
用户特征意义：能够看到我们的用户，都是哪些牛鬼蛇神~
有了埋点的数据以后，那就是怎样利用这些数据，充分发掘这些数据的价值了。数据分析的套路就更多了，把下面这些学会，应该“二八原则”里面的“八”就能够搞定了~
1. 常见的数据分析指标
综合性指标：反映产品的整体情况。
流程性指标：反映用户的使用行为。
业务性指标：反映具体的业务情况。
2. 常见的数据分析维度
数据细分：通过不同的细分维度分析，往往可以追溯到问题发生的原因，还能为后续的一些动作提供参考依据。
数据对比：没有对比就没有伤害，一方面是横向比较，即自身和别人进行对比，如常见的同比、环比；另一方面是纵向比较，即自身和自身进行对比，比如行业竞品、全站数据、AB 测试等。
3. 常见的数据分析方法
HEART 模型：Google HEART 模型的提出，可以让大家反思自己的产品设计思维，同时运用相关设计工具去提高 HEART 五项指标来完善用户体验，打造更好的产品。
AARRR 模型：该模型出自于《增长黑客》，它是在 2007 提出，当年的获客成本还比较低廉，而这种模型很简单又很直观地突出了增长的所有重要元素，所以这个模型很长时间内都很受欢迎。
RARRA 模型：而现在获客的成本与日俱增，市场情况和 2007 年已经完全不同。现在黑客增长的真正关键在于用户留存，而不是获客。于是，一个突出了用户留存重要性的模型 RARRA 诞生了。
有了统计的数据以及分析的维度之后，最后一步工作就是可视化啦！
而想要完成这一步，又快又好的方法，那自然就是参考各种规范啦，首先我们可以去一个叫做「e-charts」的网站，去查看各种可视化图表，因为开发很多时候，就是依照这些开源的图表库进行撸代码的~
而我们设计的时候，就需要借助各种原型组件啦。数据可视化的内容有很多，我们来举几个典型例子：
1. 折线图
注意事项：选用的线型要相对粗些，线条一般不超过 5 条，不使用倾斜的标签，纵坐标轴一般刻度从 0 开始。预测值的线条线型改为虚线。
2. 柱形图
注意事项：同一数据序列使用相同的颜色。不使用倾斜的标签，纵坐标轴一般刻度从 0 开始。一般来说，柱形图最好添加数据标签，如果添加了数据标签，可以删除纵坐标刻度线和网格线。
3. 条形图
注意事项：同一数据序列使用相同的颜色。不使用倾斜的标签，最好添加数据标签，尽量让数据由大到小排列，方便阅读。
4. 饼图
注意事项：把数据从 12 点钟的位置开始排列，最重要的成分紧靠 12 点钟的位置。数据项不要太多，保持在 6 项以内，不使用爆炸式的饼图分离。不过可以将某一片的扇区分离出来，前提是你希望强调这片扇区。
饼图不使用图例，不使用 3D 效果，当扇区使用颜色填充时，推荐使用白色的边框线，具有较好的切割感。
5. 其他
这种数据可视化的图表还有很多，而它的意义就在于，用图表代替大量堆砌的数字，有助于阅读者更形象直观地看清楚问题和结论。我也在工作中搜集到了一些不错的数据可视化原型组件，有需要的同学可以自行下载啦~
好了，以上就是今天的所有内容了，正如前言所说的，我们今天只讨论武功招式，不讨论内功心法。
延伸一下：数据统计分析，最终还是要从业务中来，到业务中去，一切的形式，都是次要的，关键还是要以解决业务问题为根本、但对于我们这些“新手”来说，经验主义自然也是要借鉴的！相信今天总结的内容，也足够支撑大家比葫芦画瓢啦。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：晓庄同学产品笔记
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com