平面设计案例分析 设计稿修改前后讲解-z6尊龙app官方网站

author: chris song

在通往高逼格平面设计的路上,新手设计师通常容易跑偏迷路。今天我们将会通过几个比较优秀的平面设计案例分析,跟初学者详细讲解设计稿修改前后的原因,希望今后在工作实战中可以避免这些问题和错误,尽早出品经典案例。



实战案例分析1

-


让我们先看一下修改前后的效果:





对于设计新手来说,整体效果还是可以的,在色调上也使用了暖色调。那么让我们先来看看原图中出现的问题。



 

1)大面积的暖色会造成视觉疲劳,会带给用户不舒适的感受,而此时我们可以将其调整为冷暖搭配或进行添加辅助色。


2)文字搭配上,要尽可能的简洁规范;文字的大小也没有合理的进行规划,没有抓住重点内容。




3)再来说说图标的设计,我们能够发现图标有圆润也有尖锐的,这样造成了整体不够统一。其中“超标报警”与“短传报警”图标的设计过于相似,无法给用户明显的区分。




4)“总热单耗”的圆圈使用了投影效果,整体的效果过于凸显,破坏了整体的统一性。




5)在“我的任务”列表中,左侧的时间与右侧的任务设置占据的位置是相同的,变得非常突出,那么我们就要分析哪一个内容比较重要,要有层次的进行设计。




6)在底部的标签栏中,圆形的设计会造成图标的重复性过高。



7)最后整体的效果,层次性比较弱,图标颜色的设计也过于花哨,没有统一性。


分析到这7条问题后,接着我们将依次去修改:




1)修改后的界面我们将冷色设置为底色,但是在重点内容上搭配了暖色,而在图标的设计上也进行了相应的统一,更好让用户进行区分。


2)文字上也将大小进行了区分,加强了层次感的设计。



3)在“总热单耗”区域,去掉圆形的投影效果,使其更加简洁大方。



4)在“我的任务”列表中,将次要信息时间放在了右侧,加强了左侧任务的文字,在视觉上更加舒适。



5)底部的标签栏中,去掉了之前不好辨认的圆形外框,使用户一目了然找到相应的功能,视觉效果也更加清晰明了。



当我们碰到z6尊龙app官方网站首页比较复杂或任务信息比较多样的情况下,需要把控好主次的设计,以及调整颜色冷暖的区分,让界面的视觉效果更加有节奏感。


 

实战案例分析2

-

 


这是一款保险类的app界面设计,我们还是先来看一下修改前后的对比效果。

 



从原图中,我们能够看出界面中存在以下几个问题:



1)上方的banner过于花哨,而图中的矢量人物也不是那么符合主题内容,而在文字设计上,将内容全部规划在左侧,给人一种不平衡的视觉感受,更没有凸显出“免费保障”的设计氛围。



2)在分类区域,图标的设计没有明显的区分,而在图标的颜色搭配上,也过于弱化,整体给人灰蒙蒙的效果,而图标上的投影效果,更是起到了反作用。



3)在内容信息区域,文字的设计与规划过于相似,用户不能很好的找到相应的内容,可以在信息前端加上相应的符号,以起到区分的作用。


4)主标题与副标题的不合理搭配,造成页面整体极为不协调,可以将主标题与副标题设计在一排,这样既能解决页面空旷的问题,还能更好的调节视觉上的平衡。




5)在“精选产品”区域,板式设计上不够协调,视觉效果也不够明显。



6)大咖出“品”区域中卡片的设计与背景色相同,无法进行明显区分,只能通过投影效果进行区分,这样的设计方式是不合理的。



分析到这6条问题后,接着我们将依次去修改:



 

1)去掉花哨的人物元素,将重要的文字信息进行放大,主标题与副标题增强了层次感,视觉效果上一目了然,而背景元素选择了一个“盾牌”的图形,更加凸显保障的含义。



2)在图标的设计中,更换了相应的图标,使人更加明确图标的功能。

整体的颜色也进行了相应调整,提高了饱和度与亮度,并进行了冷暖搭配。



3)利用灰色背景色将消息栏加以区分,使用户更加容易找到相关内容。



4)在信息内容区域,标题的前端添加了不同颜色的线段图形,更加容易进行识别,而副标题则移动到主标题的旁边,使层次更加清晰。



5)在“精选产品”中,将文字进行“左对齐”的设置,更加符合用户的阅读习惯,其次将“主标题”与“副标题”的透明度降低了50%,加强了视觉的层次感;价格上使用了黄色进行相应的强调。

 



6)在大咖出 “品”区域中,将投影的特效进行了删除,使用了灰色为背景色,将整体风格调整成扁平清亮化的视觉效果,从而带给用户轻松的体验感受。




小结

-


本文上面提到的就是一条靠谱的,让初级设计师可以实现高逼格平面设计的处理方法。通过案例及设计稿修改前后的讲解,希望大家理解操作的原有,尽可能的通过这些技巧给画面界面营造出高端的感受,建立一定的心里认同感,符合人们心中仰视的朝圣感和崇拜感。


相关阅读


网站地图