Flyme 8 空白页设计

233天前发布

原创文章 / 多领域 / 观点
Bicycle 原创,如需商业用途或转载请与Bicycle联系,谢谢配合。

Flyme 8 已经发布半年有多了,原谅我现在才来填坑

空白页,即当前页面内容为空白,或者当前页面内容错误、丢失等,与原本跳转页面不相符的页面,以前叫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,带着这些经验与不足继续前进吧~不知道接下来要画什么图呢?含泪期待~

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

198
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息