最新文章2023-11-22 花了三天优化了一个弹窗,老板给我一顿夸! 今天我们再来看一个弹窗的需求,最开始的效果如下: 有点像交互稿,需要增加细节和设计感,我们来看看如何进行设计优化! 1.增强对比度 如果我们感觉一个物体平,那就可以给这个物体来点对比度和层次,而颜色对比是最容易产生层次对比的,比如我们把一个纯白色弹窗,改成有色相的弹窗: 这样这个弹窗就有了明显的对比度和层次。 我们在做设计的时候,一定要先看整体的大感觉,没问题再去抠细节,不要一上来就抠细节,不然方向错了,那就白弄了。 2. 增加修饰细节 因为我们的调性风格是有“打卡”属性的,所以可以可以融入一些折纸的元素,比如卡片右下角来一个折纸效果: 再比如纸下面再叠一层纸: 再比如按钮也可以进行同样的处理: 这样我们就又完善了一步! 3 增加图形纹理 现在看起来,好像白色区域有点空的感觉,那我们可以适当加一些图形,然后图形一定要区分前后,比如我们先增加浅色的图形纹理: 然后再增加深色的图形纹理: 然后再把这个和弹窗进行融合,看看样式: 这样画面就会饱满很多,不会那么空了! 04 文字排版 我们把文字放上去,效果是这样的: 感觉有点单薄,可以尝试把前面两个字放大: 然后再给前面两个字加个底色: 这样就比最开始的文字有细节很多! 05 最后一个点睛之笔 最后,我们可以再给整个弹窗点来生命力,最常用的方式就是来点表情,来点小形象,比如在左上角冒出来一个小形象: 这样整体就丰富多了,然后在往弹窗加点线段修饰: 这样就可以了! 总结 最后,我们再看看优化前后的效果对比: 整体的设计感和细节都有了大幅度的提高,整个丰富的过程都已经毫无保留的展示给大家了,希望能给大家一定的启发! 8月底第四期UI课,已经开始预售,现在价格优惠,赶紧的吧! 本文来自微信公众号“菜心设计铺”(ID:caixinshejipu)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。 TAGS: 再增加弹窗效果细节 相关文章英赫日报 | 李宁 × 空…米兰时装周的异星来客,用结…米兰“MoLo”移动与物流…西班牙艺术家 Juan d…把小鸟画成美少女,她弃医从…这些鸡蛋包装不只是有趣,设…国产文具又炸了!晨光再造“…七点资讯 |《更衣人偶坠入…AlphaDraw筑绘通「…秦始皇的黑,是你不懂的黑。