发布时间：2022-5-24 分类： 电商动态
在设计移动应用程序时，我们的大部分精力和时间将用于每页的设计。但是，与此同时，网络环境的复杂性将导致网络速度变慢，网络薄弱，无网络。相当一部分用户的逗留将用于加载——无论页面状态如何。设计精美，装载总是需要一个过程。
页面打开和跳转时的加载过程在设计中经常被忽略。最后，在项目上线之前，设计是匆忙和任意设计的。即使你想要开发一种“菊花”，你也可以穿上它并转过身来。 。
加载过程的设计缺乏无法量化对用户体验的损害，但从长远来看，它就像一种慢性毒药，它总是打破用户的耐力限制并导致用户流失。
本文将简要介绍移动应用程序设计中常见的加载模式，并结合国内外应用的一些实例，探讨如何为场景特征选择合适的加载方法。
一. 模态加载
当涉及到加载方法的分类时，最明确的应该是模态加载和非模态加载。在模态加载方面，根据一些经典书籍的观点，有些人可能认为形态不好，而非形态则是正义。
但事实上，选择模态加载或非模态加载，首先要问自己一个问题，这个加载是否出现在不可逆转的过程中？
1. 模态加载与「不可逆流程」
这里使用的术语“不可逆”并不意味着普通日语中“不可恢复”的含义，而仅仅是一些单向的线性过程。典型的例子包括注册（注册，登录，密码恢复），交易（订单，支付，转移）流程，例如注册流程和微信红包流程。
在不可逆过程中，如果允许用户在加载步骤时随机触发其他行为，则很容易导致各种分支和异常。为了防止用户出错并减少用于设计和开发的异常流的数量，在这样的过程中使用模态加载是正常的选择。
2. 其他场景下，避免模态阻断
在不相关的不可逆路径的情况下，正如经典讨论所说，应该减少模态阻塞的使用。
使用模态加载将允许用户在等待期间不做任何事情，并且等待时间越长将加剧焦虑。特别是，一些APP直接在启动页面上使用模态加载，这使得用户每次遇到时都会感受到与产品不可逾越的差距。
在中国，这种情况相对较小。但是，一些财务应用程序仍将直接在启动页面上执行阻止模式加载。考虑到金融应用程序需要获得资金，这种方法可能具有一些行业特异性。
传统上，在日本，许多应用程序仍然保留登录页面上模式加载的习惯。即使没有必要阻止。
电子商务APP和交通查询APP也是如此，以服装电子商务ZOZOTOWN和东京メトロ为例。
当然，这两个APP的内部设计质量已经非常好。有许多细节值得学习。这里只是讨论他们的启动加载问题。
他们在启动负载中使用分层模态负载，即使东京设计了一个非常特殊的加载指示器（9个小圆圈代表不同的线路），它仍然无法改变让用户远离的方式。隔离感。
如果电子商务APP的启动主要在用户相对悠闲和安静的场景中，则由模态登录引起的损坏相对较小。然后流量查询类APP是不同的。启动场景主要是在室外移动，渴望知道结果以确定下一步该去哪里，并且不适合模态加载。地铁查询APP更加特别。大部分场景是用户正在查询地铁中的转移信息，并且在信号差的情况下阻止直接模式。这种经历是致命的。
总之，我的判断是，除了不可逆过程之外，基本上不需要使用模态加载。
百度地图在搜索位置使用模态。相比之下，iOS附带的地图不需要模态加载。用户可以在不耐烦时随时尝试其他操作。经验的差异是显而易见的。
3. 模态阻断要有「取消」选项
即使你确定模态加载是正确的，最好给用户一个“取消”选项，以防止用户只杀死进程以结束漫长的等待。
在上面的示例中，百度地图搜索可能不是使用模态所必需的，但至少设计者意识到“取消”选项的重要性。用户可以点击“×”在加载过程太慢的任何时候终止行为。
反例是EBAY的登录页面，其中有一个“×”这将导致用户认为它是“取消”，但它实际上是一个关闭登录页面的按钮，在登录加载期间无法点击。弱网络环境中的用户只能等待很长时间，唯一可以做的就是终止进程。用户卡住后，点击“×”但它没有反应，可以想象出焦虑和沮丧。
二. 整屏加载
另一种类型的常见加载严格来说不是模态的，因为对于整个产品，用户可以自由选择执行其他操作，但它是当前正在浏览的内容层的阻塞加载。确切的描述应称为“本地模式”或“内容层模态加载”。为了便于描述，将其简称为“全屏加载”。
1. 整屏加载
对于本机应用程序的全屏加载，通常的做法是尽可能将内容区域保留为空白。在中间或内容区域（通常称为Spinner，通常称为菊花）的顶部有一个加载提示，通知用户等待所有数据请求准备就绪。整个页面显示。
全屏加载是最简单的加载和处理方法。它适用于页面中的所有数据。每次需要重新请求且没有本地数据时。它广泛应用于各种类型的APP，如Zhihu，Behance，Airbnb，网易云音乐，ENJOY和Panda Live。
全屏加载的本质是内容层的模态加载。因此，与模态加载一样，需要显式超时判断。当数据未被请求超过指定时间时，可以向用户通知可能的原因和下一个动作点。避免一直卡在装载过程中。
当通知失败加载的结果时，一些品牌特征和情感设计的集成可以有效地减轻用户无法加载的挫败感，甚至为内心的产品设计增加额外的点数。
2. 浏览器加载
浏览器加载是浏览器APP中最常用的加载渲染方法——以地址栏下方的线性进度条的形式通知用户当前的加载进度。
同时，许多本机应用程序也有用于加载网页的场景。在调用内置浏览器内核时，它自然会继承许多浏览器的交互形式。例如，微信具有内置的QQ浏览器内核，因此在加载诸如公共号码或朋友圈文章的网页时，在顶栏下方显示迷你进度条。
3. 为什么整屏加载不像浏览器加载一样展示具体进度?
这里问题有点扩展。
正如许多关于加载的讨论中所提到的，加载提示，如果有进度提示，可以更好地让用户期待等待时间，有效地减少等待和焦虑感。
这句话本身无疑是有道理的。但让我们回想一下，除了浏览器加载，无论是正常应用程序还是应用程序中的全屏加载对设计和关心用户体验很重要，为什么很少看到带有进度信息的加载提示？ Spinner及其各种衍生物是否广泛使用？
我个人的判断是移动应用程序需要让用户忽略等待时间并减少由特定进度引起的压力，因此通常需要非常快的速度（在正常网络速度的情况下）。在这种情况下，进度条甚至会查看它。看不清楚，自然没有必要闪光。加载本机页面通常比从DOM加载网页更快，因此无论目标是什么，您都不需要适合特定的进度。相比之下，网页的加载一方面平均需要更长的时间，另一方面，有些因素继承了PC的遗留问题，因此进度条成为不成文的惯例。
其次，向用户通知实际装载进度的愿望是非常好的，但现实是非常瘦的。在大多数情况下，资源的加载时间不固定且不可预测。预先确定需要请求的数据量并快速打破真正的进展并非易事。即使它确实如此，实际的装载时间表实际上是“一张卡和一张卡”的非常不平滑的过程。
因此，在浏览器加载中，我们看到进度条的顺利进度，大部分都是假的，所以往往会有一个进度条达到99％，页面实际加载并且没有前途。
通过监听加载状态来判断浏览器的进度。在加载大量结构标签和内容数据时，只有少数节点会有事件，最容易想到的是两个节点的起点和终点。在许多情况下，当DNS解析和资源下载完成时，进度条将运行到90％甚至99％，但后续加载过程有时比下载过程耗费更多时间，因此卡节点情况是不可避免的。
这是一个设计技巧，在两个节点之间添加相同的进度条。与以恒定速度向前移动并且根据真实节点向前移动相比，快速且缓慢地向前移动可以给用户带来更快加载的错觉。虽然这是一种幻觉，但用户需要的是这种错觉。
三. 非模态加载
1. 标题栏加载
IM和电子邮件等应用程序在内容加载方面非常独特。首先，这些应用程序的大量数据是本地的;第二，在任何情况下，浏览本地数据都不应受网络速度的影响。想象一下，当没有信号时，甚至可以看到历史聊天也是一件可怕的事情。
因此，在这样的应用程序中，加载提示（通常以text + Spinner的形式）通常显示在顶栏（也在底栏中），这里称为标题栏加载。这种方法的优点是它不会阻止用户点击内容区域中的任何现有消息。
2. 递进加载
预先设计整个内容加载序列允许首先加载核心信息，允许用户知道任务正在继续，同时通过优先加载内容吸引用户的注意力，并减轻等待的焦虑。
在大多数情况下，所有全屏加载都可以通过合理的设计进行优化，以实现渐进式加载。当然，有些页面有整体要求（如财务APP中的各种表格），所有信息必须作为一个整体显示，否则会导致歧义，这自然不适合进步。
A. 文字+占位符优先
同时，对于主页的各种类型的转移列表和时间线，早期显示的文本内容吸引了用户的兴趣，并且可以在页面完全加载之前完成转移任务。与此同时，用户对判断的思考使得等待他们的感觉更加微弱。
例如，AOZOTOWN电子商务平台的预加载价格和折扣标签允许用户根据加载过程中心脏中预设的价格范围和折扣预期进行基本判断和屏幕。
根据内容资源成本（资源和划分所传递的信息的价值;资源量），首先考虑加载的是文本，图片，动画和视频在此期间由占位符表示。最简单的占位符是一个纯色块，它为用户提供了所呈现内容大小的基本心理预期。
占位符可用于通知用户资源类型是图像和视频，并且还可用于显示产品或品牌的图标图标。
B. 低清图片优先
图像资源的分层加载可以使该过程更加平滑。首先，加载低分辨率（甚至模糊版本）缩略图，然后在确保完全呈现内容后加载HD资源。
同样，占位符的颜色值直接选择图像的主色值也是一种有效的过渡手段。
C. 结构占位符优先
渐进加载的想法不限于信息资源，并且结构元素也可以考虑用于渐进加载。
在加载文本之前，预先显示结构占位符（Skeleton Screen，字面意思是“Bone Page”），并且可以提前通知用户从形状到身体以避免禁忌和加载; — “惊喜”使装载过程更加自然。
结构占位符通常是类似于线框形式的灰度色块图。显示每个模块的典型结构元素，这通常不代表真实情况——这意味着它无法点击，所以实际上在这个阶段仍然类似于全屏加载。但结构占位符的核心目的不是真正的内容，而是收敛和加载成功的状态。简要消息页和颤音消息页都使用结构占位符作为渐进式加载的中间状态。
这种非功能性优化可能是很多开发不愿意做的事情，但注重细节可以使整体产品体验更加流畅，质量更高。用户的眼睛是敏锐的，口碑的好处将使团队感到努力是值得的。
D. 业务优先
此外，您还可以考虑资源量和模块值。您可以考虑不按自上而下的顺序加载资源，而是考虑对业务目标最有利的模块。
四. 启动加载
讨论了许多应用内页面的加载，然后分别启动了启动加载聊天。
1. 空白框架加载
许多外国APP使用非常轻的启动页面。首先，将与实际主页的结构非常相似的空白帧显示为启动页面，在该页面上加载框架内的特定元素。允许用户点击该应用程序会产生“立即开始”的错觉。 iOS自己的应用程序中提供了此示例，这是iOS规范建议的启动方法。
基于此，一些更专心的产品设计了更细分的渐进式加载过程。在加载空白帧的基础上，首先加载全局元素（顶部栏，底栏），最后加载中间内容层的特定内容。
例如，Houzz是一个家庭装修社区，首先加载一个由顶栏和底栏组成的空白框架。顶栏已预先存在用户头像和搜索框的占位符;第二步加载顶栏和第二顶栏。并在底部栏中显示图标和搜索框等全局元素。第三步开始加载内容区域。
ESPN，体育直播平台，也采用这样的三步开始，首先加载只有底栏的空白帧。由于ESPN的产品框架会根据用户感兴趣的国家而有很大差异，因此顶部栏结构和底部选项卡将完全不同。因此，在第二步请求用户感兴趣的国家之后，将依次加载底栏Tab，顶栏和内容区域。
当然，并非所有外国APP都认识到iOS的最低限度的加载过程。在商业环境中，品牌表达的吸引力是合理的。在Airbnb，Instagram和其他公认的应用程序中，他们的方法基于一个空白的框架，并且非常有限地设置一个非常轻的品牌标识。因此，在强化品牌思维的同时，它仍然确保主题内容自然地呈现在空白框架上。
就个人而言，我仍然喜欢这种更纯粹的启动方法。不幸的是，由于国内APP的习惯性问题，很少有用空白框架加载的例子。
2. 启动页
在国外也有很多APP选择设计一个独立于主页结构框架的启动页面来实现更强大的品牌。例如，配方平台Yummly和阅读推荐平台Medium设计了一个独立于主页框架的启动页面。识别并不会轻易更换。
在这一点上，中国最好的例子就是微信。 “孤独看地球”的图片已经使用了很长时间，并且具有很高的认知度。只有将地球照片交换到国内市场才能引发对整个网络的热烈讨论。 “这个世界是孤独的”这个故事，即使在创业页面上没有写出口号，也一直深深植根于人们的心中。同样，网易云音乐和其他应用程序发布页面在品牌识别方面做得很好。
相比之下，许多国内APP的发布页面，如滴滴，B和豆瓣采用了更简化的方法 - ——白色屏幕+底部LOGO，通常附有标语或版权信息的小字体。
对此设计的判断是一个意见问题，它可以被视为品牌和“不打扰用户”之间的妥协。但我仍然保持个人意见，在这个问题上的妥协可能导致两个不快乐。
对于用户体验，此设计没有像空白帧加载那样非常自然的启动体验。
品牌曝光率不如微信启动页面那么强。
在底部放一个小LOGO，当用户点击APP时你看不到它，你为什么要让用户再次看到它而不考虑进入应用程序的平滑体验？
至于闪烁的口号或版权信息，即使字体很小，你也看不清楚。有多少用户会注意到它？
简而言之，既然有障碍，为什么不让这个障碍更有价值呢？
3. 一言难尽的广告页
国内APP也有习惯习惯——在启动页面之后插入广告，甚至直接将广告用作启动页面，尽管它们中的大多数都在角落提供跳过选项，但它仍然可能导致用户反感甚至丢失。
不可否认的是，这是一个有价值的广告空间，特别是当这种做法已经成为产品方和用户的普遍现象时。似乎经验的风险并不那么大。
因此，这里不再混淆外国APP的实践与“国情”之间的利弊。用户体验再次植根于市场和文化习惯。
在这种情况下，设计师可以体现价值的地方应该是思考如何使创业广告不那么冒犯，甚至为具有复杂设计的用户带来独特的期望。
五. 提升加载体验的其他技巧
1. 加载提示符的设计
在线和离线服务设计在许多地方很常见。
在称为服务的海上捕鱼中，我们不觉得等待期间的时间特别长。首先，海底捞将提供小吃，酸梅汤，甚至指甲，陪同客人下棋等服务，让我们觉得商家已充分考虑了数量的痛苦，并为此提供了关怀。其次（这不仅仅指海迪劳），编号机的频繁编号也使我们始终意识到“前面有多少桌子”。
在线应用程序的等待过程也是如此。
精心设计的装载过程可以有效缓解等待的压力。无论是在线进度条，Spinner品牌特色的融合，还是产品音调与创意效果的结合，改变菊花或单调的文字都比以往任何时候都好，让用户觉得我们正在加载充分考虑等待过程和心脏的设计。
例如，用于加载Kitchen Story应用程序的Spinner巧妙地将LOGO中的黄色点组合在一起，设计出具有良好节奏和灵活性的Spinner。熊猫直播屏幕中心的大熊猫，连同“负载中的卖”副本，可以赢得用户的微笑，并争取几秒钟的安全时间。
其次，认真等待过程伴随着一个准确的副本，告诉用户他在特定的情况和阶段，就像排队听取报告，并更接近结果，他更有决心等待。
例如，一个非常经典的例子—— Yummly的新手指导过程，经过多次偏好后，会有一个“个性化你的体验”计算过程，它会在加载过程中实时告诉用户。在8个步骤中的哪个步骤中，图标颜色逐个顺时针改变，以下副本将提示用户在此步骤中执行的操作，例如“检测时区，集成帐户信息”等。这使得用户感觉到终点并不遥远，进度在他们自己的控制之下，并且当前步骤的值对他们来说非常重要。
编者注：更优秀的案例右图《让等待也成为享受!18个读取进度条的优秀设计案例》
2. 内容秒发
例如，在本书的简写形式中，在内容发布过程中，传统设计是在点击“发布”后确认模态的发布进度，直到监视完整发布的事件，然后是页面已成功发布已输入。
微信朋友圈的做法是，无论是喜欢，评论还是发布一个朋友圈，点击后都会“立即加载”，并立即假定用户已成功发布的状态，而无需用户随服务器等待整个数据传输。并返回流程。
当然，如果你注意，你会发现在这个“假完成”状态下，没有真正发布成功的朋友圈无法评论和赞扬。
这种方法让用户感觉很自然：哇，它在朋友圈里很流畅！即使这只是一种幻觉，就像浏览器加载中的进度条一样，有时用户需要这种错觉。
相应的风险很容易想到，也就是说，用户很容易认为内容已经发送，实际上并没有成功发送。这要求在采用这种方法时，有必要在超时失败时以最显着的方式通知用户传输失败。
总结
不可逆过程适用于模态加载，同时注意提供取消按钮。
具有本地数据的IM和邮箱应用程序适合于使用标题栏加载，并且每次打开时重新请求数据的页面适合于全屏加载。
浏览器加载网页并显示迷你进度条。建议首先快速和慢速，以便等待时间“ldquo;出现”更短。
除了页面上的所有信息必须作为一个整体显示外，否则会导致歧义。在大多数情况下，渐进式加载体验优于全屏加载。第一张图片后，第一个占位符后的图片，第一个色块后的图片，第一个模糊后的高清，第一个<骨图”真正的内容和hellip之后; …被认为是渐进式使用。
内容发布过程可以通过直接呈现成功发布的状态来创建非常快速的“二次发”，但请记住在发生故障时清楚地通知用户。
让用户感受到产品维护的水平，并告知用户特定阶段，这是加载提示可以贡献的设计值。
除非有明确的理由避免在启动时在数据请求中使用模态加载。
iOS规范推荐的空白帧加载是开始加载的好方法，可以分两步或三步。但在国内环境中，也许一个独立的创业页面在一段时间内仍然是主流。
一个不易替换的全屏，高度可识别的启动页面，最大化了启动页面的价值。在发布体验和品牌曝光问题上，妥协可能并不理想。
