|
空白页，即当前页面内容为空白，或者当前页面内容错误、丢失等，与原本跳转页面不相符的页面，以前叫 404，不过一般以白色页面为主，所以又称为空白页。 上图为最终 Flyme 8 空白页的图形 文字部分因当时还在设计阶段，与目前实际应用不符 网络上有各种优秀有趣的空白页设计，但在日常接触最多的手机系统上，空白页似乎没有什么亮眼的表现。 因此，追求极致、小而美的 Flyme 系统在更新迭代之际，在空白页的设计上做了些小巧思。本文为你揭开背后的故事（设计师的艰难时光）。 分 析 _ 接手项目后，我从 3 个角度去对空白页进行分析——逻辑、情感、品牌。
1 逻 辑 空白页大致分为三种——无数据页面、网络异常页面、服务器异常页面。 但用户不 care 是什么类别，只在乎「操作是什么出错了」，「接下来又该怎么办」。 将当前系统中所有空白页列出后（这一步其实挺困难的，因为每一个空白页都是跟着对应的产品，并不会有专门空白页的一个文件夹一样的东西）发现图形的逻辑并不一致，分了两个角度——为什么？会怎样？ 那么我是不是可以将它们的逻辑统一一下呢？
2 情 感 在设计上，略显老旧不耐看，这也是要重绘空白页的主要原因。而为了让图形更加耐看，我想是否要给它加一些「情感」，希望每一个空白页都能有它的「故事」。甚至是加入动效之类的。
3 品 牌 而作为一个手机系统的空白页，它当然还是要保持系统的视觉风格及理念，希望能在看到这个空白页的时候不会感到违和。细细品味时，又会觉得 Flyme 的空白页就应该长这个样子。 另外，空白页也会因为各种原因而增加，所以设计必须要有规律可循，有可延续性，保证未来新增空白页视觉统一。 总之，在分析过程中头头是道，感觉会像各路大厂的大师们，分析完马上就可以出终稿。然而我只是带着以上种种分析、想法，展开了漫无边际的设计过程......（是不是很真实！） 设 计 _ 在初始的稿件中，我还是比较依照前期的分析去做的——「逻辑清晰，通俗易懂，有情感，有简单动效，视觉风格统一，有较好的延续性」 飞机稿 1：「太可爱，不符合 Flyme 的风格，另外也稍微有点复杂。」 飞机稿 2：「虽然简化了，但也还是可爱。」 直至这里，我都还有坚持，希望空白页能加入动效 但项目组最终讨论，决定还是取消。首先是成本大大提高，每一个空白页都做动画是非常大的工作量，以及后期新增空白页也会变得麻烦。 其次，从空白页的意义来讲，增加情感是合理的，但动效这种「重」设计，会增加用户对图形的吸引力，变相增加用户的逗留时长，这对于空白页来说又是否合理呢？在这个问题没弄清楚前增加动效，就显得有点吃力不讨好了。 飞机稿 3：「过于写实了，与系统视觉风格不相符」 要摒弃之前的设计，还要保持初心，听起来就很难好吧，所以飞机稿 3 的想法也要感谢同事的帮忙。 有了飞机稿 3 的「突破」，后面的设计也就很「无畏」了，其中下面方案是我挺喜欢的，无奈领导又说得挺有道理的，还是变成了飞机稿。 飞机稿 4：「觉得还是不够好，有些抽象」 思 考 _ 到了飞机稿 4（中间省略了无数类似的版本），其实方向已经差不多了，接下来就是要继续深化。最后与同期进行的 Flyme 引导页统一了设计风格，用类似 2.5D 的方法去设计，并调整了无数遍，得出了空白页最终稿。 上图为同期进行的 Flyme 8 引导页图形
那么画完了，这一套图形在目前这样的一个大环境下（当时是 2019 年中旬），还能做些什么吗？ios 系统终于推出了夜间模式，而在夜间模式作为行业领先的 Flyme，也要做点东西，于是我将空白页对夜间模式进行了适配，研究出了一套颜色系统，让同一张图在常规模式和夜间模式下都通用。
这样做的目的，只是为了减少固件包的大小可能每一张图只有几 KB，但整个系统下来就不少了，而且还减少了夜间模式下开发的难度。 有必要做那么复杂吗？细节决定成败，而且设计过程中，也让我学习了很多。 Flyme 并不完美，但同事们都在追求着更完美。作为设计师敲不了代码，那我就用自己能做的，去让 Flyme 更好更完美。 P.S. 1. 为了视觉上的统一，没有与产品进一步沟通，充分考虑空白页的可能性 2. 因为篇幅问题，本文只涉及到空白页图形的设计部分 3. 情感化不足，用户觉得有趣，增加逗留时长，是否影响产品的体验？作为系统，是否应该更性冷淡，更中性化？ 4. 空白页图形数量巨大，适配过程中设计并没有保持水平。 Anyway，带着这些经验与不足继续前行吧 ~
|
|
|
来自： 大器天成svrjt0 > 《房地产文案设计》
