春节专题！App 设计系列之空白页的价值与设计方案

篇文章要为大家析空白页的存在意义及设计技巧，希望对你有益。

一. 概念

空白页是什么？

空白页指的当页面内空白，或者当页面内错误、丢失，与原本跳转页面不相符的页面，一般以白色页面主，所以一般被称之空白页。

有人会问，为什不叫缺失页、404页，而叫做空页。因为空页不仅是色的页面，而且还包括了页面中的错误页、缺失页等等，还是不理解的可以继续往下。

二. 分类

以下就空页的类别、产生因、用户使用景解决方案为大家阐述空页的人性化计。

先给大看一张系图缕清他们各者之间的系：

数据加载页

为什把加载页归结空页中，其实加载页经常会被人所忽略，这的加载页是指页面的正在加载。数据还未读取完成，页面肯定数据不齐全，那一加载页有种展示方式，这不涉及开发，仅说计展示方式：一种是全页式加载，一种是模块式加载。

产生原因：数据读取中。

使用场景：用户第打开应用时或刷新时，肯定会有个数据加载过程，于用户来说，这是品第印象。有时候数据加载速度常快可以忽略加载页存在，是考虑有些使用场景，用户是会看到加载页，像前体验款竞品，刚打开时候除了顶部导航栏和底部标签栏，所有东西都是空白，正好那时候是在网络环境常情况下，用户心理预期肯定觉这个品不是很靠谱。

△ 有、简书、猫眼电影（全屏加载）

Null页（数据为空）

这个页应用较为广泛，在品多称为数据页，与以上服务异常页有所区，在上述页，服务法提供正常信息数据，是在null页里，是服务本身不存在相关数据，也是数据为空。

产生原因：无数据信息。

使用场景：使用产品时候，需用户创建与存储信息时，应该相关的提示引导内，当页面不存数据时，空白页面会让用户存失落感，怎么样引导这种失落感让用户创建与存储信息内呢？

例如使用抖音，在「」的页面中有个人作品、喜欢、故事等板块，如果你没有发布过任何作品，页面肯定是空的，但是在点击「作品」模块，其对应的「发布」按钮上方会有个窗提示，这对于用户来说比简的问题提示来得更加浅显易懂。但是要注，不是所有Null页都适这种做法，过多的动效、图形引导会让用户视觉疲劳，要并适可而止。

例：QQ、易信、same。

推荐：抖音。

网络异常页

网络异常情况可谓是有发生，在使用产品的过程中，碰这类情况的用户肯定也觉得莫名其妙。但是网络异常情况一只有种：

• 断网弱网：完全网络环境，或者网络信弱无法传与加载数据。
• 切换网络：例如在wifi情况下视频突然切换为移动数据网，就会存在。

产原因：断网弱网、切换网络。

使用景：用户正当浏览息，突然不开产品页面，呈现的是空页面，并没有什征兆，在续刷新了次之后还是一，用户不知道问题在哪，肯定会离开产品去使用另外同类的产品。断网弱网并不是产品能够解决的问题，但是产品如果不给予用户正确的息引导，用户必然会把问题归责于产品本身。

• QQ：断网弱网。
• 优酷：断网弱网。
• bilibili：络切换。

服务器/系统异常页

是当前在浏览页面时，服务器无法提供正常的信息数据，或者服务器无响应，且不道原因所返回的页面。一般在APP端比少见，但是也存在，无论是网页设计还是app设计，个页面的设计是必不少的。

产原因：服务器异常、系统异常、请求未响应。

使用景：对于用户来说，间是非常贵的，产品的目的是足用户需求，当用户无法足需求，不的情绪便会增加，积累了不的情绪有可能导致用户对产品失去赖，从而抛弃产品。

户的焦躁情绪很大分来自于对于当前页面的解，正如户在逛时，看到一件超级的商，想上询问格，老在，员工在，这时户从开始的疑惑，到离开时的烦躁，都是在没有得到相应信息的反馈情况产生的。

三. 解决方案

无数据或数据异常

无数据情况下，要引导用户行为。比如当前需要用户创作的页面，但是用户作品为空，可以适当添加「创作」按钮或者跳转，指引用户当前页面内容是可编辑可添加的。再比如社交中的关注标签，当用户还没有关注的话题，可以推话题让用户关注。

数据异时，户需要知道为么、怎么做，通过图和来为户解释当前情况，即你把务器存在的问题一一和户说明，但是户想知道的并是你务器中现的详细问题，户想知道是简单的问题与解决的方法。

数据加载页

上面说了，当app第一次开，可以采用全页式加载或模块式加载。全屏加载页面要注的是，为用户传达页面正在运行的息，这候如果有动效画面能让用户有耐心停留当前页面，而不会因枯燥乏味的等待失去产品任。

模载可在刷的情况，够确切地告诉户还需要载多容，在络较慢时，可采占位符进行设计，但是如资讯类，闻类应就适宜使图案说明，页面会显得更复杂。

络情况

络情况存在的问题必须强调当前发生了么，要怎么做，这点和数据异是相似的，遵循「户会犯错」原则，如示案可为「当前络异」、「请检查当前络」、「无法连接到络」等。

可以按需添加个「击连」按钮，来规避为用户自身前网络不稳定或者网络切换导致读取问题。

以适当添加图案来为用户释当前问题，但是有页面不适合添加图案，比视频页面。但是，忌讳没有任何提示信息，里我指下微博的，首页在没有网络的情况下，刷下不，但是没有任何提示，能让用户感到困惑，不建议样的处理状况。

四. 总结

针空白页设计可以见仁见智，不定是要按照特定设计样去解决自己品问题，是空白页设计是必要，它意义在于为用户解释说明，并引导用户为，可以说是常要，用户需要知自己现在所处位、所处环境，然后来判断接下来为，所以尽可能去引导用户快捷地完成操作，减轻用户认知负担，才不失为款好品。

者微信号：JJ865477301

欢迎关注作者的微信公众：「JAYGO」