数据推动设计创新是一个新颖而重要的议题。对于设计师来说，理解并学习数据驱动设计能更好地帮助我们去进行设计决策。本文结合实例探讨了数据是如何影响设计决策，解释了数据驱动和数据响应的区别，并介绍了多种数据收集的方式。
在这篇文章中，我们将深入探讨什么是数据驱动设计，以及为什么它能更好地推动用户体验的提升 。与此同时，我们还将了解为什么它能帮助我们做出更实际的决策。
作为设计师，我们需要接受和拥抱现实世界中的数据指标，并利用它们的神奇力量来调整我们做事的方式。— Jared Spool
我们当前面临着来自用户交互的海量数据 。虽然有大量工具可以帮助我们了解所设计的产品，但是我们是在为人类设计产品。因此，作为设计师，我们需要分析人类的行为，并根据对人类交互的理解做设计。这将有助于我们基于数据做出更好的设计决策。
我们从用户那里收集的数据可以帮助我们做出更好的设计决策 。通过分析和理解数据，我们可以设计出更好的用户体验。基于交互行为中定性和定量研究的结果，我们能更好地进行设计决策。
数据帮助我们探寻用户如何使用我们的产品，以及设计师如何基于数据为用户优化使用体验。
我们收集的数据可以从四个维度帮助我们。
△ 数据将从 4 个维度帮助设计师
设计是以累积的数据研究结果为支撑的 。在设计过程中，设计决策是基于数据和用户行为研究的。精细的用户体验设计包含对体验本身的评测研究。而只有数据才能映射出有价值的评测结论。用户的行为和反馈有助于产品设计师验证其发现、假设和评测结果。
评测数据的整理与分析能揭露重要信息。— Peter Drucker.
这些数据可以帮助产品团队了解其目标用户，发现用户痛点，发掘新的趋势，支持数据驱动的设计，并确保团队前进方向的正确性 。用户数据可以直接推动商业成果的提升。通过数据驱动设计，以提升用户体验，被证实是切实可行的方法。
我们设计师在设计产品的过程中，会对用户进行调查、研究和观察。设计产品的过程中，唯一能验证假设的就是数据 。如果我们在没有任何数据驱动的情况下进行研究，凭借直觉或经验来做决策，就很有可能把钱浪费在无效的或一文不值的设计改动中。
产品的性能可以通过合理使用、验证和分析用户数据而得到提升，它也能直观地反映在用户数据中。即使是世界上最好的设计师也无法预测用户的需求。数据驱动的设计是一个向用户学习的过程，它能确保用户的问题得到解决。满足用户需求是产品成功的首要条件 ，而这一切都需要数据来驱动设计迭代。
上述术语来源于在 Rochelle King、Elizabeth Churchill 和 Caitlin Tan 所著的《数据驱动设计（Designing with Data）》一书。本书有助于我们理解和阐明有关数据驱动设计的不同术语，并将其与数据响应设计和数据感知设计进行对比 。
△ 利用数据进行设计 —— King, Churchill, & Tan
数据驱动和数据响应是两种不同的方法 。它们都是以数据为基础，产品团队的每一个决策都是由数据评估和驱动的。数据驱动的重点在于数据辅助产品优化和效率提升。数据响应让我们在数据的使用上拥有更宽阔的发展方向 。我们能处理的也不仅仅是量化的数据。不同体验的 A/B 测试或结构化的可用性测试在数据响应中可能会失效。
数据感知让我们理解数据收集上的广泛性和局限性 。我们可以根据不同的问题来判断哪种方法是最合适的。有数据感知能力的团队可能会发现，基于利益相关者研讨会、用户访谈、甚至 A/B 测试研究结果而做出的决策，具有同等的价值。
麻省理工学院数字商业中心的研究表明：“在通过数据驱动决策方面，处于行业领先地位的前三分之一的公司，其平均生产效率比竞争对手高 5%，盈利能力高 6%。“
我们发现增加评测的事物数量或提高评测的保真度，实际上并不能提升结果的准确性。数据结果并不因性能的优劣而发生鲜明的改变。它只能揭示更深层次的复杂性—— 性能优劣牵扯到更多的东西。因此数据实际上只是一种衡量标准，我们仍然需要依靠直觉。我们仍然要对成因的重要程度做出判决。— Jon Wiley（谷歌沉浸式设计总监）
△ smart UX 的数据可视化
我们有很多收集定性和定量数据的方法。很多用户体验从业者认为数据就是数字，但这是一个误区，是一个谬论。为了用数据驱动设计，我们需要定性和定量数据 。定量数据会告诉你，用户在使用我们的产品时采取了哪些行为。而定性数据会告诉你，他们为什么这么做，以及更重要的 —— 他们对整体体验的感受。所以，我们在制定设计决策时需要收集这两种数据。
定量数据的数据类型是数字、人物、事物、时间、地点。定量数据能显示程度 ，而不能说明原因 。我们能从 Google Analytics、Google Tag Manager、Google Optimize 和其他测量工具（例如：Hotjar、Crazy Egg、Optimizely、Usertesting）中获取许多关于网站或应用程序使用情况的定量数据。
A/B 测试
A/B 测试也被称为 分组测试 。Hubspot 将 A/B 测试定义为：
在（一个）实验中，’划分’ 出多个测试群体，测试一系列变量，并确定哪个变量表现更好。换句话说，你可以向一半的测试者展示版本 A，向另一半的测试者展示版本 B。
在进行 A/B 测试时，最重要的是尽可能确保每次只改变一个变量，并且使对照组和实验组的人数相同。你可以向我们一半的测试者展示 A 版本，向另一半展示 B 版本。测试的主要目标是在同等条件下，对不同变量进行比较 。
解析
通过解析，我们可以知道谁来到了我们的网站，他们是如何到达那里的，他们在那里停留了多长时间，他们点击了什么。这类数据能有效整理出很多价值的指标，比如用户的平均会话时长、退出率等。如果你想让应用程序或网站转化率得到提升，建议从用户流量大的页面开始解析，因为它们能让你更快地收集到有价值的数据。
我们还可以使用眼球追踪工具，比如热力图。热力图通过眼球追踪技术，了解用户在屏幕上所关注的位置 。当来自多个用户的热力图展示出类似的模式，说明网站或应用程序更新的内容模块或设计迭代是有价值的。
调研
用户体验调研是用户体验研究中，定量和定性数据的重要来源。
一个好的调研需要精心设计好问题，确保问题没有引导性，并且目的明确。我们应该尽量控制问题的数量（不超过 10-15 个），以免用户中途放弃调研问卷。
定性数据能说明原因和发生过程 。为什么不同组用户采取不同的行为？为什么不同的内容让用户在网站上停留的时长不同？定性数据提供了一个视角，不仅帮助我们了解发生了什么，还能让我们了解事件发生的原因以及过程。我们经常通过用户画像、体验旅程图或移情图来收集定性数据。
有了清晰的定性数据，我们可以创造更好的用户体验，更有效地服务于用户。
用户旅程 / 流程图
为理解用户与产品之间的交互，创建用户使用模型是非常有帮助的方法 。从用户流程图中收集到的信息有助于确定潜在的薄弱环节，为 A/B 测试或用户访谈的深入调研打下基础。
竞品分析
这是找出竞品弱点的附加方法 。竞品分析通过调研竞品来找出类似产品的优势、劣势或有待改进的地方。
在进行竞品分析时，必须谨慎。一味地模仿竞品并不是一个有效的解决方案。相反，最好将竞品分析作为获取灵感的手段。通过对竞品的理解，我们可以取长补短。
用户访谈
用户访谈是收集用户定性数据的有效方法 。它通过开放式和封闭式的问题，较好地定位到用户核心问题。同时，我们也要限制访谈对象的数量。电话或面谈能够得到更深入的数据。
社交媒体和用户反馈
社交媒体反映了用户对体验的期望 。通过了解用户共同的不满，能够确定产品需求的优先级。了解用户对产品的评价和反馈，也能获得更多的相关信息。
收集数据的方法需要根据项目的内容和需求而变化 。我们可能不需要去研究数据，也不需要去做运算，就能高效利用数据以推动设计决策。但作为一个产品设计师，在设计用户体验时，我们都要利用现有的工具对设计进行迭代和评估。因此，我们不应该只是基于数据进行盲目的决策，而是要对自己所做的决策知情知理。
无论我们的目标是什么，数据驱动设计都有助于 提高产品性能，提高转化率，满足用户需求 。通过数据驱动设计，我们的设计能得到更好的投资回报率。这也有助于提高产品整体的使用率和复用率。
文章来源：优设 作者：TCC翻译情报局
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着互联网科技的不断发展，如今各行业都逐渐智能化，物流运输行业也不断不安化发展，搭建了运输系统，方便后续操作管理；本文作者分享了关于目前市场整车运输行业的业务流程以及系统搭建方案，我们一起来了解一下。
针对不同的货物重量，大件物流公司将自身的产品布局为小票、大票、零担、整车。物流公司利用自身平台的影响力，通过整合上下游的车辆资源，为客户提供全链路的运输服务。
本文详述了目前市场整车运输行业的业务流程以及系统搭建方案。整车运输可以理解为针对B2B的客户，对原材料、零配件、商品这些大宗货物进行干线运输、仓间调货等，系统搭建则需要建立客户、平台、车队之间的货物流、信息流和资金流，从而达到互利共赢的结果。
如果你是水果供货商，你需要将整车的农场的水果从原产地运输到千里之外的城市销售。你对运输过程有哪些需求？
对于车队，希望平台给他提供什么？
PS：谁都想资金能够进得快，出得慢，这个矛盾点无法克服，哈哈，那就只好谁强势谁说了算。
好了，现在我们知道了客户需求，现在可以针对每个客户需求，思考如何搭建这个整车运输平台的功能、模块以及详细流程。
图1 系统流程图
公司有维护客户关系的CRM（Customer relationship management system，客户关系管理系统），涵盖了客户签约、注册、维护、退出的全流程。客户注册时，需要包含三个层面的信息：基本信息、业务信息、财务信息。
1）基本信息：主账号和子账号、客户名称、客户编码、所属行业、统一社会信用代码、法人、注册资金、注册时间、客户经理等。
2）业务信息：作用是管控与公司合作的业务范畴=以及计费方式=等。例如：使用的产品范畴、合作的区域等。我将计费方式归属到业务信息而不是财务信息，原因是，我们产生业务单据时，每条运单就能够前置产生的应收流水，而不必等流转到结算环节。
3）财务信息：账期、结算方式、开户行、银行账号、发票抬头、发票类型等。
CRM系统能够帮助企业巩固老客户的合作关系，通过分析客源结构，有助于帮助企业预测市场的发展需求和寻找潜在的客户群，从而夯实企业在行业内的地位。我司属于行业的龙头企业，比一套完备的CRM系统，这个我在其基础上开发新需求，然后直接调用主数据就好了。
采购竞价是交易过程的核心环节，竞价是目的是为了给客户提供高质量的价格，从而提高交易成功的可能性。有了承运商报价之后，平台按照计费规则叠加一定的佣金，向客户端推送报价金额。为了保证价格质量，系统在设计之初，就给自己定了几个关键指标：
在设计系统方案时，逻辑处理上涉及的细节较多，需要抓住主线进行顶层设计。
我选主线是竞价状态，对于每个竞价请求，本质上都是收到在某些外力输入（主动报价、取消、失效等），触发一定的逻辑规则，输出系统所预设的结果（竞价状态、价格等）。
我设计的竞价状态机如下：
图2 竞价状态机
采购完成之后，信息流到订单管理系统模块，订单的全生命周期开始了。订单管理是整个业务流最核心的内容，只有产生订单，才能有收入并且盈利，才能证明我们开拓了市场。订单连接了客户和车队，平台起到中转和调度作用，让信息、货物和资金都流动起来，只有流动才能实现价值增长。
1）计价模型：用户确认下单时，系统会先调用计价模块，叠加佣金，计算应收的客户运费。
2）订单审核：对于恶意刷单、通过应收和应付账期差占用平台资金的行为，系统需要及时识别，避免问题发生。
3）增值服务：如果装卸、吊装等此类增值服务，还涉及到拆单的处理。主订单发送给中标的车队，然后调度中心会将子订单分配给具有增值服务能力的供应商去承接任务，系统要做到应收合单计费，应付拆单计费。
4）在途监控：为了保证运输时效，对于可能会晚点到达的车辆，系统需要及时预警，按照不同的预警等级向对应的运作人员发起提醒。越来越多的客户期望能实时查看在途的位置，目前常用的轨迹采集方式有三种：司机app、车载北斗模块、手动安装GPS定位盒。每种工具的都有其优缺点，大家可以按照自己的需求选择。另外，对于高价值的货物，如果客户有视频监控、路宽查看的需求，可以购买并安装一些IoT的终端设备。
订单状态记录其生命周期，几乎所有的业务系统都会涉及状态枚举以及状态翻转的逻辑，这也是产品经理的基本功，合理的状态逻辑有助于系统后续扩展，以及避免意料之外的BUG。
竞价状态下游对接订单的运输状态，运输订单的状态主要有以下几种类型：
文章来源：人人都是产品经理 作者：东方
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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.落地跟踪
在设计完成之后，我们需要对设计方案进行评审、验收及数据跟踪，以保证设计方案的落地并跟进调整。
我们需要：运用合理策略以保证设计方案的高质量落地，对方案上线后的用户反馈进行有效跟进，运用多种方式验证目标，迭代产品。
设计评审
目的：设计评审通常包含了交互与视觉，其目的在于审查设计方案中的可用性问题。
行为：在我司，视觉评审即终评，我们需要在视觉稿中标注出所有交互逻辑，并对潜在问题有预判，能与各方确认目标、分桶与数据埋点；同时我们要对开发实现有预判，能与研发确认实现细节。
设计验收
目的：设计验收是为了确保需求满足、体验流畅，并且设计细节能高质量落地。
行为：视觉设计师主要验收视觉细节的还原度，并且要在一定程度上对开发的适配、样式解法有预知，减少二次验收。同时需要保证验收有沉淀，利于后续跟进。
数据验证
目的：数据验证除了分析分桶之外，也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。
行为：我们通常基于设计策略，去对数据进行筛选与分析，以此衡量设计对于目标达成的增益度。对于有问题的，能反思并且修改；对于结果好的，能总结并且沉淀。
设计复盘
目的：设计复盘以结果为导向，我们可以通过复盘对设计策略的价值进行总结验证，并去发现、优化流程中的不足之处。
行为：我们需要陈述设计目标和策略，对设计价值进行验证，并能总结过程中的亮点与不足，制定后续计划、沉淀相关经验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：设计师在日常工作中经常与其他同事有些分歧，比如产品不理解你的设计，觉得页面不够好看等等，那到底什么样的设计叫做好设计呢？本文作者分享了关于“好设计”的定义以及分析，我们一起来了解一下。
有同学问我，说做设计好难，领导和产品不懂设计，每次给看设计，都说觉得丑，改了受气，不改又说态度不行，那么到底什么是好设计。今天和大家聊聊到底什么是好设计？希望这篇文章可以帮到你。
做设计这么久，我们先来看看什么是好的设计？好的设计到底是如何定义的。
▲一组无印良品海报获得了由日本平面最高奖项——龟仓雄策奖，被誉为日本设计界的「奥斯卡终身成就奖」，代表着日本平面设计的最高水平。画面仅用色彩和几何图形的结合，完美构成了人在自然中露营的和谐场景。
▲可以看到海报中有湖泊、蓝天、山脉、森林和露营帐篷，而整个视觉效果是用废纸板制作表现出来的，可以说非常有创意了。同时和整个商业很好的结合起来。
每年德国举行的红点设计大奖，有「设计界的奥斯卡」的美誉，是全球工业设计和发展趋势的风向标。
▲德国的红点设计也是让全球设计师狂热的奖项，徕卡相机除了价格昂贵，在设计上也是独具匠心，获得过很多设计大奖，非常有代表性的大奖设计，同时商业上也很成功。
▲自2015年发布以来，Apple Watch已经成为生活中必不可少的电子设备，获得了无数设计大奖。
▲除了工业设计，韩国我很喜欢的设计公司Plusx也获得过很多红点设计大奖。
所以判断一个设计是不是好的设计或者商业设计，获得过大奖是很重要的一个评判标准。
在众多设计准则中，其中特别受广泛推崇的是Dieter Rams）所定义的“好设计的10个原则， 也即德国博朗公司设计十项原则。
1）Good design is innovative
好的设计是创新的
▲日本设计大师深泽直人设计的这把伞，在伞柄弯曲的地方有一个小凹槽。当你在雨天去超市买完东西，提着袋子去乘公交车或者地铁的时候，这个凹槽刚好可以在你站着的时候为你充当一个挂钩的角色。这个设计非常自然又贴心，又有创新。
2）Good design is aesthetic
好的设计是美的
▲产品的美感是实用性不可或缺的一部分，因为每天使用的产品都无时无刻的影响着人类和我们的生活。但是只有精湛的东西才可能是美的。比如苹果iMac的设计，无论从第一代的半透明，到今天的超薄，无不是完美的设计，在各种电影，MV里，即使遮住了苹果的LOGO你也知道是苹果的产品。
3）Good design makes a product understandable
好的设计是易懂的
▲好的设计自己会说话，简单易懂，比如无印良品这个CD机，即使是老人和小朋友都会使用。
4）Good design is unobtrusive
好的设计是克制的
▲很喜欢张小龙对微信的设计理念定义，克制带有约束的，就从微信开屏来说，其它是APP早已经商业化了，而微信的开屏多年如一日。
5）Good design is honest
好的设计是诚实的
▲不会故意夸大产品的价值，而是强调功能本身，也不会去欺骗消费者。比如现在很多广告，特别电商里面，比如我经常买的这款牛奶，从广告点进去第二件0元，兴冲冲的加入购物车，发现还是原价。
6）Good design makes a product useful
好的设计是实用的
▲无论APP也好，还是工业产品设计也好，都是用来用的，必须满足基本的功能，好的设计会去强调实用性的同时也不会忽略细节，比如无印良品这个电饭煲外形圆圆的很可爱，同时还很多贴心细节，比如有凹槽放饭勺等等。
7）Good design is long-lasting
好的设计是经得起岁月的考验
▲这些产品或许随着时代发展消失了，但是它们的设计永远不会过时，和设计趋势不同，它会成为一种文化，一种理念，博朗和苹果早期的作品在今天看来也是经典。
8）Good design is thorough down to the last detail
好的设计是考虑周到并且不放过每个细节的
很多产品的设计，很容易在用户关注地方做的很好，在用户忽略地方做的很粗糙，就好比我们去了一个商场，一楼都是各种名牌，高大上，但是去了洗手间，去无法下脚；这种体验估计用户不会再去第二次，所以极致的设计不会放过每一个角落。
9）Good design is environmentally friendly
好的设计是环保的
▲瑞典品牌freitag，以卡车车篷为材料的袋包作为材质，具有独特的二手感，以及独一无二的花样及颜色，设计好用同时兼具环保。
10）Good design is as little design as possible
好的设计是尽量少的设计
▲简洁，并不是简单，因为它浓缩了产品所必须的具备因素，剔除了不必要的东西。“大道至简，平淡为归”比如图中这个时钟设计，兼具美和实用，同时没有一个多余的设计。
另外很重要一点，什么是好的商业设计，就是好用而且市场反馈好，用户好评多，比如苹果系列产品，设计本身获得很多大奖，同时商业价值好，销量很高。
同理还有戴森的产品，以黑科技为卖点，无论推出的吹风机，还是卷发棒都销量非常的高，所以好的商业设计需要具备上述所说。
了解了好的设计标准，回归到产品设计，那么什么决定视觉设计的标准呢，UI设计的标准又是什么呢，UI设计视觉元素有木有对应的表达标准。
特别是在一些大公司，每个设计师的视觉表达手法是不一样的，那么有哪些统一的设计标准么，在我认为一共有以下这几个设计标准：
1）PC网格
网格的重要性就不再详细说，谷歌，微软，苹果，Naver，阿里都将网格系统作为设计的标准。明确网格系统，它是设计指南里非常重要的一部分，当然网格也不是绝对的，也是可以在基础上变化。
通常，在Web设计中一般采用12列作为网格标准，因为12列可以轻松的分成6列，4列，3列和2列。
▲PC中12栏网格运用案例，整个页面会更加统一和标准化，有规律可循。
▲网格是很多公司建立标准的准则，特别是响应式设计运用上。
▲reddit的官网设计也是采用的12栏设计，很好的将页面进行布局。所以如果你做网页或者PC设计，网格一定是一个好设计的基础准则。
2）移动网格
移动端一般采用6列网格，因为大多数产品6列就足够了。6列在页面中也很容易3等分或者2等分，6列也是比较常用的一些布局方式。当然也要看场景像淘宝，电商可能需要12列，因为页面密度太高了。
▲Pin的界面网格系统，可以看出它们是运用一个6列网格系统，所有的图片各占3列，按钮占六列，每个页面的左右边距相同。
▲airbnb采用的左右边距48，中间24的网格系统，可以看出这套栅格系统留白会比较多，所以我们在浏览airbnb的设计时候会发现他们页面会非常舒服原因也是如此，airbnb设计和体验都非常棒。
我们再来看看被称为规范鼻祖的谷歌在最新的设计语言中，第一次把栅格系统提出来讲，谷歌的产品覆盖手机，web，以及平板，那么谷歌是如何去用栅格系统来定义它们产品体系呢？
▲谷歌的栅格系统除了传统的边距和水槽，内容区域外，同时也定义了4栏，可以看出谷歌也是第一次重点来讲解他们的网格系统。
比例关系非常重要，可能同样的内容，合理的比例和不合理看起来会相差甚远。所以好的合理比例准则也是衡量一个设计好坏的重要标准。
说道比例不得不提黄金比例，是由几何学的创始人Euclied定义的，大概在公元前300年前。黄金比例值是1.618，但是也有人质疑说，这里比例不是绝对。用黄金比例作为设计依据不合理。我的观点是，黄金比例可以当做设计参加的基础，但不是绝对的数字。
▲苹果设计中，运用黄金比例作为整个APP图标的设计准则，在苹果很多设计中都可以看见这种比例的运用。
▲还有很多知名互联网公司的品牌设计都运用着黄金比例。
▲Facebook的官网设计比例，也是采用的接近黄金比例作为布局方式。
▲谷歌的material规范中有讲到，如何定义布局。统一按照标准的比例16：9，3：2，4：3，1：1，3：4，2：3等标准的比例去做设计布局，来统一整个设计。
所以，好的比例规则规范，是设计中非常重要的。我们的设计都应该遵循这种有规律的比例。
产品设计中，文字信息节奏处理非常重要。我们应该通过各种手段去提升文字的易读性。
1）通过对齐方式提升易读
▲上图是一个简单的示范，3种不同的阅读感受，如果阅读节奏没有做好，没有对齐，那么阅读效率就会变的低下，我们来看看上图用户是如何阅读的。
▲拆解上面的方案，你会发现不同的排版，用户看的方式就不一样，如果你间距过小，用户就很难阅读。间距过大也会出现难以阅读，所以必须在合理的比例下面设计的阅读性才会更好。
2）通过文字大小提升易用性
▲大多数信息都是由标题，副标题，正文组成。所以在组织信息的时候，可以通过文字大小，字体粗细来加强信息阅读。苹果还把黄金比例用于字体上。每个字体大小的对比都是1.7和0.7左右对比，非常接近黄金比例。
3）通过对比提升易用性
▲运用对比也是提升易用性经常用到的手段，比如通过文字大小对比，文字的透明度对比。但是要注意互联网的文字的可访问性，推荐使用web无障碍标准4.5:1
▲苹果的官网设计，就是将文字信息运用到极致，如上图通过文字大小，文字颜色，文字透明度等方式，让信息阅读起来更加流畅。
关于设计的准则有很多，设计的准则目的是让我们的设计更加和谐，它是一个参考标准，但是又不是绝对的，你可以理解为它是一把尺子，这把尺子是保证设计有一个基础。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
通过解析市面上的产品是如何通过设计构建用户的信任关系，提炼出在产品设计中打造信任感的方法
在整个互联网大环境下，针对精细化运营战中，信任关系是有效转化的关键，也是企业和品牌传播的第一生产力。能否获取用户信任成为了企业商业价值大小的核心判断标准。
在金融产品设计中，设计师该如何和用户构建信任关系，怎样通过设计细节去逐步影响甚至改变用户心理感受。本文将由浅入深，从金融设计上，通过解析市面上的产品如何通过设计去构建用户的信任关系，提炼出在产品设计当中去打造信任感的方法。
通常，我们在做金融产品设计，有以下几个方面可以提升产品与用户之间的信任感：
平台的透明化运作，信息透明，有利于投资者对平台有一个相对清晰理性的判断，以便对各平台进行风险定价和自由自主选择。通常可以从四个方面去透明化平台的运作情况：
平台的基本信息和运营信息是投资者衡量、选择平台的主要依据，也是监管部门对行业监管的基础。而作为合规的金融投资平台，自然包括资质认证、发展历程、管理团队、风控措施等信息。
例如做P2P产品，借款方信息应该在不泄露隐私的前提下最大程度公开。主要包括：借款人借款信息清晰，身份信息详细（如借款人的职位、自身条件、收入来源等一系列基本信息），借款用途，还款来源与放款额度等等。
对于上线产品，审核的尺度标准需要在不涉密的情况下，尽可能公开；相关手续和资料要求要严谨。平台提供的证明材料必须是合法有保障的。
风险备付金是P2P平台抵御风险的必要条件，协议、银行查询账号尽可能公开，因平台性质不同，所以公开的形式也有不同。
在设计金融、政府相关的项目产品中，借助当地政府、专业权威机构的威信来和用户建立信任关系，有相关的组织机构做背书，会让用户在整个流程中更容易做出决策；
除非产品的本质和目的都是营销，否则你所设计的产品是在迎合并满足用户的需求，本质上是服务于用户的工具。
合理的营销是有效的手段，但是在金融类应用当中，本身已经涉及到非常庞大的数据量，在这种情况下植入营销信息，会触发用户的负面情绪。即使这款金融类产品本身有着极强的粘度，极高的信任度，也会有很多用户仍然对营销手段、全新的未知技术，抱有怀疑态度。
例如：刚推出人脸支付时，用户担心睡觉时或者别人用自己的照片，就可窃取钱财。
以上三点均是为了在金融产品设计中打造基础信任感，让用户放心、安全的使用金融产品，只有用户信任了某个产品，才会将自己的隐私信息等向企业开放，从而产生一系列消费、转换等行为。
那么，什么是信任感？
信任感是基于产品，在用户感到产品具有一贯性、可预期性和可靠性时产生一种「 可靠服务、价值依赖 」的情感体验。
这种体验不仅影响着用户黏性的强弱、业务目标的实现，也影响着不同生命周期下给产品带来的价值。如图所示：
互联网产品中信任感要如何产生？
想对产品产生信任感，必须建立一个完善俱全的产品心智。当一个用户从普通的态度到信任一款产品，这个过程是基于「认知」、「情绪」和「态度」建立的。
这个过程在不同的场景所建立的时长也不相同，售卖场景当中是最常见的。
我们有时候会在菜市场大街上看到有人吆喝卖菜刀、卖拖把等各种东西，这时候一群人过来围观，然后看到卖家(卖菜刀)为了展示自己商品的卖点，会拿两把不同的菜刀（一把自家产品，一把不知名的菜刀）去切同一块猪肉，通过切猪肉的顺畅度，来吸引用户注意和展示自家菜刀锋利的卖点；这种展示方式，能在极短的时间内改变消费者的情绪和认知，从而改变消费者的态度，以建立消费者对产品的信任，最终提升下单转化率。
互联网产品构建信任设计有以下三个阶段：
常言道：佛是金装，人是衣装。视觉传达会影响用户的心理，精致、严谨的视觉设计给用户以专业、安全的感觉，而怪异、随意的视觉设计给人以粗糙、不专业的感觉。因此，在视觉风格上应避免轻佻、或过于圆润的设计，细节实现上应杜绝马马虎虎。大部分情况下，互联网金融产品的视觉可以采用偏深色系，如蓝色、绿色给用户以稳重可靠的感觉，并辅助以“锁”“盾”“资质”等安全标记，增强用户对安全的认可。
优秀的插画可以降低人们的焦虑感，同时提升对当前场景的理解力。采用叙述性插画来描述当前场景，能够让用户更有代入感，更易于理解信息的传达，具有品质感的插画还能增强用户对平台的信任。
品牌是对产品或者服务的一种保障，因为这种保障，用户更倾向于使用该品牌的产品，良好的产品使用体验让用户更加信任该品牌，形成一个正向的循环。
以品牌背书、文案强化、品牌升级等形式来对品牌进行确认和肯定，强化用户的认知，与用户建立起一种可持续的、可信任的品牌安全感。
品牌背书是为了增强在市场上的承诺强度的手段，通常还会借用第三方的信誉，然后第三方以一种明示或者暗示的方式来作出再一次的确认和肯定。于此与新用户建立一种可持续的、可信任的品牌关联。
一般可以从品牌故事、品牌背书和名人效应来进行切入。
品牌故事就是通过产品背后的意义是什么？为什么有这个产品？创始人的情怀是什么？有情感衬托的故事衬托你产品的价值。这点运用的最好的就是罗永浩的锤子科技，每次都在大讲情怀，工匠精神，吸引了很大一批锤粉。
品牌背书可以有品牌历史、投资或者上市背景、品牌规模等等，这部分更多的去结合市场营销的角度来进行。再有，若你的品牌有名人背书，效果就更好——这也是为什么很多产品面世，要找企业家或者明星甚至国家背书，一人抵万言，人们更倾向于相信熟悉和崇拜的人和熟悉的事。
这类情况在互联网的场景中往往以KOL带货、探店等形式存在，早些年的小红书微博探店测评，到近来越来越火的直播短视频；都是基于人们在对自己信任的KOL面前，选择信任相对应的产品或消费场景。
通过感知层上的视觉统一及策略层上专业的权威机构、KOL种草的方式去渗透平台的公信力，进而搭建基础的信任框架，建立产品服务的进一步连接。
话术是传递信任感的重要因素。既要做到实事求是的表达，又要避免引起用户歧义。话术的首要原则是真诚感，坦诚明确的告知用户必要的信息，避免带有营销感的含糊“套路”。
互联网金融领域有很多专业术语，向用户传达时，我们需要把它转换成用户能听懂的语言，最大限度地降低用户的理解成本。
一般金融产品的文案要做到三点：简单易懂、统一认知、突出重点。
简单易懂——互联网金融产品的客户群是普罗大众，文化水平高低不一，因此传达的文案必须是清晰的、接地气的，让金融术语从专业变成通用化，让用户能够清晰直观地识别和理解。
最常见的如“提前结清”是银行的叫法，转换为用户的语言是“提前还清”。或者借贷后还款的方式有“等额本金余额计息”，像这么专业的术语，会让用户感到困惑：到底什么是等额本金，余额计息？所以我们在设计的时候，只需告知用户最想了解的信息，即每月的还款额以及利息即可。
统一认知——如果对金融产品的解释出现歧义，则可能会出现失之毫厘谬以千里的状况，容易让用户产生不同的理解。解决这类问题的关键点在于能否发现歧义，这就需要设计师在设计时对产品业务本身有深刻的理解，能知道问题的存在并敏锐地发现问题。
突出重点——互联网金融产品有很多必要的规则需要告知用户，当无法全都在页面上展现时，通常会使用弹层页面来辅助用户理解，先由标题描述中心大意，再给出详细解释。
有时候，我们也可以通过信任感的话术，提升产品转化。
对于借款，大部分用户会因手续费或后续服务等各类问题而对借款产生一定的抵触，为了提升借款的转化率，可以通过改变心理上对借款的固有认知出发，核心目标是增强用户接受度，让用户对借钱这件事产生“心理转变”。
我们从三个感觉去改变：
临时感——结合用户「临时缺钱」、「临时周转」这个情景，在话术上我们可以贴着「短期周转资金」、「XX备用金」这样的临时场景进行表达；通过标签上的对比，及心理上的行为暗示、选择性暗示，增大用户选择借款的概率；
压力感——语言表达上，运用「随时借随时可以还」、「借2万元半个月利息仅xxx元」、「1万元借1天利息仅xx元」，将复杂金融逻辑扁平化、口语化，降低用户直面借钱的压力感。
亲切感——通过「地方政府与XX银行给你准备了1份备用金/短期周转资金」等方式，主动迎合的方式，拉近与用户的距离。
通过轻量化的展示金融知识，白话讲金融的方式提升用户的认知。
尼尔森十大可用性原则之一，系统状态的可见性，应该保持在第一位——系统应该始终在合理的时间内，通过适当的方式，告知用户当前所处的状态，以及正在发生的事情。在使用产品时，用户需知道每次交互是否成功了，而产品呈现的当前状态，能够让用户感受到更强的控制感，借此可以更好的控制，并完成自己的任务，而这种掌控感，能够加深用户对于产品的信任。金融产品，更需要有良好的反馈设计，它和金钱联系紧密，容错率很低，每次操作都可能引起蝴蝶效应。而良好的反馈设计能减小用户在使用产品过程中产生的恐慌，帮助用户获得信心并提升掌控感，使用户尽快完成自己的目标。
和普通 APP 相比，金融类的服务不仅要做到好用易用，更要抓住用户的利益点，给用户真正带来转化的投资策略。并在用户疑惑的时候，提供相应的帮助。
从传统银行线下贷款全流程中可以看出，这里有个后置性的体验——第四步中，用户拿到钱后才确切知道每个月的还款额，实际上这种后置性的体验是很糟糕的，给用户带来不确定性和不可控感。
针对线下贷款的这种缺陷，在设计借款产品时，让用户了解清楚一切信息之后再来借款。基于这点考虑，用户对于还款额的知晓需要前置，我们的设计方案可以是：在用户输入完「借款金额」和「借款期限」后，给用户一个实时的「还款计划表」，确切地告知用户「还款日」和「每月还款」（每月还款金额）以及利息的计算方式，给予用户足够的把控感和确定感。并且当更改上述任意一个参数时，「还款计划表」也会出现实时变动，帮助用户快速找到合适的借款方案。
用户往往不善于处理数字内容，简单的加减法、乘法对于很多人而言不是问题，但是一旦需要快速进行混合运算，或者涉及到更复杂的内容时，绝大多数用户会选择使用计算器，甚至更专业的工具。
数据可视化如今已经可以更好地集成到 APP 当中，拥有及时报告和分析的功能，在贷款、金融、 财务这样的 APP 当中，合理地运用这些更易于理解的视觉信息，可以更好地帮助用户理解和吸收内容。
用户一向不喜欢复杂的东西，除了不易理解外，更担心因自己理解错误带来意外的损失，而金融产品的损失是和金钱息息相关，更为重要。
帮助用户减少记忆负荷、顺畅完成操作目标，是每个产品必不可少的设计点。如微信转账，输入数字时会检测数额，减去用户边输入边计算「这是多少钱」的脑力投入。
当涉及到用户信息安全、人身隐私、行业竞争等时，隐私保护可以避免用户遇到一些不必要的麻烦，建立起一种【为用户安全着想】的产品认知。
常见的有：匿名评价、数据脱敏、身份认证信息保护等。
用户对同类群体有情感共鸣。通过传播内容故事化把信任心智具象呈现，唤起用户的情感共鸣，进而从内心接受、信任金融投资/贷款服务。
例如：支付宝在年前白酒基金大涨的时候，基金讨论区底下出现了各种相亲、屌丝逆袭等有趣的故事，用户纷纷留言参与，用户在平台自发的互动，更增加了品牌好感，从而更加信任产品。
理解用户思维，替用户考虑，提升用户决策效率。用户的决策效率可以从三方面去提升：安全性、性价比、真实性
人们面对某事物可能会带来的伤害/损失时，都会有一种本能的“警惕感”。
金融产品，在设计的时候突出与权威机构合作的详细信息，向用户提供基本安全保障，减少用户的安全顾虑。
性价比是人们衡量「付出成本与回报价值」之间的一种决策依据。而为了让用户降低这种决策依据，除了自我服务/实力的展示外，往往需要一种「参照物」来凸显性价比。而「参照物」 的形式多种多样，不管是竞品数据，还是各种优惠信息、额外礼物/礼包、售后服务等等。目的都是通过该参照物，向用户传递一种「划算」、「值得」的心理效应。
例如：一些平台推出自己的理财产品的时候，会注明：与余某宝相比，年化多出XX%。
支付宝的「财运红包」、京东金融「满减券」，通过红包抵扣，减少用户开支，得到性价比高的基金。
基金转换，为用户思考，减少时间成本，让用户快速获取收益。
光是性价比高还只是片面依据，至于内容是否属实，成为了我们与用户建立信任感中最重要的影响因素。
在视觉的呈现上向用户直观地展示相关的数据等，能在极短的时间内改善用户的认知和态度，从而建立起短暂的信任感。
或者通过真实投资故事，感知受益人的「现身说法」，营造身边的人通过投资获得了助力，进而整体塑造用户对平台服务的信任心智。
金融产品的信任感设计是一件需要长期坚持的、正确且有难度的事情，它是一个循序渐进的互动过程，新生金融产品获信极其艰难，基本信用值是一点一滴的日积月累，一旦失信一次，用户就很难再信任。
通过平台公信力及产品优质服务，建立与用户的信任连接，进而全面升级信任关系。无论是体验设计还是视觉设计，都可以帮助企业拓展品牌和业务，建立和增强用户之间的粘性，只有重视产品信任感设计，做好产品体验，才能为产品的有效转化奠定良好的基础。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
手势作为图形界面与用户之间沟通的方式之一，在便携电子设备上大量应用。与实体按键相比，它有着纯粹的简洁性和无尽的创造性，手指的个数变化、不同变量的组合能够创造出无数的操控方式。
位移类手势是指代那些通过手指接触屏幕后的位置变化从而操控电子设备的手势，本篇文章主要讲解单指操作的位移类手势，多指的位移类手势（如捏合）将放到后续文章中讲解。
一谈到位移类手势，大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而，当我们想仔细谈论他们三者之间的区别时，大部分设计师可能无法准确地描述。为了能够准确描述三者的区别，我们在这里引入三个维度的概念，它们分别是控制方式、稳定化效果、以及阈值类型，这三者的不同的变化组合可以创造不同的位移类手势，拖拽、甩动和轻扫之间的区别也是这三个维度影响的。当我们在讨论不同位移类手势之间的区别时，不如说是在讨论这三个维度之间的区别。比如常见的轻扫手势，因为这三个维度的变化就会产生不同的变种，而且不同变种在体验上也存在很大差别，若不分场景随意使用，很容易就影响用户体验。那接下来我们首先了解一下这三个维度。
第一个维度是控制方式，它分为绝对控制和相对控制，也可以通俗的表达为跟手和不跟手，区别如下。
绝对控制/跟手：施加控制的一方（后文简称施控物）的某个属性变化与被施加控制的一方（后文简称受控物）的某个属性变化是对应的。
相对控制/不跟手：施控物的某个属性变化与受控物的某个属性变化不是对应的。
比如在网易云音乐的播放页（下图左），左右滑动黑胶时，手指是施控物，黑胶是受控物，手指的横向位置变化和黑胶的横向位置变化是对应的，即绝对控制。上滑调出评论页时（下图右），评论页的位置和手指的位置没有对应关系，手指的上滑仅仅控制评论页是否出现，即相对控制。
与相对控制相比，绝对控制允许用户去操控受控物的属性变化过程，因此给予了用户更强的掌控感。比如在微信读书阅读页边缘右滑，手指的横向位置与书籍封面的变化过程对应，模拟现实生活中慢慢合上书的感觉，如下图。
但是在有些场景，为了避免混乱，属性变化过程是不适合被用户绝对控制的，此时我们应采取相对控制的方案。比如 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com