今天来分享几个设计案例，主要聊聊以下四个话题：
· 信息处理
· 装饰元素的摆放
· 长页面设计 模块间要有差异
· 空间利用率
01 信息的处理
首先看这个弹窗需求，产品经理给我们提供的原型图是这样的：
「小窝准备完成，宠物到家了」显然是最重要的信息。排的时候就要使劲凸显。
在经过一些尝试后，我们挑选出了以下两版：
于是对版本 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 轴的空间利用。
如果以上账号，你都关注了，那应该是每天哐哐长心了！
本文来自微信公众号“菜心设计铺”（ID：caixinshejipu）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
