编辑导语：OMS即订单管理中心，可以看作是电商系统的核心，其所需要具备的功能包括汇集数据、分发、跟踪汇总等等。那么，如何依据实际业务场景、搭建一个可支撑的、稳固强大的OMS系统？本文作者针对分布式场景下的OMS系统设计做了总结，一起来看一下。

一、OMS所处位置

通常我们所谈论的网上购物为狭义电商，属于广义电商的一种，即以电子化手段进行商品交易的一种行为。

狭义电商简单可以描述为货、款、以及货与款的关系。同样，转化为电商系统主要核心模块可以分为WMS仓储系统、FMS财务系统、OMS订单系统。

在电商的三大核心模块中OMS订单系统又可以看作核心中的核心，所有系统以围绕着订单模块进行构建，如果整个电商系统比作人体器官，那么OMS当之无愧可以比作人的心脏，所以OMS系统设计的好坏，直接影响着其他系统的构建。

二、OMS作用

OMS系统承上启下处在电商系统业务链的中游。通过各个平台聚集到OMS的订单，系统通过会员信息、收货信息、优惠信息、商品、积分、支付等条件对订单提供后续处理，如合单、拆单、第三方推送、分发仓库、通知扣减积分，库存、创建退款，退货申请单等操作。同时具备从其他系统上报收集追踪订单变化。如出库、物流信息，并对其他系统运营分析提供数据支撑。

可见OMS系统要具备数据快速聚集、加工、分发、跟踪汇总的能力。

三、OMS设计

了解了OMS所处位置和作用，接下来谈谈如何设计一个稳健的、可持续性的OMS系统。

我们知道建设大楼，会考虑地基、主体结构、周围环境、承载以及抗震能力等各种因素。系统搭建也一样，对达到什么样的预期目标也需提前做出制定，制定的要求越高，设计考虑的因素就越多。

1. 订单相关表字段

2. 前后端数据读写分离

根据用户群体的特点，前后端数据库主从读写分离、应用服务分开灵活部署。主数据库处理相关业务事务，大量的查询转移到从数据库。一是减轻主数据库的压力，二是前后端物理隔离一方宕机可降低对另一方作业的影响。

BDMS 业务+数据（中台）库与OMS 订单库特点对比：

3. 分表归档

根据C端用户特性查询订单以会员维度区分，所以缓解前端访问数据压力，分表设计是个不错的选择。按照订单号1024取模方式，会员编号尾号数字1位，2位取模方式等等。

4. 业务解耦

架构从单体、三层、再到分布式微服务的变化，业务边界也从领域驱动建模开始制定到最终分而治之，各得其所。各个分拆模块更具独立性和可扩展性。所以设计时其他业务模块数据不应混到单独某一业务模块中，数据交换传递统一通过服务接口形式获取。这也体现了分布式系统一切皆服务的思想。

业务拆分后的三大模块主要变化时间轴：

从客户角度分析，C端用户界面可操作性较低，要求简洁、直观、易懂。如会员中心订单tab分类：查看全部、待付款、待发货、待收货、待评价、退款/售后。

上图分类由两种或三种业务状态的组合而成，如下图为后端订单和支付状态值组合到前端状态值以及显示的算法。

其中，会员中心的退款/售后为逆向状态，可与其他tab正向状态区分开。

5. 缩短业务链

OMS系统主线是从建立订单开始为仓库提供发货依据到配送完成，最终实现可预知的业务闭环。

其他事务如推送第三方商户、扣减库存、创建应收、释放积分，库存、退回优惠券，创建退款申请单等事务，可归纳到分支，实现可控的由订单状态流转异步创建单据和事件进行处理。一是缩短业务链长度可使系统更具稳定和强健性，二是可根据活动、秒杀情况控制分支事务处理频次，使资源更好的集中到业务主线上。

例如，双十一活动期间，阿里把会员等级，芝麻信用计算等附加业务暂停服务。甚至在双十一凌晨秒杀阶段，延迟退款退花呗等逆向行为。

→正向状态流（每种状态分别由定时任务异步处理当前状态下的后续业务）：

→逆向状态（由定时任务异步处理取消订单后续业务）：

6. 自动审单

系统根据审单配置规则对订单金额、地址、地区、收货人，指定会员、手机号等信息进行合法性校验，校验通过的则正常流转后续流程。不符合规则的订单，以及包含备注的订单转人工，通过人工再次审核。

7. 拆单

拆单主要原因涉及店铺、品类、跨境商品、商品超重以及仓库的不同。系统根据拆单配置规则实现对订单拆分。

拆单一般时间节点在支付前和支付后两种情况。拆单需要把运费、优惠、积分分摊到正价单一商品上，方便退款退货以及财务结算。

同时需要考虑部分退情况。如果存在满减、累计消费金额，跨店铺消费等优惠限制时，要注意是否满足部分退。不满足，则需要连带其他拆分子订单一起退，否则驳回。

8. 合单

当买家编号、收货人手机号、地址、姓名一致时，系统自动合并生成新订单。需要注意的是合并订单为虚拟订单，并不是多个订单的合并生成父订单，实质只是合并发货，降低物流成本。

9. 自动取消超时未支付订单

实现方式如定时轮询任务，延时消息。当数量少时使用定时任务即可满足设计。当数量过大时可采用延时消息，订单生成后发延时消息，到设置临界点时判断是否支付，未支付则取消订单。

10. 虚拟出库

一般针对虚拟商品，无需推送到仓库实物发货的订单。如手机充值、购买游戏币等等系统可主动变更订单为已出库，减少人工干预。

11. 异常订单拦截

异常订单拦截一般有别于自动审单校验，可看作是对自动审单规则的补充加强。如收货地址临时变更、商品破损、库存不足、部分地区管控物流限行等等。拦截可以是系统和人工拦截两种。

12. 订单开票

开票分为纸质和电子两种，纸质一般由仓库随发货一起开具，电子发票则由订单发货后，出库状态上报到OMS后，由OMS系统调用税务平台开具蓝色发票。退货逆向流程则开具红冲发票。

13. 补偿机制

如第三方消息队列事务消息机制，TCC补偿方案等等，同时需要注意接口设计时一定要做到幂等性。

14. 换货

换货实质是订单商品的变化，同时也可以理解为新订单加退货或部分退的方式，因此也会涉及到商品单价、优惠券、积分的重新分摊。这也是为什么换货功能设计到OMS的原因。换货主要包含同类商品、不同类商品之间，以及数量的变化，同时还会涉及到旧商品、新商品库存和应收、实收财务结算上的变化。

15. 其他

最后，还要与日志监控、数据分析等系统配合做好预警服务防止恶意下单，最大程度保证商家利益。OMS作为整个电商核心系统，在设计时需要充分分析具体涵盖的业务场景，以及与其他系统的融合，这样才能设计出符合自己企业的OMS系统。

四、总结

分布式场景下系统设计是一个不断摸索前进的过程。只有对架构设计和业务解耦的粒度大小等合理构思，才能使后续系统更具有迭代性和可扩展性。

编辑导语：相信大家都听说过马斯洛需求层次理论，那么把它应用到产品需求层次设计中，会是怎样的场景呢？作者两个方面给我们分享了如何运用该金字塔进行产品设计，我们一起来看看吧。

一、需求层次理论

美国心理学家亚伯拉罕·马斯洛 (Abraham Maslow)在 1943 年的论文《人类动机理论》中提出了人类需求的心理层次理论。用金字塔中的五层模型来表示人类的需求。从下到上，需求分别是生理、安全、社交需求、尊重和自我实现。

该理论认为，人类在转向更高级的需求之前，会先满足其基本需求。例如：一个饥寒交迫的人不会集中时间和资源寻求伴侣（社交需求），因为他首先满足生存需求（生理上的）。

二、产品设计与马斯洛理论

随着时间的推移，马斯洛的理论被改编并应用于许多新领域。在产品设计领域，2010 年史蒂文·布拉德利 (Steven Bradley)提出了一套有用且实用的规则即“需求设计层次”。

用于创建新产品和评估现有产品的设计。与原始理论一样，必须首先满足设计的基本需求才能进入下一阶段。Bradley 理论的五个层次是功能性、可靠性、可用性、熟练性和创造力。

根据该金字塔原理，可以考量产品在对应的每个阶段要满足的功能要求。

1. 功能性

产品设计最基本但最关键的部分是其功能。打车软件、聊天应用甚至一个杯子是否实现了其主要功能？如果没有，那么进入其他发展阶段就没有什么意义了。

例如，一个水杯如果不能盛水，不能用来饮用，那么它设计和包装是否漂亮就无关紧要。

它是无用的，它对消费者就毫无价值。随着产品的核心功能变得更加丰富，这个过程也会变得更加复杂，需要更多考量。

正如图表的比例所表明的，产品团队精力应该专注于完成主要流程和功能。实践方法：明确产品的定位和用户画像，始终深入研究你的客户期望你的产品用来解决什么问题。可以充分地进行调研。例如：现场调研、用户访谈、利益相关者访谈等。

2. 可靠性

可靠性与功能性是同样重要的设计基础。用户能否相信该产品能100% 正常工作？如果用户不相信你的产品在他每次需要时都能正常工作，他们是否愿意购买使用？

在创建可靠的产品时，关键是彻底的测试。实践方法：进行可用性测试并确保给用户能提供及时帮助。

3. 可用性

可用性需求强调用户轻松使用你的产品的能力。用户能否以最少的指导弄清楚如何使用你的产品及其每个功能？例如，一款图片编辑的应用裁剪和保存功能不直观，那这款产品可能很难被认可。

实践方法：可参考尼尔森可用性原则的方法。即：系统状态的可见性、系统与现实世界相匹配、用户控制与自由、一致性与标准化、防错原则、减少认知负担、使用灵活性和效率优先、简约设计、提供帮助文档。

4. 熟练程度

熟练程度是评价真正好的设计的一个标准。为了满足这一层要求，设计师需要问问自己产品的设计是否有助于用户更好地使用该产品。

例如：一款针对老年人设计的社交软件除了基础的聊天功能外，它应该提供关于该产品的诸多视频、图文类教程，来引导用户更好的使用产品。

实践方法：要时常思考“这个产品还能做什么？”。它是否会引导用户发现一种新的更好的做事方式？从某种意义上说，它是进步的吗？通过与设备的每次交互，用户是否会发现更多有关其功能的信息？

5.创造力

证明了产品能够可靠地履行其核心职责后，下一步是通过创新来满足其他需求。以跑鞋为例，除了功能属性外还可以展示其稀缺性、款式、地位等附加功能。

实践方法：分析用户心理、行为、痛点和动机。发挥创意，寻找创造性的方法满足用户的需求，为用户创造峰值体验。

以下是来自medium的延伸案例：原文作者：(NATHAN TENDIDO)布拉德利对马斯洛需求层次的改编有助于我们来理解为什么某些设计比其他设计更好。

为了应用 Bradley 对需求层次的翻译，我将使用三个搜索引擎（Google、Bing 和 Ask）作为示例来找出明天的天气。

（1）功能——它有效吗？

金字塔的底部和最高层是其整个总和中最不有趣但最基础的部分。没有效果的产品有什么用？由于我们正在评估搜索引擎，我们可以测试三个搜索产品是否可以正常搜索并得到有效结果。

毫无疑问这三个搜索引擎都运行良好

（2）可靠性——它在我需要的时候工作吗？

这一步和第一步同样重要。决定了我对该产品是否信任。幸运的是，这三个引擎在我需要的时候依旧正常工作，即使是在凌晨。

（3）可用性——我能弄清楚如何让它工作吗？

好的设计可以通过强化主要的视觉元素对用户进行引导。这三个搜索引擎都将搜索栏作为主页上最突出的部分。

谷歌搜索栏

必应搜索栏

Ask搜索栏

比较视觉浏览轨迹

当返回搜索结果时，清晰的视觉层次感有助于用户获取他们想要查找的信息。如果没有清晰的视觉层次结构，用户可能很难完成任务。Ask的搜索结果布局与 Google 和 Bing 相比，明显就多了一层操作，更不易找到想要的结果。

（4）熟练程度——它能告诉我如何让它更好地工作吗？

熟练程度是好的设计与优秀设计的区别所在。熟练程度要求设计可以帮助用户从头到尾成为专家。

三个引擎都使用了联想搜索，以便更高效地引导用户到达目标。虽然谷歌提供了更好的质量建议，但 Bing 的搜索栏在网页上更高，让用户可以看到更多的建议，而不会被 iPad 键盘挡住。

Ask 在这方面则有所欠缺。Google 和 Bing 还提供了其他搜索分类选项。

（5）创造力——该产品对我还有什么用？

在这一点上，这些产品已经完成了它们的基本功能，基础功能外还包含了更多友好的设计。通常主要是针对用户未来的访问进行个性化设置或提供工作空间以完成更多工作。

Google 提供了多种工作区工具，而 Bing 实际上奖励使用其网站的用户！

虽然上述案例并不是要抨击一个网站，但是当 Bradley 的需求设计层次结构被用作通过判断的标准时，上述三种产品之间的差异变得更突出。

这并不是说 Ask 是一个糟糕的设计。在某些地方，Google 看起来与 Ask 目前的表现完全一样。这三个网站都可以完成搜索引擎的基本功能。

然而，当把Ask放在 Google 和 Bing 旁边对比时，Ask 设计中的劣势变得更加明显。

三、总结

如上所示，Bradley 的设计层次结构是思考大多数产品设计的有用过程。

然而，就像马斯洛的原始理论也有质疑一样。

马斯洛的等级制度也难以解释诸如“饥饿的艺术家”这样一个人为了追求更高的需要而忽视低级需求的情况。几乎没有证据表明人们有动力一次只满足一个需求水平，除非在需求之间存在冲突的情况下。

布拉德利的理论也不完美。对需求设计层次的批评包括以下问题：设计是否必须可靠才能可用？不能同时满足这两个条件吗？

例如：有些搜索引擎可以满足基础的搜索功能，然而在基础之上拓展的低级广告引导体验是好的吗？设计需求的层次结构绝不是完美的，有可能你参考此结构所做的设计相较之前还要糟糕得多。

然而，更完美产品需要超越这种规范去进一步研究。例如：可以将更精细级别添加到金字塔中。还需要设计者进行更多地思考。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

编辑导读：随着城市化进程加快，城市的体量在不断增长，随之而来的社区形态和管理也在日趋复杂。智慧社区能否解决社区管理之痛呢？本文作者对此进行了分析，与你分享。

社区是城市在小区域范围内的一个缩影。因为两者之间的体系结构和发展模式存在一定程度的相似和关联，所以在智慧城市的建设路径上，以智慧社区为切口，做好小区域范围的智慧管理成为当下市场和社会的一个风口，也是治理切口。

在中国，随着城市化进程加快，城市的体量在不断增长，随之而来的社区形态和管理也在日趋复杂。对此，暨南大学教授、华南城市研究会会长胡刚认为，建设智慧社区是作为当下社区建设的重要内容，至少应该包含三方面内容：

一是智慧信息，包括社区信息、住户信息等基本数据的采集；

二是智慧服务，比如在此次疫情下，部分社区实行封闭管理，居民可以在网上买菜，然后有人帮他们送到门口这样的服务就很重要。还包括社区的选举，平时大家都上班，不容易聚集在一起，这时候就需要有这样的网络选举投票服务；

三是虚拟社区，居民可以在虚拟社区聊天、共享资源、处理事务等。

由此可见，智慧社区的建设重点主要有三方面，信息感知、服务延伸以及虚拟社区。在腾讯、华为、旷视、海康威视等服务厂商的解决方案里，都能看到类似的思路和落脚点。但是如果说真正做好这三点内容的社区平台，或许还属微信。

为什么要这么说呢？

在这里需要理清一点，对于智慧社区建设，大部分人认为应该是房地产商、科技公司或者安防厂商的事情，但是实际上并不是，社区群众也在参与其中的建设，以微信为支点的数字化社区正在加速形成。

一、智慧社区的“群众路线”

值得一提的，以微信为支点推动数字化社区的成功构建并不能归功于腾讯，而是社区群众。

这是一个自发的、自上而下的、无意识的社会行为，微信只是一个“被民众借用”的工具或者说平台。

微信作为移动互联网时代国内最大的社交软件和聚合平台，很多服务和模式实际上已经逐步跳脱出了它原本的范畴，通过用户自发形成的社群成为了很多新概念的实践场所。就以智慧社区来说，或许很多厂商还没想明白要如何切入庞大的人群体系，实际上社区群众已经在微信群上做到了胡教授所提及的三大内容：

首先是信息感知。尽管这样面向小区住户的信息采集不全面、不系统，但是通过微信群，大部分社区确实在人员信息收集、人员联络和信息传达方面实现了很多跨越。过去需要挨家挨户上门、打电话通知的内容，在短期内都能实现双向传递和感知。

广西某小区物业人员张春花（化名）告诉“智能相对论”，“从疫情爆发到现在组织打疫苗，微信群都帮了我们很多的忙，解决了大部分的联络组织工作。只要把通知、链接发到群里，艾特大伙，基本都能通知到，实在是没有反馈的再通过电话或上门的形式传达一下就行。包括现在谁没打疫苗、第一针、第二针，只要在群里吆喝一下，都能快速的组织起来……”

其次是智慧服务。实际上，对于张春花所在小区的业主来说，智慧服务是什么，他们还搞不清，但是比起以前，现在通过微信群的方式，很多服务确实方便了许多。陈先生（业主）提到，“当时疫情那会儿，物业就是在微信群上来帮各家各户统计买菜信息、送菜什么的，很方便。现在有什么社区投票、活动举办的事情，我们基本都是在微信上来参与和讨论。”

最后是虚拟社区。这对于微信群来说，基本没有什么异议。本来作为一个社交平台，微信给用户带来的就是一个虚拟社区的概念。现在各家各户有什么事情需要帮忙、或是信息需要分享的话，基本上都会通过业主群来进行发布和传达，平常没事也会聚在一起聊聊天、发发红包活络一下。

张春花表示：“小区的老人们经常在群里讨论跳舞、下棋什么的，要是遇到下雨天，也都会在群里唠唠嗑，念叨念叨，看着他们这样互动，有种回到以前住在村里的感觉……。”微信群对于他们来说，俨然成了另一个线上的社区。

可以说，微信群的存在很好的将社区的人连接了起来，为智慧社区的构建提供了一个基本的雏形。这种基于群众力量自发形成的新社群，是现在很多小区管理推进的常态。

二、社群虽好，槽点满满

很显然，作为一个自下而上的自发行为，社群的形成在一定程度上解决了很多社区管理的问题，但也存在诸多槽点，限制了这种模式的进一步发展。

1. 社群不系统、不全面，缺乏必要的顶层设计。

自发形成的社群本质就是片面的，它无法构成一个系统、全面的体系，很难在智慧社区的建设上发挥统领全局的作用。以具体反馈来看，虽然业主群可以覆盖大部分的住户，但是并不是全部，仍旧存在“漏网之鱼”，而且在信息管理上，社区也将处于一个非常被动的局面，住户可以选择提供信息，也可以选择不提供信息，很难规范住户的信息条例。

这也意味着，未来的智慧社区建设在信息感知上需要化被动为主动，借助更加有效的设备或模式来提高信息感知能力。正是看到了这种进阶的需求，所以科技厂商和硬件厂商此前在做智慧社区的时候，大多会从顶层切入，从全局出发来进行社区改造。

比如旷视科技目前提出的以人脸为ID的AI方案就是这样——用户经过小区门禁刷脸进入小区，系统可以自动识别并做好人员管理，使得进出小区的人员数据都能得到全面感知。基于人员数据的高度识别，智慧社区在人员管理方案，智能停车、智能物业，智能地产、安防、零售等方面都能获取相应的数据支持，从整体上把控社区的管理工作。

2. 社群做好了“人”的连接工作，但是没能做好“物”的数字化升级。

社群的另一个本质是人的聚集，对于业主群来说，它只是做好了人群的沟通、连接工作，但是在整个社区范围内，仅是做好人的工作，还不足以构建一个高效、便捷的智慧社区，仍需要在“物”的基础上实现数字化升级，比如监控、快递、消防、电梯等等场景。

“人”与“物”构成智慧社区建设的两条路径，对比来看，海康威视等硬件厂商更倾向于后者的升级——通过智能硬件，比如监控摄像头、门禁设备、对讲设备等的支撑，海康威视能在多个社区场景里进行数字化升级，来实现社区智慧化的表现。

比如，有了智能摄像头，社区的管理系统可以对小区的可疑人员进行预警、对电梯内进入电瓶车等危险行为予以提示、对高空抛物等违法行为提供24小时监管，等等。物理设备的数字化升级对于智慧社区的搭建尤为关键，可以说等同于社区智慧化的基础，这是微信群无法实现的。

3. 去中心化的社群无法接轨智慧城市建设。

社群是一个去中心化的概念，它由业主自发的创建，也可能会因为各种人为原因崩塌，比如广告过多、管理不善、业主矛盾等等。这种不稳定的模式很难进一步拓展应用，只能作为一个辅助性的管理。

特别是对于智慧社区的构建而言，未来的城市智慧化需要建立在一个又一个的智慧社区之上，因此要考虑到智慧社区与智慧城市的协同发展就必须要有一个稳定的系统予以支持。对此，我们可以看到中国电信在打造智慧社区的过程中，积极推动社区系统接轨电力、水力、燃气、养老等政务服务系统，使得小区人员可以足不出户的享受到购电、购气、通信缴费等服务，也确保了社区数据连接城市系统，实现双向互利。

那么，对于智慧社区的建设而言，社群存在诸多缺陷，很难进一步推动我国数字化建设，需要更多服务厂商从大局出发，做好顶层设计来构建一个全面、高效的智慧社区。

三、智慧社区的未来：人与物的双重数字化

尽管如此，但是对于智慧社区的构建来说，并不是一个极端地行为，它不需要推到一个模式，再树立另一个模式。反之，不同的路径在当前复杂的建设进程上都应该被重视，在融合中发挥更加显著的价值。

简单来说，群众的社群路线和厂商的技术路线不冲突。在当前的现实情况下，社区的管理和人员联络需要微信支持，这是毋容置疑的。前者是“人”的数字化，后者是“物”的数字化，如何把这两方面结合起来发挥双重价值，才是智慧社区的未来所在。

因此，“智能相对论”认为，在智慧社区的构建上，腾讯是具有显著优势的。在滨海泰达智慧社区的建设上，腾讯就展现了这一优势——通过投入老人关爱门磁，依托物联网技术，利用实时感应传输功能打通网格化平台，泰达街道能做到对独居老年人等特殊人群居家情况的动态掌握，一旦出现异常情况，社区网格员便可通过微信接收到实时异常告警，精准服务相关人群。

简单来说，腾讯手握微信，在“人”的数字化上具有明显的优势，其未来只需要做好“物”的数字化，就能进一步推动智慧社区的构建。但这并不意味着腾讯会比其他厂商少做一个层面的事情，相反的，如何继续拓展微信的社群优势需要腾讯做更进一步的构思和验证。社群对于智慧社区建设的想象力还没有触碰到天花板。

在湖北宜昌，企业微信正在实现治理规范化，成为当地网格化管理向互联网拓展的新载体，也成为了社区居民互助、交流、自治的微载体。

具体来看，社区网格员通过企业微信建立统一的社群，网格员形象统一，有官方认证的身份，形成“中心化”管理的雏形。同时，基于企业微信和微信互通的能力，社区普通居民使用微信即可与网格员联系，也可在群中反映噪音、污染、故障等各种问题。而除了在群内沟通，网格员进行跟进调解外，还可以把相应的问题通过企业微信工作台提交工单，转给横向的相关部门，如城管、环保、公安等部门处理。

简单来说，在企业微信的支持，社群有了官方人员的介入逐步形成了一个更加系统和有效的社区管理与治理同步的体系。这对于腾讯而言，就是在“人”的数字化上发挥出了真正的信息优势。

对于其他厂商而言，这并非是不可超越的。中国电信的短信通知同样可行，只是相比微信缺乏了一点社群交互的基础，但在连接人的功能上并不输给微信。因此，对于一众服务厂商来说，若能准确地认识到“人”与“物”的双重数字化需求，也就能快速地把握智慧社区的建设思路，来打造出一个全面智慧化的社区。

四、结语

如今，新小区的搭建、“老旧改”的推行，智慧社区依旧是一个没有边界的蓝海市场，据数据显示，2020年中国智慧社区产业规模达到5000亿，近3-5年仍将以至少40%的比例增长。而市场上，更多的厂商仍在专注于“物”的智慧化和数字化，对于连接人的工作似乎都丢给了微信，但伴随着智慧社区的需求愈发增长，或许其他的厂商也会逐渐把目光转向社群的搭建和经营之上。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。

摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。

接下来为大家分享精美的app UI设计案例：

--手机appUI设计--

  更多精彩文章：

      手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）

       手机appUI界面设计赏析（八）

       手机appUI界面设计赏析（九）

        手机appUI界面设计赏析（十）

       手机appUI界面设计赏析（十一）

      手机appUI界面设计赏析（十二）

      手机appUI界面设计赏析（十三）

      手机appUI界面设计赏析（十四）

      手机appUI界面设计赏析（十五）

      手机appUI界面设计赏析（十六）

      手机appUI界面设计赏析（十七）

      手机appUI界面设计赏析（十八）

      手机appUI界面设计赏析（十九）

      手机appUI界面设计赏析（二十）

      手机appUI界面设计赏析（二十一）

     手机appUI界面设计赏析（二十二）

     手机appUI界面设计赏析（二十三）

     手机appUI界面设计赏析（二十四）

     手机appUI界面设计赏析（二十五）

一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。

我非常理解这些读者的痛点，因为我在日常的工作中，也经常遇到一些难题。比如同样是滑动，但是些许参数的变化就会导致体验的天差地别，应该如何进行选择。再比如与开发同学沟通过程中如何准确描述自己想要的效果，让最后的结果不至于与自己的预期不一致。这些难题也促使我大量思考，大量体验各种产品的手势操作，希望能够从中总结出规律，让手势的设计与落地能够有理有据。现在经过一段时间的积累，我认为我在这方面可以讲一些能够帮助大家的内容了。不足之处，希望大家指正。今天给大家带来专栏的第一篇《交互手势全解析之位移类手势》。

位移类手势的描述维度

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

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

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

1. 控制方式

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

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

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

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

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

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

2. 稳定化效果

定义

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

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

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

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

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

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

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

与效率的关系

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

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

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

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

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

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

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

触发时机

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

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

3. 阈值类型

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

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

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

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

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

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

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

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

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

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

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

常见位移类手势解析

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

1. 拖拽

定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动，无论释放时手指是否仍有速度，受控物都会立即停止移动。（下图的动态演示由 Principle 制作，观看会有些不太直观）

特点

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

案例

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

2. 甩动

定义

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

特点

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

案例

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

3. 轻扫 A

定义

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

特点

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

案例

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

4. 轻扫 B

定义

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

特点

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

案例

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

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

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

5. 轻扫 C

定义

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

特点

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

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

案例

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

6. 轻扫 D

定义

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

特点

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

案例

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

7. 轻扫 E

特殊说明

上文我们讲到，通过轻扫手势 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 源文件修改。

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

1. 阈值类型

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

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

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

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

2. 稳定化效果

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

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

3. 控制方式

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

手势排查

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

结语

本篇文章的归纳总结是通过日常积累和思考得来，希望能够帮助大家在设计与沟通层面解决实际问题，如果有任何疏漏和不严谨的地方，希望大家能够指出，后续的更新会将专栏不断完善，交互手势系列暂定的后续更新计划如下。

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

文章来源：优设 作者：设成于思

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

以前，设计师们都需要去跟开发沟通并手动标注所有文件，现在，有了像 Zeplin 和 Abstract 这样实用的标注工具，设计师几乎不需要花太多的时间在对接上。

但是，还是避免不了很多东西会在对接过程中出现问题。比如，这个按钮是固定大小的还是弹性大小？是保持底部边距固定还是在一个较大的对象内居中？让我们来看下约束布局在对接过程中的使用方法。

约束布局是定义控制应用中内容的规则。这些规则通过使用统一的元素和间距，保持跨平台、跨环境和跨屏幕大小的一致性。通常应用在 iOS 和 Android 中。

彩云注：这里想跟大家科普下相对布局和约束布局的区别。相对布局是通过相对定位的方式让控件出现在布局任意位置，相对布局因为逻辑原因，层级较多；而约束布局能够有效解决布局过多问题，让页面更加扁平化，布局之间相对位置也更好控制。约束布局也是继相对布局后，谷歌官方针对相对布局问题给出的一个更优解决方案，意在将来替代掉相对布局。当然，这里不再过多阐述，感兴趣的可以自行去了解下，可能偏开发方面会更多一些。

约束条件

如果在 sketch 文件中已经设计布局好了所有元素，就可以开始了！

1. 基础单位

8×8

首先从定义基本单位开始，每个度量值都是其倍数。我建议使用偶数 8 来调整大小和间距，因为这样可以方便且一致地适配各种设备。

• 8 更容易整除！10/4=2.5 vs 8/4=2
• 大多数流行的屏幕尺寸都可以被 8 整除，这样更容易适配（与 6 或 10 相比）
• 分辨率为 1.5 倍的设备很难清晰地显示像素为奇数的，若按 1.5 倍缩放 5 个像素就会导致半像素偏移。

在 Sketch 中选择首选项>画布，将“通过 Shift+方向键调整移动对象中的 10px 改成 8px”，这样会解决很多问题！

2. 间隔单位

间隔单位是常用间距的视觉表达。例如，一个“2 间隔单元”是 16 pt/dp，因为 2×8=16。这些符号应该在设计中使用，别名应该被标注成代码，以便在和开发对接时使用相同的语言。

垂直和水平间隔

在项目很赶的时候，你可能没有足够的时间手动做到完美像素对齐。通过使用这些通用单位来标识，而不是标注工具自动生成的标注像素，它可以告诉开发实际间距。数字别名与“Shift +方向键”移动对象的次数相匹配。

响应式按钮：iPhone8、三星 Galaxy S8、iPhoneSE

间隔大小永远不会改变。如果是水平间隔，则垂直高度被锁定，反之亦然。这意味着在不同的手机宽度上，组件的尺寸会发生变化，但用于创建它的边距的间距将保持不变。

对齐指标

有时元素在间隔之间对齐。间隔之间对齐的主要方法是中心对齐和底部对齐。

垂直居、中水平居中和居中对齐

中心对齐是指你想要一个对象或一组对象向中间集中对齐。对象可以水平居中，垂直居中，或者向中间集中对齐。

底部对齐

底部对齐是指希望对象与其中一个对象的底部对齐。当有两种不同的文本大小并且想要在基线处对齐时，底部对齐就是比较常见使用方法。

1. 点击对象

48 x 48

在手机上，最小点击对象尺寸为 48x48dp /pt。这尺寸来自于谷歌设计指南，物理尺寸约等于 12 英寸。(HIG 建议使用 44x44pt，所以我选择更大的)。将元素放在一起时考虑点击对象大小。你也可以使用点击对象符号来表示元素的哪些部分是可点击的。

组件布局

让我们通过一些组件示例切换来测试所有约束的使用：

组件示例：列表项、按钮和复选框

2. 基本尺寸

组件的基本尺寸，它的最小高度和宽度，应该基于最小点击对象的尺寸。视觉上小于点击对象的组件仍应由相同的最小点击对象大小触发。这意味着，如果用户在复选框之外触摸了一点，也会承认他们点击了复选框。

组件相对于最小点击对象的视觉尺寸：精确、高于和低于。

3. 内边距

使用间隔表示组件内的边距。

长字符串的水平边距

你可以通过设置水平边距来限制元素的水平位置，比如文本框。当文本太长时，你需要指出文本是否应该调整大小、换行和/或截断。换行到两行比截断一行更好！

动态类型的水平和垂直边距

垂直填充最常用于动态适配。尽管组件在当前手机尺寸、当前语言和当前字体大小下看起来可能很好——但所有这些因素都是最坏情况下的变量。当类型增加时，组件将变得比它的基本大小更大，并且你希望确保它仍然有垂直填充。

4. 基线对齐

使用居中和基线标记来示意，如何让那些没有接触到所有边的间隔元素表现出来。这部分主要是方便给开发理解的。

垂直居中的列表项文本、底部对齐的价格和居中的复选框

界面布局

现在你已经布局好了一个页面，使用与在组件中相同的方式使用间隔、点击目标和对齐符号。

插图来源于 Meg

……瞧!这就是移动端的响应式布局!

提示：为你在界面布局中引用的组件创建单独的 symbol 画板。在组件中，将所有组件规范包含在一个文件夹中，该文件夹可以轻松打开和关闭。没有什么比同时标记组件和界面布局更好了。

总结

即使是一个精心制作的交接文件也不能取代你与开发之间良好的语言交流。这应该与开始、移交和书面文档一起使用。你越让开发了解你的设计，还原的结果就越接近实际发布的产品。

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

文章来源：优设  作者：彩云译设计

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

很多同学面试时候都会被问到产品数据，用户体验等问题，这篇文章将讲解产品数据中面试官最为在意那几个指标，以及用户体验的考核方法。*本次话题我会分为上、中、下两篇文章，此文关于产品数据哪些值得我们看，如果这篇文章能帮助到你，还请点赞、分享我会抓紧你分享下一篇怎么体验度量的方法文章。

1 为什么大厂面试都会问数据

a 数据衡量你的项目是否真实

现在ui市场竞争激烈，选人也很苛刻，面试官判断一个人是否可以入职大厂的第一个指标就是真实，而数据类的问题往往是划分这个人做的项目是否真实的一个重要指标。

因为只有真实的项目才会有数据的提现，自由发挥的项目往往是答不上来有关数据的问题。

所以在大厂面试中都会或多或少的提问数据相关问题，这也是很多同学能进入大厂的一条重要分水岭。

b 录取后给你定什么职位

设计师群体偏感性，单单的看设计作品很难和其他竞争者拉开差距，所以需要理性的数据思维拉开与其他设计师的差距增添自己竞争力的附加值，另外一点通过产品数据的表述可以更有力的证明自己设计方案是最好的方案，方便后期给予定位高级、资深还是专家岗位。

2 数据在项目中的作用

设计师在做多个设计方案对比的时候会遇到这样的提问，现有的设计方案是最适合用户的吗？究竟哪个版本是更好的？为什么是这个版比较好？有的人拿产品埋点数据来评判，有的人用用户反馈来评判，也有的人则坦言需要靠老板的建议来进行评估。

a 数据是一个衡量好坏的一个指标

数据是衡量一个产品甚至一个功能最为科学的办法，他在不同的开发场景中都起到很重要的作用。比如：

·在设计开始前，数据可用于发现问题、分析问题。从数据角度了解用户诉求，发现产品存在的问题，为产品设计优化提供启发和突破口。

·设计过程中，数据可用于帮助决策。通过历史数据论证各个方案的优劣和有效性，再择优。

·设计评审中，数据可提升设计方案说服力。通过理性数据分析，获得团队内部成员、产品/业务方对方案的认可。

·设计上线后，数据可用于量化用户体验价值。通过采集上线前后的数据变化，判断设计目标的实现程度。

大家有没有发现在我陈述的过程中，一直在说数据分析，那这个数据分析是怎么来的来呢？

其实数据分析就像是一个个监控产品数据波动的摄像头，实时监控着数据的波动。以下是我整理关于数据埋点的理论知识，让大家对数据埋点这个概念有个清楚认知。

b 数据对设计师的三个意义

很多人会认为数据是产品经理、运营的工作，其实不然数据对设计师也是设计师的工作，我把数据对设计师的意义归纳为三点：

1）为设计提案做依据

产品设计者可以由产品经理，UX，UI担当，那需求不能自己凭空出现的，是由相关人员需找出来了，数据就好比一个放大镜，它可以通过线上的数据波动来找寻目前存在的问题即需求。其实这就好比设计师的思维又产品思维转换成数据驱动思维。比如

1、产品初期，没有产品、没有相关的后台数据，那我们要做一个什么样子的产品，就这一个需求。做什么样子的产品可以通过了解大众用户、了解大众市场的数据分析报告得出一个结论，明确我们要做什么样子的产品，这就是数据对设计师的第一个价值做设计提案的依据。比如以下这些场景都需要数据做依据进行设计提案。

2）验证方案是否解决用户需求

判断这个设计方案是否解决用户需求：

2、在多个设计上线后，产品设计、运营方案与产品研发的三方对设计师输出的方案存在分歧点。

也可以通过后台的数据反馈来筛选出哪个方案最符合产品目标（即北极星指标），在多个设计方案中最好的设计解决方案。

3）晋升中衡量设计价值的指标

当然也有一些公司，做为后期晋升，评判设计价值的一种方法。

比如怎么证明自己的设计方案和其他同事相比，设计方案就好呢？通过数据对比，说明自己输出的设计方案价值远高于其他同事，以此证明自己的价值。

3 数据常用于哪里

其实在我们的工作中有很多设计方法可以辅助我们设计更好的设计方案，比如用户调研，竞品分析，产品测试等。这些方法都是通过对用户数据的反馈和整理来判断去发掘方案里面的问题、验证最终方案是用户是否满意。

用户调研：可以把字拆解开来看就两个字面意思，调查：反映客观事实。研究：分析客观事实

主要的形式是用户调研和用户访谈，直接出过这篇文章，有兴趣的朋友可以查阅。

传送门地址：http://www.woshipm.com/pd/4745810.html

竞品分析：确定几款市场上竞争产品，然后通过对产品功能、产品定位，信息架构、颜色、布局、风格等元素的分析，找不同点，再通过数据对比确定产品方案的一种办法。

（因为不同职位做竞品分析的目的，角度和方法都不相同，这里我就不一一讲解了，如果大家有需要后期我会考虑开一篇怎么做竞品分析的文章）下图是制作竞品分析的常规流程。

产品测试：这种方法是用处最广的一种方法，可用性测试是指让一群具有代表性的用户按照指令对产品进行典型操作，同时观察员在一旁观察、记录。

比如我们发现首页Banner的点击率很低，这时候我们就要想办法「通过设计」来提升Banner的点击率，是Banner的大小问题？还是轮播图切换的速度问题？还是图片样式的问题？

但是设计师没办法直接确定他到底是什么问题，所以就需要拿出不同方案给用户测试，看看哪个方案更容易促进他点击。

常用的测试办法有很多这里我就讲三个方法：一个是可用性测试、一个是灰度测试、一个是A/B test测试。

可用性测试：通常在产品开发之前使用，模拟真实的使用场景让用户体验，目的是使用最小的成本来输出正确的设计方案，避免全部做出来以后在进行调试修改。

灰度测试：是指产品开发通过后，将测试的版本发布到真实的线上环境中去，收集用户的反馈。

A/B test 测试：是指产品测试通过并发布之后，同一个功能将使用人群分为两个部分，一部分人使用a方案一部分使用b方案，对比数据波动。

数据的纬度有很多，首先咱们先来看看产品的数据都从哪里来的。通常情况下设计师可以直接找运营人员、产品经理、设计负责人在公司服务器日志里面调取产品埋点数据；或者项目结束后，项目负责人会发产品复盘邮件，数据考核邮件指标等信息，产品埋点数据也会在复盘邮件中体现。

除了以上两点数据来源，还有CNZZ网站分析、百度统计、goodle anlytics可以查询到相关数据。

1 数据可以分为「三个层面」

产品中的每一项数据其实都代表产品的一个纬度的数指都有其意义，如果想用比较简单的方法记住这些有用的数据不妨试一试以下这个办法：

我们可以把数据分为三个层面进行记忆，即用户数据 （描述用户人群的）；行为数据 （描述用户使用方式的）；业务数据 （描述产品营收的）。

2 用户数据的「四个维度」

用户数据 （描述用户人群的）主要意思就是描述使用产品的这个人群的。这里有四个比较有价值的概念需要大家了解分别是存量、新增用户、用户留存、渠道来源这四种。

a 访问量

访问量也有人称其为活跃用户数、用户存量，其实都是一个意思。简单理解就是指一个人来到网站，然后浏览了一些内容之后离开网站的过程（这个过程也会被称为访问），既在特定的统计周期内，再次访问产品的用户称为访问量。有三个专业名词—DAU/WAU/MAU(日活/周活/月活)：每天有多少用户来用产品，每周有多少用户来用产品，每个月大概有多少用户来用产品，这是判断产品规模的最基本的指标。方便产品和设计人员了解产品的每日用户情况，了解产品的用户变化趋势。

DAU（日活）：某个自然日内访问产品的用户，算该日一次日活（统计结果去重统计）；

WAU（周活）：某个自然周内成功访问产品的用户（统计结果去重统计），这个指标是为了查看用户的类型结构，如轻度用户、中度用户、重度用户等；

MAU（月活）：某个自然月内成功访问产品的用户（统计结果去重统计），这个指标一般用来衡量被服务的用户粘性以及服务的衰退周期。

*这里补充一个知识点-去重统计：统计结果是按照设备去重统计，如同一个设备多次访问后台只记一个活跃用户。

b *新增用户

新增用户是一个企业很看中的数据，特别是在业务的起步阶段，这个指标尤为重要；这个代表公司的潜力。比如拼多多这家公司一年比一年亏损多，但股价却越来越高，主要原因就是资本市场看好拼多多用户的增速，按照统计跨度不同分为日新增（DNU）、周新增（WNU）、月新增（MNU）。

*在新增用户里面还有一个“用户流失率”的概念需要大家了解。流失率指那些曾经使用过产品或服务，由于各种原因不再使用产品或服务的用户，用户流失率=某段时间内不再启动应用的用户/某段时间内总计的用户量。

产品阶段不同，重心也会从拉新转移到留存，对于一个成熟的产品和饱和的市场而言，获取一个新用户的成本可能是留住一个老用户的数倍，流失率的降低也意味着营收的增加，在这种条件下，流失率的价值是显而易见的。

提到新增用户就一定要说《增长黑客》，这本书里边提到一句话非常精炼的概括了“增长”的概念：以数据驱动营销，以迭代验证策略。通过这句话应该就可以感知整本书的中心思想就是“数据”和“实验”，即AARRR（海盗模型）模型。通过阐述了一个用户生命周期的各个阶段——获客、激活、留存、变现、推荐和召回，实现用户增长的产品目标。

*a-ha moment：a-ha moment也叫Aha时刻中文翻译过来就是尖叫时刻，是增长的一个概念词汇，是指用户通过某个特定行为（产品内的功能体验）得到了很爽的体验，用户可以快速且准确的认识到产品的价值。例如很多知识付费类产品，都会让新用户完整的体验视频看课的流程并且感知到课程的价值，很可能变成产品的新增用户。

c *用户留存

上线的产品怎么反映用户的状况是不是健康呢？最好的指标就是留存率。即在某一统计时段内的新增用户数中再经过一段时间后仍使用产品的的用户比例（留存率=留存用户/新增用户*100%）。留存率又分为次日留存率，次周留存率，次月留存率等。

以上三个指标的数据越好能反映用户愿意留下来，才能说明他们对产品的服务满意，满意才能养成惯性，持续消费，例如产品改版后，次月留存率提升了，且其他变量没有变化时，说明用户粘性是上升的设计改版成功。所以这三个指标是产品体验最直观的数据。

1）次日留存率，常用来衡量用户粘性。

通过日留存率的数值来判断一个 App 的质量，通常这个数字如果达到了 40% 就表示产品非常优秀了，比如可以结合产品的新用户注册的转化路径来分析用户的流失原因，通过不断的修改和调整来降低用户流失，提升次日留存率。

2）次周留存率（7日留存率），用于判断产生的忠实用户数。

通过周留存率来判断一个用户的忠诚度，比如在一周的时间段里，用户通常会经历一个完整的使用和体验周期，如果在第七日用户还在使用产品，就可以定义该用户为忠诚度较高的用户了。

3）次月留存（30日留存率），用于衡量版本迭代的效果。

通常 App 的迭代周期为 2 - 4 周一个版本，一个版本的更新，或多或少的影响用户的体验总成用户流失，所以通过比较月留存率能够判断出每个版本更新是否对用户有影响，衡量版本迭代的效果。

d 流量获取（渠道来源）

根据字面意思来讲就是描述用户路径，来指的是这些人变成用户之前，都来自哪里；知道用户从哪里来才能知道在哪个渠道做推广会更有效，一般和用户留存的数据搭配使用。

3 「行为数据」的五个纬度

关于行为数据是数据中的一个重点知识，此次主要讲解次数/频率、点击率、转化率、用户停留时长、跳出率、退出率这个五个纬度。

a 页面访问次数（pv）和人数（uv）

这两个指标能够了解用户的使用行为，衡量页面入口的设计和与其他入口的设计相比是吸引用户的注意力的核心指标。

·页面访问次数（PV ；PageViews的缩写）用于判断该活动/页面/功能被用户查看的次数，即页面浏览量；

·页面访问人数（UV；Unique Visitor的缩写）用于判断有多少个用户查看过该活动/页面/功能，即访问深度，也就是指用户的访问深度（总产品流程的体验完成度）。

b 点击率(CTR)

点击率（人均点击次数）是指网站页面上某一内容被点击的次数与被显示次数之比，即点击次数占展示次数的百分比。通过人均点击次数可以判断交互/视觉的设计要求是否足够引人注目，也可以用于衡量该功能对用户而言是否为强需求。通过下面这个案例让大家了解一下用法，比如7月7日10万人点击了“确定”按钮，其中一共点击了12万次，那么点击率（人均点击次数）为12/10=1.2次。

*点击率中也常常会结合pv和uv的数据使用，即PV点击率=点击次数/页面访问次数（PV）；UV点击率=点击人数/页面访问人数（UV）

c *转化率

转化率即达到产品某个目标的访问量除以总的访问量，或达成目标的访客数占总访客的比例，即转化率=转化次数/访问次数。简单理解转化率是把用户分为“只逛不买”的用户，还有“逛了 就买”的用户，还有“逛了买买买”的用户。

为什么说转化率很重要，因为转化率常常是项目中企业最为看重的一个数据，毕竟转化率高了公司收益也就提高了，而且转化率的提升也常常是解释设计方案最好的支点，比如：在国外的养老计算器中，用户需要输入相关的字段后查看计算结果详情，最后得出计算结果，在这个流程中用户的转化率很低（在结果详情中会有金融产品）。但是如果把结果前置，比如新方案把输入字段，结果详情和计算结构都放在一个页面展示，就会提高用户的购买决策，大大提高转化率。

这里有一个思维方法即漏斗分析法，大家需要了解：

漏斗分析最常用的是转化率和流失率两个互补性指标。用一个简单的例子来说明，假如有100人访问某电商网站，有30人点击注册，有10人注册成功。这个过程共有三步，第一步到第二步的转化率为30 %，流失率为70%，第二步到第三步转化率为33%，流失率67%；整个过程的转化率为10%，流失率为90%。 该模型就是经典的漏斗分析模型。

d 用户停留时长

这个指用户在产品中的停留的时长，即所有用户session的时长总和/session数量。也有产品通过用户停留时长去衡量页面吸引度、判断用户粘性和依赖度，举个例子，抖音的页面内容吸引度就很强用户粘性就很高，用户的停留时间也很长。回想一下，是不是每次刷抖音，很快一个小时就过去了。这里的商业逻辑是，用户停留的时间越长，在产品中用户付费的可能性就会越大。

总结一句话：停留时间越长，用户粘性越强。当然也有反面场景，比如登录注册的表单填写，停留时间越长，说明体验越差。

e 跳出率（BR）

跳出率指该用户来到网站后，没有进行操作就直接离开的比例，即访问了一个页面就离开的访问量与所产生总访问量的百分比，跳出率等于访问一个页面后离开网站的次数/总访问量*100%。

这里有一个容易混淆的概念即跳出率和退出率。其实这两个数据都是用于衡量页面的内容质量或交互质量的一个指标。比如当用户进入 app后，只访问了一个页面就离开了，跳出率和退出率越低说明流量质量越好，用户对产品的内容越感兴趣。

4「业务数据」的四个纬度

接下来我们来看看三层数据中的最后一层概念——业务员数据，即和财务相关的数据知识。

a 总量

GMV (Gross Merchandise Volume)，这个词太常见了；大公司在发布财报、销售额、成交量的时候，这个数每次必提。*值得注意的是GMV=销售额+取消订单金额+拒收订单金额+退货订单金额，包含付款和未付款两部分。

b 人均

ARPU（Average Revenue Per User，每用户平均收入），光总数高还不行，我们还要关心平均每个用户的贡献是否够多，是否在增长，所以就要关注人均的指标。它是 App 成功的指标，是用户忠诚度的反应，是预测用户增长的工具。

c 付费率

整个产品业务也要有一个健康度的指标来衡量，付费率就是这个衡量指标。到底有多少比例用户是付费用户，这就是付费率。我们通常会把付费率和ARPU值放在一起分析。一般该产品的付费率越高，这说明用户对该产品的认可度越高。

1 数据也许会骗人

数据并不会骗人，而是人看的数据不同，造成结论不同。在使用数据之前我们要认清楚以下三点偷换概念、只看单一纬度、数据不是万能的。

a 偷换概念

今年7月美国总统特朗普举了一个案例，我记忆犹新。在一个电视采访节目中他说“美国的死亡率低于欧洲的水平”他的算法是所有新冠死亡人数除以所有确诊人数得出右侧数据。

其实他就是偷换了一个概念，在医学上有两个指标去衡量死亡率，一个是病死率一个是死亡率。

当然两者在算法上是不同的，如果看病死率的话，美国的确低于中国，但是如果按照死亡率的结果看的话，美国是远高于其他国家，中国是美国相比一百五分之一，这结果是恰恰相反的。

这里就是一个偷换概念的例子，虽然病死率和死亡率都能反应生病的人数，但是病死率考虑的是救治能力。死亡率不仅考验救治能力，还考验着控制传播的救治能力。

b 只看单一纬度数据是表象的

如果单从一方面看数据是没有意义的，没有其他数据参照，挖掘不出数据的真正价值。

比如：我们在讨论一个产品是否成功时候，往往会看一个最突出的纬度数据，比如这个产品有2亿的日活，这个平台有5000万的产量。

也显然这种只盯着用户数量和产品规模的产品的做法是不对的，他并不能真实的反应一个产品是否成功，假如一个产品的日活是2亿但是愿意付费的用户不到1w，这个平台虽然有5000w的产量，但是用户的平均停留时长很短，很显然这并不是一个很高兴的事情，因为可以从侧面保暴露出产品的质量可能存在问题，导致用户付费意愿不高，停留时间较短。

c 数据有局限性

我们要搞清楚这样一个认知，数据虽然可以最为直观的反应产品的健康程度，但是数据绝对不是万能的，他只是衡量产品的用户体验的工具，就好比我之前写的问的用户调研的文章只是一种工具也存在其局限性，数据只能告诉waht，但是不能告诉why，而这个why是设计师做方案选择的关键所在。

2 数据应该怎么用

数据本身并不会欺骗人，他就真实存反应产品的表现，只是很多人用错了使方法或者认知出现了偏差，如果想把产品数据的价值利用率达到最大化，建议每次做数据分析时候从以下三点使用数据：

a寻找关键数据目标

为了避免偷换概念的情况出现，除了我们要理解数据概念之外，更重要的是寻找出关键的数据目标。

以上讲了这么多数据名称，但是大家需要注意的是并不是每个产品都要看这些数据的，不同的产品需要看的数据侧重点不同，就比如qq音乐看的是日活跃用户、淘宝看的是销售额、王者荣耀看的用户平均付费额度（appu），新浪新闻客户端看的是网站访问数量（uv）。

1）用户生成内容(UGC)类数据指标

UGC（User Generated Content）指用户原创内容，从进入web2.0时代后UGC第一次被论坛/社区应用，到今天，互联网产品或多或少都带有一点UGC属性。这些产品主要有抖音、知乎、人人都是产品经理、站酷等。

评价这类产品往往会从发表文章、用户点赞、订阅、评论、分享、打赏等几个数据指标进行评判产品是否健康。

2）电商类要看gmv

GMV（全称Gross Merchandise Volume），即商品交易总额 [1] ，是成交总额（一定时间段内）的意思。这个实际指的是拍下订单金额、包含付款和未付款的部分。

休息一下

听了脑袋大了同学不用担心，我特别绘制了下面这个表格，保存截图慢慢看就好了。

b 找好参照物A&B test 测试方法

多数产品在进行数据分析的时候，最常用的方法就是A&B test 测试法。（上面讲到了A&B test 测试发）

1）案例一

很多时候我们看数据不能看一个纬度，要看两个或者多个纬度，才能筛选中自己需要的结果方案。

比如这个案例在探究“与用户强相关的 BI 品类楼层，商品展示普通利益点和带券利益点，哪个更优？a方案展示普通的利益点，如“销量过万、好评率99%、满199减100”。b方案只展示带券利益点的文案，如“满199减100，领券”。

最后看的数据是A方案的点击率高，b方案的曝光点击率更高（由于方案 B 中可领券和点击跳转商详，可能有部分点击为领券导致，故方案 B 点击更高但点击转化偏低）。

如果单独看点击率或者转化率很难做出选择，但是只要两个数据综合看，就很容易得出B方案（带券利益点）能带来更高的曝光点击，引入订单表现更优的结论。

2）案例二

在做A&B test 测试时，是需要保持单一变量测试，现实生活中，很难做到单一变量测试，所以数据很多时候都需要进行分析探讨，才会有价值。

比如我们在首页流量分发场景中做了A,B两个视觉设计方案，a方式是所有的品类展示使用魔方圆形坑位，b方式是方形坑位。想探究方圆形坑位和方形坑位，哪个更能吸引用户点击？

最终A方案（圆形）用户点击数据为4.87%，B方案（方形）的用户点击数据为15.85%，那么，从这个A&B test 测试法的结果中就可以推导出B方案（方形）更好吗？

事实可能并不是，大家仔细观察不难发现，两个方案除了品类的背景造型不同之外，品类的种类也不同，文案的描述也不同，没有做到保持单一变量的测试环境，所以B方案（方形）更能吸用用户的点击这个结论是不成立。可能成立的是方形的展示面积比圆形的展示面积要大，可以更好的曝光产品的特点，而且促进B方案（方形）更吸引用户进行点击。

c 采用多次定性+定量验证

我们得到了数据其实可以采用多次定性+定量验证这种方式来验证我们方案是否解决了用户需求，是否完成项目目标。

定性可以采用用户访谈、眼动测试、可用性测试等方式去发现问题（需求）的多样性和严重程度。定量的方式有用户问卷、站内行为分析、A&B test 测试等方式，验证这个问题的发生概率。

比如我们可以通过五次定性质、三次定量的方式，通过数据反馈把结果更加靠近真实。

3 了解双面数据（虚荣数据）

什么是双面数据呢，其实也就是那些看上去很好，却不能给这个产品带来丝毫价值的数据，需要对比着看才能了解数据的价值。

a 点击率（CTR）

比如一个用户在有些资源位连续点击或者因为一些利益性的活动补贴引发的点击量变化这类场景在用户人数总量不变的情况下，单独位置的点击量增加，必然会导致其他部分的点击量降低，其实是0和博弈，增加这个功能的点击量是片面的。

b 访客数（UV)

计算访客数只是一场毫无意义的人气比赛，其实访客数可以分为三个类型即曝光UV、点击UV、意向UV，单纯地看这三个uv是没有意义的，除非能让用户做对产品有利的事。比如，在推出活动时，有多少用户能转化购买？只有知道了这个数字，这个用数据数才是有价值的。

·曝光UV即曝光在视野内的访客数，例如我们在淘宝搜索某个产品进入了搜索的feed列表页，当我在这个列表场景停留2-3秒的时候，我没有购买任何产品的情况下，数据就会判定我为一次曝光UV。

·点击UV即有点击行为的访客数，还是以淘宝做为例子，现在我在feed流列表页面里搜索产品，其中有一件是我比较中意的产品，我点击了产品进入到这个产品的详情页，在我没有购买任何产品的情况下，我发生了点击行为，数据就会算我是一个点击uv。

·意向UV即进入意向页面的用户数，其实这个和点击uv有点像，比如我在淘宝搜索完我想买的产品a,有去京东搜索了一下，那京东就会判定我为一个想要购买产品a的意向uv，这个意向uv只可以判断出我们对a产品是否感兴趣，并不能判断出我真正想要购买。

c 停留时间

用停留时间数据来统计用户参与度或活跃度，他并不能说明什么问题。比如，客户在某个全是文字内容页面上停留了很长时间，有可能是看不清楚或者是文字理解难度影响了用户的阅读时间，所以说产品效率、体验这两个关键指标本身就和停留时间相矛盾。

d 下载量

尽管有时会影响你在应用商店中的排名，但下载量本身并不带来价值；还需要参照的是：用户下载后的激活量、账号创建量以及用户在产品中的各个场景的跟踪。

e 退出率（ER)

很多人会有一个误区，认为退出率高是不好的一项数据，但是大家要明白并不是所有的场景跳出率越低越好，举个例子：我们通过漏斗数据发现用户操作路径太长，把好几个步骤的路径缩减到一步操作，最后看到用户退出率就减少了。

最后大家要清楚

数据是用于支撑设计师的某项设计决策和方法，但数据无法代替设计的直觉，更无法代替深入的用户研究、我们要学会利用数据指标，找出问题所在，通过设计方案改变用户行为，因为数据最终目标在于价值的体现：有效获取用户，创造营收。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

“民无信则不立，业无信则不兴。”——可见，信任力对于一个国家或是企业来讲是非常重要的基础。

据权威机构数据显示，2021 年第七次全国人口普查后，在我国 14.1 亿人口当中，租房人群已经超过 2 亿，租房已经成为一二线城市年轻人生活的新常态。整个租房市场在疫情过后也逐渐回暖，各大租赁平台竞争日趋激烈，争相拿出各种补贴政策吸引租户，前有自如针对毕业大学生按月付、0 押金的“海燕计划”，后有泊寓推出的 98 折入住、免费换房的“港湾活动”。在互联网技术日趋成熟、人口红利逐渐消失的当下而言，平台的服务能力趋于同质化，需要比拼的是谁有更深的内功基底：那就是打造出差异化的竞争核心。差异化的竞争核心对于房产、金融行业来讲，就是企业（平台）的信任体系建设，从满足用户基础的功能诉求——建立起用户与平台信任的关系——最后让用户对平台（产品）产生信仰与依赖，和Apple、Airbnb这样的公司一样，最终实现品牌的溢价价值，这也是马斯洛需求层次理论——满足用户从基础的生理需求到自我价值的实现。

图 1 马斯洛人的需求层级与产品价值层级映射

此外，我们在 19 年贝壳租赁满意度报告中发现，用户在对租房信息渠道的选择上更关注真房源和平台的可信度等方面。因此，我们希望打造一个简单、安全、可信赖的线上租赁环境，帮更多用户解决租房问题，建立起租客、房东与平台的信任链接，从而构建起整个平台的信任价值体系。

图 2 用户原声

产品中传递给用户的信任是什么

我们先看一下信任的定义是什么？

在社会科学或心理学中来讲，信任被认为是一种依赖关系，是一种稳定的信念，指的是个体对周围的人、事、物感到安全、可靠、值得信赖的情感体验，在个体感到某人、某事或某物具有一贯性、可预期性和可靠性时产生，值得信任的个人或团体意味着他们寻求实践政策，道德守则，法律和其先前的承诺。———出自《百度百科》

对于产品给用户的信任感来讲，可以拿恋爱的过程举例更为形象：

初识——信任——恋爱——信赖——结婚

图 3 恋爱的过程：信任感的建立

用户最初接触产品时，虽然有清晰的目的诉求（找个靠谱的伴侣共度一生），但是因为认知不够，并不能了解产品能帮自己解决怎样的问题，带来怎样的价值，这个时候需要产品通过各种方式来建立与用户的情感链接，也就是建立信任感（恋爱）的过程，只有解决了用户核心的诉求并不断给用户提供预期外的惊喜，用户才会慢慢认识到产品的价值，变的越来越离不开了，这个时候就自然而然的进行下一个环节转化(结婚）了。

所以说从产品层面去塑造信任感就是：理性（解决用户最基本的核心功能诉求）+感性（提供用户超预期的服务）这样的过程，需要注意的重点还是解决用户核心诉求为准，让产品变得能用并好用，否则一切都是空谈。

刨析问题&信任归因

通过前期的电话访谈和问卷调研，我们发现贝壳租赁用户对平台信任感较弱，存在怀疑平台房源真实性、经纪人服务质量、平台隐私安全保障等问题，于是我们首先定义了用户对与社会、对行业、对平台的信任度初始阈值，用研同学依此为基准进行问卷投放，利用结构方程模型对结果进行验真及提炼，最终总结出包括平台背书（例如强化贝壳真房源保障）、隐私保护（用户个人信息不会被泄露）等 12 个方面的信任关键因子。

我们由此梳理出了 10 多个触点作为搭建租赁业务信任体系的主脉络，希望通过稳固认知、建立保障、提升质量、构建共情能力等方面入手进行系统改造。

图 4 信任初始阈值及关键因子沉淀

如何搭建产品的信任感

通过前期对关键因子的梳理，我们总结出了匹配业务诉求、建设心理预期、强化品牌背书、建立服务保障、营造情感氛围、精琢设计细节等 6 要素作为产品设计中搭建信任体系的指导准则，下面我会以租赁首页、心愿单改版等案例逐一拆分来讲。

图 5 分层拆解信任 6 要素

1. 匹配业务诉求

我们通过数据发现，有近 30%的用户是通过首页搜索来找房的，但是根据满意度报告结果来看，好多用户提出了搜索维度少、关键信息不明显等问题，同时在搜索过程中，我们也看到了用户对地图找房、区域搜索功能有更高的期待。

图 6 用户基础诉求

同时我们对旧版本的心愿单进行了数据分析和调研发现，有主动表达找房诉求且成交的用户仅占总成交人数的 6%左右，心愿单并没有很好的匹配用户的找房诉求，原因在哪？我们梳理了 3 个问题所在：1 是旧版本的心愿单简单的把用户之前带看、咨询、关注过的房源一股脑塞在了一起，变成了房源列表的收藏夹，弱化了心愿 2 个字，对用户帮助作用不大，而用户对于找好房、找对房的主动表达诉求并没有得到满足；2 是联系经纪人的商机入口随处可见，用户在操作时容易误触与经纪人的对话窗口，引起心理反感；3 是用户添加了自己感兴趣的房源到心愿单后，产品没有提供用户后续的服务支持，导致用户慢慢流失掉；

结合上述问题，我们重新定义了首页和心愿单的业务核心，也就是提供给用户找房过程中主动表达自己诉求的窗口。在新版首页搜索中，我们新增了预算入口，并强化了搜索时的区域、地铁等关键信息帮助用户更好的进行决策；

同时在心愿单中，我们让用户可以快速的创建自己的专属找房卡，根据用户日常浏览、关注等行为向用户推荐相似房源，满足其不同维度的找房诉求，另外我们弱化了商机展位，避免不必要的打扰，让用户在安静的场景中持续感受到心愿单带来的服务帮助。

图 7 新旧搜索功能对比

图 8 新旧心愿单功能对比

2. 建设心理预期

大多数人都会遇到这种情况，当决定做一件事时就会产生很高的心理预期，且随着时间越长，预期会加倍的增长，当结果出现后，一旦和自己的想象出入很大时，就会产生很大的挫败感，甚至会选择直接放弃；

由此可见，在做产品设计时，帮用户建设好心理预期是很重要的；在新版心愿单设计中，就很好的利用了这一点，当用户在首次进入时，通过宣传导语能一目了然的感受到我们的服务宗旨， 我们强调一起帮用户规划心愿而不是简单、机械的创建一个表单，整个产品的背后有大数据和平台的服务支撑，它不仅仅承载的是用户的找房功能，还能帮助用户具体描摹出对租房偏好、体验的直观感受，让用户对心愿单的认知更加清晰明了；另外在用户点击关注房源后，我们也会通过提示的方式提前告知其下一步动作，避免用户搞不清从哪里能看到自己选择的房子。

图 9 强调服务主旨，建设用户心理预期

3. 强化品牌背书&建立服务保障

针对之前满意度报告我们发现，多数用户在租房、买房等进行大宗消费时往往都缺乏安全感，因为担心遇到假房源或者是租金过高的情况，所以在设计产品细节时，我们格外重视品牌和服务保障的宣导，例如在心愿单详情页里我们把客观的浏览数据和价格浮动变化进行外露展示，目的就是增加用户对产品的真实认知，进而获得安全感；在具体的房源详情页里，我们也在宣导贝壳平台真房源、贵必赔的服务保障，打通产品与用户之间的信任隔阂。

针对其他品牌长租公寓频频爆雷的情况，贝壳第一时间上线了公寓租房安心保障计划，我们将权益细则根据用户线上看房、下订、签约、支付等流程拆分为遇假房必赔付、未留房必赔付、有违约必赔付、有损失必赔付 4 大权益点进行强化宣导，并将常见案例以问答形式浓缩成风险提示进行外展，加强用户的安全防范意识。

图 10 透传保障权益，强化用户安全感知

4. 营造情感氛围

人类的行动和感知经常会受到情感所支配。因此调动用户积极情绪，打造情感上的认同和共鸣，是产品建立信任体系的重要环节。心愿单所描绘的宗旨就是用心服务帮你找到理想的家，通过描绘家的理念，我们希望带给用户也是温暖、贴心的感受，所以我们从设计层面上对整体的文案进行了精细打磨，让统一的情感化语言贯穿全流程，例如在找房卡上，我们没有采用常规的疑问句形式，而是选用设问句的形式来调动用户情绪，营造温情氛围，例如“你的租房预算是多少？预算多少都是自己温暖的港湾；”“你想在哪里租房？风景优美、交通便利你都可拥有”通过这些精心设计的文案，我们希望给予用户“我即将要做的事情是与往常不同的，是有意义的”心理暗示，也有心愿单“许愿”过程的仪式感。

5. 精琢设计细节

当人们下班后回到家中后，有些人会选择从冰箱里随便翻出点食物凑合着做为晚餐；而有些人则会从超市精心采购食材并根据菜谱烹饪，菜肴出锅后，还会仔细摆盘，并拍个美照上传朋友圈；快餐虽然解饿，却难以满足用户更深层次的情感体验；产品设计也是如此，因为更专业，所以更信赖，专业的产品能带给用户更多的信任感和安全感，而精致的 UI 界面就是产品严谨、专业度的直接表达。我们可以看到旧版的租赁首页、心愿单在视觉情感化表达较弱，难以让用户产生好感和信任的链接，在新版设计的过程中，我们围绕着“理想的家”的主题进行了精致的场景插画绘制，并利用文字排版合理拉大了空间，让原本拥挤的信息内容呼吸感更强；整体色彩延用了租赁频道的主色调-暖黄色，也是跟主题“家的温暖”保持契合，带给用户一致的视觉感受。

图 11 精致的视觉表达满足用户更深层次的情感体验

小结

图 12 信任心智模型

信任心智是可以通过改变关键因子进行优化和重塑的，同时人的信任度也是分层级的，分别由自我信任-关系的信任-组织的信任-市场的信任-社会的信任组成，所以产品的信任感营造需要从多方面维度去打造的。我们先要通过数据分析、定性访谈等手段，定义出用户对于社会、行业、平台本身的信任边界在哪，“例如用户对贝壳平台提供的服务保障了解多少，真房源的感知程度又是多少”，并基于此梳理出服务专业、信息透明、内容全面、服务专业等关键因素作为搭建信任体系的主脉络。最终的实现主要分为三个层面：本能层上通过精致的插画设计、人情味的文案话术、明晰的交互引导来凸显服务场景的仪式感和品质感；行为层上打造公正的信誉评价、完善的客服系统、安全的支付体系、完整的房客信息满足用户的诉求；反思层上宣导（真房源、贵必赔）的平台服务承诺夯实用户的信任基础；达成由基础诉求满足（用户能用）——能提供用户超预期的服务（用户易用）——再到与用户彼此建立起良好的信任体系（用户爱用）——最终打造一个有品牌信仰的服务平台。

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

文章来源：优设  作者：贝壳KEDC

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

前言：

入行做车载 HMI 已有 2 年余久，也该沉淀输出一些行业内容，HMI 行业还是一片蓝海，很多设计师都不敢轻易的进入这个新型的行业，觉得有难度、门槛、视觉要求高、这篇文章先带你入行，文章还是以一些 HMI 基础知识作为讲解，在设计规范方面的内容，我会添加很多干货结合实际案例讲解。

先给大家打一个预防针（规范是用来打破的，本篇文章只做为参考价值）

1. 设计规范包含什么内容

设计规范包含视觉规范和交互规范，本章节先说一下视觉规范，车载交互内容会安排在后续写作中…

2. 视觉规范：

车载端设计和移动端、web 端设计显示差别还是蛮大的，最主要的差异就在于布局的不同，接下来我们从文字、颜色、布局、圆角、图标等角度讲解，PS：偶尔还会穿插一些工作心得的内容。

文字规范：

文字是 UI 界面设计中重要的组成元素，对于文字的使用是检验设计师基础功底的时候，用得好坏会直接影响到用户在使用产品的过程中的一个体验，文字的使用从这几个纬度出发：字体选择、字号大小、颜色、字重、行高.

1. 字体选择

（我要做一个良心的博主，让你们避免侵权问题，别再傻乎乎的犯字体侵权的错误了）

在做车机系统设计的时候，需要选定该款车机中文、英文、数字或多国语言需要用什么字体。如果在乙方公司呢，客户会指定给到你字体包，插播一段小插曲（职场心得：当客户选定字体后，如果该款字体是付费字体，你得先和客户确认是否得到使用许可，避免后续官司纠纷）在甲方爸爸工作的同学一般会遇到两种情况：

• 公司已明确字体（请专业字体设计师设计一套）
• 用常规设计的字体，建议使用中文字体：思源黑体、英文/数字：Roboto。如果有做海外项目的，对于 Roboto 未涵盖的语言，建议使用 Noto Sans 字体。Noto Sans 源自类似于 Roboto 的度量标准，旨在实现视觉上和谐的国际化。

这边肯定会有人问为什么不能用苹果字体呢？它不是免费字体嘛？

普及一下：首先该车机系统属于商业用途，未得到许可使用，这就是侵权，在 app store 上 发布的 app 是可以免费使用的，因为这是在苹果生态下使用，所以不属于侵权。

2. 字号大小与字阶

车机端的字号大小的制定也是要循规蹈矩

字号肯定要远大于移动端和 web 端，为了确保文字信息的扫描性，结合了：基于 IDX & 同济 (2020) 百度 Apollo 中控视觉基础研究项目，设置清晰的文字阶级参数，还有谷歌 Android Automotive OS 研究，以下是用字的规范（标红色区域是他们之间的区别）

可参考谷歌：字体大小的遵循 4px 倍数大小增量

我们在做项目的时候，规定的字体大小维持在 4px，这样有助于保持一致性和视觉层次感

用字的注意事项：

字体大小控制在 20px，这个要谨慎使用，一般都是使用在小标签辅助类的文字上，最小的正文字号为 24px

设定文字规范有两个好处：

• 文字样式复用，不管对于设计师还是开发同学来说，都是极大提高工作效率的一件事情
• 对于界面设计来说，有规可循，避免设计时降低整体的视觉感

3. 字体用色规则

• 文字与背景颜色对比度要遵循 WCAG 的标准，需要考虑到无障碍设计需求，因此保持在 4.5:1 – 7:1 对比度，确保文字清晰易读
• 将注意力集中到最重要的区域内容
• 文本元素之间传达视觉层次感

4. 字体字重

字重是指一种字体的粗细样式，下面展示字重的种类：

上实际案列讲解：

谨慎使用中等字体粗细 ，尽量别用最粗的字体，这样会使得页面感觉差别很大，过度的不是那么自然，没有了细腻、轻盈的感觉。所以在制定字体规范的时候就尽量将 Bold 字重去掉，如果你想通过加粗字体的方式来和下面信息作为区分，请选择 Medium 字重（根据实际项目需求来定，我的规范只做参考价值）

5. 字体行高

为什么要加这一 pa，因为这个问题一直有小伙伴问到我，我就一次性解决了，文字模块需要增加安全距离，这块比较复杂。不行我后期录一期视频讲解，下文也有详细的讲解。

字体文本的高度一直困扰着设计师，我该用什么方式去对接开发？在设计过程我们是否可以使用文字字号的高度进行对齐方式，而不是使用文字区域的行高？NO 肯定是不可以的。

微信朋友圈主页作为案列：

文本的行高肯定是要大于字号的，个人动态的字号为 16px（在@1x 设计稿中）如果是多行文本的时候，微信是手动调整了文本行高（正常 Line：22px 微信实际 Line：20px），当行高为 20px 的时候，需要将文本上移 3px 才能使得图片和文本视觉在一条线上面，如果按照这个进行开发的话，开发小哥需要在 CSS 属性过程中注意图片和文本之间的实际差异，这种左右高度不一致的设计，会直接导致在开发布局过程中变得更加繁琐。

最后的结论：按照文本的行高来对接开发

普及一下小知识点：车载段落的行高一般为字号的 140%-180%的视觉呈现，提供舒适的阅读环境给到用户（取整数）

下面是一些专业性的知识 了解一下：

在设计字体过程中，字体设计师一般都会给字体预留安全距离，让字体展示更加稳定。

我们在做设计的时候，将字号设置为 30px，但实际字体的空间是需要包含上下部分的安全距离，最终实际高度就变成了 42px（Font:pingfang） 穿插一个小干货：在不同字体下相同字号，行高（Line height1）是不同的，Ant Design 的 30 号字，行高为 38px （详见配图计算方式）

颜色规范：

1. 使用场景

场景：白天阳光暴晒（阳光强度有很多档位早、中、下午） 、 梅雨季节阴雨连天 、夜晚模式、地下隧道等。

驾驶汽车在室外不确定因素会比较的多，光线强度的干扰尤其重要，照明会根据一天中的时间，天气，窗户的色调等等而有很大不同。当你设计的车载应用程序在现实世界中使用时，设计时在计算机上看到的颜色并不总是相同。考虑颜色亮度如何影响驾驶条件，以及低对比度的颜色在阳光直射下如何被洗掉。始终在多种光照条件下预览您的应用以查看颜色的显示方式。如有必要，请进行调整以便在大多数案例中提供最佳的观看体验。

最初车机厂商系统大多数都是偏爱深色背景，具有代表性的两家系统谷歌的 Android Auto 系统和苹果 Carplay 系统，我在做项目最初也是沿用了深色系。

2. 色彩中的“TF BOY”组合

我想用一句苹果的官方话说：“配色可以提供交互性，提供视觉连贯性，并且对界面赋予生命力。”这句话总结得真的非常到位。集中注意力认真听，重点来了，UI设计中颜色的使用法则，在一个页面设计中需要讲究 60-30-10法则， 在60％+30％+10％的比例下创造一种平衡感，是为了视角能够从一个焦点舒适地过渡到下一个点，避免给驾驶中的我们产生视觉落差很大的感觉。

一个项目车载系统的色彩规范，包括了品牌色、语义色、中性色。

品牌色：又称为 “强调色“ ，通常一个车载系统只有一个品牌色，也是出现频率较高的一种颜色，强调色一般使用场景为：tab 的切换选中，按钮开启状态、音乐在播放中的音符小动画等等 （拿我练习稿讲解）

语义色：语义色需要在 UI 界面中承载着具有准确的信息传达，在复杂场景里颜色的倾向性应十分明显，减少用户的理解成本和理解时间，给出行体验者带来良好的驾驶体验。

根据交通标志的定义，红色表示禁止、停止、危险，那么用户需要在第一时间识别出这种信息，黄色为警示或不良结果等，绿色则代表通行、成功，上诉说的颜色为状态色。下面要讲一下功能色：说到链接色，大家第一时间肯定想到的是蓝色。

中性色：主要用于除文字外，还被运用到背景色、分割线、置灰填充、边框、等场景中 （注：根据背景色的变化，系统其余颜色也随之而变，这是两套用色规范切换）。

3. 如何制作 HMI 色彩规范？

尽量使用较少的颜色，颜色饱和度不要过高，避免对驾驶的视觉干扰，吸引驾驶者的注意力，让老司机翻了车。

避免让交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的颜色，则很难知道在何处点击）。

保持色彩一致性（请勿使用不同的颜色来任意区分单个屏幕中的重复组件。当颜色不能增加价值时，请谨慎使用）。

建立视觉层次（通过不透明度值或者是同一色系，但不要过多的使用不透明度或对比度）。

尽量使用深色背景，这是市面上很多车厂的选择（不过蔚来、特斯拉、小鹏、carplay 都相继推出了白色版本，来适配白天，我们项目中后期也加入白天模式，经过路测在阳光很刺眼情况下，黑色会反光，无法看清显示屏幕内容），最终在实际各种照明条件下，对应用配色方案进行测试。

车载 UI 系统中使用足够色彩对比度，上述在使用场景中有所提到。

继续讲干货

(在后续文章安排里我会单独拿出 WCAG 从感知，可操作性，易于理解和稳定性去详细讲解，这次先挑重点说)

WCAG 全称是 Web Content Accessibility Guidlines（网页内容无障碍指南）它们是一组是网页内容更容易访问的建议，主要针对残疾人。一共分为三个级别 A（最低）、AA、AAA（最高）

讲个概念：两个白色的对比度是 1:1 , 白色（#FFFFFF）与黑色（#000000）的对比度为 21:1

做颜色对比的网站链接，搭梯子访问：https://next.rsuitejs.com/en/tools/palette

要满足 AAA 级准则，文本视觉呈现及文本图像至少要有 7:1 的对比度，针对大号文本以及大文本图像至少有 4.5:1 的对比度

总结：

对于颜色运用的细节，是证明了一位设计师的深度、且具备耐久力。上述内容对于颜色的规则不适用全部的设计方案，还是具体项目具体分析，用户人群不同，运用场景也不一致，比如驾驶者和后排人的屏幕设计内容肯定会有差别。还有一个点在设计需要阅读内容页面，例如：微信发来的消息、设置中文本，最好能够达到 AAA 标准。

布局规范：

HMI 的设计和其余终端设计，最大的差异就在于布局，布局是整个页面设计的框架，也是最重要的内容之一，在讲该模块内容，我会从实际项目案例出发。开始制作车载 UI 系统，需要和汽车厂商确认车载 UI 可在屏幕中，设计的尺寸区域（注：其中“屏幕”是指应用正常工作空间而不是到边缘的全部空间，有的厂商把固定按键也镶嵌这块区域中）。

1. 屏幕尺寸有多少种类别？

我们先要了解一下热门和主流车机分辨率。众所周知我们车机上的屏幕尺寸和分辨率种类可以说是种类繁多，在设计过程中设计师主要还是关注屏幕的分辨率是多少？（ 需要我们设计的屏幕为仪表盘、中控、有的车载还包含有副驾驶和后排娱乐屏幕 ）

特斯拉（Tesla）

Model3 1920*1200 15 英寸（底部控件的尺寸为 120 像素是固定 ）Model S/X 用竖屏设计 分辨率 1200*1920

蔚来

ES8 10.4 英寸 分辨率 1600*1200 / ES6 11.3 英寸 分辨率 1600*1400

理想 ONE

比较特殊，它拥有 4 块屏幕，仪表盘 12.3 英寸 1920×720 / 中控屏 16.2 英寸 2608×720

副驾驶娱乐屏 12.3 英寸 1920×720 / 再外加功能控制屏 10.1 英寸的 1280×720

小鹏

G3 竖屏幕 15.6 1920×1080 P7 控屏，在目前汽车产品中属于分辨率较高的梯队 2400×1200 精度超过 2K（普及一下 2K 分辨率标准为 2048×1080 像素）

接下来给大家观看苹果的 CarPlay 系统分辨率和谷歌车载系统

CarPlay 系统分辨率：800 * 480、1280 * 720、960 * 540、1920 * 720

相信大家已经找出规律了：在设计横屏的时候高度基本都为 720px，其余横屏幕按照比列缩小。

这块内容非常重要，以至于关乎到后面整个系统的布局方式，苹果的 CarPlay、谷歌 Android Auto、国内的百度 carLife+等都有自己的车载系统，如有的车企屏幕分辨率不一致，就无法适配成功，会出现拉伸等现象，除非通过定制化服务重新按照厂商的尺寸去重新搭建一套。我们项目中涉及到的屏幕和 CarPlay 尺寸大致很像，但布局方面我们有自己的想法，后面在自适应布局中会提到。

2. 间距的规范制定

制定一组间距值，用于布局中元素和组件之间的固定纵向和横向的间距，参考规格布局 8 像素点网格上构建，这意味着规范中的 UI 组件和元素之间相隔 8px 的倍数

谷歌 Android Auto 间距规范一共制定了常用的九种数值，P0 – P8

注意事项：提供 4px、12px 间距大小，是为了对齐较小的元素之间的距离，这两个数值谨慎使用，在大屏幕车载系统内，也有很多间距需要大于 96px，因此在对于这些数值制定规范的要求就是 8px 的倍数即可使用。

说到这边肯定会有人有疑问，我们在做规范时能不能将间距不设定成 8 的倍数，4、5、6……倍数是否可行呢，当然是可以的，“规矩是死的，人是活的“。只要是按照倍数叠加完全都 OK，如果选定一种倍数，就不能加入其他倍数，如果页面出现多种间距会使得页面没有节奏感，打破了亲密性原则。

3. 车载模块中布局

这部分对于想接触车载设计同学非常友好。讲一下通用的布局，具体交互设计等待我后续更新文章，这次就简单按照 1920×720 分辨率每个模块我都会稍微带一下。

4. 自适应布局

讲完前面每个模块的大致布局，接下来我们来探讨一下自适应布局，这个真的非常非常！！！超级重要，工作后期经常会遇到这个问题，甲方爸爸后续有增加屏幕分辨率的需求。我们前期在布局上花费的时间相对较多（但后期维护起来可以减少你很多工作量，前期需要你规划好基础框架）

下面拿实际做过的案列来陈述：抛出一个问题，我们如何将分辨率1920×720页面的内容转变成1280×720 呢？

（有同学说，直接丢开发然后他们写自适应布局）导航相关页面需要调用地图的接口，这个开发是可以直接去写自适应，但其余元素还是需设计师重新来排版。

（还有人说直接缩放比列，调整页面布局）这个方案在比例相差很大的时候是行不通的，但同比例或者很相近是完全 OK 的，正巧我们项目上有 800×480 分辨率，和 1280×720 极其相似。

（还有人表示不服：折叠某块区域内容，将该区域内容做成 icon 点击后弹出来）该方法可以使用在部分内容。

有的模块内容没法降低层级，这个办法就不行，遇到这类的情况我们就直接将这块内容适配做成 1280×720 尺寸。

如果前两种办法都行不通，有的内容就得需要做弹性布局控件了，例如设置页面，当中间空间很大的时候，放置到短屏中可以根据弹性布局拉伸该控件长度，拉至适配该屏幕的设计，如有需要请留言，后续弹性布局我会写一篇文章详细说明使用。

我们项目多种分辨率进行转化基本都按照这些方案推进下去的，来一句鸡汤：办法总比困难多，真的只要用心做事情，没有什么困难能难倒你的，还有不要做理想主义者，要做实践者，实践才会见真理。

不好意思，一下子说多了没收住 ，进入正题。谨慎重新改变布局 ： 第一是增加开发工作量，其次就是增加用户的学习成本，当然，屏幕是竖屏的时候则就需要重新布局，因为横宽比例变成了相反数值。（旋转屏幕大家可以去看看比亚迪的唐、汉车型）

上述的内容都是我们一步一个坑踩过来的，“且看且珍惜”。

圆角的规范

1. 如何制定圆角的大小规则

更圆的角和全圆角的使用

对主要动作和组件使用更圆的角（更大的角半径 or 全圆角），是需要重点突出的，圆形对大多数直线形状具有更大的视觉影响，如果在页面有足够空间的前提下，全圆角形式会和其他按钮做出反差，鼓励用户去点击。比如：全局消息通知按钮、电话模块中接听、挂断、下拉负一屏中的按钮等 （下方是练习稿案列）

较低的圆角和直角的使用

对于不需要 or 低强调的元素，使用较低角半径 or 0px 圆角=直角，例如：工具栏或列表可以用较小的圆角，专辑封面不需要再强调，所以直接将它降到 0px，我们项目音乐专辑大封面就用的直角，具体问题需要具体去分析，像音乐控件的外轮廓就是带圆角的，因此专辑封面在容器里面就必须带有圆角，不然设计风格则就不统一。

还有一个模块，就是在音乐分类的情况下会有很多专辑封面，我们对比一下两种方案：有圆角 or 无圆角，两张图对比下来，带有圆角的专辑封面有更明显的边缘产生了视觉差的感觉，而直角的专辑看起来就没有，不易突出，因此不太可能引起我们的注意。所以在网格布局中，圆角的效果更好

谷歌对于圆角的定义

在设定圆角规则时，需要注意一个事项：大小种类不宜太多，不然显得杂乱无章。

注意：即使应用布局是在 8dp 网格上构建的，但仍会提供 4dp 的半径大小，以帮助在较小的组件中形成元素。该值应谨慎使用，因为它不是 8dp 的倍数

总结：圆角还是直角没有对错之分，合适的才是最好的。

图标规范：

1. 图标的种类（车载图标分为应用程序图标、系统性图标）

应用程序图标

现在 HMI 的设计趋势已经去掉了应用程序图标，取而代之的是卡片化的设计方案，简单说一下卡片式设计有两大好处，第一，把学习成本降至最低，第二，增大的接触面积让驾驶时误触率也降到最低，给到用户最直观的体验就是简单易用。不过有的汽车厂商对这一块还是有需求，我们就稍微再提一下。

我自己也负责过有应用程序图标的项目，在 1920×720 中为 160px 分辨率和苹果@3x 分辨率相同 ；在相对较小的屏幕中应该按照比例同比缩小，如同 800×480 分辨率中首页中的应用程序图标为 80px，这是如何计算的呢？

项目中还有一款车型的屏幕分辨率为 1280×720，由于屏幕变窄，应用程序图标需要缩小到 120px，高度 720 and 480 有一个共同 240 的倍数，所以最终小屏幕的应用程序图标为 80px，圆角大小也随之而变：R：24/18/12。其余分辨率按照实际情况使用。

系统性图标（后续 HMI 组件库搭建文章中我会详细的讲解）

该系统提供了许多小图标（代表常见任务和内容类型），供导航栏和选项卡栏中使用。最好尽可能使用这些内置图标，因为它们是人们熟悉的。

2. 图标的尺寸

大厂是如何制定图标尺寸

很多博主在讲到图标尺寸的时候都是一笔带过，拿着别人得出的结论，却没说怎么计算出来，对于车载来说，前期发布这些研究报告的内容极少，所以我对图标的计算想找到了计算方式，如果大家想知道怎么换算的话可以查看：https://zhuanlan.zhihu.com/p/158099749

根据百度 IDX 驾驶体验中心，在对于《车载 HMI 界面效果客观指标实验报告》在基于视距为 50cm，计算出最小图标为 9mm 推荐使用 12mm。视觉上的 1cm 的实际像素是多少呢？这就是一个错误的想法，上面文章中也有提到屏幕分辨率无法与物理长度单位进行转换，（实际项目工作经验告诉我，因为相同的屏幕大小但是分辨率不一样，所以得出的结果不能共用）

PPI 的计算

我就大概讲一下计算原理，这个根据屏幕的分辨率，我做过一款相同屏幕尺寸的车机，都是 8 寸屏幕，但分辨率一个为 1280×720，另外一个则为 800×480，每一个格子为一个像素。

最小图标尺寸计算

接下来找一下分辨率 1280×720 最大公约数为 80，最后得出结论屏幕的比列 16:9

两边比例的平方相加 = 屏幕英寸的平方

根据勾股定理 （16X）^2 +（9X）^2=8×8 最后 x 算出的结果为 0.4357

16:9 的 8 英寸屏幕 长度（单位：英寸）=0.4357×16 =6.9712 宽 =0.4357×9=3.9213

国际计算单位 1 英寸 = 2.54cm

所得出屏幕的长度（单位：厘米）=6.9712×2.54≈17.7cm 宽 =3.9213×2.54≈9.96cm

分辨率：1280×720 宽度约等于 10cm 来计算，720/10 = 72px

分辨率：800×480 由于他们屏幕大小一致（英寸）480/10=48px

得出结论：视觉上的 1cm 的实际像素是有所差距的。

按照设计规则：按 4 的倍数来制定，因此最小图标为 40px（这个结论只是作为推荐使用，在做项目的时候，变数有很多，甲方爸爸就喜欢超级大的，你也没办法，所以还是按照项目来制定）

为了计算这个我还特地的回顾了高中学习的开根号、初中的最大公约数都搬出来了，幸好当时数学还算是个小学霸，哈哈哈~~~

下面展示一下：

谷歌 Android Auto 图标大小规范

基础的图标：主图标：44px 次要图标：36px 第三方图标：24px

头像的使用：小头像：56px 中头像：76px 大头像：96px

百度车载生态开放平台下载了他们组件库，进行了研究。

基础为图标：48px 次要图标 40px（最小图标尺寸）

这边还要说一下，对于大图标的尺寸设定，会有很多尺寸 icon，后续我还会在输出关于车载图标详细的内容，敬请关注吧。

3. 图标的点击区域

图标触摸区域分为驾驶中使用和静止中使用

例如说驾驶中需要调节空调的内外循环，原本老车机的硬按键替换成了屏幕中的按钮，原有的硬按键已经通过长期使用有了记忆性，有触感并且操作硬按键大小适中，所以在操作中减少了操作时间，降低了危险系数。新能源汽车在设计的时候可以通过增大触摸区域降低误操作、无法点击使得驾驶员视野长时间远离方向盘的情况，研究表明视野超过 2 秒以上停留，就会存在危险。

静止使用例如：在设置页面中调节车辆设置中的属性，巡航模式、电动尾门打开百分比的调节等等。

谷歌制定触摸区域的规则

最小触摸目标尺寸为 76 x 76px，需要在单个图标设计基础上再额外增加一块触摸区域，易于驾驶中可操作，在静止使用的话，我们可以遵循苹果设计规范中最小手指触摸的区域为 44x44px

这是我根据实际项目并在车内进行路测（路测：驾驶中测试）中得出结论。

还有一种特殊情况：文字+图标组合点击区域，在 icon 很小的时候也可以考虑将文字也组合一起，增大点击区域

4. 图标设计的统一规则：

• 统一风格
• 统一光源
• 统一线条粗细
• 统一圆角/直角
• 统一倾斜角度
• 断点的距离、大小统一

5. 最后最一个小插曲：命名的规范

之前经常有小伙伴问我，落地项目的 icon 切图命名规范怎么制作？就拿我之前做的风格稿首页来说，首页音乐卡片中的“下一首”的图标如何命名。

首先分析这个 icon 在哪个页面当中 or 用在哪里，接下来就是他的属性是什么 icon 还是 button，其次就是这个 icon 代表什么，这个 icon 的大小，因为在一个系统里面会有重复功能 icon，所以是有必要增加大小（这块内容是选填项），最后在增加这个 icon 是处于什么状态下，状态分为：禁用、常态、按下、选中

最后呈现：首页_音乐_下一首_常态 ，对接开发应该是翻译成英文。

有时候英文命名也可以用缩写比如设置：setting 你直接可以写成 set icon ic button bt（如果全局使用就使用   All）

总结

听完小米的发布会，是我触动较深的一次，视频弹幕中满屏刷着““干翻特斯拉”，小米造车一诞生就背负着全民的期望，创始人雷军已经功成名就，但还是愿意押上全部的声誉和未来十年的人生，全力 all in，我心中只有敬意，祝小米早日造车成功，“干翻特斯拉”，我们设计师也愿意和这个行业赌一次，行业深耕下去，砥砺前行。

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

文章来源：优设  作者：设计界的影帝

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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