花了三天扣的设计细节，回头看真的值了！

今天来分享几个设计案例，主要聊聊以下四个话题：

· 信息处理

· 装饰元素的摆放

· 长页面设计 模块间要有差异

· 空间利用率

01 信息的处理

首先看这个弹窗需求，产品经理给我们提供的原型图是这样的：

先不要急着开始画，理解需求是最重要的一步。

这个弹窗最想要传达给用户什么信息？

「小窝准备完成，宠物到家了」显然是最重要的信息。排的时候就要使劲凸显。

在经过一些尝试后，我们挑选出了以下两版：

对于这个弹窗，版本 2 的层级会更舒服。

于是对版本 2 进一步优化。

1. 同样的字号下，英文看着会比中文小。这上面用英文的「TA」不如直接写中文，看着也会更加整齐：

2. 字体也是有性格的，它能够影响页面的风格。所以将字体换成圆体，让页面更活泼可爱。

3. 尽量使上下两段文字长短不一，看着会更有节奏感。

4. 标点符号的细节很重要：有的字体标点符号与文字看着不在一条线上，记得一定要对齐！

5. 标题有点单调，我们再增加设计样式，让页面更精致！

这样就完成了，但是还是差了点什么：

是整个页面太安静了，少了一些热闹庆祝的氛围，那就加一些彩带装饰吧。

02 装饰元素的摆放

在添加时，需注意大小对比、前后层次、造型差异化，才能加的自然好看。

1. 大小对比，有的彩带大些长些，有些则小点短点。

2. 前后层次，有的在卡片前面，有的在卡片后方。

3. 造型差异化，除了彩带再来点其他元素。

03 长页面设计 模块间要有差异

在一个长长长页面里，相同的排版会没有新鲜感，容易产生视觉疲劳。

我们可以通过两种方式，让设计模块有差异。

1.排版不一

2.视觉不一

比如这个例子，同样都是听音乐，但是会用不同的排版穿插展示。

就算是同样的排版，我们也可以在其中用不同的视觉。

比如以下这个案例：一开始它从头到尾都是运用的一种视觉，排版也十分相似，页面整体结构也没有主次。

在我们对不同模块的卡片处理后，就好很多。

04 空间利用率

页面的空间可以站在三维的角度去看，分为 x 轴、y轴、z 轴。

页面的空间是十分宝贵的，当页面承载的内容越来越多，我们不能只在 y 轴（高度）上一直增加页面的高度。学会利用 x 轴（宽度）和 z 轴（深度）的空间能有效减短 y 轴（高度）。

4.1 利用 x 轴的空间

我们来看下面这个例子，他一开始采用的竖排方式：

如果我们将它改成横排、滑动查看后，页面就能够展示更多的内容，就越可能捕捉到用户想看的信息。

这就是减少了 y 轴的空间，利用了 x 轴的空间。

4.2 利用 z 轴空间

z 轴空间就是利用深度、前后的空间，就像我们经常看到的「页面二楼」，下拉页面后，在页面的后面出现一些内容：

这个 banner 的滑动也是利用了 z 轴空间：

以上就是我在空间利用率上面的收获，大家心里留个印象，说不定之后就能解决一些相关的问题～

总结

不知道今天分享的大家get到了吗？总结一下～

1.信息处理：明确信息的层级关系，有助于信息处理。

2.装饰元素：有大有小、有前有后、造型不同，会让装饰元素更自然

3.长页面设计：模块与模块间要排版或视觉不一

4.空间利用率：把页面当成三维空间，除了 y 轴，也要考虑到 x 轴和 z 轴的空间利用。

- 作者：花菜 -