在移动互联网的高速发展的今天，我们如何才能让 B 端产品在移动化时能更好的满足用户诉求与期望呢？本篇文章小编将以「门店通 – 汽配门店管理系统」作为案例，分析并总结 B端产品 移动化 的设计思路。

B端移动App设计：

从理论到落地！3个方面详析如何做好B端移动App设计 我将从设计理论—实操—落地，三个部分解析B端移动APP设计。

阅读文章 >

移动化的趋势 随着移动场景趋于常态，To B 服务不再局限于桌面设备，越来越多的服务供应商投入移动场景的赛道中。这其中一方面是基于人们上网习惯的改变，根据艾瑞咨询 2021 年中国综合移动办公平台行业研究报告指出，截止 2021 年 6 月，国内手机网民规模为 10.07 亿，占全体网民的 99.6%，用户习惯一定程度上驱动着服务厂商从桌面端向移动端的转移；另一方面是传统的桌面场景受固定工作地点、时间的限制，难以满足用户高效率办公、协同的诉求，而移动化既能满足用户轻量化、随时随地进行业务操作的诉求，也能帮助企业降本提效。

拆解 To B 服务的工作场景 B 端产品的最终目的是满足用户的日常工作管理需求，帮助企业提高工作效率、降低使用成本、维护数据安全。尽管不同的 B 端产品所服务的行业、使用对象各不相同，但从工作流程的角度，大致可以拆解为两大类场景：即「查看」「处理」。「查看」是了解信息，提取可用数据，一般会通过图表、表格、面板等形式展示数据，多数产品偏向更垂直或更专业的数据模型。「处理」则是以解决业务流程和问题为目的的操作，常见的增、删、改、查等。无论何种行业、职位、权限的用户都离不开这两大场景。以汽配门店的日常经营为例，门店管理者通常会关注经营层面的数据，而员工则关心当前的生产信息，综合信息后，管理者和员工需要做出决策对门店的经营、生产等业务进行操作。

定义 B 端产品移动化 桌面端的优势在于屏幕的输出效率、键鼠的输入效率对于数据、报表的浏览以及处理专业复杂的工作来说都更加友好；而移动端的优势在于不受固定办公地点、时间、设备数量的限制，在移动办公场景时很有优势。随着移动互联网和移动应用在功能、设计、体验等方面的日渐成熟和易用，人们会越发习惯于使用移动设备完成目标，解决需求。基于 B 端产品，移动化更多的是以轻量的体验来满足以“用户” 为中心，聚焦在「查看」 与 「处理」 的场景中。而不是为了处理和解决各种涉及权限、多重验证确认、操作复杂、报表繁杂的工作。

B 端产品移动化的设计思路 1. 保持一致

一致性并不是简单的把交互框架和视觉风格直接照搬统一，实际上要对齐的是两种使用场景的体验，这中间要调和的是小屏幕和大屏幕的矛盾，触控操作和键鼠操作的矛盾，两种不同心智模型的矛盾，以下将从视觉层、交互层、体验层三个维度来论述一致性的思路。

「视觉层」

在进行移动化设计时，首先要保证品牌的统一性。Logo、字体、品牌色甚至是文案的措辞规范都需要严格保持一致。保证品牌的统一性，有助于塑造品牌形象，增强用户对产品的信任。

在视觉风格上，门店通主要以黄色为主的品牌基调在移动化设计上保持延续。我们在尝试色彩方案的过程中，设计策略就是对于常用的业务组件使用纯白、浅灰打底，配合使用黄色或延伸色作为局部点缀。同时在部分页面保留了大色块背景的使用，突出品牌调性的同时，增强对比度，保证信息的易读性。此外与功能业务相关的图标在移动端上保留，在不影响识别的前提下大大降低了设计成本。

「交互层」

Jakob Nielsen 于 1994 年提出的十大可用性原则中，其中一条原则 Consistency and standards（一致性和标准化原则）是这样定义的，「同一用语、功能、操作保持一致」。在此基础上，多端的设计也同样适用，即各端在相同场景下的操作应该出现同样的结果。对于复杂的桌面场景与灵活的移动场景两者而言，在关键的节点采用一致性的设计原则尤为重要；

十大可用性原则：

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

虽然门店通的订单流程因涉及到管理模式的不同而相对复杂，但无论是在 WEB 端还是移动端，基础订单流程均按照「开单 > 施工 > 完工 > 质检 > 结算」这一路径运转，员工仅需要在不同节点进行相应操作即可；移动端受限于屏幕显示，通常需要更聚焦于订单的关键信息和状态，在移动化设计时，会把非必要的订单信息进行弱化或省略，同状态场景下，文案、业务功能的操作与 WEB 端保持一致。

「体验层」

虽然我们追求多端统一的用户体验，但各端的操作场景差别很大，用户已经在不同的平台已经形成了不同的操作习惯。通过对比门店通 WEB 端和移动端的界面，虽然在页面结构上两端并不一致，但各自也都符合所在平台用户的操作习惯。以导航为例，在显示区域足够大的 WEB 端，侧边导航结构能确保所有的层级菜单都可以平铺出来，对用户在功能的选择上更加直观。移动化设计时需要遵循不同操作系统的规范，小屏幕更需要将信息进行聚焦，「更多」界面的设计是通过对功能项归类的方式与 WEB 端统一。

2. 聚焦核心

移动化不是一味的照搬 WEB 端的功能和内容，而是要了解移动场景下使用者的关键诉求是什么，聚焦核心功能点进行设计，再由此扩展至其他次级功能。对于信息展示与布局，我们从以下 2 个维度进行思考：

「信息重构」

WEB 端有足够的屏幕空间把所有的内容展示给用户，而多数情况下，移动场景下的用户很少主动浏览一屏以外的信息。对于移动化设计来说，核心内容必须保证用户在一屏内可以看到。由此，我们需要控制单个页面内的信息量。对核心流程影响不大的一些字段或单位，可以尝试在流程中弱化，或通过一定的交互成本显示；如果必要字段很多，也可以尝试使用步骤条对界面进行分步操作；

在门店通表单类的录入场景中，我们通常做法是将非必要字段隐藏在「更多信息」中。一方面避免因表单过多需要用户滑动查看并给用户造成的视觉焦虑，另一方面，减少非必要信息带来的干扰，简化了录入流程，在移动场景下，保证使用者更快速地完成操作。

「信息突出」

在论述信息重构的时候提到需要控制移动端页面的信息量。但只是页面信息量少就可以了吗？事实上除了对信息进行筛选外，还需要思考信息的展示形式。用户更关注的信息，可以通过字号、字体颜色等样式差异，让信息有更明显的优先层级；

通常订单详情页承载了很多业务上必要的信息。在 WEB 端，因为足够的屏幕空间，大部分的信息(当然个别重要字段和内容也会标记特殊样式)基本上都是平铺状态展示。而在移动化设计的时候是需要考虑区分信息的主次层级，聚焦在用户所关心的订单状态、金额等信息上，通过强化这些字段来减少用户的获取成本。

3. 保证易用

在进行移动化设计时，我们需要载入用户的使用思维当中，通过合适的设计引导用户，使其在移动场景下时拥有和 WEB 端一致的高效体验，并克服种种“特殊”状况。例如：极端场景的包容、异常状态的反馈等等…为了实现这个目标，我们从以下思路来进行思考：

「操作便捷」

Steven Hoober 在《移动应用界面设计》书中例举了用户多种握持移动设备的方式，并通过一系列研究指出，当用户单手操作手机时，页面的底部和中部是最适合操作的的区域，所以，需要尽量将最重要的 UI 控件放在其拇指可触及的范围内；

此外，他还表明，无论是阅读或内容互动，移动用户更喜欢垂直居中的信息布局。

考虑到用户的使用场景和移动办公的需要，在移动化设计时，尽可能的应用这一原则，将页面的主次要操作或重要内容置于页面底部或单手握持设备时操作方便的中间区域。

「减少输入」

移动设备的按键较小，与桌面设备通过键鼠输入相比，太长的信息输入会导致用户体验不佳且反馈效果也更差。在进行移动化设计时需要时刻思考「能否减少输入?」。

很多场景下我们给用户提供了新建/编辑的权限。在用户通过移动设备录入信息时，考虑到当下的场景，我们尽可能的去减少虚拟键盘的输入频次，取而代之的是使用滑块、步进器、选择器等组件；同时对于部分表单，当用户开始输入关键词后，系统能判断并给出合理的建议等，以此来减少触控输入带来的不便。

「及时响应和反馈」

Robert B Miller 在《人机对话的响应时间》书中指出，「对于由用户操作直接触发的反馈，理想的响应时间应该控制在 100 毫秒内」。当用户执行完操作后，系统未能及时甚至没有给出相应的反馈提示，就会给用户带来疑惑（现实模型与心智模型冲突），让用户不能确定自己的操作是否被执行、执行是否成功等等。另外在移动场景下，因通信不畅而未能及时加载出内容或页面跳转，容易使用户产生焦虑情绪；这其中的任何一个环节都有可能影响到产品的用户体验。

在移动化的设计过程中，我们主要以过渡反馈和结果反馈为主。过渡反馈即通过常见的过渡组件给予用户反馈，例如会在内容完成加载之前在界面中展示一个「框架」(骨架屏)，让用户从心理上感到加载速度的提升，从而减少他们的焦虑感；结果反馈即告知用户的操作结果，考虑到门店通业务流程中的各个节点的顺利衔接，对于每一关键节点操作的反馈需要通过 Toast 进行提示或 Dialog 弹出框对用户进行二次确认。

4. 个性化

通常在同一门店存在多个移动设备、并依据角色的不同分发多个账户。在移动化设计时需要考虑个人的需求场景，去思考用户所在意哪些内容的展示，可以是根据权限进行内容上的区分，也可以是结合算法进行个性化内容的展示，或者是用户根据自己的使用习惯进行的个性化配置，以确保能为用户提供他们最关心的内容，提升用户体验。

「内容个性化」

门店通移动端首页的数据面板会根据角色的权限不同，所看到数据指标也有所差异。门店管理者可以查看当日的经营数据(往往是涉及收支金额等相关数据)，可通过点击事件进入相应报表，以了解近期门店的经营、收支状况；而普通员工则只能看到当日门店的生产数据；另外，员工可以在个人页获取并查询自己近期服务数据的汇总，并了解一个周期内自己所获得的绩效和工资情况。

「行为个性化」

门店通为付费门店提供了 8 个大类，超过 62 项的细分服务。首页功能入口作为曝光度最高的区域之一，我们将这一块区域的配置权限开放给了用户。不同职能的员工因工种、角色的不同，日常高频次使用的功能也不一样。用户可依据自己的工作习惯，编辑首页的功能入口(九宫格)，以提升工作效率。

其他拓展 移动化除了需要满足用户灵活办公的使用需求，还要思考如何在产品设计上充分发挥移动端的特性和优势，来补充桌面场景不足的用户体验。以下是门店通在保证业务需求的前提下，对部分功能进行移动化特性的探索：

1. 硬件拓展

移动化设计需要更多的和硬件特性结合起来，充分利用移动设备的硬件基础，例如录音、拍照、录视频、蓝牙、wifi、LBS、NFC、GPS、重力感应、push 推送、定位精度等等，来打破桌面端工作场景相对固定的限制。汽配门店的日常经营需要通过照片、视频等流媒体介质，记录业务流程的每一个节点。使用移动设备，店员可以直接通过设备拍照并上传接车、施工等节点过程；或是扫描车牌快速识别顾客车辆信息，这些都一定程度上拓展了应用场景，弥补了桌面场景的不足。

2. 生态拓展

移动生态可以是硬件产品、也可以是关联的第三方应用。结合生态能做到很好的场景联动。常见的例如使用硬件系统自带的推送机制，将重要的信息推送给门店，员工无需启动 App 也能实时的收到重要的信息与订单更新；也可以通过连接打印机，让顾客在设备上签字并快速打印结算单据等等…或者是利用第三方应用(例如微信)生态将顾客的保养提醒发送至顾客；也可以是顾客可以通过小程序实时查看车辆目前的施工进程等等。

欢迎关注作者微信公众号：「Gtech UED」

大家好我是和你们聊设计的花生。天气越来越热了，连优设官网的 Logo 小黄鸡也热成“小火鸡”了，挺有意思的，不知道大家发现了没有呢~

上次为大家推荐了 5 个可以快速提升文字排版效率的 Ai 小技巧，很多小伙伴看完都表示“原来还可以这样！”，看来这些小技巧的确是有帮助到大家的。那么今天接着为大家推荐另外 5 个实用小技巧，一起来看看吧 ~

错过上期的小伙伴看这里

掌握这5个Ai小技巧，帮你快速提升文字排版效率 大家好，我是和你们聊设计的花生~ 文字编排是学习平面版式的基础，今天就为大家分享几个 Ai 小技巧，简单却能有效提升文字排版效率。

阅读文章 >

标题文本快速转段落文本 段落文本和标题文本是文字排版中经常用到的 2 种形式，那你知道快速切换 2 种文本形式的方法吗？其实非常简单：直接选中原来的文本框，将鼠标悬浮到在文本框右侧中间凸出的小端点上，出现带「T」的小标记时快速双击鼠标左键，就可以直接将标题文本变成段落文本了，使用相同的方法也能将段落文本快速切换为标题文本。

多画板文字快速原位复制 在制作卡片、画册等文件时，每一页上会有很多重复的元素。如果想在多个画板的同一位置上添加相同元素，可以直接使用 Ai 的「在所有画板中粘贴」功能，具体操作为：选中元素后 Ctrl+X 剪切元素，然后选择「编辑-在所有画板中粘贴」中就可以实现了。当然也可以在剪切后直接使用该功能的快捷键 Ctrl+Shift+Alt+V，使用剪切而不是复制的原因是防止在最初画板中重复粘贴元素。

OpenType 的变高数字 很多小伙伴在做日期排版的时候都遇到过那种数字高低不对齐的特殊形式数字 ，使用具有 OpenType 特性的字体就能轻松实现这种效果。具体操作方法：选择一种 OpenType 字体（在字体列表后带有一个“O”标志的，带“TT”的不行），然后点击「窗口-文字-OpenType」调出 OpenType 窗口，点开「数字」一栏的下拉列表选择“变高，变宽”，数字的高度马上就变得高低不齐了。

5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！（二） 大家好，我是和你们聊设计的花生。

阅读文章 >

常用字体快速查找 身为设计师，我们的电脑中肯定都安装了各种各样的字体，虽然全面但是找起字体来的时候也挺费事。这个时候可以使用「字体收藏夹」功能帮助我们快速找到常用字体。具体方法：在字体下拉列表中找到自己常用的字体，然后点击其右侧的空心小星星，变成实心后就表示收藏成功。然后点击字体下拉栏顶部的实心星星就能快速过滤出自己最常用的哪些字体，效率暴涨有没有~

需要注意的一点是在收藏字体的时候不能使用字体搜索功能，只能在下拉列表中逐个找到的字体才会显示收藏选项。不过也有一个小规律，就是下拉列表里的字体是按照中文字体-西文字体-日本/台湾字体-其他字体的顺序排列的，大家按照这个顺序也能比较快速的定位自己想找的字体。

Emoji 表情符号快速引用 想增加排版的趣味性时，添加 emoji 表情是一个非常好的选择，想必大家也在很多海报、公众账号封面图中看到过 emoji 表情的应用。除了在专门的 emoji 表情网站上下载相关文件外，还有一个很方便的办法，就是直接使用电脑系统自带的 emoji 表情文件。

具体方法：先将光标定位在需要添加表情符号的地方，然后在字体栏搜索「emoji」就会出现对应的选项，点击对应字体会弹出一个包含所有表情符合的字形框，大家双击自己想要的表情就可以插入到文字中了。这些表情符号都是矢量可编辑的，用起来非常方便~

关于 emoji，你必须知道这个全能网站 Hello Everyone~ 我是花生。

阅读文章 >

好啦以上就是今天推荐的 5 个文字排版小技巧，赶快打开你的 Ai 试一试吧~ 喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友。如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家解答~ 也欢迎大家加入优设官方设计交流群，和优设主编、设计总监及其他热爱设计的小伙伴一起探讨学习（入群二维码见文末 Banner）~

上期回顾：

可能是最全面的产品拆解系列：顺丰速运（上） 20 种物流服务，18 种寄件方式，13 种增值服务，8 个会员等级，20 种会员权益，4 种会员卡，5 种积分玩法，3 个小游戏，4 种优惠福利... 拓展阅读： [link https://www.uisdc.com/18-send-ways] 你要寄生鲜他为你提供生鲜寄，你在

阅读文章 >

产品拆解 5. 会员服务 顺丰速运 为用户设计了非常丰富的会员等级和权益，用户可根据寄件和收件消费获取成长值，随着成长值的增加，用户的会员等级可以不断晋升，从而享受多达 20 种的专享会员特权权益。其次， 顺丰 为用户提供了 4 种类型会员卡，通过各种寄件的场景去匹配用户的需求，从而彻底激活用户实现长期稳定的商业变现。

会员中心

会员等级

会员等级分为 8 个等级，从低到高分别是普通、黑铁、青铜、白银、黄金、铂金、钻石和黑钻，等级越高，享受的福利越多。用户只能通过寄件和收件消费这两种形式提升成长值，每消费 1 元可以获得 1 成长值。会员等级以 1 年为周期，用户需要在周期内完成对应等级的成长指标，否则当周期结束以后，则会降级到对应的会员等级。这样的晋升规则设计其实运用了稀缺效应，少即是多，更能激发用户消费的频次，如果你想拥有更好的会员福利，那就需要你投入足够的真诚。

会员权益

顺丰为会员设计了 20 种专享特权，会员等级不同，能享受到的特权也不同。我根据人、财、物三个维度进行分类，让大家更能理解。人，包含快件免费保管、专线客服和定时派送，主要为用户提供人力的权益服务；财，包含了寄件满赠、准时保优惠、密钥认证优惠、保价优惠、复活优惠券、保鲜优惠、包装返券、免调节费和 SVIP 95 折，定期为会员赠送优惠券省钱；物，包含首寄奖励、注册有礼、收件兑奖、首寄赠积分、储值返利、生活特权、升级有礼和生日有礼，给会员提供各种消费权益。通过这样极其丰富的会员权益，有效提高用户的忠诚度。

生活特权

生活特权是顺丰联合餐饮美食、酒店、美妆等各行业知名品牌为会员推出的会员权益板块，用户可以使用会员积分进行兑换以及领取各大品牌的优惠券，这可以为用户带来丰富的酬赏，提升用户活跃度。

学生会员

学生会员是针对在校大学生的一种会员服务，学生开通会员后，将会享有专属的学生权益和福利。学生权益包含了认证有礼、每月福利、亲情寄、积分超值兑和毕业护航。认证有礼是学生用户首次认证以后，获赠 28 元认证礼包；每月福利是用户可在每个自然月免费领取 1 次顺丰礼包；亲情寄是可绑定亲有账号，互寄有优惠；积分超值兑就是在积分商城可以获取积分兑换的优惠；毕业护航是指用户在毕业到当年 12 月 31 号之前，继续享有学生权益。

SVIP 会员卡

专属权益

SVIP 会员卡包含了 6 大权益，分别是寄件优惠、购加邮包、积分翻倍、专属兑换、金牌客服和开卡礼遇。寄件优惠和购加邮包主要是向用户赠送优惠券，帮助用户省钱；积分翻倍和专属兑换则是奖励用户双倍积分，并可以随时兑换获取更多权益；金牌客服是指用户可以获取专线接听客服，享受专属服务；而开卡礼遇则是当用户开通以后赠送一个礼包。

收费模式

SVIP 会员收费分为两种模式，一种是连续购买，另一种是单独购买，两种模式都支持按月、季度和半年购买，形式丰富，用户可自行选择。

新速运通卡

新速运通卡的设计非常简单，用户充值后平台返利，根据会员等级的不同，最高可返 7%。当快递小哥上门的时候，可以直接出示二维码支付，其次也可以邀请好友领取赠送金。

亲情卡

亲情寄是针对朋友、亲戚或客户之间互寄比较频繁推出的一种寄件套餐，按次购买，基础套餐 9.9 元 3 次，当用户购买后，被绑定人向购买人寄件无需付款，而购买人支付可使用亲情寄优惠支付。亲情卡以单单省钱，更快送达和方便快捷为核心卖点，为快递加入亲情和温度，给用户提供更多的便捷性，提升用户满意度。

礼品卡

礼品卡是一种线上礼品卡，用户可线上购买并微信赠送给好友，好友领取后可用于顺丰运费支付。礼品卡会根据不同的节假日主题设计精美的模版，从而吸引年轻用户。

小结

从本章可以看出，顺丰的会员体系既有深度又有温度。顺丰为用户设计了 8 个等级，20 种会员权益，几乎满足了用户在产品使用中的所有特权要求。为了提高用户的下单率，实现稳定的会员收入，推出了 SVIP 会员卡和新速运通卡。当你和你的朋友、父母甚至客户相互寄件比较频繁的时候，顺丰为你推出了亲情卡省钱，而面对在线大学生这个基数庞大的年轻用户群体，顺丰又推出了学生会员，甚至在你毕业的半年以内，都为你保留学生权益。这样的会员服务设计，真的需要有对快递行业无比的热爱才能设计出来。

6. 营销工具 营销工具主要为用户提供多元化的娱乐和促销方式，吸引用户传播分享，提高用户活跃度，我把营销工具分为积分、游戏和福利三大类。

积分

会员积分是为了答谢用户在顺丰收寄件消费以及在顺丰各线上渠道活跃的个人会员专属福利，每消费 1 元可获取 1 个积分。会员可以通过积分进行兑换、抽奖和抵扣，积分可通过收寄件和任务中心做任务获取，另外会员积分有效期为 1 年，有效期过后积分会自动作废。顺丰为会员提供了 5 种积分玩法，通过多变的酬赏和丰富的玩法，提高用户活跃度。

积分商城

积分商城的设计比较简单，主要结合各大行业的品牌合作商推出各类专属优惠券和礼品，用户可以通过积分兑换，系统会自动生成积分兑换排行榜，吸引用户积极参与。积分商城是一种常见的互惠促销手段，以此提升用户活跃度和满意度。

积分抽奖

积分抽奖就是用户可以使用在平台获取的积分进行抽奖，平台划分为 9 积分和 99 积分场，两者的奖品不同，这样的设计可以满足不同用户的需求，也可以吸引用户赚取更多的积分。其次为了提高用户抽奖频率，还加入了一个 5 连抽的玩法，额外单独赠送 1 个奖品。为了鼓励用户传播拉新，还可以邀请新朋友进行抽奖，邀请者会获得 1 次免费抽奖机会。

积分夺宝

积分夺宝就是平台会定期发布一批周边商品和优惠券，然后为这些商品设置最低开奖助力次数，当助力的人数达到最低开奖次数以后，进入开奖倒计时的环节。每个用户助力 1 次需要消耗 9 积分，每个商品最多可以助力 15 次，助力次数越多，中奖率越高。

积分秒杀

积分秒杀就是平台会设定不同的秒杀专场，推出不同的商品，如优惠券、实物商品等，用户通过积分即可秒杀购买，每次将会消耗 9 积分。

积分大派兑

积分大派兑就像一个限时促销的抽奖 Party，用户通过积分即可抽奖，每次抽奖消耗 9 积分，另外还可以 5 折兑换限量好物。

游戏

丰收果园

丰收果园是一个采摘果园的小游戏，用户可以通过每日签到和完成任务领取福果，邀请好友提升生产速度，最后可以用福果兑换礼品，例如优惠券、新鲜水果、休闲零食等。另外果园还加入了社交属性，用户每天有 10 次机会去其他好友的果园偷摘水果，这让果园游戏变得多变有趣，吸引更多用户参与，提升用户活跃度。

爱心萌宠

爱心萌宠是一个以鼓励用户捐赠爱心的小游戏，由顺丰公益基金会发起，定期发起公益项目邀请用户捐赠。用户参与捐赠后会获取狗粮，狗粮可用于喂养自己的小宠物，其次用户也可以通过签到，邀请好友，做任务比如公益寄件、传播公益等方式领取，降低参与门槛，提高用户行动能力。

采蜜换大礼

采蜜换大礼是一个以采蜜兑换礼品的游戏，用户可以通过签到、收件、寄件、分享和做任务等形式获取蜂蜜，蜂蜜又可以抽大奖和兑好礼，以此提高用户活跃度。

碳能量

碳能量是 V9.41 版本才推出的新功能，顺丰从环境保护和节约资源的目标出发，以绿色环保和减碳的理念，向用户倡导在寄件过程中使用循环包装、电子回单、同城急送和拍照回传等形式，从而减少纸质消耗，实现绿色寄件，共建零碳未来。碳能量以 g 为单位，100g 可以兑换 1 积分，兑换成积分以后又可以兑换其他物品，给用户另一种返利回馈。这样的 产品设计 理念，能提升用户对品牌的忠诚度。

福利

超值福利

超值福利是一级栏目，聚合了多种优惠福利。顺丰把优惠券按套餐的形式拆分成多种套餐，比如特惠券包，由 2 张 3 元优惠券和享有 8.8 折折扣的优惠券组成，其次还有省钱券包、超值惊喜套餐、寄大件最受欢迎券包等。拆分成套餐以后，又利用签到领红包、限时抢购的方式，鼓励用户通过各种方式领取和购买，从而让用户获取更多的优惠券用于寄件，实现寄件数量的核心增长。

签到有礼

用户签到以 7 天为 1 个周期，可以领取积分、优惠券等礼品，其次通过拆分不同的小任务降低用户领取的难度，激发用户兴趣，从而提升用户活跃度，实现激活转化。

寄件满赠

寄件满赠以一个月为一期，用户当月寄满指定单量以后，可以领取对应的礼包。其次平台还推出了特惠券包这样的促销服务，价格非常优惠。这样的设计，不仅门槛低，还能吸引用户保持一定的寄件数量，提高用户活跃度。

寄件红包

为了鼓励用户寄件，顺丰设置了寄件红包。当用户寄件以后，可以领取随机红包（由优惠券组成，非现金），红包可用于顺丰速运各种产品寄件时使用。

小结

在积分设计方面，顺丰设置了有效期，为用户制造稀缺感，其次通过四种形式，满足用户各种场景的需求。如果你想每天抽奖，你可以使用积分抽奖；如果你想抽大奖，你可以玩 99 积分一次的抽奖；如果你想赌运气，你可以去积分夺宝；如果你想抢时间，你可以参与秒杀；最后顺丰还为你定期准备积分大派兑，积分 5 折兑换，抽奖抽到爽。

在用户留存方面，顺丰设计的小游戏，不仅以任务的形式结合了寄件的场景，更是加入了公益、社交的属性，提升用户活跃度的同时向用户传递的品牌的温度感。而在会员福利方面的设计，顺丰做得真得很有创意。以产品的核心增长内容为中心，把优惠券拆分，组合，再赋予更多的功能属性，用户签到给红包，用户寄件给红包，用户每月寄件完成任务也给红包，实在是让人感到不可思议。

7. 基础服务 基础服务就是顺丰为用户提供产品使用的基础功能，主要帮助用户在产品的使用过程中提高效率，从而提升用户满意度。我把基础服务划分为个人偏好、管理助手、寄件助手和查询助手四大类。

个人偏好

快递偏好

用户可以对快递的偏好进行设置，包含派送偏好、接收信息类型和电话勿扰设置，这充分尊重了用户的自主权，为用户提供了非常友好服务。

多账号

多账号的使用场景是某些寄件用户拥有多个账号，如果每次都需要退出再重新登入，这样操作起来会非常麻烦。所以顺丰设计了多账号管理的功能，可以快速切换。

号码保护

用户可设置寄件号码保护，当设置开启后，寄件人电话需要和登陆账号保持一致，这个功能主要保护个人的电话不被陌生人用来寄件。

大字模式

大字模式就是通过更清晰的文字、更简洁的功能为年纪较大以及有视力障碍用户提供优秀的使用体验。

管理助手

钱包

钱包有多个用途，如日常消费、理财管理以及代发工资等，其次用户实名认证以后，会员资料会同步到顺丰金融产品，用户还可以在钱包购买理财基金。

月结管理

月结管理主要是为月结账户用户提供一个一站式、管家式的服务管理板块，为用户提供寄件查件、对账发票、物流分析、积分兑换等功能。月结用户可拥有最多可达 17 项专属权益，分为专属优惠，基础权益和联名权益三大类，包含员工福利、运费优惠、数据报告、快速理赔等服务。其次顺丰还提供了优惠商城、积分商城、发票申请、疫情停发查询、意见反馈等功能。

物流分析报告

物流分析报告以月为单位，根据用户寄件的数量和收件人的用户画像，为用户提供寄件分析、客户洞察和企业服务的数据分析。寄件分析通过当月寄件总量、寄件量变化趋势、同行对比、寄件种类等多个维度为用户提供数据参考；客户洞察则是根据收件人的信息提取了客户画像，包含客户分布的地区、签收的场景等；企业服务则是顺丰根据企业的营业范围提供行业解决方案和商机线索。

发票管理

发票管理就是为用户提供在线申请发票的功能，用户下单后，选择寄件订单即可发起申请，发票支持电子发票和纸质发票。

消息中心

消息中心包含了各类服务的消息通知，比如会话消息、快递消息、系统消息等，用户还可以对部分消息设置是否接收，非常人性化。

投诉

顺丰为用户提供投诉功能，当你的快递在寄件、派件和收件的过程中出现任何不满意的地方，你都可以发起投诉，这有效保证了快递服务的质量，赢取了大众的口碑。

寄件助手

地址簿

地址簿这个功能虽然小但却是最高频，最重要的一个功能。顺丰的地址簿支持智能填写，用户只需要拍照或者截图系统都能自动识别，甚至还能分享寄件地址。

寄件模版

寄件模版就是用户可以创建一个常见的收件人模版，在寄件的时候，直接使用寄件模版，省时省力，方便快捷。

签收码

签收码是为了保护用户寄件的安全隐私，当寄件用户发起了签收码请求时候，收件人就需要出示签收码才能进行收件。

Siri 寄查

Siri 寄查是一个很贴心的语音交互功能，用户可以通过 Siri 录制寄件和查件的快捷语音，当需要寄件的时候，只需要唤醒 Siri，就能自动打开顺丰速运寄件。

专属快递员

用户可以扫描常用快递员的二维码进行绑定，即可成为专属快递员。

通关服务

通关服务主要是为用户提供跨境购买时候货物清关的查询功能，用户输入运单号及清关单证即可提交。

在线客服

顺丰在线客服采用了人工智能 AI 服务，用户可输入关键字直接转人工客服即可获得帮助，比如改地址、改收件人、改时间派送等，其次顺丰也把用户寄件过程中经常遇见的问题整理分类，方便用户快速查找。

问题反馈

问题反馈像一个新手帮助，为用户整理了多种常见的操作问题，其次当用户遇到问题也可以截图上传给平台，用户还可以向平台提建议。

查询助手

搜索

由于顺丰的功能太多，搜索主要为用户提供快速查找某个功能，用户也可以输入订单号查询。

附近服务点

附近的服务点可查看附近的丰巢柜、顺丰网点和合作商家店，方便用户可以快速查询下单。

收寄标准

收寄标准跳转了顺丰官网的 H5，用户可以输入收寄地点进行寄件费用查询。

服务范围

服务范围也是跳转了顺丰官网的 H5，用户可以输入寄件地区进行查询。

产品查询

产品查询主要查询顺丰的物流服务类型，了解各种物流服务的详细服务和注意事项。

小结

从本节我们可以看出，即便是基础服务，顺丰的设计也是丰富而又精细。在用户自主权方面，为用户提供多种偏好设置，满足各类用户的偏好需求，还设计了大字模式版本，为老年人及有视觉障碍的用户服务。其次为月结用户提供了一站式、管家式的数据化管理平台，为用户生成多维度的数据统计分析，甚至按签收场景来帮助企业洞察客户。最后还为用户设计了多种寄件、查询助手功能，把寄件的行动成本降低到最小，给用户带来简单、便捷、极致的寄件体验。

思考总结 在拆分完顺丰速运以后，相信大家和我一样，对这款产品有了全新的认识和体验。我们确实没有想到，在我们眼中只是一个普通的工具型产品，顺丰竟然可以这样设计。接下来我们通过以下几个维度，对顺丰速运的产品设计进行一个全面的思考总结。

1. 用户需要什么样的快递产品？ 快递作为一个发展多年的行业，作为社会民生保障的重要支撑，如今对于每个消费者和企业来说，已经彻底成为生活的一部分。可以说，每个人都在用快递，每个人都需要快递。无论是在电商平台购买商品，还是给家人朋友寄礼物，快递已经成为大家熟悉得不能再熟悉的普通行为了。

用户选择快递的决策因子

影响用户选择快递的因子其实是两个， 第一个是价格，第二个是体验。

价格指快递物品所产生的费用，这决定了多数用户的选择，在没有特殊需求的情况下，这是大家选择快递产品的首个参考指标。体验包含了多种因素，比如快递配送速度、工作人员上门速度、寄件产品的操作流程、有特殊寄件需求应对的解决方案，虽然说多数用户会首先考虑价格，但体验对用户口碑积累和用户习惯养成才是最重要的。

2. 用户对快递产品的真实需求

快递产品本质是快递服务下单的工具，所以在寄件的流程上，一定要简单清晰明了。从下载打开，到新手指引，再到快速完成寄件，这个操作路径的用户体验是最核心也是最重要的部分。而在互联网高速发展的今天，随着互联网产品已经彻底融入人们的生活，用户也产生了越来越多的需求。比如为了省钱，希望可以拥有更多的优惠券；为了使用积分，期望兑换更多的商品；为了享受更便捷的服务，诞生了像亲情寄、雪具达、代收货款这样的寄件形式。所以，在满足用户基础型需求的同时，如果要留存用户，就需要思考如何设计期望型以及兴奋型需求。

2. 顺丰速运的设计方案 在产品拆解部分，我们已经根据顺丰速运的产品设计做了四大分类，并对每个部分进行了总结。下面，我从以下三个维度对顺丰速运品的用户体验进行总结。

流畅度

顺丰速运的寄件下单入口和流程都非常清晰，整个下单页面不仅满足多种用户需求，还支持丰富的个性化服务。产品的交互设计也简单清晰，用户上手操作容易。其次无论是小程序、小游戏和 H5 等其他形式的技术载体，体验都非常流畅，产品几乎无卡顿。

创新度

顺丰速运对不同类型用户以及不同场景的需求拆分的颗粒度已经非常细，几乎可以满足所有用户人群的寄件需求，预判了用户的预判。其次通过顺丰自营以及第三方应用的生态打造，让顺丰的服务已经远远不止于一个快递服务。你可能从未想到，快递小哥还可以上门给你们手机贴膜。

满意度

整个产品的交互体验非常友好，无论是内容的规划、交互的设计以及视觉的表现力，整个产品都能给人一种愉悦的感觉。其次顺丰的设计，充分把用户的自主权放在第一位，为用户提供了多种偏好设置，让寄件变得有安全感、温度感。

3. 和竞争对手相比顺丰速运怎么样？ 我们梳理了顺丰速运在快递行业的 6 个主要竞争对手，整理了一份《快递行业产品设计的竞品分析鸟瞰图》，通过这个鸟瞰图，对整个快递产品设计的内容一目了然。(附件查看完整鸟瞰图)

产品发布时间

顺丰是仅次于中通快递成立最早的 APP，马上满 8 年。菜鸟比顺丰晚一年，京东快递去年才成立。

快递服务

在寄件形式方面，顺丰毫无疑问走在了最前面，他们对寄件使用的用户人群和场景拆分，是行业最丰富的。在快递产品所有的寄件形式中，除了德邦提供了一个顺丰没有的寄件形式——雪具达（特定小众人群的需求），其他寄件形式顺丰都包含了。

内容服务

除了菜鸟和德邦，其他产品还只是处于一个纯快递工具阶段，而相比顺丰而言，两家都还非常单薄。

会员服务

在会员服务方面，不管是菜鸟、中通还是德邦，都还比较简陋，和顺丰完善的会员体系无法相比。

营销工具

在营销工具层面，除了菜鸟，其他产品的营销工具都非常单薄，顺丰在用户留存和分享引流可谓下足了功夫。

基础服务

基础服务作为快递产品最基础的服务，通过对比我们才能感受出来，原来平时不会那么在意的小功能，顺丰也能做得如此完善，考虑得如此周全。

小结

通过与快递行业 6 个竞争对手的 5 个维度比较，可以说，顺丰速运目前引领了整个行业的产品设计趋势。无论是对用户的需求洞察、寄件场景的拆分、会员体系的设计、产品的用户使用体验，还是最基础的快递产品功能设计，顺丰速运当之无愧是行业最优秀的产品。

4. 给顺丰速运的迭代建议 正所谓人无完人，我们在拆解的过程中，也发现了一些我们认为可以优化的地方。

增加多用户角色使用模式

作为一款用户角色多达 10 种的 APP，在产品的迭代设计中，虽然已经有了大字模式，但建议考虑继续增加多用户角色模式，比如月结模式、学生模式、极速模式、微商模式等，这样用户根据自己的需求可以快速切换，从而让用户在产品体验中聚焦于核心功能，提高用户满意度。

交互设计需持续设计优化

顺丰的功能多达上百种，所以这容易导致用户在产品体验的时候出现迷失感。比如我想增加寄件模版，想切换大字模式，但因为层级过深，有些功能很难找到。所以对于功能内容的规划，除了增加多用户使用的模式，还可以考虑像字节头条旗下小荷健康的交互设计，增加一个常用或最近使用的功能区，减少用户查找功能的迷失感。

增强内容服务拉开优势

通过竞争对手模型，目前其他的快递产品在用户留存提升的设计都还比较简陋，而顺丰通过自营以及链接第三方小程序应用已经在初步打造快递生态，甚至策划了像顺丰视界这样优秀的短视频栏目。在以后的迭代中，内容服务可作为持续创新和增强的方向，把优势拉开，让更多的用户意识到顺丰不止是一款工具产品。

写在最后面的话 通过对顺丰速运的全面拆解，我们不得不感慨，像顺丰这样一款拥有上亿用户的国民级产品，真是设计得丰富而又细腻。

他有 20 种物流服务，18 种寄件方式，13 种增值服务，除了中国大陆，还支持送往港澳台及全球 200 多个国家。你可以在美国的购物网站购买一本喜欢的英文书籍，你可以在某个三线城市的城镇为北京的朋友寄去一箱新鲜的雪梨，你还可以在父亲节来临之际为父亲寄去一份礼物，对了，别忘了选一张会让父亲感动的父亲节贺卡。

他有 3 个独立子品牌，10 个独立运行的第三方小程序，覆盖数码、手机维修、物品回收、电商、在线医疗和生活服务。如果你要搬家，你只需要进入顺丰搬家，他甚至为你准备了三种套餐，还支持私人订制；如果你的手机需要维修或回收，不用再因为停车难而不想出门，快递小哥甚至可以上门为你贴膜；如果你忘记在爱人生日的时候送上一束玫瑰，你在顺丰使用花加小程序就可以了，同城急送的小哥就在路上。

他有 8 个会员等级，20 种会员权益，4 种会员卡，5 种积分玩法，3 个小游戏，4 种优惠福利。如果你和父母每月都在寄件传递思念，开通一个亲情卡吧，帮父母把邮费省了；如果你还是一个大学生，没关系，毕业了顺丰还为你保留半年权益；如果你很喜欢抽奖，可以尝试积分的 5 种玩法，拼手气，拼时间，拼红包，应有尽有。 …

顺丰速运的确是一个快递工具产品，但他又岂止于一个快递工具产品，他更像一个开放的生态，以快递为底层服务，把所有能和快递相关的服务、产品、场景都连接起来，把快递变成了一种生活方式。这就是顺丰速运，这就是你突然感觉陌生而又熟悉的产品，本期对顺丰速运的拆解，到此结束，希望大家喜欢！

参考文献

易观千帆 – 顺丰速运 APP 数据分析 易观千帆 – 菜鸟/京东物流/圆通/德邦 APP 数据分析 顺丰速运 APP9.0 设计复盘 顺丰官网 一图读懂顺丰 2021 年报 顺丰控股 2021 年可持续发展报告 2022 我国快递行业情况统计和未来发展趋势分析 欢迎关注作者微信公众号：「设计大侦探」

刷新在产品中属于基础功能，方便用户获取最新动态，是普及度较高的基础功能之一。在设计表达时有系统级表达、自定义设计、多功能结合等，设计发挥的可控性较大。

拓展阅读：

交互基础小课堂！从五个维度全面分析「下拉刷新」功能 关于介绍「刷新的类型」的文章，各类论坛、公众号有很多，也并不复杂，我就最常用的「下拉刷新」，从品牌、功能、惊喜、运营、反馈五个维度结合情感化设计，分享一些我的个人看法。

阅读文章 >

今天黑马哥就结合一些优秀的线上案例，和大家聊一下关于产品 刷新设计 的千奇百态，希望抛砖引玉，和大家一起进步。

关于刷新设计 在产品中刷新对于用户来说并不陌生，是经常使用的基础功能，便于用户获取新动态。在一些可以提供内容更新的产品中，刷新获取内容变动是较为常见的形式。

大家都习惯将刷新称呼为 下拉刷新 ，其实刷新的动作不仅限于下拉手势交互，也有产品采用单击和上滑等手势交互实现刷新动作。比如一些产品在滑动浏览内容时，底部标签栏首页图标会变为刷新的操作，通过点击实现页面内容的刷新；也有产品在上滑页面时实时加载完成刷新，就像很多影视类产品或者瀑布流设计的产品。

刷新动作不仅可以满足用户的求知欲，也能通过源源不断的内容增加用户黏性，提高用户的使用体验。

刷新的设计形式 简单的刷新动作已经不是简单的设计了，在产品设计师的创新中呈现出了众多的优秀案例，下面为大家梳理一下不同的设计表达形式。

1. 系统级表达

系统级表达是采用系统默认的一些处理形式，类似于花瓣循环的动态形式，属于比较常规的表达。也有很多产品采用系统级形式，用户理解度较高，设计创新的角度来说欠缺一些，表现形式比较生硬。

2. 情感化文案表达

为了带给用户更有温度的设计，除了在图形层面进行情感化设计发挥，在文案上面也可以更加情感化。有产品使用俏皮可爱的话术，每次用户刷新都呈现不同的文案，与用户产生情感共鸣。

3. 动态形式结合

刷新的动态表达形式非常普遍，图形动效和动作演变等，能够体现出加载的动作。动态形式结合可以使得趣味性更强，动画演变的过程也能降低加载等待过程中的焦虑感。

4. IP 形象结合

IP 形象结合到 UI 场景中不仅可以强化品牌感，也能带来更加情感化的体验。IP 形象结合到刷新设计中，伴随着动态演变，以此来体现加载的过程。设计形式动感化，趣味性强且感官体验较佳。

5. 品牌基因结合

立足于品牌做设计，品牌感可以带来差异化的设计表达，也能提高用户对品牌的记忆度。很多产品将品牌 LOGO 图形、辅助图形、品牌字体、品牌风格特征等融入到刷新设计中，带来差异化的刷新体验。

6. 业务属性结合

根据业务特征设计刷新图形，让用户在刷新的过程中感知产品的业务属性，也是强化记忆点的有效形式。

7. 多功能结合

刷新设计更多的还是为了给用户提供更多动态内容，除了这个底层需求以外，也有产品结合了多功能设计。比如下拉刷新到一定距离可以激活“二层楼”，进入活动空间或者其他功能模块，也有结合浏览记录等展示。多功能结合赋予了刷新更多玩法，在有限的资源空间发挥更多操作价值。

8. 其他设计形式

随着体验的重要性升级，产品设计师会在更细微之处探索出更优的解决方案，做出差异化的体验设计。而刷新功能也将会呈现更丰富的设计，从感官层面带来更多视觉感的表现，从体验层面结合更多辅助功能或者业务，发挥更多使用价值。

线上优秀案例分析 通过以上的梳理我们对刷新设计有了深入的了解，下面通过一些优秀的线上案例来进行分析，辅助大家掌握更多差异化的设计表达。

1. 情感化的文案设计

刷新除了在图形设计和动效层面发挥以外，多功能结合和文案设计也是差异化表达的方向。文案提示的设计相对比较特殊，通过不同的文案来打动用户的体验。

喜马拉雅 APP 每次下拉刷新时，都会显示不同的文案内容，有功能引导的提示文案，也有与用户共鸣的温馨提示等。情感化的文案设计让刷新更有温度，不失为一种差异化的功能设计探索。

2. 动态化 IP 形象

针对下拉刷新这一常规操作，设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作，被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处，下拉刷新时两只耳朵摇摆非常俏皮可爱，松开后 IP 形象露出，还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现，拉近与用户之间的亲和力，带给用户更人性化的使用体验。

3. 刷新带来美食诱惑

在完成刷新功能属性的同时，还能将产品的属性或者服务卖点强化出来，赋予了常规操作更多的功能价值。

麦当劳在麦麦商城栏目的下拉刷新设计中，采用汉堡形象结合层级动效进行表达，让人眼前一亮。动效拉长的汉堡不仅体现出份量感，激发用户的食欲；汉堡形象就十分麦当劳，展现出品牌关联性。

4. 趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多，不仅可以带来情感化的体验，也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象，还通过下拉的程度将形象拉长，最后再配合表情和动态营造出趣味性。

5. 动态 IP 完美结合

转转的 IP 形象头部的转动条是其特征所在，在下拉刷新过程中完美的结合了转动条，还伴随着装饰符号散开的效果。不仅贴切的结合了 IP 形象的特点，装饰元素的动态效果也强化了氛围感，非常符合产品的属性，是一个不错的刷新设计案例。

6. 品牌化路径动效

刷新设计中采用路径动效的表现形式比较多，主要集中在图形路径动效和品牌文字路径动效，图形通常是品牌 LOGO 为主，这一类比较适合图形趋近于线性的表达中。链家 APP 的下拉刷新就是 LOGO 图形进行路径动效，完美的匹配了图形轮廓，动效的流畅度也比较自然。

从品牌层面着手于刷新设计，如果放弃图形层面的元素选择，品牌字体的选择也是一个思路。得物 APP 将品牌名称的字体直接运用到刷新设计中，以路径动效的形式进行表达，最终将笔画打散散开。设计表达依然延续了品牌感，也区别于其他产品的刷新设计，在差异化方面呈现出了自身的品牌特征。

7. 一路骑行的芒果崽

芒果 TV 的下拉刷新设计结合了吉祥物芒果崽，下拉刷新的过程就是一路骑行的芒果崽。骑行的沿途中有众多地标建筑的剪影，下拉不松手就会一直处于骑行状态，下拉的反馈体验度做得很好。

8. 漫步的卡通形象

利用动态卡通形象作为刷新设计案例较多，特别是行走和跑步，这一类都比较贴合刷新这一动态表达。比如在少年得到 APP 中，在下拉刷新过程中以一个背着书包漫步的卡通形象进行表达，流畅的动效完美的呈现了学生放学或者上学时，背着书包漫步的场景。这样的呈现方式不仅贴合功能含义，也能与用户产生更好的情感共鸣。

9. 业务化的 3D 图标

友啥 APP 利用 3D 图标进行循环切换代表刷新过程，带有业务属性的图标不仅可以直观的突出产品特性，3D 图标化之后视觉感十足。图标切换带来的动效流畅自然，匹配刷新动作的差异化也非常明显。

10. 刷新动作下的多功能结合

刷新已经不局限于内容更新这一单一需求，一些电商类产品也赋予了刷新多功能的属性，带来更多样化的操作体验。

比如淘宝 APP 首页下拉刷新时，短距离下拉依然属于刷新范围，继续下拉则会提示释放进入淘宝二楼。在保持刷新基础功能的前提下，融入了多功能场景，开发出功能或者活动的全新曝光入口。

在商品详情页下拉时则无法提供刷新服务，为了给予更好的反馈设计，下拉动作便会显示我的足迹。不仅可以在用户习惯性操作时给予反馈，足迹的提供也更方便用户做出选择。

同一个产品也并非只能呈现出一种刷新设计方案，不同的业务场景可以使用不同的表达。淘宝 APP 里面便根据场景的不同提供了多种刷新方案。常规界面的刷新便以品牌字“淘”作为设计出发点，刷新的过程以动态形式表达品牌字，简单粗暴的传递出品牌感。

11. 结合 Slogan 完成刷新

刷新不仅只是内容的更新，产品设计中呈现出更丰富的表达，比如辅助传播活动、宣传品牌形象和 Slogan 等。产品设计师都在赋予单一功能多重使命，带来丰富多样的使用体验。

58 同城首页在下拉刷新时，除了体现刷新动态以外，也展示了 Slogan “让生活简单美好”。借助刷新入口的曝光度，更快的将产品的定位传递给用户，增加用户对产品的好感度。

12. 保持格调一致的设计

很多小众的产品在设计上面呈现出比较有格调的设计，区别于常规的氛围营造，设计风格更加简约大气。

屋颜 APP 整体的设计风格就属于比较简约文艺，在下拉刷新的设计中也保持了这个风格特征。以生活物品演变出的线形图标体现刷新的过程，整体的过度和衔接也恰到好处。

13. 探索式的刷新设计

刷新设计除了图形、动效、文案等层面发挥以外，背景层发挥的案例相对较少，除了配合传播性质的设计。

AcFun 在下拉刷新时，背景层设计成类似于宇宙空间的插画场景，刷新的过程就像探索一样。配合卡通形象左顾右盼的动效，带来的感官效果也是非常不错的。

关于刷新设计的优秀案例很多，这里就不一一例举了，以上案例仅作为抛砖引玉形式的引导。大家根据这个框架多多体验产品，总结更多的优秀案例。

总结 刷新设计作为产品中使用较为频繁的基础功能，与用户的接触也是非常密切的，设计的重要性因此不言而喻。无论是突出品牌感、趣味性、差异化还是强化感官层面的体验，或者是多功能结合等，都是产品设计师重点发挥的模块之一。

本文以案例分析为引导，为大家梳理了刷新设计的形式与思路，希望可以抛砖引玉，带给大家更多的设计灵感。总结观点属于个人理解后的呈现，如有欠缺大家选择性吸收和修正补全。

欢迎关注作者的微信公众号：「黑马家族」

大家好我是和你们聊设计的花生。天气越来越热了，连优设官网的 Logo 小黄鸡也热成“小火鸡”了，挺有意思的，不知道大家发现了没有呢~

上次为大家推荐了 5 个可以快速提升文字排版效率的 Ai 小技巧，很多小伙伴看完都表示“原来还可以这样！”，看来这些小技巧的确是有帮助到大家的。那么今天接着为大家推荐另外 5 个实用小技巧，一起来看看吧 ~

错过上期的小伙伴看这里

掌握这5个Ai小技巧，帮你快速提升文字排版效率 大家好，我是和你们聊设计的花生~ 文字编排是学习平面版式的基础，今天就为大家分享几个 Ai 小技巧，简单却能有效提升文字排版效率。

阅读文章 >

标题文本快速转段落文本 段落文本和标题文本是文字排版中经常用到的 2 种形式，那你知道快速切换 2 种文本形式的方法吗？其实非常简单：直接选中原来的文本框，将鼠标悬浮到在文本框右侧中间凸出的小端点上，出现带「T」的小标记时快速双击鼠标左键，就可以直接将标题文本变成段落文本了，使用相同的方法也能将段落文本快速切换为标题文本。

多画板文字快速原位复制 在制作卡片、画册等文件时，每一页上会有很多重复的元素。如果想在多个画板的同一位置上添加相同元素，可以直接使用 Ai 的「在所有画板中粘贴」功能，具体操作为：选中元素后 Ctrl+X 剪切元素，然后选择「编辑-在所有画板中粘贴」中就可以实现了。当然也可以在剪切后直接使用该功能的快捷键 Ctrl+Shift+Alt+V，使用剪切而不是复制的原因是防止在最初画板中重复粘贴元素。

OpenType 的变高数字 很多小伙伴在做日期排版的时候都遇到过那种数字高低不对齐的特殊形式数字 ，使用具有 OpenType 特性的字体就能轻松实现这种效果。具体操作方法：选择一种 OpenType 字体（在字体列表后带有一个“O”标志的，带“TT”的不行），然后点击「窗口-文字-OpenType」调出 OpenType 窗口，点开「数字」一栏的下拉列表选择“变高，变宽”，数字的高度马上就变得高低不齐了。

5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！（二） 大家好，我是和你们聊设计的花生。

阅读文章 >

常用字体快速查找 身为设计师，我们的电脑中肯定都安装了各种各样的字体，虽然全面但是找起字体来的时候也挺费事。这个时候可以使用「字体收藏夹」功能帮助我们快速找到常用字体。具体方法：在字体下拉列表中找到自己常用的字体，然后点击其右侧的空心小星星，变成实心后就表示收藏成功。然后点击字体下拉栏顶部的实心星星就能快速过滤出自己最常用的哪些字体，效率暴涨有没有~

需要注意的一点是在收藏字体的时候不能使用字体搜索功能，只能在下拉列表中逐个找到的字体才会显示收藏选项。不过也有一个小规律，就是下拉列表里的字体是按照中文字体-西文字体-日本/台湾字体-其他字体的顺序排列的，大家按照这个顺序也能比较快速的定位自己想找的字体。

Emoji 表情符号快速引用 想增加排版的趣味性时，添加 emoji 表情是一个非常好的选择，想必大家也在很多海报、公众账号封面图中看到过 emoji 表情的应用。除了在专门的 emoji 表情网站上下载相关文件外，还有一个很方便的办法，就是直接使用电脑系统自带的 emoji 表情文件。

具体方法：先将光标定位在需要添加表情符号的地方，然后在字体栏搜索「emoji」就会出现对应的选项，点击对应字体会弹出一个包含所有表情符合的字形框，大家双击自己想要的表情就可以插入到文字中了。这些表情符号都是矢量可编辑的，用起来非常方便~

关于 emoji，你必须知道这个全能网站 Hello Everyone~ 我是花生。

阅读文章 >

好啦以上就是今天推荐的 5 个文字排版小技巧，赶快打开你的 Ai 试一试吧~ 喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友。如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家解答~ 也欢迎大家加入优设官方设计交流群，和优设主编、设计总监及其他热爱设计的小伙伴一起探讨学习（入群二维码见文末 Banner）~

刷新在产品中属于基础功能，方便用户获取最新动态，是普及度较高的基础功能之一。在设计表达时有系统级表达、自定义设计、多功能结合等，设计发挥的可控性较大。

拓展阅读：

交互基础小课堂！从五个维度全面分析「下拉刷新」功能 关于介绍「刷新的类型」的文章，各类论坛、公众号有很多，也并不复杂，我就最常用的「下拉刷新」，从品牌、功能、惊喜、运营、反馈五个维度结合情感化设计，分享一些我的个人看法。

阅读文章 >

今天黑马哥就结合一些优秀的线上案例，和大家聊一下关于产品 刷新设计 的千奇百态，希望抛砖引玉，和大家一起进步。

关于刷新设计 在产品中刷新对于用户来说并不陌生，是经常使用的基础功能，便于用户获取新动态。在一些可以提供内容更新的产品中，刷新获取内容变动是较为常见的形式。

大家都习惯将刷新称呼为 下拉刷新 ，其实刷新的动作不仅限于下拉手势交互，也有产品采用单击和上滑等手势交互实现刷新动作。比如一些产品在滑动浏览内容时，底部标签栏首页图标会变为刷新的操作，通过点击实现页面内容的刷新；也有产品在上滑页面时实时加载完成刷新，就像很多影视类产品或者瀑布流设计的产品。

刷新动作不仅可以满足用户的求知欲，也能通过源源不断的内容增加用户黏性，提高用户的使用体验。

刷新的设计形式 简单的刷新动作已经不是简单的设计了，在产品设计师的创新中呈现出了众多的优秀案例，下面为大家梳理一下不同的设计表达形式。

1. 系统级表达

系统级表达是采用系统默认的一些处理形式，类似于花瓣循环的动态形式，属于比较常规的表达。也有很多产品采用系统级形式，用户理解度较高，设计创新的角度来说欠缺一些，表现形式比较生硬。

2. 情感化文案表达

为了带给用户更有温度的设计，除了在图形层面进行情感化设计发挥，在文案上面也可以更加情感化。有产品使用俏皮可爱的话术，每次用户刷新都呈现不同的文案，与用户产生情感共鸣。

3. 动态形式结合

刷新的动态表达形式非常普遍，图形动效和动作演变等，能够体现出加载的动作。动态形式结合可以使得趣味性更强，动画演变的过程也能降低加载等待过程中的焦虑感。

4. IP 形象结合

IP 形象结合到 UI 场景中不仅可以强化品牌感，也能带来更加情感化的体验。IP 形象结合到刷新设计中，伴随着动态演变，以此来体现加载的过程。设计形式动感化，趣味性强且感官体验较佳。

5. 品牌基因结合

立足于品牌做设计，品牌感可以带来差异化的设计表达，也能提高用户对品牌的记忆度。很多产品将品牌 LOGO 图形、辅助图形、品牌字体、品牌风格特征等融入到刷新设计中，带来差异化的刷新体验。

6. 业务属性结合

根据业务特征设计刷新图形，让用户在刷新的过程中感知产品的业务属性，也是强化记忆点的有效形式。

7. 多功能结合

刷新设计更多的还是为了给用户提供更多动态内容，除了这个底层需求以外，也有产品结合了多功能设计。比如下拉刷新到一定距离可以激活“二层楼”，进入活动空间或者其他功能模块，也有结合浏览记录等展示。多功能结合赋予了刷新更多玩法，在有限的资源空间发挥更多操作价值。

8. 其他设计形式

随着体验的重要性升级，产品设计师会在更细微之处探索出更优的解决方案，做出差异化的体验设计。而刷新功能也将会呈现更丰富的设计，从感官层面带来更多视觉感的表现，从体验层面结合更多辅助功能或者业务，发挥更多使用价值。

线上优秀案例分析 通过以上的梳理我们对刷新设计有了深入的了解，下面通过一些优秀的线上案例来进行分析，辅助大家掌握更多差异化的设计表达。

1. 情感化的文案设计

刷新除了在图形设计和动效层面发挥以外，多功能结合和文案设计也是差异化表达的方向。文案提示的设计相对比较特殊，通过不同的文案来打动用户的体验。

喜马拉雅 APP 每次下拉刷新时，都会显示不同的文案内容，有功能引导的提示文案，也有与用户共鸣的温馨提示等。情感化的文案设计让刷新更有温度，不失为一种差异化的功能设计探索。

2. 动态化 IP 形象

针对下拉刷新这一常规操作，设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作，被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处，下拉刷新时两只耳朵摇摆非常俏皮可爱，松开后 IP 形象露出，还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现，拉近与用户之间的亲和力，带给用户更人性化的使用体验。

3. 刷新带来美食诱惑

在完成刷新功能属性的同时，还能将产品的属性或者服务卖点强化出来，赋予了常规操作更多的功能价值。

麦当劳在麦麦商城栏目的下拉刷新设计中，采用汉堡形象结合层级动效进行表达，让人眼前一亮。动效拉长的汉堡不仅体现出份量感，激发用户的食欲；汉堡形象就十分麦当劳，展现出品牌关联性。

4. 趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多，不仅可以带来情感化的体验，也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象，还通过下拉的程度将形象拉长，最后再配合表情和动态营造出趣味性。

5. 动态 IP 完美结合

转转的 IP 形象头部的转动条是其特征所在，在下拉刷新过程中完美的结合了转动条，还伴随着装饰符号散开的效果。不仅贴切的结合了 IP 形象的特点，装饰元素的动态效果也强化了氛围感，非常符合产品的属性，是一个不错的刷新设计案例。

6. 品牌化路径动效

刷新设计中采用路径动效的表现形式比较多，主要集中在图形路径动效和品牌文字路径动效，图形通常是品牌 LOGO 为主，这一类比较适合图形趋近于线性的表达中。链家 APP 的下拉刷新就是 LOGO 图形进行路径动效，完美的匹配了图形轮廓，动效的流畅度也比较自然。

从品牌层面着手于刷新设计，如果放弃图形层面的元素选择，品牌字体的选择也是一个思路。得物 APP 将品牌名称的字体直接运用到刷新设计中，以路径动效的形式进行表达，最终将笔画打散散开。设计表达依然延续了品牌感，也区别于其他产品的刷新设计，在差异化方面呈现出了自身的品牌特征。

7. 一路骑行的芒果崽

芒果 TV 的下拉刷新设计结合了吉祥物芒果崽，下拉刷新的过程就是一路骑行的芒果崽。骑行的沿途中有众多地标建筑的剪影，下拉不松手就会一直处于骑行状态，下拉的反馈体验度做得很好。

8. 漫步的卡通形象

利用动态卡通形象作为刷新设计案例较多，特别是行走和跑步，这一类都比较贴合刷新这一动态表达。比如在少年得到 APP 中，在下拉刷新过程中以一个背着书包漫步的卡通形象进行表达，流畅的动效完美的呈现了学生放学或者上学时，背着书包漫步的场景。这样的呈现方式不仅贴合功能含义，也能与用户产生更好的情感共鸣。

9. 业务化的 3D 图标

友啥 APP 利用 3D 图标进行循环切换代表刷新过程，带有业务属性的图标不仅可以直观的突出产品特性，3D 图标化之后视觉感十足。图标切换带来的动效流畅自然，匹配刷新动作的差异化也非常明显。

10. 刷新动作下的多功能结合

刷新已经不局限于内容更新这一单一需求，一些电商类产品也赋予了刷新多功能的属性，带来更多样化的操作体验。

比如淘宝 APP 首页下拉刷新时，短距离下拉依然属于刷新范围，继续下拉则会提示释放进入淘宝二楼。在保持刷新基础功能的前提下，融入了多功能场景，开发出功能或者活动的全新曝光入口。

在商品详情页下拉时则无法提供刷新服务，为了给予更好的反馈设计，下拉动作便会显示我的足迹。不仅可以在用户习惯性操作时给予反馈，足迹的提供也更方便用户做出选择。

同一个产品也并非只能呈现出一种刷新设计方案，不同的业务场景可以使用不同的表达。淘宝 APP 里面便根据场景的不同提供了多种刷新方案。常规界面的刷新便以品牌字“淘”作为设计出发点，刷新的过程以动态形式表达品牌字，简单粗暴的传递出品牌感。

11. 结合 Slogan 完成刷新

刷新不仅只是内容的更新，产品设计中呈现出更丰富的表达，比如辅助传播活动、宣传品牌形象和 Slogan 等。产品设计师都在赋予单一功能多重使命，带来丰富多样的使用体验。

58 同城首页在下拉刷新时，除了体现刷新动态以外，也展示了 Slogan “让生活简单美好”。借助刷新入口的曝光度，更快的将产品的定位传递给用户，增加用户对产品的好感度。

12. 保持格调一致的设计

很多小众的产品在设计上面呈现出比较有格调的设计，区别于常规的氛围营造，设计风格更加简约大气。

屋颜 APP 整体的设计风格就属于比较简约文艺，在下拉刷新的设计中也保持了这个风格特征。以生活物品演变出的线形图标体现刷新的过程，整体的过度和衔接也恰到好处。

13. 探索式的刷新设计

刷新设计除了图形、动效、文案等层面发挥以外，背景层发挥的案例相对较少，除了配合传播性质的设计。

AcFun 在下拉刷新时，背景层设计成类似于宇宙空间的插画场景，刷新的过程就像探索一样。配合卡通形象左顾右盼的动效，带来的感官效果也是非常不错的。

关于刷新设计的优秀案例很多，这里就不一一例举了，以上案例仅作为抛砖引玉形式的引导。大家根据这个框架多多体验产品，总结更多的优秀案例。

总结 刷新设计作为产品中使用较为频繁的基础功能，与用户的接触也是非常密切的，设计的重要性因此不言而喻。无论是突出品牌感、趣味性、差异化还是强化感官层面的体验，或者是多功能结合等，都是产品设计师重点发挥的模块之一。

本文以案例分析为引导，为大家梳理了刷新设计的形式与思路，希望可以抛砖引玉，带给大家更多的设计灵感。总结观点属于个人理解后的呈现，如有欠缺大家选择性吸收和修正补全。

欢迎关注作者的微信公众号：「黑马家族」

在移动互联网的高速发展的今天，我们如何才能让 B 端产品在移动化时能更好的满足用户诉求与期望呢？本篇文章小编将以「门店通 – 汽配门店管理系统」作为案例，分析并总结 B端产品 移动化 的设计思路。

B端移动App设计：

从理论到落地！3个方面详析如何做好B端移动App设计 我将从设计理论—实操—落地，三个部分解析B端移动APP设计。

阅读文章 >

移动化的趋势 随着移动场景趋于常态，To B 服务不再局限于桌面设备，越来越多的服务供应商投入移动场景的赛道中。这其中一方面是基于人们上网习惯的改变，根据艾瑞咨询 2021 年中国综合移动办公平台行业研究报告指出，截止 2021 年 6 月，国内手机网民规模为 10.07 亿，占全体网民的 99.6%，用户习惯一定程度上驱动着服务厂商从桌面端向移动端的转移；另一方面是传统的桌面场景受固定工作地点、时间的限制，难以满足用户高效率办公、协同的诉求，而移动化既能满足用户轻量化、随时随地进行业务操作的诉求，也能帮助企业降本提效。

拆解 To B 服务的工作场景 B 端产品的最终目的是满足用户的日常工作管理需求，帮助企业提高工作效率、降低使用成本、维护数据安全。尽管不同的 B 端产品所服务的行业、使用对象各不相同，但从工作流程的角度，大致可以拆解为两大类场景：即「查看」「处理」。「查看」是了解信息，提取可用数据，一般会通过图表、表格、面板等形式展示数据，多数产品偏向更垂直或更专业的数据模型。「处理」则是以解决业务流程和问题为目的的操作，常见的增、删、改、查等。无论何种行业、职位、权限的用户都离不开这两大场景。以汽配门店的日常经营为例，门店管理者通常会关注经营层面的数据，而员工则关心当前的生产信息，综合信息后，管理者和员工需要做出决策对门店的经营、生产等业务进行操作。

定义 B 端产品移动化 桌面端的优势在于屏幕的输出效率、键鼠的输入效率对于数据、报表的浏览以及处理专业复杂的工作来说都更加友好；而移动端的优势在于不受固定办公地点、时间、设备数量的限制，在移动办公场景时很有优势。随着移动互联网和移动应用在功能、设计、体验等方面的日渐成熟和易用，人们会越发习惯于使用移动设备完成目标，解决需求。基于 B 端产品，移动化更多的是以轻量的体验来满足以“用户” 为中心，聚焦在「查看」 与 「处理」 的场景中。而不是为了处理和解决各种涉及权限、多重验证确认、操作复杂、报表繁杂的工作。

B 端产品移动化的设计思路 1. 保持一致

一致性并不是简单的把交互框架和视觉风格直接照搬统一，实际上要对齐的是两种使用场景的体验，这中间要调和的是小屏幕和大屏幕的矛盾，触控操作和键鼠操作的矛盾，两种不同心智模型的矛盾，以下将从视觉层、交互层、体验层三个维度来论述一致性的思路。

「视觉层」

在进行移动化设计时，首先要保证品牌的统一性。Logo、字体、品牌色甚至是文案的措辞规范都需要严格保持一致。保证品牌的统一性，有助于塑造品牌形象，增强用户对产品的信任。

在视觉风格上，门店通主要以黄色为主的品牌基调在移动化设计上保持延续。我们在尝试色彩方案的过程中，设计策略就是对于常用的业务组件使用纯白、浅灰打底，配合使用黄色或延伸色作为局部点缀。同时在部分页面保留了大色块背景的使用，突出品牌调性的同时，增强对比度，保证信息的易读性。此外与功能业务相关的图标在移动端上保留，在不影响识别的前提下大大降低了设计成本。

「交互层」

Jakob Nielsen 于 1994 年提出的十大可用性原则中，其中一条原则 Consistency and standards（一致性和标准化原则）是这样定义的，「同一用语、功能、操作保持一致」。在此基础上，多端的设计也同样适用，即各端在相同场景下的操作应该出现同样的结果。对于复杂的桌面场景与灵活的移动场景两者而言，在关键的节点采用一致性的设计原则尤为重要；

十大可用性原则：

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

虽然门店通的订单流程因涉及到管理模式的不同而相对复杂，但无论是在 WEB 端还是移动端，基础订单流程均按照「开单 > 施工 > 完工 > 质检 > 结算」这一路径运转，员工仅需要在不同节点进行相应操作即可；移动端受限于屏幕显示，通常需要更聚焦于订单的关键信息和状态，在移动化设计时，会把非必要的订单信息进行弱化或省略，同状态场景下，文案、业务功能的操作与 WEB 端保持一致。

「体验层」

虽然我们追求多端统一的用户体验，但各端的操作场景差别很大，用户已经在不同的平台已经形成了不同的操作习惯。通过对比门店通 WEB 端和移动端的界面，虽然在页面结构上两端并不一致，但各自也都符合所在平台用户的操作习惯。以导航为例，在显示区域足够大的 WEB 端，侧边导航结构能确保所有的层级菜单都可以平铺出来，对用户在功能的选择上更加直观。移动化设计时需要遵循不同操作系统的规范，小屏幕更需要将信息进行聚焦，「更多」界面的设计是通过对功能项归类的方式与 WEB 端统一。

2. 聚焦核心

移动化不是一味的照搬 WEB 端的功能和内容，而是要了解移动场景下使用者的关键诉求是什么，聚焦核心功能点进行设计，再由此扩展至其他次级功能。对于信息展示与布局，我们从以下 2 个维度进行思考：

「信息重构」

WEB 端有足够的屏幕空间把所有的内容展示给用户，而多数情况下，移动场景下的用户很少主动浏览一屏以外的信息。对于移动化设计来说，核心内容必须保证用户在一屏内可以看到。由此，我们需要控制单个页面内的信息量。对核心流程影响不大的一些字段或单位，可以尝试在流程中弱化，或通过一定的交互成本显示；如果必要字段很多，也可以尝试使用步骤条对界面进行分步操作；

在门店通表单类的录入场景中，我们通常做法是将非必要字段隐藏在「更多信息」中。一方面避免因表单过多需要用户滑动查看并给用户造成的视觉焦虑，另一方面，减少非必要信息带来的干扰，简化了录入流程，在移动场景下，保证使用者更快速地完成操作。

「信息突出」

在论述信息重构的时候提到需要控制移动端页面的信息量。但只是页面信息量少就可以了吗？事实上除了对信息进行筛选外，还需要思考信息的展示形式。用户更关注的信息，可以通过字号、字体颜色等样式差异，让信息有更明显的优先层级；

通常订单详情页承载了很多业务上必要的信息。在 WEB 端，因为足够的屏幕空间，大部分的信息(当然个别重要字段和内容也会标记特殊样式)基本上都是平铺状态展示。而在移动化设计的时候是需要考虑区分信息的主次层级，聚焦在用户所关心的订单状态、金额等信息上，通过强化这些字段来减少用户的获取成本。

3. 保证易用

在进行移动化设计时，我们需要载入用户的使用思维当中，通过合适的设计引导用户，使其在移动场景下时拥有和 WEB 端一致的高效体验，并克服种种“特殊”状况。例如：极端场景的包容、异常状态的反馈等等…为了实现这个目标，我们从以下思路来进行思考：

「操作便捷」

Steven Hoober 在《移动应用界面设计》书中例举了用户多种握持移动设备的方式，并通过一系列研究指出，当用户单手操作手机时，页面的底部和中部是最适合操作的的区域，所以，需要尽量将最重要的 UI 控件放在其拇指可触及的范围内；

此外，他还表明，无论是阅读或内容互动，移动用户更喜欢垂直居中的信息布局。

考虑到用户的使用场景和移动办公的需要，在移动化设计时，尽可能的应用这一原则，将页面的主次要操作或重要内容置于页面底部或单手握持设备时操作方便的中间区域。

「减少输入」

移动设备的按键较小，与桌面设备通过键鼠输入相比，太长的信息输入会导致用户体验不佳且反馈效果也更差。在进行移动化设计时需要时刻思考「能否减少输入?」。

很多场景下我们给用户提供了新建/编辑的权限。在用户通过移动设备录入信息时，考虑到当下的场景，我们尽可能的去减少虚拟键盘的输入频次，取而代之的是使用滑块、步进器、选择器等组件；同时对于部分表单，当用户开始输入关键词后，系统能判断并给出合理的建议等，以此来减少触控输入带来的不便。

「及时响应和反馈」

Robert B Miller 在《人机对话的响应时间》书中指出，「对于由用户操作直接触发的反馈，理想的响应时间应该控制在 100 毫秒内」。当用户执行完操作后，系统未能及时甚至没有给出相应的反馈提示，就会给用户带来疑惑（现实模型与心智模型冲突），让用户不能确定自己的操作是否被执行、执行是否成功等等。另外在移动场景下，因通信不畅而未能及时加载出内容或页面跳转，容易使用户产生焦虑情绪；这其中的任何一个环节都有可能影响到产品的用户体验。

在移动化的设计过程中，我们主要以过渡反馈和结果反馈为主。过渡反馈即通过常见的过渡组件给予用户反馈，例如会在内容完成加载之前在界面中展示一个「框架」(骨架屏)，让用户从心理上感到加载速度的提升，从而减少他们的焦虑感；结果反馈即告知用户的操作结果，考虑到门店通业务流程中的各个节点的顺利衔接，对于每一关键节点操作的反馈需要通过 Toast 进行提示或 Dialog 弹出框对用户进行二次确认。

4. 个性化

通常在同一门店存在多个移动设备、并依据角色的不同分发多个账户。在移动化设计时需要考虑个人的需求场景，去思考用户所在意哪些内容的展示，可以是根据权限进行内容上的区分，也可以是结合算法进行个性化内容的展示，或者是用户根据自己的使用习惯进行的个性化配置，以确保能为用户提供他们最关心的内容，提升用户体验。

「内容个性化」

门店通移动端首页的数据面板会根据角色的权限不同，所看到数据指标也有所差异。门店管理者可以查看当日的经营数据(往往是涉及收支金额等相关数据)，可通过点击事件进入相应报表，以了解近期门店的经营、收支状况；而普通员工则只能看到当日门店的生产数据；另外，员工可以在个人页获取并查询自己近期服务数据的汇总，并了解一个周期内自己所获得的绩效和工资情况。

「行为个性化」

门店通为付费门店提供了 8 个大类，超过 62 项的细分服务。首页功能入口作为曝光度最高的区域之一，我们将这一块区域的配置权限开放给了用户。不同职能的员工因工种、角色的不同，日常高频次使用的功能也不一样。用户可依据自己的工作习惯，编辑首页的功能入口(九宫格)，以提升工作效率。

其他拓展 移动化除了需要满足用户灵活办公的使用需求，还要思考如何在产品设计上充分发挥移动端的特性和优势，来补充桌面场景不足的用户体验。以下是门店通在保证业务需求的前提下，对部分功能进行移动化特性的探索：

1. 硬件拓展

移动化设计需要更多的和硬件特性结合起来，充分利用移动设备的硬件基础，例如录音、拍照、录视频、蓝牙、wifi、LBS、NFC、GPS、重力感应、push 推送、定位精度等等，来打破桌面端工作场景相对固定的限制。汽配门店的日常经营需要通过照片、视频等流媒体介质，记录业务流程的每一个节点。使用移动设备，店员可以直接通过设备拍照并上传接车、施工等节点过程；或是扫描车牌快速识别顾客车辆信息，这些都一定程度上拓展了应用场景，弥补了桌面场景的不足。

2. 生态拓展

移动生态可以是硬件产品、也可以是关联的第三方应用。结合生态能做到很好的场景联动。常见的例如使用硬件系统自带的推送机制，将重要的信息推送给门店，员工无需启动 App 也能实时的收到重要的信息与订单更新；也可以通过连接打印机，让顾客在设备上签字并快速打印结算单据等等…或者是利用第三方应用(例如微信)生态将顾客的保养提醒发送至顾客；也可以是顾客可以通过小程序实时查看车辆目前的施工进程等等。

欢迎关注作者微信公众号：「Gtech UED」

上期回顾：

可能是最全面的产品拆解系列：顺丰速运（上） 20 种物流服务，18 种寄件方式，13 种增值服务，8 个会员等级，20 种会员权益，4 种会员卡，5 种积分玩法，3 个小游戏，4 种优惠福利... 拓展阅读： [link https://www.uisdc.com/18-send-ways] 你要寄生鲜他为你提供生鲜寄，你在

阅读文章 >

产品拆解 5. 会员服务 顺丰速运 为用户设计了非常丰富的会员等级和权益，用户可根据寄件和收件消费获取成长值，随着成长值的增加，用户的会员等级可以不断晋升，从而享受多达 20 种的专享会员特权权益。其次， 顺丰 为用户提供了 4 种类型会员卡，通过各种寄件的场景去匹配用户的需求，从而彻底激活用户实现长期稳定的商业变现。

会员中心

会员等级

会员等级分为 8 个等级，从低到高分别是普通、黑铁、青铜、白银、黄金、铂金、钻石和黑钻，等级越高，享受的福利越多。用户只能通过寄件和收件消费这两种形式提升成长值，每消费 1 元可以获得 1 成长值。会员等级以 1 年为周期，用户需要在周期内完成对应等级的成长指标，否则当周期结束以后，则会降级到对应的会员等级。这样的晋升规则设计其实运用了稀缺效应，少即是多，更能激发用户消费的频次，如果你想拥有更好的会员福利，那就需要你投入足够的真诚。

会员权益

顺丰为会员设计了 20 种专享特权，会员等级不同，能享受到的特权也不同。我根据人、财、物三个维度进行分类，让大家更能理解。人，包含快件免费保管、专线客服和定时派送，主要为用户提供人力的权益服务；财，包含了寄件满赠、准时保优惠、密钥认证优惠、保价优惠、复活优惠券、保鲜优惠、包装返券、免调节费和 SVIP 95 折，定期为会员赠送优惠券省钱；物，包含首寄奖励、注册有礼、收件兑奖、首寄赠积分、储值返利、生活特权、升级有礼和生日有礼，给会员提供各种消费权益。通过这样极其丰富的会员权益，有效提高用户的忠诚度。

生活特权

生活特权是顺丰联合餐饮美食、酒店、美妆等各行业知名品牌为会员推出的会员权益板块，用户可以使用会员积分进行兑换以及领取各大品牌的优惠券，这可以为用户带来丰富的酬赏，提升用户活跃度。

学生会员

学生会员是针对在校大学生的一种会员服务，学生开通会员后，将会享有专属的学生权益和福利。学生权益包含了认证有礼、每月福利、亲情寄、积分超值兑和毕业护航。认证有礼是学生用户首次认证以后，获赠 28 元认证礼包；每月福利是用户可在每个自然月免费领取 1 次顺丰礼包；亲情寄是可绑定亲有账号，互寄有优惠；积分超值兑就是在积分商城可以获取积分兑换的优惠；毕业护航是指用户在毕业到当年 12 月 31 号之前，继续享有学生权益。

SVIP 会员卡

专属权益

SVIP 会员卡包含了 6 大权益，分别是寄件优惠、购加邮包、积分翻倍、专属兑换、金牌客服和开卡礼遇。寄件优惠和购加邮包主要是向用户赠送优惠券，帮助用户省钱；积分翻倍和专属兑换则是奖励用户双倍积分，并可以随时兑换获取更多权益；金牌客服是指用户可以获取专线接听客服，享受专属服务；而开卡礼遇则是当用户开通以后赠送一个礼包。

收费模式

SVIP 会员收费分为两种模式，一种是连续购买，另一种是单独购买，两种模式都支持按月、季度和半年购买，形式丰富，用户可自行选择。

新速运通卡

新速运通卡的设计非常简单，用户充值后平台返利，根据会员等级的不同，最高可返 7%。当快递小哥上门的时候，可以直接出示二维码支付，其次也可以邀请好友领取赠送金。

亲情卡

亲情寄是针对朋友、亲戚或客户之间互寄比较频繁推出的一种寄件套餐，按次购买，基础套餐 9.9 元 3 次，当用户购买后，被绑定人向购买人寄件无需付款，而购买人支付可使用亲情寄优惠支付。亲情卡以单单省钱，更快送达和方便快捷为核心卖点，为快递加入亲情和温度，给用户提供更多的便捷性，提升用户满意度。

礼品卡

礼品卡是一种线上礼品卡，用户可线上购买并微信赠送给好友，好友领取后可用于顺丰运费支付。礼品卡会根据不同的节假日主题设计精美的模版，从而吸引年轻用户。

小结

从本章可以看出，顺丰的会员体系既有深度又有温度。顺丰为用户设计了 8 个等级，20 种会员权益，几乎满足了用户在产品使用中的所有特权要求。为了提高用户的下单率，实现稳定的会员收入，推出了 SVIP 会员卡和新速运通卡。当你和你的朋友、父母甚至客户相互寄件比较频繁的时候，顺丰为你推出了亲情卡省钱，而面对在线大学生这个基数庞大的年轻用户群体，顺丰又推出了学生会员，甚至在你毕业的半年以内，都为你保留学生权益。这样的会员服务设计，真的需要有对快递行业无比的热爱才能设计出来。

6. 营销工具 营销工具主要为用户提供多元化的娱乐和促销方式，吸引用户传播分享，提高用户活跃度，我把营销工具分为积分、游戏和福利三大类。

积分

会员积分是为了答谢用户在顺丰收寄件消费以及在顺丰各线上渠道活跃的个人会员专属福利，每消费 1 元可获取 1 个积分。会员可以通过积分进行兑换、抽奖和抵扣，积分可通过收寄件和任务中心做任务获取，另外会员积分有效期为 1 年，有效期过后积分会自动作废。顺丰为会员提供了 5 种积分玩法，通过多变的酬赏和丰富的玩法，提高用户活跃度。

积分商城

积分商城的设计比较简单，主要结合各大行业的品牌合作商推出各类专属优惠券和礼品，用户可以通过积分兑换，系统会自动生成积分兑换排行榜，吸引用户积极参与。积分商城是一种常见的互惠促销手段，以此提升用户活跃度和满意度。

积分抽奖

积分抽奖就是用户可以使用在平台获取的积分进行抽奖，平台划分为 9 积分和 99 积分场，两者的奖品不同，这样的设计可以满足不同用户的需求，也可以吸引用户赚取更多的积分。其次为了提高用户抽奖频率，还加入了一个 5 连抽的玩法，额外单独赠送 1 个奖品。为了鼓励用户传播拉新，还可以邀请新朋友进行抽奖，邀请者会获得 1 次免费抽奖机会。

积分夺宝

积分夺宝就是平台会定期发布一批周边商品和优惠券，然后为这些商品设置最低开奖助力次数，当助力的人数达到最低开奖次数以后，进入开奖倒计时的环节。每个用户助力 1 次需要消耗 9 积分，每个商品最多可以助力 15 次，助力次数越多，中奖率越高。

积分秒杀

积分秒杀就是平台会设定不同的秒杀专场，推出不同的商品，如优惠券、实物商品等，用户通过积分即可秒杀购买，每次将会消耗 9 积分。

积分大派兑

积分大派兑就像一个限时促销的抽奖 Party，用户通过积分即可抽奖，每次抽奖消耗 9 积分，另外还可以 5 折兑换限量好物。

游戏

丰收果园

丰收果园是一个采摘果园的小游戏，用户可以通过每日签到和完成任务领取福果，邀请好友提升生产速度，最后可以用福果兑换礼品，例如优惠券、新鲜水果、休闲零食等。另外果园还加入了社交属性，用户每天有 10 次机会去其他好友的果园偷摘水果，这让果园游戏变得多变有趣，吸引更多用户参与，提升用户活跃度。

爱心萌宠

爱心萌宠是一个以鼓励用户捐赠爱心的小游戏，由顺丰公益基金会发起，定期发起公益项目邀请用户捐赠。用户参与捐赠后会获取狗粮，狗粮可用于喂养自己的小宠物，其次用户也可以通过签到，邀请好友，做任务比如公益寄件、传播公益等方式领取，降低参与门槛，提高用户行动能力。

采蜜换大礼

采蜜换大礼是一个以采蜜兑换礼品的游戏，用户可以通过签到、收件、寄件、分享和做任务等形式获取蜂蜜，蜂蜜又可以抽大奖和兑好礼，以此提高用户活跃度。

碳能量

碳能量是 V9.41 版本才推出的新功能，顺丰从环境保护和节约资源的目标出发，以绿色环保和减碳的理念，向用户倡导在寄件过程中使用循环包装、电子回单、同城急送和拍照回传等形式，从而减少纸质消耗，实现绿色寄件，共建零碳未来。碳能量以 g 为单位，100g 可以兑换 1 积分，兑换成积分以后又可以兑换其他物品，给用户另一种返利回馈。这样的 产品设计 理念，能提升用户对品牌的忠诚度。

福利

超值福利

超值福利是一级栏目，聚合了多种优惠福利。顺丰把优惠券按套餐的形式拆分成多种套餐，比如特惠券包，由 2 张 3 元优惠券和享有 8.8 折折扣的优惠券组成，其次还有省钱券包、超值惊喜套餐、寄大件最受欢迎券包等。拆分成套餐以后，又利用签到领红包、限时抢购的方式，鼓励用户通过各种方式领取和购买，从而让用户获取更多的优惠券用于寄件，实现寄件数量的核心增长。

签到有礼

用户签到以 7 天为 1 个周期，可以领取积分、优惠券等礼品，其次通过拆分不同的小任务降低用户领取的难度，激发用户兴趣，从而提升用户活跃度，实现激活转化。

寄件满赠

寄件满赠以一个月为一期，用户当月寄满指定单量以后，可以领取对应的礼包。其次平台还推出了特惠券包这样的促销服务，价格非常优惠。这样的设计，不仅门槛低，还能吸引用户保持一定的寄件数量，提高用户活跃度。

寄件红包

为了鼓励用户寄件，顺丰设置了寄件红包。当用户寄件以后，可以领取随机红包（由优惠券组成，非现金），红包可用于顺丰速运各种产品寄件时使用。

小结

在积分设计方面，顺丰设置了有效期，为用户制造稀缺感，其次通过四种形式，满足用户各种场景的需求。如果你想每天抽奖，你可以使用积分抽奖；如果你想抽大奖，你可以玩 99 积分一次的抽奖；如果你想赌运气，你可以去积分夺宝；如果你想抢时间，你可以参与秒杀；最后顺丰还为你定期准备积分大派兑，积分 5 折兑换，抽奖抽到爽。

在用户留存方面，顺丰设计的小游戏，不仅以任务的形式结合了寄件的场景，更是加入了公益、社交的属性，提升用户活跃度的同时向用户传递的品牌的温度感。而在会员福利方面的设计，顺丰做得真得很有创意。以产品的核心增长内容为中心，把优惠券拆分，组合，再赋予更多的功能属性，用户签到给红包，用户寄件给红包，用户每月寄件完成任务也给红包，实在是让人感到不可思议。

7. 基础服务 基础服务就是顺丰为用户提供产品使用的基础功能，主要帮助用户在产品的使用过程中提高效率，从而提升用户满意度。我把基础服务划分为个人偏好、管理助手、寄件助手和查询助手四大类。

个人偏好

快递偏好

用户可以对快递的偏好进行设置，包含派送偏好、接收信息类型和电话勿扰设置，这充分尊重了用户的自主权，为用户提供了非常友好服务。

多账号

多账号的使用场景是某些寄件用户拥有多个账号，如果每次都需要退出再重新登入，这样操作起来会非常麻烦。所以顺丰设计了多账号管理的功能，可以快速切换。

号码保护

用户可设置寄件号码保护，当设置开启后，寄件人电话需要和登陆账号保持一致，这个功能主要保护个人的电话不被陌生人用来寄件。

大字模式

大字模式就是通过更清晰的文字、更简洁的功能为年纪较大以及有视力障碍用户提供优秀的使用体验。

管理助手

钱包

钱包有多个用途，如日常消费、理财管理以及代发工资等，其次用户实名认证以后，会员资料会同步到顺丰金融产品，用户还可以在钱包购买理财基金。

月结管理

月结管理主要是为月结账户用户提供一个一站式、管家式的服务管理板块，为用户提供寄件查件、对账发票、物流分析、积分兑换等功能。月结用户可拥有最多可达 17 项专属权益，分为专属优惠，基础权益和联名权益三大类，包含员工福利、运费优惠、数据报告、快速理赔等服务。其次顺丰还提供了优惠商城、积分商城、发票申请、疫情停发查询、意见反馈等功能。

物流分析报告

物流分析报告以月为单位，根据用户寄件的数量和收件人的用户画像，为用户提供寄件分析、客户洞察和企业服务的数据分析。寄件分析通过当月寄件总量、寄件量变化趋势、同行对比、寄件种类等多个维度为用户提供数据参考；客户洞察则是根据收件人的信息提取了客户画像，包含客户分布的地区、签收的场景等；企业服务则是顺丰根据企业的营业范围提供行业解决方案和商机线索。

发票管理

发票管理就是为用户提供在线申请发票的功能，用户下单后，选择寄件订单即可发起申请，发票支持电子发票和纸质发票。

消息中心

消息中心包含了各类服务的消息通知，比如会话消息、快递消息、系统消息等，用户还可以对部分消息设置是否接收，非常人性化。

投诉

顺丰为用户提供投诉功能，当你的快递在寄件、派件和收件的过程中出现任何不满意的地方，你都可以发起投诉，这有效保证了快递服务的质量，赢取了大众的口碑。

寄件助手

地址簿

地址簿这个功能虽然小但却是最高频，最重要的一个功能。顺丰的地址簿支持智能填写，用户只需要拍照或者截图系统都能自动识别，甚至还能分享寄件地址。

寄件模版

寄件模版就是用户可以创建一个常见的收件人模版，在寄件的时候，直接使用寄件模版，省时省力，方便快捷。

签收码

签收码是为了保护用户寄件的安全隐私，当寄件用户发起了签收码请求时候，收件人就需要出示签收码才能进行收件。

Siri 寄查

Siri 寄查是一个很贴心的语音交互功能，用户可以通过 Siri 录制寄件和查件的快捷语音，当需要寄件的时候，只需要唤醒 Siri，就能自动打开顺丰速运寄件。

专属快递员

用户可以扫描常用快递员的二维码进行绑定，即可成为专属快递员。

通关服务

通关服务主要是为用户提供跨境购买时候货物清关的查询功能，用户输入运单号及清关单证即可提交。

在线客服

顺丰在线客服采用了人工智能 AI 服务，用户可输入关键字直接转人工客服即可获得帮助，比如改地址、改收件人、改时间派送等，其次顺丰也把用户寄件过程中经常遇见的问题整理分类，方便用户快速查找。

问题反馈

问题反馈像一个新手帮助，为用户整理了多种常见的操作问题，其次当用户遇到问题也可以截图上传给平台，用户还可以向平台提建议。

查询助手

搜索

由于顺丰的功能太多，搜索主要为用户提供快速查找某个功能，用户也可以输入订单号查询。

附近服务点

附近的服务点可查看附近的丰巢柜、顺丰网点和合作商家店，方便用户可以快速查询下单。

收寄标准

收寄标准跳转了顺丰官网的 H5，用户可以输入收寄地点进行寄件费用查询。

服务范围

服务范围也是跳转了顺丰官网的 H5，用户可以输入寄件地区进行查询。

产品查询

产品查询主要查询顺丰的物流服务类型，了解各种物流服务的详细服务和注意事项。

小结

从本节我们可以看出，即便是基础服务，顺丰的设计也是丰富而又精细。在用户自主权方面，为用户提供多种偏好设置，满足各类用户的偏好需求，还设计了大字模式版本，为老年人及有视觉障碍的用户服务。其次为月结用户提供了一站式、管家式的数据化管理平台，为用户生成多维度的数据统计分析，甚至按签收场景来帮助企业洞察客户。最后还为用户设计了多种寄件、查询助手功能，把寄件的行动成本降低到最小，给用户带来简单、便捷、极致的寄件体验。

思考总结 在拆分完顺丰速运以后，相信大家和我一样，对这款产品有了全新的认识和体验。我们确实没有想到，在我们眼中只是一个普通的工具型产品，顺丰竟然可以这样设计。接下来我们通过以下几个维度，对顺丰速运的产品设计进行一个全面的思考总结。

1. 用户需要什么样的快递产品？ 快递作为一个发展多年的行业，作为社会民生保障的重要支撑，如今对于每个消费者和企业来说，已经彻底成为生活的一部分。可以说，每个人都在用快递，每个人都需要快递。无论是在电商平台购买商品，还是给家人朋友寄礼物，快递已经成为大家熟悉得不能再熟悉的普通行为了。

用户选择快递的决策因子

影响用户选择快递的因子其实是两个， 第一个是价格，第二个是体验。

价格指快递物品所产生的费用，这决定了多数用户的选择，在没有特殊需求的情况下，这是大家选择快递产品的首个参考指标。体验包含了多种因素，比如快递配送速度、工作人员上门速度、寄件产品的操作流程、有特殊寄件需求应对的解决方案，虽然说多数用户会首先考虑价格，但体验对用户口碑积累和用户习惯养成才是最重要的。

2. 用户对快递产品的真实需求

快递产品本质是快递服务下单的工具，所以在寄件的流程上，一定要简单清晰明了。从下载打开，到新手指引，再到快速完成寄件，这个操作路径的用户体验是最核心也是最重要的部分。而在互联网高速发展的今天，随着互联网产品已经彻底融入人们的生活，用户也产生了越来越多的需求。比如为了省钱，希望可以拥有更多的优惠券；为了使用积分，期望兑换更多的商品；为了享受更便捷的服务，诞生了像亲情寄、雪具达、代收货款这样的寄件形式。所以，在满足用户基础型需求的同时，如果要留存用户，就需要思考如何设计期望型以及兴奋型需求。

2. 顺丰速运的设计方案 在产品拆解部分，我们已经根据顺丰速运的产品设计做了四大分类，并对每个部分进行了总结。下面，我从以下三个维度对顺丰速运品的用户体验进行总结。

流畅度

顺丰速运的寄件下单入口和流程都非常清晰，整个下单页面不仅满足多种用户需求，还支持丰富的个性化服务。产品的交互设计也简单清晰，用户上手操作容易。其次无论是小程序、小游戏和 H5 等其他形式的技术载体，体验都非常流畅，产品几乎无卡顿。

创新度

顺丰速运对不同类型用户以及不同场景的需求拆分的颗粒度已经非常细，几乎可以满足所有用户人群的寄件需求，预判了用户的预判。其次通过顺丰自营以及第三方应用的生态打造，让顺丰的服务已经远远不止于一个快递服务。你可能从未想到，快递小哥还可以上门给你们手机贴膜。

满意度

整个产品的交互体验非常友好，无论是内容的规划、交互的设计以及视觉的表现力，整个产品都能给人一种愉悦的感觉。其次顺丰的设计，充分把用户的自主权放在第一位，为用户提供了多种偏好设置，让寄件变得有安全感、温度感。

3. 和竞争对手相比顺丰速运怎么样？ 我们梳理了顺丰速运在快递行业的 6 个主要竞争对手，整理了一份《快递行业产品设计的竞品分析鸟瞰图》，通过这个鸟瞰图，对整个快递产品设计的内容一目了然。(附件查看完整鸟瞰图)

产品发布时间

顺丰是仅次于中通快递成立最早的 APP，马上满 8 年。菜鸟比顺丰晚一年，京东快递去年才成立。

快递服务

在寄件形式方面，顺丰毫无疑问走在了最前面，他们对寄件使用的用户人群和场景拆分，是行业最丰富的。在快递产品所有的寄件形式中，除了德邦提供了一个顺丰没有的寄件形式——雪具达（特定小众人群的需求），其他寄件形式顺丰都包含了。

内容服务

除了菜鸟和德邦，其他产品还只是处于一个纯快递工具阶段，而相比顺丰而言，两家都还非常单薄。

会员服务

在会员服务方面，不管是菜鸟、中通还是德邦，都还比较简陋，和顺丰完善的会员体系无法相比。

营销工具

在营销工具层面，除了菜鸟，其他产品的营销工具都非常单薄，顺丰在用户留存和分享引流可谓下足了功夫。

基础服务

基础服务作为快递产品最基础的服务，通过对比我们才能感受出来，原来平时不会那么在意的小功能，顺丰也能做得如此完善，考虑得如此周全。

小结

通过与快递行业 6 个竞争对手的 5 个维度比较，可以说，顺丰速运目前引领了整个行业的产品设计趋势。无论是对用户的需求洞察、寄件场景的拆分、会员体系的设计、产品的用户使用体验，还是最基础的快递产品功能设计，顺丰速运当之无愧是行业最优秀的产品。

4. 给顺丰速运的迭代建议 正所谓人无完人，我们在拆解的过程中，也发现了一些我们认为可以优化的地方。

增加多用户角色使用模式

作为一款用户角色多达 10 种的 APP，在产品的迭代设计中，虽然已经有了大字模式，但建议考虑继续增加多用户角色模式，比如月结模式、学生模式、极速模式、微商模式等，这样用户根据自己的需求可以快速切换，从而让用户在产品体验中聚焦于核心功能，提高用户满意度。

交互设计需持续设计优化

顺丰的功能多达上百种，所以这容易导致用户在产品体验的时候出现迷失感。比如我想增加寄件模版，想切换大字模式，但因为层级过深，有些功能很难找到。所以对于功能内容的规划，除了增加多用户使用的模式，还可以考虑像字节头条旗下小荷健康的交互设计，增加一个常用或最近使用的功能区，减少用户查找功能的迷失感。

增强内容服务拉开优势

通过竞争对手模型，目前其他的快递产品在用户留存提升的设计都还比较简陋，而顺丰通过自营以及链接第三方小程序应用已经在初步打造快递生态，甚至策划了像顺丰视界这样优秀的短视频栏目。在以后的迭代中，内容服务可作为持续创新和增强的方向，把优势拉开，让更多的用户意识到顺丰不止是一款工具产品。

写在最后面的话 通过对顺丰速运的全面拆解，我们不得不感慨，像顺丰这样一款拥有上亿用户的国民级产品，真是设计得丰富而又细腻。

他有 20 种物流服务，18 种寄件方式，13 种增值服务，除了中国大陆，还支持送往港澳台及全球 200 多个国家。你可以在美国的购物网站购买一本喜欢的英文书籍，你可以在某个三线城市的城镇为北京的朋友寄去一箱新鲜的雪梨，你还可以在父亲节来临之际为父亲寄去一份礼物，对了，别忘了选一张会让父亲感动的父亲节贺卡。

他有 3 个独立子品牌，10 个独立运行的第三方小程序，覆盖数码、手机维修、物品回收、电商、在线医疗和生活服务。如果你要搬家，你只需要进入顺丰搬家，他甚至为你准备了三种套餐，还支持私人订制；如果你的手机需要维修或回收，不用再因为停车难而不想出门，快递小哥甚至可以上门为你贴膜；如果你忘记在爱人生日的时候送上一束玫瑰，你在顺丰使用花加小程序就可以了，同城急送的小哥就在路上。

他有 8 个会员等级，20 种会员权益，4 种会员卡，5 种积分玩法，3 个小游戏，4 种优惠福利。如果你和父母每月都在寄件传递思念，开通一个亲情卡吧，帮父母把邮费省了；如果你还是一个大学生，没关系，毕业了顺丰还为你保留半年权益；如果你很喜欢抽奖，可以尝试积分的 5 种玩法，拼手气，拼时间，拼红包，应有尽有。 …

顺丰速运的确是一个快递工具产品，但他又岂止于一个快递工具产品，他更像一个开放的生态，以快递为底层服务，把所有能和快递相关的服务、产品、场景都连接起来，把快递变成了一种生活方式。这就是顺丰速运，这就是你突然感觉陌生而又熟悉的产品，本期对顺丰速运的拆解，到此结束，希望大家喜欢！

参考文献

易观千帆 – 顺丰速运 APP 数据分析 易观千帆 – 菜鸟/京东物流/圆通/德邦 APP 数据分析 顺丰速运 APP9.0 设计复盘 顺丰官网 一图读懂顺丰 2021 年报 顺丰控股 2021 年可持续发展报告 2022 我国快递行业情况统计和未来发展趋势分析 欢迎关注作者微信公众号：「设计大侦探」

Hi，我是彩云。我们每天都在填写各种表单，例如发帖、填单、登录等等。然而，在填写时经常容易出错，例如可能会输错密码。从用户体验角度看，帮助用户尽可能顺利地处理这些错误至关重要。

对于我们设计师来说，尤其是现在 B 端设计如此流行的情况下，表单 设计细节 尤其需要各位设计师注意。今天会分享 表单设计 中那些你不注意的细节点，必须先点赞收藏了，这些干货知识相信你一定用的上。

比如以登录为例，当你把密码输错后，网站清空你刚刚才填好的表单，是不是非常让你崩溃？删除所有数据对用户来说很烦人，这会让你必须重新输入用户名和密码，即便只是拼错了密码而已。

因此，任何专业的用户体验设计师不仅应该考虑顺利的流程情况，还应该考虑失败时应该怎么办。

表单细节 相关文章推荐：

从 4 个方面，总结B端表单标签的设计细节 上期回顾： [link https://www.uisdc.com/form-interaction] 精心设计的表单，能让用户感到心情舒畅，愉快的注册、付款和进行内容创建和管理，这是促成网上商业成功的秘密武器。

阅读文章 >

从 4 个方面，总结 B 端表单的交互设计细节 “虚假的事物可以被随意想象，唯有真实的事物才能被理解。

阅读文章 >

错误提示 错误提示应该让用户容易找到原因并方便理解。否则，他们可能没办法解决这些错误。所以对于设计师来说，一个非常重要的目标是要设计出一个易于解决错误的流程。一个错误信息应该能清晰的解释到底发生了什么，如果可能的话，最好也提供解决方案。

左边的错误信息很清晰的解释了发生的问题，右边的错误信息对用户来说非常困惑。

1. 什么时候告知用户发生了错误比较好？

当用户出错后，首先要考虑的事情就是应该在用户填表时提醒还是最后通知用户。错误预警中有三种常见模式：

内联/实时：在输入时或移开焦点后立即提供反馈。 提交后/客户端：当用户点击提交按钮之后 服务器端：当请求发送到服务器后再返回反馈给用户 这些方法中的每一种都有其优点和缺点。

2. 内联验证

一般来说，当表单非常短小时用内联验证，因为它允许在内存中的数据仍然最新时更正错误。

你可以用内联验证立即告诉用户哪里错了。

”尽可能的进行内联验证“”这种类型的错误消息很容易被察觉“，此外，输入完成后立即告知错误，对用户的交互成本最低——UX专家Rachel Krause

另一位专家 Luke Wroblewski 建议，当问题的答案不明显时，可以使用内联验证。例如，在选择用户名时，用户可能不知道哪些用户名可用。在这种情况下，在用户输入数据时立即告知错误可能会有所帮助。

3. 提交后验证

另一方面，当表单很大且需要保持关注时，你希望帮助用户保持专注，而不是通过不断显示错误来打断他们。

“使用内联验证，用户必须在两种截然不同的思维模式之间反复切换:填写表单和纠正错误。这减慢了用户的速度，增加了认知努力，通常会降低用户的满意度。”Jessica Enders 在她的书《设计 UX:表单》中写道

4. 服务器端验证

服务器端验证是最不友好的方式，但却为网站提供了很高的稳定性。当需要二次检查用户的数据时，这种方法最有效。

5. 如何提示用户错误？

错误提示告诉用户他们做错了，但是他们究竟做错了什么，要如何修复它？很显然，清楚地说明错误，而不仅仅是显示 Error:90803，对用户有很大帮助。

使用用户能理解的话，而不是用专业术语

6. 使用积极语言而不是消极语言

错误提示措辞要使用积极语言而不是消极语言。例如，如果用户遗漏了一个字段，与其说”该字段不应该是空的“，不如说”请填写此字段“。当使用积极语言时，用户不会因为一个错误而受到责备，这能减少用户的焦虑感，减少流失。

7. 必要时提供帮助

在某些情况下，用户无法自己修复错误，他需要额外的帮助。例如，当用户无法登录时，大多数应用只提供找回密码，而没有找回用户名。但事实上，用户名和密码都可能会忘记。因此，在这种情况下，尝试提供所有必要的操作和信息资源来帮助用户解决问题。

标签 标签是表单可用性最关键的组成部分。如果标签不清晰，那么其他元素就算把可用性做得再好也没意义。所以，不要让用户来猜测这里面到底要填什么内容。

不要用一些模棱两可的词，比如”数字“可能会让人感到困惑，一定要明确意思。

1. 将标签放在输入字段的顶部

许多研究表明，将标签放置在输入字段的顶部可以帮助用户更快地填写表单，因为它允许用户遵循一条垂直线而不是 Z 模式。但是，如果它占用太多的垂直空间，您也可以使用浮动标签。因此，如果你希望用户更快地填充表单，请将他们放置在字段的顶部。

将标签放置在字段的顶部和使用浮动标签，这两种方式都很有效

2. 将标签放在输入字段的左侧

另一方面，当你询问用户比较复杂的问题，用户需要更多时间思考问题答案的时候，研究表明将标签放在输入框的左侧会比较好。

当用户需要思考答案时，将标签放在输入框的左侧会更好

3. 标签应该是可见的，无论什么输入状态

无论你用什么方式，确保当用户填完内容后，标签是可见的。因为，当用户需要再次确认表单内容的时候，他们不用删除填好的数据来查看系统需要他们填什么。

不管输入状态如何，标签都应该是可见的

4. 减少不必要的输入项

要填的表单越多，用户就不愿意填完它。所以尽可能地为用户减少不必要的输入项。如果实在做不到，可以将必填和非必填的字段区分开，减少用户的负担。

5. 可见性

不管状态如何，字段都应该是清晰可辨的。此外，活动字段和非活动字段之间的区别应该要明显。

输入字段应该有高对比度，在所有状态下都是可见的。

6. 自动激活 PC 端表单的第一个字段

自动激活表单的第一个字段，这可以提高处理效率，避免用户额外点击。

7. 帮用户预先填好

在某些情况下，你可以帮用户预先填好字段。例如，可以很容易地检测到邮政编码，或者某些数值可能是频繁的。在这些情况下，为用户填充字段。

8. 格式

含有大量小数的数字很难读懂。因此，当要求较大的数字时，需要考虑添加格式以支持可读性。例如，在询问卡号时，使用自动格式化:读取 5678-9876-9738-8394 比读取 5678987697388394 容易得多。

此外，当请求需要特定格式化数据时，要包含一个实例，让用户准确理解要填什么。

帮助用户了解如何格式化数据

9. 表单区域大小

输入框的大小应该要与所填的内容长度相匹配。比如，当要用户填写用户名时，如果显示的填写区域是一个长段输入框会让用户感到困惑。另一方面，如果你希望用户写一些反馈，但只能看到所写内容的最后一小段，那就很难用了。（彩云注：我就经常在一些体验不好的产品上碰到过这种情况，简直太难受了。）

如果你不能准确预测信息的长短，比如留言反馈，建议表单区域最好是能在用户填写内容触碰边界时，自动变高。

输入字段的大小应该与它预期的数据大小相对应

10. 为桌面系统设计灵活的表单

在键盘和鼠标之间切换很烦人。在理想的情况下，用户应该只使用一种媒介来填写表单，但有时，这是不可能实现的。因此，如果用户需要多种媒介来填写表单，至少要尽量减少切换。为此，将需要同一种工具的输入组合在一起。

另外，当创建一个网页表单时，要确保用户可以只使用键盘来浏览表单——使用TAB和方向键。

11. 为移动端系统设计灵活的表单

当在移动设备上时，将你显示的键盘与用户必须输入的数据相匹配。我们经常看到需要数字键盘的输入可以很好地实现这一点，但几乎很少有 APP 显示支持输入电子邮件地址的键盘。

支持通过显示正确的键盘输入电子邮件

下拉菜单 vs 单选按钮 下拉框的使用比单选按钮更有挑战性，因为它需要额外的点击来打开它们。此外，用户无法提前看到选项，这可能会让他们感到困惑。因此，如果你只有少量的选项，使用单选按钮。如果选项的数量超过 4 个，下拉菜单的效果会更好。

1. 复选框

通过勾选复选框，用户应该是同意某些内容。我的意思是，他们应该说，“是的，我想要这个”，而不是，“是的，我不想要这个”。不幸的是，我经常看到有误导性的复选框试图在创建账户时欺骗人们订阅他们的产品。当你不想订阅他们的通讯时，你又必须勾选复选框，像这样的伎俩对信誉是不合适的，所以不要动心使用它们。

通过勾选复选框，用户应该同意某些内容，而不是确认他们不同意。

结构 一个结构充分的表单就像一个与用户的良好对话。所以记住这一点，仔细规划结构。

1. 从简单的问题开始

从简单的问题开始，从用户已经很清楚知道答案的问题开始，像名字、邮件这类。然后再循序渐进问稍微复杂的问题，像账户信息之类的。

首先，一个很自然的顺序，当你第一次见某些人的时候，你会找一些比较好切入的问题，比如叫什么名字啊之类的。其次，当用户已经填了一些字段之后，那么之后会增加他填完表单的机会。

2. 创建逻辑信息块

将不相关的信息按逻辑分组。例如，你可以将结帐表单分为“个人信息”和“帐户信息”组，将信息分组可以帮助用户一次只考虑一个主题。

通过对相关信息进行分组，使表单可被快速扫描

3. 单步 VS 多步表单

当你有很多问题要问的时候，你可能想知道哪一个最有效：单步流程还是多步流程。一般来说，单步表单的转化率更高，因为它看起来更小，而且不会劝退用户。如果你询问基本信息并希望用户快速填写表单，单步表单就非常不错。

当用户被要求必须填写更多复杂信息时，多步表单会更好。为了帮助用户在进行多步骤填写时不至于失去耐心，可以给到进度条，提示还剩多少步。

4. 单列 vs 多列布局

一般来说，用单列布局会更好，因为可以帮助用户更好地扫描，也可以尽量减少用户遗漏填写。

但当用户多次填写同一个表单时，他们更喜欢多列表单，因为这样不会浪费时间滚动。一般来说，在 B 端应用中这种多列表单会比较合适。

按钮 设计可用的按钮对提高转化率至关重要。如果按钮上的文字内容比较模糊，会容易劝退新手用户。

根据用户按下按钮会发生什么来命名按钮

1. 提高用户的容错率

对于更复杂的表单来说，按钮最重要的一点是，应该有提交和取消表单的单一方法。用户应该至少有补救的机会。举个例子，如果用户点了在线帮助时，他已经填好的数据不应该被丢失。或者，如果用户由于意外点击了按钮，请求不应该被提交。

2. 主要按钮和次要按钮应该很容易区分

为了避免点击错误的按钮，用户应该能比较容易地区分主要和次要按钮。另外，最好不要只依赖颜色，样式上最好有比较大的差异。

让主要和次要的按钮样式上有比较大的区分度

3. 正确的标签按钮

按功能明确地标注按钮。例如，如果按一个按钮可以创建一个账户，在按钮上的文案叫”创建账户”要好过“提交”

总结 当用户打开表单时，他首先肯定是想要填完它的。尝试帮助他们而不是用糟糕的设计给他们设置障碍。

不幸的是，这里面提到的许多错误，并不需要多么高级的技巧，而是因为设计没有同理心。仔细思考你的设计流程，检查是否能让所有内容对不同背景和专业知识的人都是清晰的。

通常来说，一般要达到以下目的，大多数指导原则都来自这些规则：

用户应该只输入一次数据 用户应该填尽可能少的信息 用户应该只需要记住少量的信息 用户检查和恢复错误内容应该要很容易 欢迎关注作者的微信公众号：「彩云译设计」