• 内页banner
  • ui1
  • 内页3
技术专栏您当前所在位置: 首页 > 技术专栏

UI版式设计技巧——相同元素,不同排版!

更新时间:2017-07-04 10:10:37点击次数:71次字号:T|T

当遇到图片较多时,有些UI设计班的同学们可能就会慌了,这时候就更应该想办法去处理,而不是拼在一堆。另外对于字体选择和字号控制也没有掌握好,还有色彩的捂配运用。今天,郑州丰泽UI设计培训班的小编就和大家聊聊UI设计的排版。


 


    第一眼看到的是满版图片,图片参差不齐,犯下了“哪里空就往哪里塞”的错误做法。没有对图片进行一个处理和组合。


Step 1

图片的筛选、去底图。



对于原设计,可能有些设计师会懒得去找好图使得图片的角度和光线没有统一。而且图片背景混乱,应采取去底固的方式,使其达到平衡统的版面。

图片的层次感

在多图片情况下,如果所有图片都按相同尺寸排列,毫无变化,就会绐人呆板、无味的效果。应打破“常规”设计,合理调整图片的大小,使用不同尺寸的图片会让版面张弛有度。


Step 2

利用版面构图,彤成空间感。


由于图片数量较多,因此这样堆积的做法形成混乱的版面。而这时候要尽量将版面的空间感做出来,把图片的主次体现出来,使版面弛张有力,这样才会显得透气舒服。


Step 3

字体选择与字号控制



一般情况使用字体不要超过三种,除非你做的是艺术。关于饮食方面使用哪类型字体比较台适(正文字体)呢?而这里的主题足西式餐厅,因而选择字体是宋体(衬线体)。

关于文字的技巧主要有对比法、添加肌理、线框装饰、立体感等。而这里不需要太过追求字体的技巧,因为版面的图片元素较多,所以至控制其他元素的变化。


Step 4

色彩搭配



不同主题所需要的色彩也不同,想要表达出食物美味,选用合适的颜色来表现美食。最快速的色彩搭配可以直接在主体图上吸取作为主色调。而在色彩捂配上的技巧,可以在基础色系加点缀色,在单一色调的基础上,加入另个色系曲小色块进行点缀。

注意:点缀部分不宜过大,增加的颜色要和基础色系有一定差异,色彩不宜超过三种颜色。



    1、掌会找图和处理图片,使多张图片与版面得到平衡统一;

    2、当多张图片存在时,可将图片去底图,适当调整图片尺寸,使版面有张驰感和层次感;

    3、尝试特写镜头,制造出能够吸引人眼球的视觉冲击力;

4、为了增强美食的感觉,在字体和文字颜色上下功夫。


学UI设计,到丰泽教育


结台以上的技巧,将图片与文字信息合理地放置版面中,进行整体的版面编排达到平衡统一。以上的案例只是一个思路示范,不能过度依赖。学习如何拿捏技巧才是关键,还要根据实际情况去完成。