加载模式
移动端产品网络复杂，造成了网速偏慢、若网、无网条件下，无论页面最终呈现出的状态有多精美，加载总要有一个过程，5G的产生，可穿戴设备，VRAR等都会出现这样的问题。
解决“别让我等”，做到“如何让用户等的舒服”，“如何让用户发现他不在等”
包含：
情感化、品牌化的小组件，架起用户与内容的桥梁。
常见分类
1.页面（启动页）
包含：固定的加载页、动画效果的加载页、同主界面的加载页
闪屏 的出现是对于一些启动时需要花很多时间进行初始化（比如从网络拉去数据填充首页...）的应用，开发者希望避免展示一个空的页面。到后来，开发者意识到介意充分利用这个时间，实现更为强势的品牌性格的透出（微信）、节假日营销（QQ）、甚至广告展示...。再后来，其他厂商开始跟风加入一块可以营销的大广告位。国外也有许多app选择设计与首页框架无关、独立的启动页，已实现更为强势的品牌透出，极具辨识度且不会轻易更换
image.png
国内最好的例子是微信，“孤独遥望地球The Blue Marble”的画面使用之久，辨识度之高，内心孤独是社交的起因，这个世界是孤独的，即使没有通过slogan写在启动页上，也已经深入人心。
image.png
而价值不菲的黄金广告位，尤其这种做法无论对产品方还是用户都已经司空见惯的时候，似乎体验上的风险也就没那么大了。
所以用户体验也是根植与市场和文化习惯的在这样的背景下，设计师体现的价值的地方，应该在于去思考怎么把启动广告做的不那么让人反感，甚至用精良的设计给用带来独特的期待
a.固定的加载页
滴滴、b站、豆瓣等许多app采用了更简化的做法
白底+底部Logo+slogan（小字）+产品主色+版权信息（小字），初级的启动页面的基本构成元素。设计目的是一种品牌宣导与不打扰用户的折中方案，强化品牌记忆，这也是用户最直接了解产品的手段之一。但是以进入App的体验流畅度作为一种简单的品牌输出为代价，在用户体验（不像空白框架加载一样有一个衔接非常自然的启动体验）与品牌曝光效果（不像微信启动页一样具有极强的品牌认知价值）都不讨好，并且样式固定简单，容易审美疲劳。
image.png
广告闪屏
为了流量变现，国内APP常在启动页后插入广告，甚至直接把广告作为启动页，角落里的跳过仍然可能会引起用户的反感甚至流失。需要加上倒计时loading和跳过，跳过位置方便用户点击。
一般会在启动页嵌入广告的产品，一定会有一个启动重加载的机制，比如程序切换出来，过多长时间再回去，产品会重新刷一次页面，启动页会再次出现，之后才回到用户刚才停留的界面，或者可能直接回到首页。
广告闪屏和活动闪屏一样，会有一个模板：底部是闪屏图片，上面盖一层Logo模板。App启动时会从服务器拉取闪屏数据，本地会保存Logo模板，如果服务器更新了闪屏数据会拉取数据进行展示，如果没有更新或是网络不佳就会默认展示缓存的闪屏数据，以免卡顿现象，保证流畅用户体验。
image.png
活动闪屏/节日闪屏
image.png
节日闪屏作用：为用户提供产品使用的惊喜感和新鲜感，蹭热点，提升品牌调性，给关怀问候，产生情感共鸣，连接用户和产品。节日闪屏相对其他闪屏会吸引用户的注意力，需要重视设计，烘托出节日氛围，切忌单板。
image.png
大版本升级-引导页
在APP进行大版本升级后，要向用户展示产品新功能的操作方法，页面数量控制在3-5页。每一页有对应主题，主题文案注意精简；每一页的设计形式要类似，避免一种视觉落差感；页面加入跳过功能，最后一页加上“立即体验的按钮”
image.png
b.动画效果的加载页
动效来阐述产品相关功能/活动/调性。动效需要有迹可循，让用户容易理解。启动加载页都会围绕特色/热点/产品进行设计，突出品牌形象的同时，传达情感。
image.png
c.同主页面的加载页-空白框架加载（国外居多）
国外许多app都采用了非常轻的启动页，首先展示一张与实际首页结构非常相似的空白框架作为启动页，在此基础上加载框架内的具体元素，让用户在点击APP后就有一种“马上启动的”错觉。Ios自带应用中比比皆是，是HID规范所建议的一种启动方式。更有产品，在此基础上设计了更细分的递进加载过程，在空白框架的基础上，首先加载全局性元素（顶栏、底栏），最后加载中间内容层的具体内容。如家装社区app，首先加载的是由顶栏、底栏构成的空白框架，其中顶栏已经预先透出了用户头像和搜索框的占位符；第二步加载了顶栏、二级顶栏和icon、搜索框等全局性元素。第三步才开始加载内容区。
image.png
体育直播平台ESPN也采用了三步启动，首先记载只有底栏的空白框架，但这个产品框架会根据用户不同国家的差异，顶栏结构和底部Tab会完全不同，所以在第二步请求到用户关注的国家后，才会依次加载底栏Tab、顶栏和内容区。
image.png
但商业环境下，品牌表达的诉求是天经地义，在Airbnb、Instagram等优秀APP中，他们在空白框架基础上，克制地打上很轻的品牌标识，从而强化品牌心智的同时，仍然保证主体内容是在空白框架上自然呈现，平滑过渡避免视觉跳跃。
存在问题：如果加载时间过长，点击主页又不产生交互，容易惹恼用户。适合app内存较小，不会在启动时卡壳时使用。
image.png
国内App由于习惯问题，采用空白框架加载的例子少之又少
2.内容
加载方式分类：模态加载和非模态加载
1.模态加载
a.模态加载与“不可逆流程”
不可逆指的是一些单向通行的线性流程，典型如注册类（注册、登录、找回密码）、交易类（下单、支付、转账）流程。
在此类不可逆的流程中，一个步骤加载过程中如果允许用户随意触发其他行为，极易导致各种分支和异常，为了防止用户犯错，也为了设计和开发中减少异常流数量，在此类流程中使用模态加载是很正常的选择。
image.png
b.其他场景下，避免模态阻断
在无关不可逆路径的情况下，应该减少模态阻断的使用。因为采用模态加载会让用户在等待期间无所事事，等待时间较长时会加剧焦躁情绪的产生。尤其是一些APP直接在启动页采用模态加载，会导致用户感觉与产品每次见面都有一道无法逾越的鸿沟。如金融类app-招商银行在考虑到金融类App需要考虑资金安全，这样的处理方式可能有一些行业特殊性。而有一贯自闭传统的日本，时至今日仍有很多APP保留在登录页就模态加载的习惯，即使是毫无阻断必要的电商和交通查询类APP，他们在启动加载中使用了蒙层式的模态加载，即使设计了富有特色的加载指示符，仍然改变不了一种将用户拒之门外的隔阂感。
image.png
如果说电商APP的启动多是在用户较为闲暇、安静的场景，模态登录带来的伤害可能相对还比较小。那么交通查询类App的启动场景多是在户外移动中、急于知道结果以确定下一步往哪走的情形，更不适合使用模态加载。地铁查询App更为特殊，很大比例的场景是用户正在地铁中查询换乘信息，在信号不佳的情况下直接模态阻断，对体验来说是致命的。所以除了不可逆流程外，基本没太大必要去使用模态加载。
百度地图在搜索地点中使用可模态，相比IOS自带地图，搜索地点就没有采取模态加载，用户可以在不耐烦时随时尝试其他操作，体验上的差别显而易见。
image.png
c.模态阻断要有“取消选项”。即使模态加载是正确的，最好也给用户一个取消的选项，免得用户只有杀进程去结束漫长的等待，所带来的焦躁和挫败感。如上图百度地图搜索采用模态获取必要性不大，但至少设计师意识到取消的重要性，用户在加载过慢时可以随时点“x”中止行为。
如Ebay的登录页，上面一个“x”，会让用户误以为是取消，但实际上是关闭登录页的“x”，在登陆加载中是无法点击，弱网环境下用户唯有漫长的等待，唯一能做的只有杀掉进程。
image.png
d.当前整屏加载
严格来说不属于模态，因为对产品整体来说，用户可以自由选择执行其他操作。但对当前正在浏览的内容层而言却又是阻断性的加载。准确点描述应该称为“局部加载”或者“内容层模态加载”。
原生应用的常见做法是内容区整体保持空白，中间或内容区顶部有加载提示符spinner，告知用户耐心等待，直至所有数据请求就绪，再整体展示整个页面。
image.png
整屏加载的本质是内容层的模态加载，因此和模态加载一样，需要一个明确的超时判断，在超过指定时间数据仍未请求成功时，告知用户可能存在的原因和下一步行动点，避免一直卡在加载进程中。告知失败结果时，融合一些品牌特征和情感化设计，可以有效缓解用户加载失败的挫败情绪，甚至在心底对产品设计的用心程度加分。
image.png
e.浏览器加载
浏览器App中常见到的加载呈现方式，在地址栏下方以线性进度条的形式告知用户当前加载进度。
同时，许多原生的App中也有加载Web页面的场景，混合开发的APP。在调用内置浏览器内核的时候，就会自然而然地继承很多浏览器的交互形式。例如微信内置的是QQ浏览器内核，所以在加载公众号、朋友圈文章等Web页面时，会在顶栏下显示迷你进度条。
image.png
衍生：为什么整屏加载不像浏览器加载一样展示具体进度？
首先，加载提示符如果有进度提示，可以更好地让用户对等待时间有一个预期，有效地减轻等待的未知感和焦躁情绪。
但是设计依附于真实使用场景，试想为什么除浏览器加载外，都很少见到带有进度信息的加载提示符，而是广泛使用spinner和它各式各样的衍生形式。
移动端应用需要让用户忽略等待时间，减少具体进度带来的压迫，所以开发时候就要求正常网络环境下速度极快，这种情况下进度条没必要一闪而过。而原生页面的加载，通常情况下也比一个Web页面从DOM开始加载的速度要快。所以无论于目标与能力，都不需要也不适合具体进度的展示。反观Web页面的加载，一方面本身就平均耗时较长，另一方面也有继承PC端遗留习惯的因素，所以展示进度条就成了一个不成文的惯例。而且，绝大多数情况下，资源的加载时间都是不固定且无法预知的，预先判断需要请求的数据量并迅速折算出真实进度，对开发来讲不是易事。所以在浏览器的流畅推进的进度条，其实多数是假的，经常出现在进度条走到99%，页面实际加载完毕还遥遥无期的情况。因为浏览器的进度判断是通过监听加载状态实现的，而在大量结构标签和内容数据的加载中，只有为数不多的节点会有事件产生，最容易想到的自然是开始和结束两个节点，很多情况下，会在DNS解析和资源下载完成时就让进度条跑到90%甚至是99%,但后续的加载过程有时远比下载过程更耗时。
小技巧：在两个节点之间同样的进度条，相比匀速前进、按真实节点前进，先快后慢地前进能让用户产生加载更快的错觉。虽然是一种假象，但用户需要的就是这样的假象。
2.非模态加载
a.标题栏加载
IM、邮箱这类应用在内容加载上特点非常鲜明，大量数据都是存在本地的；其次，本地数据的浏览在任何情况下都不应该受限于网络速度（没信号适合看不了聊天记录）。因此，在这类应用中通常会在顶栏（也有在底栏的）显示加载提示符（通常是以文字+spinner的形式），这里简称为标题栏加载，优势在于不妨碍用户在内容区点击查看任何已有消息。
image.png
b.递进加载
预先设计整体的内容加载顺序，可以让核心信息优先被加载出来，让用户知道任务正在持续进行的同时，通过优先加载的内容吸引用户注意力，缓解等待的焦躁感。
注意：多数情况下，所有的整屏加载都可以通过合理的设计优化为递进加载。但有些页面有整体性要求（金融类APP中的各类表单），所有信息一定要整体显示，否则会导致歧义，这种情况不适合递进的方式。
a.内容-关联性记载
包含：loading
加载进程在加载的通知项上进行，这时候不妨碍用户浏览上下的内容，瀑布流信息类app常用
image.png
b.内容-预填充式加载
文字+占位符优先
image.png
根据内容资源性价比（资源传达的信息价值/资源的体积），最先考虑加载的自然是文字，而图片、动图、视频在此期间则用占位符表示。最简单的占位符就是一个纯色块，用于让用户对即将呈现的内容尺寸有一个心理预期。
image.png
占位符上可以通过icon告知用户资源类型是图片和视频，也可以借此展示产品或品牌的标志性icon。
image.png
低保真图片优先
图片资源的分级加载可以让这一过程更加平滑：首先加载低清版（甚至是模糊版）的缩略图，在首先保证内容完整呈现后，再加载高清资源。同理，占位符的色值直接选取图片的主色值也是一个有效的过度手段。
结构占位符优先
递进加载的思路不限于信息资源，结构元素同样考虑递进加载。
在文字加载之前，预先将结构占位符（skeleton Screen 骨骼页），从形到体地提前告知用户“你稍后即将看到的页面会是什么样”“会有哪些内容”，让用户提前有个预期，避免加载中的大忌-“惊喜感”，让加载过程更加自然。
image.png
这样非功能性的优化或许很多开发并不愿去做，但对微小细节的用心，可以让整个产品体验的顺滑程度、品质感都提高很多，用户的眼睛是雪亮的。
业务优先
此外，还可以综合考虑资源体积和模块价值，可以考虑不按从上到下的顺序，而是对业务目标最有利的模块顺序加载资源。
3.下载-下载式加载
下载/应用时的加载页面。下载和应用的过程可以看做是一个连贯的过程，而不要想象成两个独立的模态窗
注意：找到产品与下载之间的某种关联，合理运用动效、进度条、连续的处理下载安装的过程
image.png
加载的具体使用
1.使用价值：让用户感知产品正在努力运作、让用户心理对等待过程有预期、让用户在无聊等待中感知乐趣
2.品牌价值：体验感知、回忆感受、承诺期许
3.设计形式：构成元素（简单图形+文字）、配色方案（品牌色+文字）
举例：下拉页面刷新
形式一：简洁样式-构成元素形式简单，操作效率优先，目的明确单一
简洁样式的加载刷新设计构件上要么在图形上，要么在配色上传递给用户品牌特性，从而在产品的整体形成品牌印象，但是品牌故事的传达性不够完整，因为在这类场景中，效率是第一位的。所以什么样的加载样式取决于场景的最终目标是表达什么，而不是简单的统一而已。
image.png
形式二：趣味场景样式-故事叙事性、场景比较完整、相对丰富、品牌完整性
场景类的加载本身是一种诉说品牌故事的形式，简单而又生动传达产品属性，是一个完整平拍传播+数据加载完美体现，适合用户刚刚进来进行数据加载，得到的首次印象。
image.png
形式三：互动性-有一定的互动性，通过用户操作可以与页面互动
页面发生不同的变化称之为互动性的加载刷新，适合特定页面的交互行为或电商类的App比较常见：用户通过下拉刷新，会进入相关活动页面。缺点是改变了用户下拉刷新习惯。方案是给出速度和距离的定值。
image.png
形式四：广告类-有一定的营销行为，果果流量入口为公司增加营收
通过下拉查看产品推荐的相关内容，但是不影响刷新这个功能。通过产品流量，广告内容的曝光获得营收，目前电商和视频类app较为常用。
image.png
提升加载体验的其他技巧
加载提示符的设计
线上线下的服务设计很多地方是相通的
以服务著称的海底捞，我们排号等待期间并不会觉得时间特别漫长。首先，海底捞会提供小吃、酸梅汤，美甲等服务，让用户感受到商家已经充分考虑到了排号的痛苦，并为此提供了体贴关怀。其次，叫号机也让我们对“前面还有多少桌”始终心理有数。线上APP等待过程也同样如此
精心设计的加载过程可以有效缓解等待压力。无论在线性进度条、spinner上融合品牌特色做出种种新意，还是结合产品调性尝试更富有创意的动效，总比千篇一律的文字，更能让用户感受到我们对加载等待过程的充分考虑和设计上的用心。
例如在spinner中巧妙结合logo，或者设计一个节奏和灵动感俱佳的spinner，配合“卖力加载中的文案”，博得用户会心一笑，为加载多争取几秒安全时间。
image.png
其次，认真为等待过程配上精准的文案，告知用户他所处的具体处境和阶段，就像排队听到报号一样，离结果更进一步，对等待下去多一份坚定。
例如Yummly的新手引导流程中，经过多次偏好选择后，会有一个“体验个性化”的计算过程。在加载中，会实时告诉用户目前处于8个步骤的哪一步，icon颜色顺时针逐一变化的同时，下方文案会提示用户这一步具体在做什么，比如“正在测试你的市区”“正在整合你的信息”，这让用户感觉重点并不遥远，对此刻的进度有控制感，并且对当前步骤对自己的价值心里有数
image.png
内容“秒发”
以简书为例，在内容发布类流程中，传统的设计在点击“发布”后进行模态的发布进度确认，直至监听到完整发布的事件，再进入发布成功的页面。
而微信朋友圈的做法是，无论点赞、评论还是发布一条朋友圈，都在点击后“瞬间加载”，立即呈现出假设用户已经发布成功后的状态，无需用户陪同服务器一起等待整个数据和返回过程。
当然，这种“假完成”状态下，还没有真正发布的是无法评论和点赞的。
image.png
这一做法会不知不觉的让用户在体验中认知到“哇，在朋友圈发东西好流畅”，好的设计重来不易察觉-即使这是一种像浏览器进度条一样的假象，但用户就需要这种假象。
相应的风险在于容易出现用户误以为已经发出的内容，实际没有发送成功。这就要求采用这种做法的同时，一定要在超时发送失败时，用最醒目的方式告知用户发送失败。
总结：
1.不可逆流程适合采用模态加载，注意要同时提供取消按钮。
2.已有本地数据的IM、邮箱类应用适合采用标题栏加载，而每次打开都要重新请求数据的页面适用于整屏加载。
3.Web页面采用浏览器加载，显示迷你进度条，建议先快后慢，可以让等待时间“显得”更短。
4.除了页面上所有信息一定要整体显示否则会导致歧义的情况，多数情况下递进加载的体验优于整屏加载。先文后图，先占位符后图，先色块后图，先模糊后高清，先“骨骼图”后真实内容……都是可以考虑使用的递进方式。
5.内容发布类流程可以通过直接呈现发布成功的状态，制造极速发布的“秒发”假象，但记得在失败时醒目地告知用户。
6.让用户感受到产品用心程度，告知用户所处的具体阶段，都是加载提示符可以贡献的设计价值。
7.除非有明确的理由，尽量避免在启动时的数据请求中使用模态加载。
8.iOS规范推荐的空白框架加载是一种很棒的启动加载方式，无论是两步还是三步。但国内环境下，也许独立的启动页在一段时间内仍然是主流。
9一个全屏、品牌辨识度极高且不轻易更换的启动页，能最大限度地发挥启动页的价值。在启动体验和品牌曝光的问题上，折中的效果可能未必理想。
10用户在使用app的整个过程为用户体验，加载页面恰是整个体验是否用心和精致的点睛之笔。
衍生：启动页加广告是否是一个用户体验与商业目标平衡的问题？不这样做公司怎么赚钱？
这句话往往忽视了当中的“用户体验”的部分，而是把重点放在了“商业目标”上，以至于“平衡”成了企业盈利的借口。
思考，在启动页广告上再嵌入误导类跳过图标的产品哪里存在体验的考量。
有两种情况：启动页广告仅是产品收入来源的一小部、以及完全依靠也冬夜广告维持生存的产品。
第一种情况，真正的平衡是指弱化它，让广告更合理地出现，比如不在首页投放，而是定义新的规则，想办法融入到产品内容当中去，尽可能不要打扰到所有用户。比如现在的内容类网站依靠自身产品属性， 将广告做到信息流里去，智能推荐的方式推送给用户，最大化程度降低广告的打扰程度。
第二种可能性几乎不存在。
总结：启动页广告，只是所有广告类别中的一种方式而已。像微信的收入来源虽然也包含广告，但朋友圈露出的处理方式相比于启动页来说，无论从体验还是感知上都要好得多，商家利益或许也能被最大化，这才是所谓的商业与体验的平衡，而不是以一句“商业与体验的平衡”来反证启动页广告的合理性，这是本末倒置。同样，不仅仅是产品的启动页，包括产品中的方方面面，都是形成产品气质的因素，用户在使用的过程中一定会对该产品形成某种印象。但有一个共性，能处理好广告的产品，本身体验就不错，产品的这种气质，用户能感受的到。
业务数据的变化，是无法判断体验问题。
网友评论