空白页，即当前页面内容为空白，或者当前页面内容错误、丢失等，与原本跳转页面不相符的页面，以前叫404，不过一般以白色页面为主，所以又称为空白页。

——好像很有考究的瞎说

（上图为最终 Flyme 8 空白页的图形，文字部分因当时还在设计阶段，与目前实际应用不符）

网络上有各种优秀有趣的空白页设计，但在日常接触最多的手机系统上，空白页似乎没有什么亮眼的表现。因此，追求极致、小而美的 Flyme 系统在更新迭代之际，在空白页的设计上做了些小巧思。本文为你揭开背后的故事（设计师的艰难时光）。

分析

——————————

接手项目后，我从3个角度去对空白页进行分析——逻辑、情感、品牌

（以下分析为设计前的胡思乱想，可能会因为脑洞过大或没用而没应用在最终设计上，但这些思考都是不可或缺的，因为它们都是迈向终稿的引线）

1.逻辑

空白页大致分为三种——无数据页面、网络异常页面、服务器异常页面

但用户不care是什么类别，只在乎“操作是什么出错了”，“接下来又该怎么办”。

将当前系统中所有空白页列出后，（这一步其实挺困难的，因为每一个空白页都是跟着对应的产品，并不会有专门空白页的一个文件夹一样的东西。）发现图形的逻辑并不一致，分了两个角度——为什么？会怎样？

那么我是不是可以将它们的逻辑统一一下呢？

（但这些页面没有连续性，基本不可能有连续出现的可能，所以没有必要要让所有空白页的逻辑统一，这里这么做，只是作为处女座设计师的执著，哈哈哈哈哈哈哈）

2.情感

在设计上，略显老旧不耐看，这也是要重绘空白页的主要原因。而为了让图形更加耐看，我想是否要给它加一些“情感”，希望每一个空白页都能有它的“故事”。甚至是加入动效之类的。

3.品牌

而作为一个手机系统的空白页，它当然还是要保持系统的视觉风格及理念，希望能在看到这个空白页的时候不会感到违和。细细品味时，又会觉得Flyme的空白页就应该长这个样子。

另外，空白页也会因为各种原因而增加，所以设计必须要有规律可循，有可延续性，保证未来新增空白页视觉统一。

总之，在分析过程中头头是道，感觉会像各路大厂的大师们，分析完马上就可以出终稿。然而我只是带着以上种种分析、想法，展开了漫无边际的设计过程（是不是很真实！）

设计

——————————

在初始的稿件中，我还是比较依照前期的分析去做的——“逻辑清晰，通俗易懂，有情感，有简单动效，视觉风格统一，有较好的延续性”

飞机稿1：“太可爱，不符合Flyme的风格，另外也稍微有点复杂。”

飞机稿2：“虽然简化了，但也还是可爱。”

直至这里，我都还有坚持，希望空白页能加入动效

但项目组最终讨论，决定还是取消。首先是成本大大提高，每一个空白页都做动画是非常大的工作量，以及后期新增空白页也会变得麻烦。其次，从空白页的意义来讲，增加情感是合理的，但动效这种“重”设计，会增加用户对图形的吸引力，变相增加用户的逗留时长，这对于空白页来说又是否合理呢？在这个问题没弄清楚前增加动效，就显得有点吃力不讨好了

Anyway，我还是很想加动效的，哈哈哈哈，但这种美好的幻想，我还是留在个人制作上吧。

飞机稿3：“过于写实了，与系统视觉风格不相符”

要摒弃之前的设计，还要保持初心，听起来就很难好吧，所以飞机稿3的想法也要感谢刘骁大师。

有了飞机稿3的“突破”，后面的设计也就很“无畏”了，其中下面方案是我挺喜欢的

无奈领导又说得挺有道理的，还是变成了飞机稿

飞机稿4：“觉得还是不够好，有些抽象”

思考

——————————

到了飞机稿4（中间省略了无数类似的版本），其实方向已经差不多了，接下来就是要继续深化。最后与同期进行的Flyme引导页统一了设计风格，用类似2.5D的方法去设计，并调整了无数遍，得出了空白页最终稿。

(上图为同期进行的 Flyme 8 引导页图形)

那么画完了，这一套图形在目前这样的一个大环境下（当时是2019年中旬），还能做些什么吗？ios系统终于推出了夜间模式，而在夜间模式作为行业领先的Flyme，也要做点东西，于是我将空白页对夜间模式进行了适配，研究出了一套颜色系统，让同一张图在常规模式和夜间模式下都通用。

这样做的目的，只是为了减少固件包的大小可能每一张图只有几KB，但整个系统下来就不少了，而且还减少了夜间模式下开发的难度。

有必要做那么复杂吗？细节决定成败，而且设计过程中，也让我学习了很多。

Flyme 并不完美，但同事们都在追求着更完美。作为设计师敲不了代码，那我就用自己能做的，去让 Flyme 更好更完美。

P.S.

1. 为了视觉上的统一，没有与产品沟通，充分考虑空白页的可能性

2. 本文只涉及到空白页图形的设计部分，不涉及空白页交互逻辑上的内容应该是怎样的，毕竟用户想知道的，应该是通俗易懂问题描述以及解决方法

3. 情感化不足，用户觉得有趣，增加逗留时长，是否影响产品的体验？作为系统，是否应该更性冷淡，更中性化？

4. 空白页图形数量巨大，适配过程中设计并没有保持水平。

Anyway，带着这些经验与不足继续前进吧~不知道接下来要画什么图呢？含泪期待~

感谢您看完了我罗里吧嗦的经验分享。

Powered by Froala Editor