今天带来的是《交互设计沉思录》第一部分的第二章「管理复杂性」。
主要讲述的是交互设计师是如何理解&组织所获取到的数字、文字数据。
通过这些步骤&方法能够帮助交互设计师更加清楚信息间的关系，建立很强的心智图景。
其间也穿插了很多职能相关部分的对比，如「交互设计师与信息架构师」「交互设计师与界面设计师」「交互设计师与电子工程师」。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
注：阅读此文章大约需要30分钟
先给大家看两个案例：大家都很熟悉的，自动感应测温，不需要人为操控
第二个案例则是nest智能恒温器，比起传统的需要人为的去手动触发调节温度，他能够实时感知家里的温度，基于不同的场景与客户习惯去调节温度，比起传统模式便捷了不少
那么从这两个案例中，大家可以发现，传统人机交互与下一代人机交互是有着本质区别的，传统人机交互一直以来都是输入输出的被动交互逻辑，什么是被动交互呢，就是必须有用户向机器发送指令，机器接收指令，执行后将结果反馈给用户。而新的交互模式，则是用户不需要做任何指令输入，机器自动感知当前的场景，来理解你的意图是什么，来去主动帮你完成任务。那么这是如何实现的呢，主要是依靠传感器，算法等实现的。这也说明了我们的生活开始下一代人机交互的新时代。
这也就是今天的主题，那么今天，我会详细讲解，把这个课题讲透。包括什么是智能感知交互，他的底层框架模型是怎样的，以及结合案例是讲解他是如何落地使用的，
回顾整个人机交互的发展史，经过了不同的阶段，从命令行界面，也就是通过手柄，遥控等进行交互，再然后是图形用户界面，也就是触摸屏等交互，再到语音交互，图像识别等等
人们对于人机交互也从依赖于人去手动触发，再到趋于自然和本能，随着技术的发展，我们也迎来的技能感知交互的新时代
在这里也对智能感知交互做了初步定义：是以人为中心，基于传感器、大数据及AI技术，自动感知用户情景，理解用户意图，主动响应用户需求，真正提升人机交互效率
那么智能感知交互也有几个特征，更加的趋于自然，输入输出方式更加无感知，智能
接下来是最核心的重点，智能感知交互的框架是怎么样的，他的底层逻辑是怎样运行的，这也是整套理论知识的基石和核心。
智能感知交互模型主要分为三层：
那么以刚开头的无接触测温门为例，在感知层主要通过红外传感器去感知人的体温，在决策层则是当遇到发烧的顾客则需要进行干预，在表达层，则会通过音效、光效做出主动的预警的设计表达。
那么我们接下来详细的看下整个框架模型，那么，感知层又细分为三大模块：
第一块为【用户感知】，第二块为【场景感知】，第三块为【行为感知】。 那我这里给他串联起来，简单来说就是感知用户是谁，在什么杨的场景下，做了什么样的行为。那么决策层则细分为两大块，也就是无感知之后怎么做决策，理解用户的意图是什么，。那么第二则是做出决策后怎么去做设计表达和输出呢，受到那些变量因素的影响，这是由设计表达影响因子模型决定的。那么最后一层则是正式做出设计表达，目前表达的介质主要有界面、声音、光效、触觉、动作等。那么这张图是一个大框架，接下来我会详细的剖析每一层
先讲第一层，感知层，就是感知技术，这里在进一步细分为三个板块，用户感知，场景感知，行为感知，用户感知为，用户性别、地域、年龄等等特征，场景感知则是什么时间、什么地点，当前环境、温度等等，行为感知则是去感知，你用了什么工具，对什么对象，做了什么操作行为等等。针对不同的业务会有不同的针对感知，例如开头案例中的体温测量，他对温度这一属性重点感知。大家这里也能想到，世间万物都可感知，为了方便后续的统计和分析，需要进行加工处理，需要将当前的感知线上化和数据化，同时会将这些数据进行标签化的处理，那么如何去处理这些数据呢，这里主要分成三类：
简单来说就是从传感器或者线上平台等渠道直接获取的数据。举个例子，比如说登录网站，那么我们可以获取用户ID，从温度传感器，我们可以直接获得温度。这些都是统计类数据
简单来说就是基于一定的规则产生，举个例子，比如我们规定用户与设备之间的距离为0~40cm为近距离，，工人每小时生产产品80件定义为熟练工，这些都定义为规则类数据
他是通过机器学习挖掘产生，根据相关属性进行预测和判断。比如淘宝上对男女的划分，他通过你买的商品去判断你是男生还是女生，你的兴趣爱好是什么
那么接下来我们讲决策层,那么刚刚我也介绍了整个框架模型，决策层主要有两部分，现在讲述第一部分，也就是整体框架中红色圈住部分，针对【意图识别决策模型】进行剖析。简单来说就是我感知之后去理解用户的诉求是什么，这里也抽象为四大类决策方向:行为干预、推送建议、意图预判、自动决策
简单来说就是我感知到当前的行为是异常、错误的，会做出主动预警进行干预。举个例子，比如图中的场景，通过摄像头的图像识别检测到工人的操作不规范，会通过光效和音效的预警来进行行为干预
是基于你的爱好去推送不同的内容
感知之后去预判，你接下来会做什么。比如上图，当系统之前感知到用户粘贴了地址和电话信息，那么系统就预判你是不是要寄快递
比如陀螺仪识别用户将设备倾斜了多少度，将屏幕做自动关屏
那么前面讲述的是决策层的第一大板块，那么现在讲第二板块，也就是设计表达影响因子模型。简单来说，就是我已经决策完成，那么我怎么去做决策和输出，受那些变量因子影响呢
那么这里也抽象为三大类变量因子，用户感官因子，环境因子，设备因子。
比如在【用户感官因子】上，会去分析，用户当前的认知负荷是什么样的，如果当前是在黑暗的情况下，用户的视觉负荷比较大的话，那么设计表达是不是就应该以听觉和触觉为主。同时我们还会去分析用户是运动状态还是静止状态，如果是运动状态那么在设计的时候是不是需要考虑，字体是不是需要更大，方便用户获取信息等等案例。
【环境因子】就是环境光线的强弱，噪声的大小等等，比如设计的时候，是在室外，光线比较强的环境，那么设计的界面对比度是不是就得更强。
【设备因子】就是传统设计当中，他的输入通道是物理按键，还是触屏，还是语音，手势这些，以及输出通道，有没有喇叭，指示灯等等。这些都会影响我们采用怎样的方式去进行设计表达。
那么第三层就是我们最熟悉的表达层，也就是具体的交互执行。常用的表达方式主要有界面，音效，光效，触觉，动作这几类，这些大家都很熟悉，这里就不做详细的讲解。
那智能感知交互依赖的技术和条件也是比较多的，所以他是分企业分阶段发展的。那么这里主要分为5个等级。从无智能到完全智能，那么目前呢主要处在中间C2这个条件智能的阶段中。简单来说就是机器自动感知部分情景，再加上人的辅助输入，让系统完成任务。
那么前面说这些都是偏理论偏框架类的，那么下面我会结合案例具体讲解智能感知交互是怎样去落地使用的
那么当有了模型框架后怎样应用呢，首先，离不开设计流程，和传统设计流程类似，智能感知交互的设计流程也为：【发现一个机会点，制定对应的设计策略，然后定义具体的设计表达，持续监测进行迭代和优化。】这样构成，那么大家就会想了，那我们的不同之处在哪呢？这其实离不开设计对于技术的洞察力，我们设计对于技术的了解和应用其实贯穿在全流程中。
比如说，在我们在做UED设计中，发现痛点时，我们可以通过问卷调研，访谈调研获得用户的主观数据，也可以通过埋点检测获得用户的行为数据，而我们在优化的时候，除了从设计侧出发的体验优化，那是不是可以不给自己设立边界，比如从技术出发，让算法自身不断学习，让准确率有所提升。带着这样的不同，我来举一个案例。
这块沙琪玛出生在一个非常传统的食品供应链公司，她从出生出来到被运送到客户手中，会经过4个空间，12个节点。而在这层层的校验中，当我们想知道沙琪玛的质量，生产日期，和他的位置，需要的是员工的手动介入和对于条形码的扫描，
但我想更精细化的知道沙琪玛具体的信息来进行更好的数字化管理，那就变得非常困难。所以我们在想，怎么可以让对沙琪玛的管理，变得更聪明一些呢，那改变这传统模式的机会，就来自于识别技术的发展。
那么现在已经运用起来这样的技术了，一些商场的衣服和商品上都会有RFID标签，比如优衣库，在进行结账时只要将多件商品投送到结账框中，就可以一次性识别多个商品完成结账，这就是RFID的优势，他可以完成一对多的批量识别，并且具有更大的识别范围，识别过程中不需要设备和条码直接对视。
那我们就要想了，如果每个沙琪玛都有一个RFID码，那我们是不是就可以批量无感知的识别他们了呢。带着这样的技术优势，我们来回顾整个操作流程，我们发现，在围绕沙琪玛的一层一层校验中，已我刚刚提到的【行为干预、意图预测、自动决策和推送建议】四个角度来找到更智能的优化点，比如说，当沙琪玛从车间生产出来，即将被打包的时候，我们如果发现了一个异常，可以怎么处理呢，大家觉得~~~~我们是不是可以进行一个行为干预，来将这个异常及时的告知给用户，又或者，我们可以进行一个自动决策 ，我们通过自动化设备，来吧出现异常的商品进行自动剔除。
那由于整个链路太长，所以我现在呢，以沙琪玛离开仓库的最后一个校验环节为例，来做展开
这个时候，用户拖着托盘，来到月台，准备将沙琪玛装上卡车，这个时候，如果沙琪玛上错了车，那我们就非常难以将他追溯回来了。所以这个时候，用户的意图是非常清晰的，那就是及时的阻止这个异常的商品流出仓库。但我们知道了，那下一步呢，就是让机器也知道这一个意图，其实在这个场景下非常简单，无非是，某人在某场景下做出了某个行为，而这个场景下我们可以通过员工的账号ID来获取的员工的身份，
我们也可以通过设备上在运行的秘钥来获得当前的实操场景是什么，
还能通过RFID的天线，他所识别到的信号逐渐增强，来发现，啊确实有一个用户，在拖着商品逐渐靠近，那以上这三个条件，就可以触发我们对于托盘上的货物的识别来判断，他上的车是不是对的呢，数量是不是准确呢，一旦发现异常，我们就需要将信号及时的传给用户
那下面问题就来了，我们该怎么表现这个异常，刚才也提到，我们设计的表达是多种多样的，有界面内的，界面外的，环境空间的。而用户接收的渠道却非常的单一，无非是，视觉、听觉、触觉、甚至以后可能会有嗅觉。
所以我们在定义一个合适的表达方案的时候，就需要考虑到当下用户、环境、设备的影响因素，那在我们的场景中，我们应该怎样选择一个合适的感官通道来传递这个异常信号呢
这就需要我们清晰的了解，在这个场景下，每一个感官通道被占用的情况，这样我们才能选择其中占据优势的那些来做出我们的设计表达
为此，我们总结过往一些学术研究，来将用户、环境、设备他具体的影响程度进行数值化。比如对于用户的限制，我们采用VACP的工作负荷模型来量化用户的各个通道上认知资源被占用的程度。而对于用户自身的能力限制，我们通过剑桥大学提出的一个无障碍公式，来计算用户自身能力限制的程度，同样，我们综合国内一些常见的标准，来将环境因素，例如，亮度、噪声、和设备自身的表达能力进行等级的划分。那大家就要好奇了，那要数值化，那数值化靠谱吗，我们怎么做这个数值化呢？
那我以VACP工作负荷模型来做一个简单的展开，他起源与1984年，对于飞行员在驾驶飞机的一个观察和研究。研究者将他划分为视觉、听觉、认知、运动四个维度。同时呢，对于不同难度系数的任务，划分了不同对资源程度占用不同的等级，这样，我们就可以像查阅字典一样，来根据我们需要的任务表现，找到这个通道上对应具体的占用程度
回到我们刚才的场景，当用户拖着托盘靠近的时候，他需要时刻注意眼前的道路，避免和其他物品碰撞，这个时候，视觉上他对物体的追踪和跟随，这个时候呢，在视觉上通道上他会有77%的占用情况
而听觉上，虽然他不需要声音来辨别道路，但在这个过程中，有可能有小组长会叫他说，唉，你过来以下，那这样我们就需要做一个声音的辨认，那在听觉通道上，可能会有14%的占用程度
而在月台上，时刻会有运输与发动机的声音，这个大约在70分贝的噪声，会给用户在听觉上有个二级的干扰作用
综合来看，首先，我们对用户在触觉上的反馈通道就被阻断了，因为设备端离用户实在太远了，无法进行一个触觉上的反馈，
而剩下的视觉通道已经被高度占用了，他的有效性是较为有限的。而在听觉上，虽然他的占用程度没这么高，但他收到了环境噪声的二级干扰，所以我们单一的通过视觉或者听觉都不足以达到一个有效的反馈作用。
好在现在用户的认知还是比较充沛的，所以呢，我们可以通过视觉、听觉、认知三个通道上的整合，来做一个比较有效的反馈。
也就是，当用户靠近时，首先，她会在听觉上听到蜂鸣器的报警，
然后呢，他的注意力就被抓到了灯光的闪烁模式上。，他从他的记忆中记得的灯光的三种闪烁模式上，辨识到了这个闪烁意味着说：这个闪烁，标识着我现在拉得沙琪玛品类有问题，那我要好好的检查一下。那我们的反馈呢，就成功的达成了
那除了刚刚提到的，多感官的反馈，我们在对于界面的设计上，也考虑到了多因素的影响
那第一个就是大家相当熟悉的视觉距离，在我们的生活场景中，，有手持设备的近视距，也有推动设备的中视距，还有推动大型设备上走向通道门的，远达130厘米的远视距
那面对这样不同的视觉距离，和用户静态或者动态的移动状态，我们推导了计算文字高度和文字字号的公式，
然后计算这样的视觉距离和运动速度的不同，来对关键信息做突出化的展示，保证用户在看到关键信息时他的清晰度。那大家可以想想，除了视觉的距离以外，还有什么因素会影响到视觉的表达呢，
那就是环境的亮度。在我们的场景内，尽管有部分都是在室内发生，但也有部分是在室外发生，就比如我们举的沙琪玛的例子，他是在月台发生的场景，那这个时候，就需要我们在色彩的设计上，去考虑到环境亮度的影响，
我们基于 W3C,对于色彩对比度的分析，然后定义了我们的配色方案，在对于室外的环境，我们会采用色彩对比度较高的配色方案，而到了室内呢，我们会动态的将色彩对比度降低，避免用户长时间注视对比度高的界面，造成视觉疲劳
那既然有设计方案，那自然就有效果评估，
我们将智能感知设计的评估，分为主观和客观两个部分，主观就是大家比较熟悉的，比如我们感知的这个情景是否准确，能不能够帮助用户提高效率呢，整个感受是不是愉悦的，是不是有效的，那么这一块我们是通过李克特5点量表问卷，和SAM问卷来进行度量，另外一部分则是客观部分，这一部分我们通过对于算法模型的评估指标来进行度量，比如他的准确率，召回率，精准率来评估他的算法是否可以不断学习和进步。
那智能感知交互的分享就到这里，这里我衍生一下，从刚才的案例中，主要都是实操类的，那么我们是不是可以做个衍生，将智能感知设计的思路方法也延用到产品设计中呢，比如现在的抖音，头条，他们去分析我们的喜好，主动的替我们进行筛选，于是在使用产品的时候，我们可以说是被动的看内容，被动的看到商品被吸引然后下单。那么B端产品也可以以此类推，传统模式下，是人登录后台，主动去找任务，那么在这里，我们是否可以换个思路，任务主动来找人，通过感知到用户的身份，我们来主动检测，他所关注的任务的进度，并且在这个任务落后的时候，主动发出预警和提示，真正的提升用户的管理效率。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
大家有没有遇到这样的问题，当你面对非常复杂的信息时，在进行信息整理设计时，往往会陷入比较纠结的场面，不知道怎么把这一堆信息进行比较好的排列。如果你刚好也有这部分疑问，这篇文章适合你继续阅读。
本篇文章会提供一种解决排列问题的简单底层逻辑，我们可以围绕这个逻辑去排布我们的页面，从而让整体排版变得更加清晰合理。
信息层级存在于我们目前看到的每一个画面。它本质上是信息组织的一种方式，通过信息的放大缩小和对应的位置，能够将复杂的信息分为不同的模块呈现在我们的视野中。
大家先简单看一下图中两个画面，你就能够直观感受到信息层级对于用户认知的作用。
不好的信息层级就像左图一样会让画面比较杂乱，难以进行视觉上的识别。而优秀的信息层级就像右图一样能够让我们快速且准确的识别出画面想要传递的信息。
因此信息层级的排列不仅影响视觉上的美观度，更影响人们在检索信息时候的效率。尤其是对于B端复杂场景，我们不仅需要考虑清晰传递业务价值，合理的信息层级划分也是提高产品体验的重要部分，好的信息层级则意味着更好的使用体验。
既然信息层级对于使用体验比较关键，那么怎样做好页面的信息层级则显得尤为重要。而目前网上的资料也是参差不齐，我也曾为此类问题查阅了大量资料，想要找到一个简单高效的答案。
但目前查阅到的资料几乎都在讲排列的四个基本原则：对比、对齐、亲密、重复。不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用。但也阐述得太过宽泛，让人很难在实际中更有效地利用。
即使我对排版四个原则非常熟悉，在面对复杂层级排版时仍会面对困惑。因此我对目前页面上比较好的页面排版进行了进一步的探索：
经过线上页面与概念的整体研究发现，他们在遵循排版原则的基础上，本质上都存在一个简单的逻辑：那些优秀的页面设计都把主内容的层级控制在了三层左右，如下图所示。
因为三层左右的层级是最容易被用户感知，且视觉上不易混乱。超过三层后随着层级越多复杂性会相对增加。
比如我们看下面这两个例子，左边层级因为特别复杂，造成用户获取信息效率变低，而通过层级的转换，我们可以将其变得更简单且易读。
再举一个例子，我们在大部分场景见到的纯文字排版基本都离不开以下几种形式：
因此，我们需要在排版时需要首先思考一个逻辑：那就是尽量将我们的内容层级控制在三层左右。且这三层内有比较明显的对比关系。
有同学看到这肯定要问了，这个道理我也懂啊，可是在实际业务中大部分时间拿到的信息太多，根本做不到保持在三层以内。别急，这篇文章的重点当然不是告诉你这么简单的道理，而是在面对复杂层级的时候，我们应该怎样去控制它的层级表现，从而让它在最终呈现上保持在三层左右，让用户获取信息的效率更高。
其实我们在实际中的大部分优秀页面，在本身的信息层级上可能都非常复杂，但我们可以通过一系列的方法，去减轻这种多层级的影响，从而让我们的页面即使承载了很多复杂的信息，也能变得更加简单清晰。那我们接下来就阐述一下对复杂层级的处理方案。
这可能是被很多人忽略的一点，就是信息的前置处理。我也曾遇到过某些信息很复杂导致排版很困难，但却忽略了这些信息是否真实地被需要。这就需要我们从源头上进行第一层的判断。
源头降低的本质就是判断我们当前所要呈现的信息是不是必要的。其实这也是在目前工作中遇到的场景，比如某些时候产品给到了我们很多信息，但我们并不一定会全盘接受，而是通过当前页面的业务场景去进行判断。确定每个信息的合理性，从而可以决定有些元素是否可以删减，提高整体信息设计的一致性。
1. 当前的所有信息真的需要存在于页面中吗，如果去掉某些信息有无影响。
比如当你在进行打车的时候，当你输入目的地之前，一切其他的信息都无需呈现。当你输入目的地后，车辆的相关信息和价格才会进行呈现，当你打车后，司机的相关信息才会进行呈现。这些都是按照用户的使用场景来进行对应的呈现。
2.当前信息的重要程度是怎样的，对于某些不重要的信息是否可以通过隐藏的方式展现。
当你拿到一堆信息，信息的重要程度就决定了我们需要将哪些信息作为主体，哪些信息作为次要辅助信息，哪些信息甚至可以收起或者省略。比如当你浏览新闻的时候，标题永远是最关注的，而评论，作者，简介等都是可以忽略的信息。
上述两个问题的确认，会影响我们对后面的信息排布。因此我们需要在源头，比如去和产品或者业务沟通，弄清楚该信息呈现的缘由以及必要性，这样能够帮助我们最后理清楚信息层级。
信息排布的本质是通过我们对信息进行排列上的调整，来将多余的层级融入到三层以内。从而让我们整体的页面显得更加简洁。
通过目前的实践总结，我觉得目前可以有以下五种方法来帮助我们更合理地安排信息层级。
信息分组是大家在设计时都能够想到的形式，分组能够将复杂的信息打散，从而降低页面整体的复杂度。比如我们常用的分组方式有三种方式：间距、分割线、卡片。
那么这三种方式有没有区分呢，VIVO设计团队曾经就这个问题展开过用户调研，但结果表示，如果纯粹从用户的角度来讲，对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感，因此我们可以根据当前信息的复杂度作出以下规则：
通过这三种场景的区别，我们可以根据信息复杂度更好地选择分割方式，让界面的表达清晰明确。
组件其实是目前大部分设计师在进行信息排布时必备的部分，因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是，目前这几种组件对于我们信息层级的划分起到了比较重要的作用：树形结构、表格结构、步骤条、选项卡。
▍树形结构
对于有关联性的多层级非常适合，可以将复杂的层级结构进行收拢，从而能够显著降低信息的复杂度。
▍表格结构
对于信息多且关联性不大的复杂信息，可以聚合到表格来进行呈现，但表格的呈现方式不宜滥用，需要根据我们场景来进行选择。
▍步骤条
步骤条则对场景要求非常明确，我们可以将多个场景通过分布的形式进行呈现，从而减少当前页面的复杂度。
▍选项卡
选项卡更适合与同级的数据，对于同类型的结构可以更好地将页面进行拆分，从而让当前页面更简洁。
由于组件这一块大家的认知已经比较全了，在这里就不进行更深入的讲解了。如果有需要的同学可以通过浏览各大厂的组件文档去进行更细致的查阅。
通过改变布局的方式，我们可以将多层结构的样式通过拆分布局来将其控制在三层内。这句话什么意思呢，举个简单的例子：
从上图中你可以看出目前的层级较多，尤其是两层tab的叠加，视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局，从上下结构变为左右结构，达到从视觉上简化层级的作用：
当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时，我们可以考虑通过改变结构来减少其复杂度，比如上述的两栏结构，甚至三栏结构，从而让整体变得更加简洁。
我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式，让其融入到同一个层级中。比如我们看下面这一个例子，Coding产品设计中将标题与tab利用分割排列在一起，从而变为同一层级，这个时候就不会出现四层的复杂结构，页面还是保持三层结构，通过这种方式有效降低了页面的复杂度。
信息融入这个方法，当我们在进行B端布局时，用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间，还能够降低信息层级的复杂度。
但在进行信息融入的过程中，我们需要注意的是：如果放在同一层级会造成理解上的误解时，这个时候不要采用该方案。比如搜索框的位置，放在哪个层级决定了对应的搜索范围。
信息弱化的原则是，将某些超出层级的部分进行弱化。比如有5个层级，但其巧妙地将功能筛选融入到了当前的结构中，使得即使超过3层我们也不会觉得其特别复杂，我们再看一个例子：
可以看到TAPD将「另存为视图功能」与「缺陷统计」进行了弱化，虽然还是有4种层级，但从视觉感知的层面上不会觉得视觉凌乱。
在很多时候，我们觉得信息混乱的原因，就是页面要素太多太花哨。比如工作中的一个小卡片，也就是利用信息弱化去减少画面的复杂度：
因此我们需要学会对信息分级，不重要的信息就进行弱化，这样整体的表述上会好很多。
通过上述5种方案：信息分组、利用组件拆分、更改布局、信息融入、信息弱化，我们可以将大部分层级过多的复杂信息简化在三层以内，从而让我们最终的页面呈现不会太过复杂，更容易被用户理解。但不可否认仍会有更复杂的页面，即使缩减也仍有过多层级，那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。
在研究的过程中，也总结了目前在进行信息层级排布过程中比较纠结的一些细节点，也分享给大家。希望对遇到相同问题的同学一些帮助。
大家对「对齐」并不陌生，它存在于我们的每个页面。但在对齐的过程中，我们可能会忽视一个小细节点，那就是沿着字的轴线对齐。比如下图两个例子：
在看见左图时，总觉得哪里会有点奇怪，但又不知如何表述。而右图看着就会相对更舒服。经过对比过后明显发现右边的图整体相比于左侧会更整齐，而这就是说的沿着字的轴线对齐。这主要是由于相似原则引起的：那些明显具有共同特性(如形状、大小、颜色等)的事物会被我们的视觉组合在一起，即相似的部分在感知中会形成若干组。
而左侧因为标题字和底部字没有形成对齐，因此会显得更加凌乱一点。所以沿着字的轴线对齐会让我们在整体的页面呈现中显得更整齐。
这是我平时在做设计呈现时也会纠结的一个问题。当你想用卡片来呈现视觉时，你有没有纠结过到底是用线框卡片还是背景色填充呢。
我就曾陷入这种纠结，但在去搜索查阅时，发现目前其实关于这块相关的资料，因此在大部分情况下都是由设计师自行决定的。但经过线上产品的调研发现，这块内容其实也包含着一定的规则：
1.取决于卡片的数量
对于卡片少的其实可以用色块来呈现，对于卡片多的可以考虑用线框来进行。这其实主要是从一个视觉的维度来进行呈现，举个简单的例子：
通过coding和飞书的卡片对比，你会发现卡片过多时线性设计会让页面显得更整洁和清新，色块设计就会让页面显得更厚重。右侧整体的呈现行会显得更好一些。
2.取决于页面的视觉重心
这里页面视觉重心的含义是当你整个页面都全是线框时，你可以利用色块的卡片来达到突出页面重心的效果，让整体页面没有那么单调，可以看到下图的例子，右侧的页面会相对更稳重一点。
在进行色块时，时常会纠结用灰色底还是彩色底来进行。那么这两者到底有没有界限的区分呢，我们应该何时使用这两种色彩呢。
我们先看一下案例：
可以看出目前这两种颜色的运用更多的是功能上的区分：
1.彩色背景更适用于「想要引起用户注意的界面」，比如一些功能引导或者营销性质的页面。从表现性质上来讲更重。
2.而灰色背景更适用于「利用灰色背景来区分层级关系」或者一些微弱提示的信息。从表现形式上来讲更轻。
所以我们可以根据当前的信息场景来选择合适的色彩，后面再面对时就可以不用那么纠结。
本期的内容到这里就结束了。关于这期的信息层级内容，真正需要深入了解的是控制信息层级背后的方法。很多时候我们看见的优秀页面并不是因为它本身就简单，而是通过我们合理的信息层级控制，让最终呈现上显得不复杂，这其实也是我们在实际工作中需要注意的很重要的一个点。
本文重点内容再回顾，当我们遇见复杂的信息层级时，需要分三步：
1.明确当前所有信息的必要性和重要分级，需要从源头去深入了解；
2.运用五个方法可以有效减低信息层级：信息分组、组件拆分、更改布局、信息融入、信息弱化
3.同时在运用过程中需要注意影响层级的小细节
以上是本文关于信息层级的另一种角度的描绘，虽然没有提及四大基本原则，但在实际运用中也是很重要的。最后，虽然进行了很多资料查询，但在在阐述过程中不可避免会有阐述不到位的地方，欢迎进行反馈。
原文地址：站酷
作者：蒙东东
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
众所周知，「用户体验五要素」出自Jesse James Garrett 的《用户体验要素》一书：战略层、范围层、结构层、框架层、表现层。
产品设计者和开发者的角度可以对应理解为：为什么做、做到什么程度、这些东西如何组成、规划用户操作行为、如何呈现这些东西。
「Live Activities设计规范」由苹果出品，原文为英文，上一篇已翻译https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了个人对其内容的叙述方式存在一点意见。为了更好的记住&理解「Live Activities设计规范」，使用比较熟悉的「用户体验五要素」对内容进行整理。
原文提供的Live Activity定义如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
从原文可以提炼出Live Activity显示特点：
1. 内容是频繁更新的、有进度/状态显示的、用户关心的。
2. 内容的信息量是一眼就能看完的程度。
但上述仍是表象，并非实质，接下来思考这几个问题：
1. 为什么显示的是进度/状态频繁更新的内容？
2. 为什么要强调用户关心的？
3. 为什么信息量是一眼就能看完的程度？
没有Live Activity时，频繁更新主要靠push推送。但push容易被其他APP的push覆盖，且随着各种APP的频繁使用，用户获取关键信息的效率和通过push打开APP的次数反而在下降。
进度/状态频繁更新的内容，说明每个状态存在的时间短，如果被覆盖/忽略，同一状态就不再复现，用户所关心的，或APP所希望用户关心的，就看不到了。比如：什么时候取外卖、待付款、上传成功等等。
当下我们所处的时代是信息泛滥的时代，需要对信息作精简，但用户的操作是可以多条线进行的，比如比如边看剧边吃饭、上班摸鱼/等外卖、比如听音乐的时候写作。
信息内容和量是官网一直在强调的，需要精简，只展示用户需要的，基本达到一眼看完的程度，目的就是知道变化的是什么，当前状态是什么。
分析了这么多，大胆推测一下Live Activity的设计初衷是：快&准确&轻。而终极目的是打动用户，形成好体验，进而推动口碑和销售；为各APP提供新的通知形式，互惠互利。当然Live Activity在一定程度上也弥补了硬件上的缺憾。
关于这个层次相当于规定功能范围&信息边界限制，就是什么要，什么不能要。这部分的信息官网给出许多，在此将其分类梳理如下，为避免大家不好查找官网/译文对应出处，在句未已标注。
1. 仅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平台注意事项）
2. 非iPhone14的仅针对iOS16有锁屏Live Activity展示。（源自：什么是Live Activity-锁屏）
3. 支持用户手动清除锁屏状态下的Live Activity。（源自：实际操作）
4. 支持用户直接关闭对应APP的Live Activity。（源自：最佳实践方式第3/c条）
5. 支持Live Activity自动开始&结束。（源自：最佳实践方式第6/f条）
6. 限制跟踪活动/状态时长不超过8小时。（源自：最佳实践方式第1/a条）
7. 限制活动/进程结束后展示时长不超过4小时。（源自：最佳实践方式第8/h条）
8. 支持更改背景颜色&不透明度。（源自：设计有用的Live Activity第5/e条）
9. 限制内容布局。（源自：设计有用的Live Activity第5/e条）
10. 限制不同设备的展示尺寸。（源自：规范）
1. 避免在Live Activity中显示敏感信息。（源自：最佳实践方式第4/d条）
2. 避免在Live Activity中显示广告和促销活动。（源自：最佳实践方式第5/e条）
3. 只提供正在进行的任务/事件的关键摘要。（源自：最佳实践方式第2/b条）
4. 在任务/活动结束前，给用户提供关闭Live Activity按钮。（源自：最佳实践方式第6/f条）
5. 点击Live Activity直接定位到对应页面，无需用户二次导航。（源自：最佳实践方式第7/g条）
6. 考虑在活动结束后，锁屏上在合理时段后自动删除Live Activity。（源自：最佳实践方式第8/g条）
（个人猜测）由于是提供一个展示区域，且展示区域有限，所以对于层级架构，一级展示什么，二级展示什么，各阶段展示什么，这些都没有做明确规定&建议。各家APP可以根据自身实际情况进行设计。
通过Live Activity的展示形式，可以总结为2点：吸引、查看（摘要&详情）。
1. 一般是在原深感摄像头两侧展示（电话会直接展示扩展型），分为紧凑型和最小化。
2. 紧凑型在仅有一个活动/事件的时候展示，虽被原深感摄像头分割两端，但仅作为一条信息展示，为了视觉上的统一，这里的颜色不支持开发设置，使用的是系统默认色值。
3. 最小化在存在多个活动的时候展现，左侧和原深感摄像头粘连，右侧独立成岛。
4. 不管是紧凑型，还是最小化，都可以通过点击原深感摄像头区域，进入APP内页，或者长按唤出扩展型。
1. 进入内页的查看基本就是各家显神通了，这里主要讲扩展型和锁屏。
2. 原则上是不支持在扩展型和锁屏做复杂操作的，基本点击是进入APP。
3. 扩展型是用户长按紧凑型/最小化唤起的展示区域，内容是可以自定义的，当然官方也给了相应的建议，具体如下。内容信息种类多的可以采用这种信息左中右排布，底部预留大按钮。内容信息少的可以采用左内容右操作的方式。
4. 根据一致性原则，锁屏展示的布局框架应该与扩展型差不多，同样可以点击打开APP。只是在锁屏状态如果有多个任务同时进行，是会全部展示的，所以要注意品牌的传递，避免用户混淆服务方。
对于如何呈现这些东西，苹果还是写了很多建议，确保视觉上的一致性和美观。
1. 紧凑型状态下，为了保证两侧信息的连贯，除了语句阅读连贯，还需要在图形和颜色上具有一致性，视觉上连贯。
2. 锁屏状态下的背景是可以自定义颜色、图像、不透明度的，当然文字的色值和不透明度也是可以定义的。这就涉及到两者间的对比度对信息阅读的影响。
3. 设计师不仅要考虑最佳状态，还有深色&浅色模式下的，以及不同环境光、设备亮度下的显示。还有一点很容易忽视的，就是在用户自定义的墙纸下显示的效果。不仅要注意信息获取，还需要考虑美感问题。
1. 紧凑型和扩展型之间的布局要保持一致，两者间的变化过渡效果是可以预测的。
2. 一般来说，扩展型和锁屏状态下的信息间标准间距是20pt。
3. 在某些情况下，例如图形和按钮，您可能需要使用更紧凑的边距，以避免挤满边缘或形成混乱的外观。
1. 内容和Live Activity边缘之间的边距需要保持一致，请遵循SwiftUI规则。
1内容和Live Activity边缘之间的边距需要保持一致，，发现以圆角边界为测距点得到的间距关系较为舒适。即：圆形/大致为圆形的图形保持上下，3. 以及左侧或者右侧间距一致即可；方形/大致为方形的图形保持圆角边界与容器圆角边界垂直对齐即可。同一位置的多个图形圆角需要相对统一，才能确保间距的一致性。
需要适应不同机型的尺寸。具体的尺寸规范如下。
动态岛使用44个点的角半径，其圆角形状与原深感摄像头相匹配。
下表中列出的所有值均以pt为单位。
ps：左侧为宽度，右侧为高度。
以上就是整理分析的全部。
在整理分析过程中加强了对「用户体验5要素」各个层划分的理解，也对Live Activity在各个层次上的要求更加明确。
不太爱看书，看了老忘，就很容易失去信心，垂头丧气、一蹶不振。
比较喜欢做图，把信息间的逻辑以图示化的方式表现出来，能加强理解，后期回顾也会比较舒心。
所以就有了这个系列——阅读图示化。
可能会出得很慢，画图比较费时间，想着怎么展示信息间的逻辑也很费时间。
基本是按着小节一块内容对应单图/多图。
基本一张图是一个完整的知识点。
什么是“有驾”
【有驾】是百度旗下的汽车信息与服务平台，累计用户超5.3亿，致力于为用户提供真实、可靠的看选买车服务，以及为车企和经销商提供从品牌到效果的一站式互联网营销解决方案。
现状分析
有驾品牌在孵化初期，重点是在用户词建立品牌感知。所以我们提取“有驾“的字形做为品牌符号，减少歧义，强化用户的感知。
但是随着品牌持续运营进入新的阶段，我们发现现有的设计无法满足后续的运营诉求了，主要体现在：
品牌logo：不能体现汽车的行业属性，缺乏成体系的品牌符号和VI体系，色彩上也不够符合时下潮流的年轻配色体系。
品牌活动：品牌关联度弱，活动维度单一。
项目概述
因此，我们重新梳理有驾的品牌定位与调性，借助本次品牌升级，打造有驾差异化风格，形成独有的视觉印记。
因为用户对于旧的logo已有一定的认知。所以此次改版的目标在保持固有用户认知，在原有基础上进行品牌标识的探索及应用，以强化品牌感知，提升品牌的竞争力，整合业务资源做心智触达。
前期分析
前期我们对汽车垂类的竞品进行了一轮调研，并且结合有驾的用户群里，寻找有驾品牌的差异点。
有驾用户群体年轻化为主，普遍具有高学历，集中在新一线二线城市。
通过以上在用户、行业及行业趋势等多唯独的信息搜集后，我们确定了有驾品牌设计的四个核心关键词：年轻、科技、未来、专业。
建立体系
在明确设计方向后，我们梳理了线上线下的所有品牌触点，结合前期的调研结论，汇总出了有驾设计系统的完整框架，以确保品牌设计的完整性和灵活适用性。
设计落地
基于前期分析洞察结论，我们在继承圆形和车形的基础上，对品牌符号与icon进行了大量的方案探索。从图形、质感等方面切入，简化图形形态，尝试不同的形态呈现的视觉感受和气质。最终确定了全新品牌logo方案。
相对于升级前，新版的logo加入汽车元素，解决升级前logo的行业属性不明确的问题，让产品app的行业属性更加直观。同时增加品牌符号做为底纹，辅以有驾的圆形符号成为品牌核心的一部分。强化有驾的品牌基因。
符号提炼
确定品牌logo后，为了确保品牌能够更好的拓展应用，进行了品牌符号的提炼。并为了延续之前的品牌调性。所以辅助图形延续了之前的圆环造型，造型偏向轮胎；在不破坏原有型的基础上，加入一些折角的质感的变化，使图形变化更加丰富，更有识别度。
设计语言
为了更好的触达到各业务场景，所以我们对视觉风格进行了探索和拓展。分别以浅色与深色作为主要探索方向，以适配不同的落地场景。结合有驾的年轻化，科技感的设计目标，探索出以下三种质感呈现：
符号拓展
在提取的形状基础上进行变形，增加折叠细节。在大事件活动，海报等场景使用，增加品牌关联度。
设计字体
结合全新的品牌定位，我们也优化了有驾的品牌字体，从细节出透出有驾的品牌感知。
品牌手册
新的品牌需要一套更全面的品牌系统来满足不同场景下的业务拓展需求。
目前我们也对现有的品牌手册进行拓展和完善，同步到业务方，以便更好的保证各业务场景触点下品牌的认知和统一，达到提质增效的目的。
品牌落地
除了对品牌对角度的塑造和升级，我们更积极的把品牌渗透到活动、栏目包装、大事件运营、品牌海报等各维度场景中，让有驾品牌形象更加立体多元。
结语
目前有驾品牌升级已经取得阶段性成果，沉淀出更加完善的品牌资产，不仅提升设计效率保证全链路的品牌曝光，也为业务规模化打下基础。之后我们也将不断完善和扩充品牌资产，将设计成果不断落地到业务中，细化业务目标并与设计目标紧密结合，多维度助力业务的高速发展。
从事体验设计这么多年，经历过多款B端和C端产品的体验设计，有了一定的个人感悟。由于两者用户群体、使用场景、产品定位等方面的不同，让两者的体验设计策略也存在较大的差异。但是无论是B端还是C端产品，有一个共同的体验目标就是“提升用户的操作效率”。甚至在一定程度上，C端产品比B端产品要求更高。
为什么这么说呢？
因为C端产品面临激烈的市场竞争，如果效率方面存在明显的不足，用户很容易就转向其他平台了。而B端产品一旦部署上线，不菲的产品价格，平台切换的风险，数据迁移的成本等因素，很容易形成产品的护城河。虽然用户内心已是万马奔腾，但是依旧要自己摸索尝试、查看文档、或者请教别人来完成工作任务。
今天我们了解下C端产品用户行为路径中提升效率的4种方法。
用户行为探知，就是根据用户的操作行为或特定的时间，系统给出相应的推荐操作。
最常见的就是截屏操作产生的行为引导，目前主流的产品应用都会做出分享功能提示。在淘宝中，由于商品链接无法在微信中直接分享，所以淘宝对可能的用户分享行为都进行了设计优化。
例如用户在商品页面截屏时，系统会自动复制淘口令，既方便用户分享给好友，又方便了对方快速获取商品信息，避免了图片分享过程中的复杂操作。同样微信在用户发信息时，会自动提示是否要发送截图内容，减少了用户选择图片等操作流程，提升了用户效率。
（左图：淘宝截屏提示 右图：微信提示截屏信息）
高德地图在特定时间段，开启导航时会默认给出“上班路线”的按钮，方便用户快速导航。此外还在地址中增加了“常搜”标签，根据当前地址优先显示常搜的地址，帮助用户快速完成导航设定。
用户行为引导，就是通过用户行为流程分析，在用户路径中增加相关功能的曝光和引导，让流程更加流畅，从而提高用户的操作效率。
淘宝购物商品详情页中，在最后几张商品图片中植入了评价信息和入口，更加符合用户的心智，引导性也更强。同时用户可以直接选择自己喜欢的款式查看商品评价，操作效率也更高。
而且增加评论引导后，实现了用户在首屏就可以了解商品、价格和用户评价，有利于用户对商品作出初步的购买决策，从而提高用户效率。
相比之下，专门的评价模块进入后默认显示全部商品的评价信息，用户需要手动选择才能查看自己喜欢的商品款式的评价信息，无形中拉长了用户的行为路径，增加了用户操作成本。
在今日头条中，搜索行为与资讯内容绑定。用户在浏览的资讯后，资讯下方会自动显示搜索关键词，可以帮助用户更快捷的进行搜索操作。
同样在热榜资讯下方增加了详情提示，引导用户去查看事件详情。
（左图：搜索关键词推荐 右图：热榜引导）
手机产品屏幕的空间相对较小，展示内容有限。因此需要根据用户行为，将相关功能聚合，让用户在一屏中可以获取更多的信息，从而提高用户效率。
在天猫部分商品详情页中，将商品参数集合在了商品名称右侧，保证了用户在不滑动屏幕的情况下，就可以直接读取商品参数。方便了用户快速了解商品信息，提升了用户的购物效率。
考拉海购则在部分商品首屏中，直接分类展现出了商品的型号和款式分类，并且实现了商品价格联动，提升了用户获取信息的效率。
减少用户的记忆成本，最好的方法就是让系统产生记忆。因此大多数APP都会提供历史浏览记录等功能，方便用户查找相关信息。而内容型产品为了更好的提高用户操作效率，则是将用户行为记忆直接保留在内容层面上。
我们常见的音乐类产品会留存音乐的播放进度，用户点击后就可以直接再次播放。
（左图：喜马拉雅 右图：网易云音乐）
微信公众号文章阅读时，会对用户阅读位置增加锚点。用户再次阅读时，自动定位到上次退出时位置，从而提高用户的阅读效率。
微信“看一看”进入时，内容会自动刷新，提供更多新的内容给用户，为了帮助用户更好地区分新内容，微信增加了浏览位置提醒。
同样对于用户未完成的文章内容，用户再次进入时，今日头条会给出继续阅读的提示信息，方便用户快速操作。
在提升用户效率时，我们需要关注用户场景和行为路径，从而寻找到更多的效率提升突破口，主要包含以下3个注意点：
1、明确用户的行为路径，寻找用户核心关切点，提升用户效率；
2、转移用户操作成本，让系统承担更多的行为判断和用户引导；
3、用户行为聚合时，应当集中关键的行为信息，避免对用户核心行为造成干扰；
以上就是我对提升用户效率方法的分析和总结，欢迎大家留言交流。
作者：子牧先生
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
有人说它是全世界最牛逼的APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。关于这两种说法，众说纷纭，本期设计大侦探，就来全面拆解铁路12306APP，一起来看看这个产品到底是如何设计的，用户体验如何。
1. 内容结构
全文9700字，分为六个部分，分别是导读、产品画像、出行服务、内容服务、思考总结和后记，你可以通过下面的思维导图对本文内容快速的了解。
2. 适合人群
第一类，UI/交互设计师，可以跳出执行层，全方位体验12306的产品设计，多维度去思考和总结如何规避类似的陷阱；第二类，产品经理/运营，通过全面的产品设计拆解、体验反馈，获取产品设计参考；第三类，旅游及出行相关行业从业者，通过对12306的全面拆解，获取竞品设计参考。
3. 分析模型
第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的5个重要环节，主要用于拆分和分析产品的功能价值。
第二个，尼尔森十大可用性原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计。尼尔森十大原则包括即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则，通过这十大原则，可以对12306的产品设计体验进行全面的校验和侦查。
第三个，设计心理学。包括常见的格式塔原理、费茨定律、巴甫洛夫反应、7±2效应、席克定律等常见设计基础理论。
1. 产品介绍
铁路12306是中国铁路客户服务中心推出的官方手机购票应用软件，主要为全国各地的乘客提供火车票预定、机票预订、汽车票预订等购票业务，首个版本发布于2012年10月16日，根据易观千帆数据，截止到2022年10月，12306月活跃用户人数6,923.78万。
2. 用户画像
铁路12306的用户群体主要以男性用户居多，占比65.04%，女性占比34.96%；从年龄分布看，以24-30岁的用户群体最多，占比36.52%，31到35岁的用户占比24.23%，36到40岁占比20.27%，41岁以及以上占比10.30%；从用户消费能力看，中高消费者占比33.48%，中等消费者占比30.43%，高消费者占比14.70%；从地域分布看，新一线城市用户最多，占比27.93%，一线城市占比19.93%，二线城市占比19.00%，其中广州用户最多，其次为深圳、杭州和北京。
3. 信息结构
铁路12306的一级菜单包含首页、出行服务、订单、铁路会员和用户中心。「首页」主要为用户提供火车票、飞机票和汽车票的购买，其次还提供各种快捷功能入口和酒店预订等服务；「出行服务」主要为用户提供约车、酒店、订单等服务；「订单」是可查询和管理在12306的各种订单；「铁路会员」是12306的会员版块，提供车票兑换、会员活动等内容；用户中心提供个人资料管理、出行向导和常用功能等内容。
4. 重要迭代记录
根据七麦数据统计，铁路12306的APP首个版本发布于2012年10月16日，截止到2023年1月12日，APP版本已经更新至V5.6.3版本，近一年版本更新次数为5次。
版本重要迭代记录
2021年9月，发布V5.4.0版本，新增无障碍功能、老人及障碍人士购票更便捷，即爱心版；
5. 产品生命周期
作为中国铁路客户服务中心的官方购票平台，铁路12306距离首个版本发布时间已经过去10年。从易观千帆数据观察，截止到2022年10月，12306月活跃用户人数6,923.78万，日均活跃人数811.65万。由于是国有企业运营，而且是垄断业务，12306没有任何商业变现的压力，从产品发布时间和活跃用户人数看，目前处于产品生命周期的成熟期。
6. 竞争图谱
截止到2022年10月，易观千帆数据显示，铁路12306APP在苹果的APP Store应用市场APP总排名71位，旅游类排名第一，汽车火车船票预定类第一，月活跃用户人数几乎是其他APP的总和。
三、出行服务
作为12306最核心、最重要以及实现商业变现的服务，出行服务主要为用户提供火车票、飞机票的销售，其次还链接了众多第三方合作伙伴，为用户在出行的各种场景提供了便捷的服务。
1. 票务
「票务」是12306最核心的服务，主要为用户提供火车票、飞机票和汽车票的查询以及销售，其次12306还对三种产品进行了组合，推出了空铁联运、铁水联运这样的服务。
1.1 火车票
「火车票」就是为用户提供火车和动车的票务销售，用户输入出发站、终点站和时间以后，就可以进行查询，其次还支持对已购买的车票进行变更到站、改签和退票。
1.1.1 售票
1.1.1.1 售票页
当用户输入目标站点以后，就进入了售票页。在这个页面，可以看到当天列车的所有车次，包括直达、中转、出发时间和剩余票数。在底部，有一个菜单栏，包含了筛选、耗时最短、发时最早、显示票价和候补下单五个功能，这主要是帮助用户快速寻找符合自己需求的车次，比如出发车站、出发时间等。
体验陷阱
这个页面的操作体验不太友好，底部的菜单栏不仅没有实现全屏手机设备的兼容，而且几乎和背景的元素贴合在一起，不够醒目，如果用户不注意，根本无法发现底部竟然还有一排菜单栏帮助用户进行高效的检索。
1.1.1.2 订单页
①在用户选择好车次以后，就进入订单页。用户需要选择座位的系别，包括硬座、软座、二等座、一等座、特等座等。
②用户需要选择乘车人。添加乘车人的步骤比较简单，在输入用户的真实姓名、身份证号码和手机号码以后，即可添加成功。首次使用12306的用户需要进行身份核验，用户需要通过验证系统发送的核验信息才能添加成功。
细节侦查
「姓名」这里有一个非常友好的设计体验，那就是针对无法输入的生僻字、名字超过30个字符，以及外籍用户的极端情况都给出了详细的指导，针对用户可能出现的极端的情况给与及时的提示，这就是尼尔森十大原则中的容错原则，帮助用户从错误中恢复，将损失降到最低。
③在「选择乘车人」的右边，还有一个「选择受让人」的功能。这个功能有很高的学习成本，会让用户摸不着头脑。我也是通过百度查询才了解到这是一个用户权益功能，它主要是指用户可以把平时购买火车票获得的积分转让给指定的用户，积分又可以抵消火车票款，从而实现抵扣。
④选择好乘车人以后，用户可以进行选座，就进入了提交订单、支付费用的环节。
1.1.1.3 支付页
①订单生成后，用户需要在付款限定时间内支付火车票费用，否则订单将会取消。其次在支付页，也向用户推荐相关的保险服务，比如铁路乘意险，又分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险。
②「购买返程」其实一个非常便捷的功能，但12306设计的层级太深了，而且没有加上一键返回首页或订单页的按钮，用户如果想退回到订单页或首页，需要不断点击返回，操作路径实在太长。
体验陷阱
底部菜单设计了三个按钮，违反了费茨定律的设计原则。用户在这个支付页的主要目标是支付费用，但是菜单栏的三个按钮权重设计得一样高，取消订单和购买返程这两个按钮，严重干扰了用户的选择，降低了操作效率。
1.1.1.4 支付成功页
当用户支付成功以后，「支付成功页」为用户提供餐饮预订、出行保险、酒店入住、网络约车等服务，非常便捷。不过内容的规划比较乱，体验稍差。
1.1.1.5 候补下单
「候补下单」是一个非常方便的功能，这个功能主要解决在当前车次没票的情况帮助乘客自动排队，如果有其他乘客退票，就自动抢票，非常贴心。这个功能也被誉为黄牛的终结者，帮助乘客自主排队。
1.1.2 变更到站
「变更到站」是指乘客可以更改目标站点，进入订单详情页后，点击「变更到站」按钮，点击底部的「立即变更到站」就可进入变更页面。在变更页面，乘客可以重新输入目标站点，然后再次进入车票售票页，选中需要变更的车次以后，进入订单页提交订单，变更成功。需要注意的是，变更到站只能办理一次。
体验陷阱
当用户点击「变更到站」的时候，如果不注意观察页面，根本感受不出原来需要在底部菜单栏进行操作，会让乘客陷入焦躁，不知道下一步从哪里进入。其次在变更到站页面，下半部分设计了很多快捷入口，比如车站大屏、约车、餐饮特产等，把用户的注意力分散了。这两个设计都严重了违反了费茨定律和席克定律，大大降低了用户的操作效率。
1.1.3 改签
「改签」是指用户可以更改出行的时间，改签的流程和「变更到站」相似，进入售票页后，选中需要变更的车次，进入订单页提交订单，改签成功。需要注意的是，车票改签只能办理一次，开车前48小时以上，退票费为票价5%，24小时至48小时之间为10%，不足24小时为20%。退票费最少2元起步。
1.1.4 退票
「退票」是指用户可以退掉已经购买的车票，退票流程比较简单，点击退票后，进入退票确认页，点击确认退票成功。需要注意是，距离开车前8天以上的不收退票费，其他的时段将会根据列车开车前的时间收取手续费，最高20%。
迭代建议
在用户点击退票的时候，应该出现弹窗，再次提醒用户是否确认退票，这样能避免用户误操作。这就是尼尔森十大原则的容错原则，帮助用户从错误中恢复，将损失降到最低。
1.1.5 购票后
当乘客购买车票后，12306的首页会加入一个行程的版块，向用户展示最近的行程详情，其次一级菜单栏「出行服务」内容也会同步更新。这个设计非常友好，直观醒目地告诉乘客最近的行程信息，通过外部触发避免乘客忘记行程。
1.1.5.1 行程页
这个页面从上至下包含四个部分，头部是乘客详细的车次信息，比如出发时间、经停站、天气等；中间是车票信息，包含检票口、座位号、车次和乘车二维码等信息；接下来按乘客出行前服务、车站/列车服务和到达服务三个场景为乘客推荐其他服务，比如餐饮预定、酒店预定等服务；底部是关于出发站、到达站的天气预报信息和优惠服务等信息。
细节侦查
行程页把乘客的出行拆分为3个场景，出行前服务（提供重点客户预约、我要选酒店、我要去车站、我要订餐饮和禁带物品规定）、车站/列车服务（提供临时身份证证明、遗失物品查找、我要订餐饮和站内导航）和到达服务（遗失物品查找、我要订酒店、接站约车、旅游景点预定、投诉建议和站内导航），这就是以场景为中心的设计——将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成什么任务”。
1.2 飞机票
「飞机票」就是为用户提供飞机的票务销售，用户需要输入出发站、终点站和出发时间，如果携带孩子或者婴儿，还需要单独勾选。飞机票同样支持改签和退票。
1.2.1 售票页
售票页的内容非常简单，在头部，用户可以左右滑动选择时间，页面内容以Feed流向用户展示详细的航班信息，其次还为用户提供了其他出行方案参考。底部设计了一个菜单栏，用户可以进行筛选设置，还可以根据价格高低和出发时间排序。
1.2.2 选择舱位
选中航班班次以后，进入到「选择舱位页」，在这个页面可以查看到航班的详细信息，比如航空公司、起飞时间、值机柜台等。用户需要选择舱位等级，比如经济舱、商务舱和头等舱，选中后，即可进入预订流程。
拓展阅读
为什么同一架飞机同一个经济舱飞机票价格不一样？这是因为一个飞机的不同舱位实际上是不同的产品，所以座位有不同的等级，故而价格有了出入。其次他们主要的区别包括但不限于退票改签的灵活程度、出票期限和目的地停留期限等等。
1.2.3 订单页
在订单页，可以查看到订单的详细信息，包括收费说明、退改说明等，在用户添加乘客以后，就可以提交订单。这里需要注意一下，如果乘客携带孩子或婴儿，需要添加儿童出行人。
体验陷阱
当乘客勾选了「携带儿童或婴儿」的选项以后，在订单页准备支付的时候，系统提示乘客需要返回添加儿童出行人信息。但却并没有告诉乘客如何添加，或直接给出对应的功能跳转链接，这让用户点击「返回添加」后却找不到功能入口。这就违反了尼尔森十大原则的防错原则，不仅在用户犯错之前没有给出提示，犯错了还不给与指导，真的非常糟糕。
1.3 汽车票
「汽车票」为用户提供客车的票务销售，用户输入出发站、终点站和时间以后，就可进入售票页。汽车票的订单流程非常简单，在选中客车车次以后，添加乘客支付费用后，订单即可生成。
体验陷阱
用户在选择「达到地」搜索框输入地名时候，应该提供模糊搜索，比如输入湖南的地名，应该为用户提示相关联的车站。
1.4 空铁联运
空铁联运，顾名思义就是把飞机和高铁这两个产品组合在一起销售，支持用户一站式购买“飞机+高铁”的联运行程，只需一次购票、一次支付。这个功能的使用场景主要是针对出发地和目的地没有直飞的航班情况下，为用户提供飞机+高铁的转运方案。这个功能对于乘客来说，支持一站式购买“飞机+高铁”车票，可以节省购票时间，非常友好。
1.5 铁水联运
和空铁联运一样，这也是一个组合产品的销售，支持用户一站式购买“高铁+水运”的联运行程。使用场景、功能价值以及操作流程和空铁联运一样，我们就不必重复。
1.6 雪具快运
12306还推出了一个雪具快运的服务，为广大旅客提供多种个性化雪具寄送产品服务，还支持随车办理或上门办理寄送服务，目的是为用户打造滑雪的新体验。「雪具快运」的操作流程也比较简单，采用预约制，选中服务后，填写用户详细信息，支付成功后，订单生成。
1.7 小结
作为12306最重要、最核心、最复杂的功能，从这个版块的内容拆解和实操体验来看，可以看出12306确实已经解决被誉为全世界最复杂的抢票算法逻辑（笔者通过实操测试，几乎都能买到票），特别是在春运这种会出现超过上亿用户抢票场景，真可谓非常不容易。不过从用户体验来看，非常一般，甚至有很多不合理的设计。
2. 出行
出行是12360结合了乘客在出行的场景中潜在产生的需求设计的服务，有结合车站商家的在线点餐，有结合当地地域特色的旅游服务，还有约车、保险、酒店等服务。这些服务，多数由第三方合作方提供。
2.1 餐厅特产
「餐厅特产」是一个为乘客提供在线点餐的服务，在乘客输入列车车次以后，就可以进行点餐，支持外卖配送至列车和到店自取两种形式。这个功能设计得很友好，不仅解决乘客在乘车前的就餐问题，为车站的商家引流，还可以增加平台的变现方式。
2.2 铁路游
「铁路游」是12306结合旅游出行的场景，为乘客推出的一项旅游服务，包含旅游专列、跟团游、周末游和自由行等。这个场景的链接其实非常好，但是版块目前设计得比较简单，内容也比较少。
2.3 约车
「约车」是为乘客提供接送站、接送机、打车和租车的服务。这是一个强刚需的需求，用户在出行的前后都有用车服务。为乘客提供约车服务，不仅能增加变现方式，还能方便乘客出行。通过实操体验，约车主要由第三方合作方提供服务，比如曹操出行、T3出行等公司，为乘客提供出租车、品质专车和商务车等车型。
2.4 保险
保险分为乘意险和出行保险。铁路乘意险分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险，在乘客购买铁路的订单页就会向乘客推荐，乘意险价格低，保障项目包含意外身故、伤残、医疗费用、住院津贴等。出行保险由第三方公司中国太平洋保险提供，主要为乘客提供出行安心保、空铁联运险和旅程预定取消险。
2.5 酒店
酒店这个版块的内容相对夯实，不仅有新客大礼包这样的用户权益，还有商旅专区、今夜甩卖、高端酒店这样的内容。甚至还设计了专门的酒店会员VIP，包含普通会员、银卡会员、金卡会员、白金卡会员和黑金卡会员，相对其他版块而言，这个版块花了比较多的心思。
2.6 铁路商城
铁路商城是12360以乡村振兴·帮扶推介为主题打造的一个商城，包含了帮扶专区、优选好物、兑换专区、今日特卖等内容，其次还支持企业集采，批量购买。
2.7 小结
从这个版块，可以看出12360其实结合了用户吃穿住行的刚需场景设计了对应的服务，有自主运营也有完全依靠第三方提供。不过整体的用户体验比较差，事实上可以参考像顺丰速运、智联招聘这些APP，通过内置小程序的形式来设计，完全可以把这些版块让第三方单独设计和维护，同时还能为用户带来更好的体验。
3. 会员
铁路畅行会员是中国铁路统一对外会员服务品牌，开通畅行会员不需要花钱，畅行会员主要是用于会员用户积累乘车积分、用积分兑换车票等，主要包含积分权益，兑换车票、无票候补和会员活动四大会员权益。这个页面设计得比较简陋，也没有太多价值的内容，可以看出12306在用户运营方面比较欠缺。
4. 订单
12306的订单包含了火车票订单、餐饮订单、保险订单、酒店订单、空铁联运订单、计次定期票订单、约车订单、出站引导服务订单、铁路商城订单、汽车票订单、旅游订单和铁水联运订单多达12种订单，从这些订单类型可以看出12306的服务特别多。
体验陷阱
这个设计实在太糟糕，严重违反了7±2效应。琳琅满目，花枝招展，让用户在这个页面几乎迷失。更糟糕的是，当你有一个非常重要的待支付订单，这个页面竟然没有角标提醒，最终你会因为这个糟糕的设计打乱自己的行程计划。
内容服务是帮助产品实现用户留存和运营的版块，不过从12306的内容设计来看，整个产品的运营手段比较少，所以我把12306现有设计的功能拆分为便捷功能和向导功能。
1. 便捷功能
以下这七个功能，对用户而言，是非常便捷、友好的功能，可以帮助用户在出行的旅途中获取很多帮助。
1.1 车站大屏
「车站大屏」是一个非常贴心的功能，通过这个功能，可以为用户提供车站的实时列车信息，非常方便。大屏详情页可以拆分为三块内容，左上角可以切换全国各地的火车站，头部还有搜索框，为用户提供车次的查询，主体内容是当前车站向西的车次信息，包含发车时间、候车室、检票口和候车状态等。
1.1.1 车次详情页
进入列车的「车次详情页」，可以查看当前车次的完整信息，比如检票状态、候车室、检票口和全程停靠站、停留信息。在这个页面，还提供了「关注列车」的功能（关注后并无关注数据，显得很鸡肋），以及直接预订当前车次的入口。
1.1.2 车站详情页
「车站详情页」就像一个站点的主页，为用户提供完整的车站信息查询。这个页面可以拆分为四块，头部可以切换其他站点，并提供当前车站的天气情况以及车站基础信息。金刚区位8个功能入口，包含车站车次、站内导航、重点旅游、餐饮服务、周边酒店等。中间是当前车站的起售时间和换乘时间，底部是车站附近周边的酒店精选。
迭代建议
这个页面把车站当做一个主体，聚合了一个车站完整的功能，其实挺有创意，但页面隐藏得很深，如果不去拆解，几乎很难发现，很是可惜。我认为完全可以提高权重，升级为一级栏目，代替会员，或者和出行栏目进行整合升级。
1.2 站内导航
「站内导航」提供目标车站的LBS导航，对于乘客来说，到达一个陌生的站点，需要清晰的指引，这是一个非常便捷、温馨的功能，能帮乘客解决很多问题。不过这里有一个莫名其妙的设计，那就是进入这个功能之前，系统提示请摇“8”字校准手机，事实上这里是一个加载动画，但是画面和内容却误导了用户，我甚至每次进入都傻乎乎的摇动手机。
1.3 临时身份证
临时身份证是一个非常重要的功能，12306现在支持APP在线申请，极大方便了乘客的出行。申请流程也比较简单，填写个人信息，验证审核通过后，就可以生成电子证照使用。每个人每个月有3次申请临时乘车身份证机会。
1.4 遗失物品
这是一个非常贴心的功能，如果你在乘车的过程中不小心丢失物品，可以通过这个功能登记，输入你的详细信息就能登记成功。
1.5 重点旅客
这也是一个非常贴心的功能，主要为老年人、残疾人服务，通过填入你的信息，列车会根据你的情况提供优先进站、协助乘降等服务。
1.6 爱心版
爱心版就是长辈版，专门为中老年用户设计的版本，在用户中心切换后就可进入爱心版。整个版本设计得非常简洁，操作步骤也比较简单，对中老年用户比较友好。
1.7 英文版
英文版在用户中心的设置点击语言即可切换，整体的版本设计得直接简洁，用户体验不错。
1.8 小结
从这个版块可以看出，一个产品如果以用户为中心去设计，是可以为用户带来很大的便捷和愉悦体验。比如像临时身份证这样的功能，过往我们只能提前出发去车站排队办理，但如今12306已经把这样的痛点解决，为用户节省了大量的时间。
2. 向导功能
以下8个功能，虽然属于出行向导，不过体验下来，感觉用户体验比较差，很多功能完全无法弄懂它的设计目的是什么，显得非常鸡肋。
2.1 快捷退票
「快捷退票」这个功能的设计，让人摸不着头脑。从操作流程看，首先需要输入用户的详细信息，包括姓名、身份证号码和手机，其次需要进行人脸核验，到了第三步还需要选择车票的日期车次，在最后的退票操作页面，用户点击退款后，没有和用户再次确认就直接退票。整个流程体验下来，非常糟糕。
体验陷阱
这个功能和订单页的退票感受不出来有何区别？如果用户要退款，不如直接去订单页进行退票，操作步骤简单，一目了然。其次不支持自动导入用户的购票信息实在太不方便，需要通过选择车票购买日期和车次，这个设计实在让人生气和愤怒（我在体验的过程中到了第三步只能退回到订单页把购票日期和车次截图下来，又再次重复前面两个步骤才到这个步骤）。
2.2 联系方式
这也是一个看不懂的功能，进入页面后，需要用户输入乘客的详细信息，但是这个乘客信息和用户在购买车票时候需要添加到乘客信息有什么不同？更糟糕的是，当你把自己的电话号码、身份证信息填入后，系统会显示核验成功，然而当你再一次进入，页面内容还是和之前并无区别，你不知道自己是不是还要重新输一次？
2.3 时刻表
「时刻表」主要为乘客提供查询列班车次的出发时间和到站信息，但这个功能「车站大屏」几乎已经包含了，这个功能显得意义不大。
2.4 查票价
这个功能非常鸡肋，因为在火车票的售票详情页就可以清晰直观地查询到列车票价信息，相反在这个页面，根本无法看到价格，因为价格的字体大小只有20px，乘客几乎很难注意到。
2.5 查代售点
这个功能主要为用户提供全国各地火车票代售点的查询，不过在互联网技术发展到今天，火车票代售点越来越少了。从12306采集的信息来看，部分代售点缺少电话等关键信息，对用户来说，比较鸡肋。
2.6 起售时间
这个功能为用户提供各车站每日的起售时间，属于一个低频功能，可以解决乘客某些极端场景的需求。不过在我体验下来，比如通过此功能查询1月29日的车票，显示北京站起售时间为10:00，但是在火车售票版块，我也可以直接购买1月29日的车票，这让我比较疑惑这个功能的价值在哪里。
2.7 正晚点
「正晚点」同样是一个鸡肋功能，而且还需要输入准确的车次才能进行查询，车站大屏已经完美可以取代这个功能。
2.8 列车状态
「列车状态」比正晚点都还鸡肋，让人愤怒，因为你需要输入正确的出发地、到达地和出发时间，对了，还有正确的车次才能进行查询，这样的操作成本比下载12360APP都还麻烦。
2.9 小结
从这个部分的内容拆解和操作体验来看，12360的产品设计得不够细致和贴心，很多功能就像是硬生生塞进去一样，滥竽充数。其次从他们的产品迭代记录次数可以看出，近1年更新时间只有5次，也许每一次都是在做加法，没有想过做减法，所以导致这部分的功能显得鸡肋而且有很大缺陷。
通过对铁路12306的全面拆解，接下来我将从内容层、功能层、体验层和视觉层进行总结。
1. 内容层
12306整个产品的内容设计，用一句话总结，可以归纳为——心有余力而不足。可以看到12306围绕乘客购票、出行的潜在需求场景都设计了对应的服务，比如酒店、约车、点餐、商城等，甚至还有空铁联运、铁水联运这种多场景的组合售票方式，不过在实际的版块内容打造中，则显得比较空洞，体验一般。这个产品，可以说几乎没有创新点，这主要也是由于它是由国有企业设计运营，背景极其复杂，设计目标也飘忽不定。
2. 功能层
在2015年之前，铁路12360承担了被誉为历史上人口迁移最大的春运的抢票工作，那时候一票难求，春运去12360就像是一场噩梦。不过在经过多年的升级和优化以后，目前12360的购票效率非常高，经过笔者多次的测试和调研，目前通过12360购票已经不再是难事。而且还设计了候补抢票这样的功能，帮助用户解决买票痛点，可谓非常贴心、友好。
3. 体验层
铁路12306的用户体验，非常一般，我在这次的产品拆解中至少侦查出了20条体验陷阱，这些陷阱都会给用户带来极其糟糕和愤怒的体验。比如让我像个傻瓜摇动手机的站内导航载入页，这完全就是把用户当成傻子一样看待，其次还有一堆数不清的鸡肋功能，对用户的操作体验造成了严重的干扰。我甚至认为爱心版和英文版比标准版使用起来更愉悦，更能减少我的焦虑。
4. 视觉层
作为一个UI设计师，在拆解12306的产品过程中，我对整个产品的设计感到绝望。首先，没有做到统一性，整个产品毫无设计规范，比如卡片的圆角、品牌色、版块间距根本不统一，这样的视觉体验一眼望去就非常糟糕；其次，图标、活动图、橱窗图以及详情页的设计毫无美感，满满的山寨APP风格，特别是订单页的ICON，花花绿绿、琳琅满目，连最基础的统一都没有做到。
作为一款国民级用户APP，铁路12306仿佛陪伴了80、90后的青春。还记得10年前老家是黑龙江和河北的大学室友，每年春运开启之前就为了回家的火车票犯愁，不仅要去遥远的火车站排队，很多时候还可能空手而回，那便是最初对12306的记忆。
如今十年过去了，12306解决了亿万人的出行抢票需求，让我们在春运的路上，可以轻松购买一张回家的票。但下一个十年，我更希望12360的产品团队，可以重视用户体验设计，让我们不再掉入那些体验陷阱。
作者：设计大侦探 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本次针对百度APP中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。
二、什么是「组合手势」
「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。
以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1交互信号→step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。
于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。
「组合手势」触发一般可分为三个阶段：step1交互信号→step2意图识别→step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。
由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。
三、「长按组合手势」激活快捷菜单
1.项目背景
百度APP视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。
随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达10余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。
2.竞品调研及选型
通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型， 分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。
选型A
「长按触发独立播控面板」：通过长按手势可激活从屏幕底部弹出的独立播控面板，此方案扩展性较强，但对视频沉浸观感体验有一定的打断感；
选型B
「长按触发浮层播控选项」：通过长按手势可触发置于视窗上层的浮层选项入口，一定程度上可延续视频观看的沉浸体验，但浮层扩展性有限；
选型C
「长按触发特定播控功能」：通过长按手势触发特定的某个播控功能（如长按“快进”），一定程度上可满足此功能的重度用户，但对于长按手势的使用效率较低；
3.设计方案
1）长按手势交互扩容
针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。
但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。
那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。
基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：
step1：以“长按手势”创建一个新模式，即发出交互信号并唤出浮层菜单；
step2：若用户未松开手指，则系统默认开始识别用户意图，是否有以“拖拽手势”滑选至目标功能项以选择功能；
step3：用户滑选锚定至目标功能后，松手释放即可完成最后的功能执行确认。
「长按+向上滑选」快捷触发对应功能项；
「长按+向下滑选」快捷触发“快进”（一定程度上兼容老用户对于此功能的使用习惯）。
2）容错性兼容
在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。
3）易用性打磨
差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在DEMO开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。
我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了10+名不同年龄段的目标用户进行访谈测试。
测试访谈的过程中，被测用户在进行1至2次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。
同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。
3.1 ）扩展触发热区：
考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底bar框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。
3.2 ）支持跟手触发：
长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。
3.3 ）实时提示及响应反馈：
灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。
方案上线及验证
以AB实验对本次设计方案进行定量测试验证：
「对照组」效果：长按触发“快进”（各播控功能入口仍归置于基础菜单面板之中）；
「实验组」效果：长按触发“快捷菜单”选项（支持滑选和点选模式）；
小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。
「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。
「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。
二期扩展方案
随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。
四、「组合手势」拓展探索
手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。
以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。
1.「右滑返回手势」激活“小窗播放”
“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。
基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。
2.「双指手势」激活“满屏播放”
“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。
五、结语
便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com