技术圈首页
程序员
解决方案
聚合短信
APP下载
登录
注册
首页
文章详情
花了三天优化了一个弹窗,老板给我一顿夸!
菜心设计铺
|
233
2022-08-16 15:14
0
0
0
今天我们再来看一个弹窗的需求,最开始的效果如下:
有点像交互稿,需要增加细节和设计感,我们来看看如何进行设计优化!
1.增强对比度
如果我们感觉一个物体平,那就可以给这个物体来点对比度和层次,而颜色对比是最容易产生层次对比的,比如我们把一个纯白色弹窗,改成有色相的弹窗:
这样这个弹窗就有了明显的对比度和层次。
我们在做设计的时候,一定要先看整体的大感觉,没问题再去抠细节,不要一上来就抠细节,不然方向错了,那就白弄了。
2. 增加修饰细节
因为我们的调性风格是有“打卡”属性的,所以可以可以融入一些折纸的元素,比如卡片右下角来一个折纸效果:
再比如纸下面再叠一层纸:
再比如按钮也可以进行同样的处理:
这样我们就又完善了一步!
3 增加图形纹理
现在看起来,好像白色区域有点空的感觉,那我们可以适当加一些图形,然后图形一定要区分前后,比如我们先增加浅色的图形纹理:
然后再增加深色的图形纹理:
然后再把这个和弹窗进行融合,看看样式:
这样画面就会饱满很多,不会那么空了!
04 文字排版
我们把文字放上去,效果是这样的:
感觉有点单薄,可以尝试把前面两个字放大:
然后再给前面两个字加个底色:
这样就比最开始的文字有细节很多!
05 最后一个点睛之笔
最后,我们可以再给整个弹窗点来生命力,最常用的方式就是来点表情,来点小形象,比如在左上角冒出来一个小形象:
这样整体就丰富多了,然后在往弹窗加点线段修饰:
这样就可以了!
总结
最后,我们再看看优化前后的效果对比:
整体的设计感和细节都有了大幅度的提高,整个丰富的过程都已经毫无保留的展示给大家了,希望能给大家一定的启发!
8月底第四期UI课,已经开始预售,现在价格优惠,赶紧的吧!
0
赞
0
收藏
×
添加附言
附加内容, 使用此功能的话, 会给所有参加过讨论的人发送提醒.
回复数量:
0
暂无评论~~
请注意单词拼写,以及中英文排版,
参考此页
支持 Markdown 格式,
**粗体**
、~~删除线~~、
`单行代码`
, 更多语法请见这里
Markdown 语法
支持表情,见
Emoji cheat sheet
@name 会链接到用户页面,并会通知他
上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jp(e)g, png, gif
Ctrl+Enter
下载APP
菜心设计铺
317
文章
2
获赞
关注TA
NEW