我被工作上的小需求给难住了!

共 1068字,需浏览 3分钟

 ·

2022-07-24 09:44



今天来分享两个工作中的需求小案例,看似简单,但也都有很多细节可以聊聊!


案例一


需求是做一个:订单通知图标(电脑加消息通知)
根据电脑和消息通知这两个方向
我找来了如下的素材参考


通过上面的参考,电脑选用了第二个的大形,消息的铃铛总觉得参考都不够饱满灵动,反复试错后加上颜色得到了下面的雏形。
虽然需求是满足了,但总感觉画面很单一,缺少了些什么。
于是我从以下几点对它进行了完善补充。

01 破形

上面的图标简单到用两个圆角矩形,一个三角形和一个铃铛就完成了,虽说现在设计也有一切从简的趋势,但这个着实说不出有什么设计感可言。
那就加,加...诶还记得上面电脑素材有个破形出去的吗?我也试试


这两种方式效果感觉一般,emm...好吧再来试试!

这个看起来好像“稳”一点,但电脑支架是三角形的,显得有些复杂,把它简化一下
嗯,这样是不是好多了

02 层次

空空的电脑屏幕总觉得少点东西,那就加一个形状,来个投影,嘿,变得有点意思。


这里有个小细节,之前的支架看起来还是有点层次没有拉开,把中间颜色加深,让它变得立体些。


再加一个背景,突出主体。这样单薄的画面是不是瞬间丰富起来了。


03 颜色

开始电脑屏幕的大量留白加上铃铛的黄色显得画面很炸眼,加上主色的蓝也有点浅,所以整体层次对比没拉开

后来依旧是对比度不够,让画面显得灰蒙蒙的


所以提高颜色对比度还是很重要的,图标是不是就精致起来了!


加上文字,主副标题再一个大小对比,颜色对比,一个还不错的图标就出来了!





案例二


一张宣传小画面。


就是根据之前我们设定的官网风格,来延展一张小的宣传画面,最开始做出来的效果是这样的:



看起来有点乱乱的,为什么会这样呢?


我们可以从两个层面来分析一下,第一个就是背景层面,我们看最开始的背景:



有点缺少层次,所有元素不论是大小对比,还是前后对比都不太够,我们可以先加大元素的大小对比,前后层次,变成这样:



这样就好多了。


然后我们再从标题的层面出发,原来的标题稍微有点单薄:



可以尝试增加层次,比如标题增加粗细对比,我最常用的一种方式:



但这样还是感觉有点单薄,那我们可以换一个方式,比如在某些文字下面加一个色块,像这样:



色块太简单,没有设计感,那再加点小细节:



这样就感觉好多了。


简单优化后,我们可以看一下前后效果的对比:






要好很多了!




总结


以上就是今天分享的两个工作小案例啦,如果我们觉得自己的页面或者图标有问题,完全可以先从层次方面入手优化,大小层次、前后层次等等,只要层次问题得到了解决,效果就会好很多!

8月底第四期UI课,已经开始预售,现在价格优惠,赶紧的吧!


浏览 17
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报