大总管默默

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

· 信息处理

· 装饰元素的摆放

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

· 空间利用率

 

一、信息的处理

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

图片

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

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

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

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

图片

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

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

 

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

图片

 

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

图片

 

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

图片

 

4、标点符号的细节很重要:有的字体标点符号与文字看着不在一条线上,记得一定要对齐!

图片

 

5、标题有点单调,我们再增加设计样式,让页面更精致!

图片

这样就完成了,但是还是差了点什么:

图片

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

 

 

二、装饰元素的摆放

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

 

1、大小对比,有的彩带大些长些,有些则小点短点。

图片

 

2、前后层次,有的在卡片前面,有的在卡片后方

图片

 

3、造型差异化,除了彩带再来点其他元素

图片

 

 

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

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

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

1.排版不一

2.视觉不一

 

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

图片

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

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

图片

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

图片

 

 

四、空间利用率

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

图片

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

 

1、利用 x 轴的空间

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

图片

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

图片

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

 

2、利用 z 轴空间

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

图片

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

图片

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

 

 

总结

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

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

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

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

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

 

原文地址: 菜心设计铺 (公众号)

作者:菜心
图片

转载请注明:学UI网 » 花了三天扣的设计细节,回头看真的值了!

登录收藏
 
你可能喜欢的:
UI 场景中常见的 3 个主题化区域UI 场景中常见的 3 个主题化区域
如何改进UI中的按钮设计,试试这5个方法!如何改进UI中的按钮设计,试试这5个方法!
好难啊,一遇到场景插画,我就废了!好难啊,一遇到场景插画,我就废了!
如何设计一份问卷——问卷设计步骤与常见错误如何设计一份问卷——问卷设计步骤与常见错误
设计师能力建设(4):设计评审会设计师能力建设(4):设计评审会
设计师如何不花钱学习?设计师如何不花钱学习?
作品本身不足,与包装无关作品本身不足,与包装无关
如何通过设计语言手册来传递品牌理念!如何通过设计语言手册来传递品牌理念!
有驾在现场 车展品牌全案设计【百度】有驾在现场 车展品牌全案设计【百度】
卡片式设计 | 掌握这些技法,快速提升界面效果!卡片式设计 | 掌握这些技法,快速提升界面效果!