为什么高手的设计更有质感?4个方法教你优化UI设计!

为什么高手的设计总是看起来那么高级?如果分析你和高手之间的差距,往往拉开设计师水准的,不是什么奇技淫巧,而是细节。

往期干货:

来看看这次优化前的设计:

为什么高手的设计更有质感?4个方法教你优化UI设计!

这是心愿卡页面的视觉重心——头部,我们看优化后的设计:

为什么高手的设计更有质感?4个方法教你优化UI设计!

被惊艳到了吗?在这次的优化思路拆解中,我将向你分析优化的每一个设计细节,和背后的底层逻辑。

一、凸显主体

即使是优化前,作为图片的孔明灯,也是最吸睛的主体,那么,我们就一不做二不休,更加凸显主体。调色使其更鲜活并放大>>加简单的小元素使其更饱满>>再复制一个小孔明灯模糊处理填补空白:

为什么高手的设计更有质感?4个方法教你优化UI设计!

二、轻拟物

既然是心愿“卡”,我们可以将其设计成分主副的卡券样式,将孔明灯置于卡券左侧进一步凸显主体,将文字置于右侧:

为什么高手的设计更有质感?4个方法教你优化UI设计!

三、平面设计

我们都知道,设计界面时不要轻易使用花哨的字体,但是这次是个很好的可以使用花哨字体的案例。

因为卡券的设计已经将其剥离出界面,我们日常生活中遇到的贺卡,门票等,上面的平面设计感也是十足和必要的。和界面的系统字体统一显然不能Hold住这张卡片的俏皮感了,我们甚至可以做一些渐变和加上小饰物:

为什么高手的设计更有质感?4个方法教你优化UI设计!

四、破形,构图和层次

1. 破形

孔明灯的穗很突出,我们干脆将其破形处理,这个小小的操作既大胆又有设计感:

为什么高手的设计更有质感?4个方法教你优化UI设计!

2. 构图和层次

微微倾斜一点心愿卡,并在后面加一个纯色底板——构图上增加前后叠加关系。整个模块有前中后三层,层次丰富:

为什么高手的设计更有质感?4个方法教你优化UI设计!

五、背景图

氛围都烘托到了,没有星空背景怎么行:

为什么高手的设计更有质感?4个方法教你优化UI设计!

最后,我们来看看优化前后的对比:

为什么高手的设计更有质感?4个方法教你优化UI设计!

晴朗星空下仰视孔明灯许愿的场景,在这次的案例里展现得淋漓尽致。拿捏细节,你的设计也可以情绪价值拉满!

收藏 14
点赞 55

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。