千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 >  UI视频教程  >  UI设计之带你认识设计中的层次感

UI设计之带你认识设计中的层次感

时间:2018-05-16 15:04     来源:千锋视频教程 作者:千锋老师

层次感即是在符合视觉合理性的基础上,把要强调或者要突出的主体与画面中其他元素进行区分时所发生的关系;通过对版面中的元素大小,远近,前后等多重关系原理,并运用色彩加以区分使元素和主体在画面中具有一定的主次,当人眼通过观看时会产生一定的视觉层次和心理变化;对设计师而言,可以通过技术手段对主体自身的层次感进行调整变化,使画面的在传递的过程中更加具有视觉效果和层次变化;

a15111709714 (1)

如图所示:通过两张简单的模特图可以看出,左边处理成黑白色,自身的层次感除了黑白灰并没有其他的区分,而右边则是正常色显示,除了黑白灰之外还有黄色的皮肤,整体更加能够突出人物,并且是真实存在的自然现象,即使换成不同风格的衣服和装扮都是来衬托人的主体,衣服和装扮与人物自身则会形成一种层次分明的感觉;

a15111709714 (2)

a15111709714 (3)

两组同样大小的案例使用不同的编排方式和表现形式,而画面所传递出来的层次感完全是不一样的;左边的案例除了文字信息自身的编排营造的节奏感和层次感之外,主体的投影也是从上向下延伸没有太多的层次变化;而右边的案例在主体的倒影做了透视之后很好的与整个版面形成前后的层次感,文字的编排则会给人一种悬挂的感觉,在增加层次感的同时也增加了空间感,让整个版面不再那么平淡;

a15111709714 (4)

a15111709714 (5)

如两组案例所示;在使用相同编排的同时,把画面中的主体自身进行变化,左边则是实心的线条没有做任何的修饰和变化,而右边的则是把主体处理成具有强烈层次感的形式,在改变自身变化的同时也可以为整个画面增添不少视觉效果,很多时候对于主体自身的层次变化也是不可忽略的,主体的好坏则会直接的影响画面的视觉效果,在选择主体时也要进行全面严格的把控和筛选;

a15111709714 (6)

对于主体而言我们在进行明度对比调整,色彩调整和光影调整的时,以及使用材质进行刻画和形式表现时,即是对层次感的把控和修饰;

实际案例分析

层次感既是通过层次的划分,前后关系的对比,色彩明暗的调整,表现出图案的主次,让观者在阅读时可以有明显的变化和喘气的时间,同时也是区分出各个元素之间的关系但却又存在一定的关联。

a15111709714 (7)

在案例中整体采用单色色彩,但却在表现形式上让层次感发挥到极限,背景用线条绘制成抽象的真实场景,连绵不断的线条错落有致,即使是使用单色也可以让画面层次分明极具视觉效果;在绘画和极简的风格中对层次感的把控要求更高;

a15111709714 (8)

把案例简单的分出三个部分之后可以看出,其主要的层次感就是表现在主体自身,而主体则是采用多色的形式形成色彩的层次感对比,以突出作为主体的重点,主体自身的每个颜色都可以与文字和背景形成一种层次,而主体自身虽然在一个层级上也会形成不同色彩所带来的层次感;

a15111709714 (9)

如图所示;案例中采用图叠字的交叉处理方法,层次感比较明显,由大到小从后到前的突出主体重点,给人一种生动真实的的感觉,黑色的文字则很好的把整个画面向后压回,在不失识别度的情况下更加能够突出主体和白色小文字,让观者很容易分别出来图中的主体与主次;

层次感的作用

强调重点、突出主题

提升画面视觉表现

丰富画面建立主次关系

平衡单调与花哨

让画面更加生动真实

形式层次感

形式层次感作为最有力凸显层次感的方式之一,同时也是兼具设计感和强有力的艺术性,包含多种设计中的风格,细节以及处理技法,其目的主要是在现有的基础上进行另一种形式的变化,尤其是在主体较为固定的情况下,形式所营造的层次感尤为重要,且极具视觉冲击力,重点的突出可以起到美而新的作用,而在立体和绘画这种可控性较强且加持各种类型的层次感风格上,所起到的作用最为明显;

a15111709714 (10)

从六个形式中可以看出,右边的图形与画面中的文字信息和背景全部进行了区分,在较为固定的元素中同样可以用很多种合适的形式营造层次感突出所要强调的,但需要注意不同形式对画面整体风格所带来的影响变化;

a15111709714 (11)

a15111709714 (12)

新建一个画布,然后把找到的素材置入到画面当中,所找到的素材则是立体的流体分裂球,其本身就带有一定的层次感和极强的艺术性,对于优秀的素材可以省去我们很多功夫,但也需要根据实际的效果而定,然后根据主体所呈现的层次感对背景进行处理;

a15111709714 (13)

找到一个褶皱纸张的纹理素材,其目的主要是利用褶皱所呈现出来的层次感变化,然后对其执行图层样式-颜色叠加-正片叠底,选择一个亮红色得出右边的效果,在此基础之上可以利用曲线调整明暗关系;

a15111709714 (14)

用曲线调整完明暗关系之后可以看出左边的图的明暗关系稍微弱了一些,同时也与主体更加吻合,在此基础之上再执行滤镜-风格化-曝光过渡,最终得出右边的效果,而此时调整出来的效果与主体的对比更加明显,但在风格上面的差异比较打,接着对主体进行修饰刻画;

a15111709714 (15)

对主体执行滤镜-风格化-油画效果,让主体自身没有那么光滑,增加更加细腻的层次变化,然后再对其添加渐变叠加效果,加入红色的泛光则是为了与背景中的红色达到和谐统一的效果,并且让主体也有一些色彩层次的变化,得出右边的效果;从整体来看风格和形式比较和谐统一,但却觉得主体不够真实且空荡不稳定,接着处理;

a15111709714 (16)

接着直接把主体复制一层,调整下面图层的大小至合适的位置,然后调整混合模式为正片叠底,与上面的主体正好可以形成前后鲜明的对比,同时也是图叠图用法,让主体更加突出,最后加入编排好的文字即可;

a15111709714 (17)

色彩层次感

无处不在的色彩作为营造层次感最强有力且最为直接的方式,不仅仅存在于设计当中,在生活当中也时刻对我们产生着久远的影响,色彩作为一门学问,其作用和影响的广泛度也是有目共睹的,在之前写过色彩对风格的影响,而本期提及的色彩则是对层次感的营造和影响;

a15111709714 (18)

单色的层次感就是通过色彩的明暗度和饱和度的变化来营造明暗和深浅的层次关系,这种层次感也是在设计中最为常用的方式,但很多时候单色容易给人一种单调乏味的感觉,而这种时候就需要通过层次感来提高单色的档次;

a15111709714 (19)

a15111709714 (20)

a15111709714 (21)

新建一个画布,以文字信息为主体,把事先做好的字体设计置入到画面当中,调整到合适的位置大小,然后针对版面进行编排设计;

a15111709714 (22)

如左图;当把所有的信息都摆放好之后可以看出,整体全部使用一个颜色,这样会让整个版面过于平庸单调,且没有视觉效果,在此基础之上加入具有层次感变化的材质,即让画面更加真实同时也具有较好的视觉效果,而左上角的标志则使用图形和文字不同的单色,即使在版面中占据较小的空间,也瞬间让图标更加醒目;

a15111709714 (23)

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷A区B座605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:400-186-9990
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱