简单布局怎么做到不单调而有层次?

看看设计师 Czékmány Zoltán 的9个技巧

布局怎么做到不单调而有层次?来看高手的9个技巧

用不规则边缘营造质感

即使是简单的左右布局,在元素不多的情况下,也可以使用参差而不规则的边缘来打破整齐的边缘,打破简单而死板的感觉, 让页面拥有更加自然的感觉,提升质感

布局怎么做到不单调而有层次?来看高手的9个技巧

恰到好处的对比式配色

橙色+黑色的搭配和经典的黄黑配色一样,对比强烈,视觉冲击力足够。两种对比色加上中性的白色,让整个页面的配色拥有层次感

图片元素沿用了相同的配色,而页面正中间的文本采用了半透明的白色,让页面层次更加丰富

布局怎么做到不单调而有层次?来看高手的9个技巧

打破边界的视觉元素

同样是经典而简约的布局,左边文本右边图片,设计师只是简单的把图形元素从图片中提取出来,就打破了常见图片素材的边界感

底部的深色导航不仅具备功能性,而且让整个网页布局看起来丰富而又不让人觉得复杂

布局怎么做到不单调而有层次?来看高手的9个技巧

使用强调细节的视觉素材

文本简单的居中排布,标题和正文大小对比明显,足够简单了。而真正让网页显得不那么单调靠的是左侧细节丰富的半边人脸

人脸本身会更容易引起用户的注意力, 加上面部毛发和皮肤的质感,赋予页面以信息量,又没有让布局复杂化

布局怎么做到不单调而有层次?来看高手的9个技巧

巧妙使用字体组合

依然是简单的左右式的布局,左侧图片并未贴边使用,边缘留白让图片和背景之间增加了层次

右侧文本标题,并未使用单一字体,而是采用了风格不同的两种字体进行搭配,风格不同,排布上却互相补充, 错落而协调,让页面一下子活了起来

布局怎么做到不单调而有层次?来看高手的9个技巧

灵活使用重叠的色块元素

色彩叠加是最近几年非常流行的设计技法。色块并不一定要覆盖整个页面,即使只是覆盖部分的图片元素也可以达到增加层次的作用

和图片部分重叠的蓝色还打破了边界,视觉上从简单走向参差不平衡,从而让布局打破了呆板的感觉

布局怎么做到不单调而有层次?来看高手的9个技巧

尝试错落重叠的图片

页面配色不用复杂,和他的许多其他的页面一样,使用对比色+中性色的搭配,黄黑两色+白色

两张带有色彩叠加的图片错开排布, 很简单就让页面有了活跃的氛围,前后对比也清晰直观。错开的位置露出功能性的按钮和链接,非常巧妙

布局怎么做到不单调而有层次?来看高手的9个技巧

让图片发声,围绕图片设计

高清大图作为视觉主体,但是只有它是否有点单调呢?

标题文本可以结合图片内元素的前后景关系,插入进去,辅助性的链接可以放在图片的边角(注意对比度),功能性的链接,则可以用顶部导航和侧边栏来承载,布局简单但内容丰富

布局怎么做到不单调而有层次?来看高手的9个技巧

图片和图形元素的结合

粉色和白色的搭配几乎是整个网页中唯二的色彩,而从图片中提取的图片置于页面中间似乎又太单调了

在背景加入圆形的背景衬托,不仅让作为视觉焦点的图片素材被图形约束起来,显得整齐,而且起到了增加层次的作用

非特殊说明,本文版权归原作者所有,转载请注明出处
原文地址:
https://www.uisdc.com/9-tips-for-layered-layout

– End –

你也许还想看

设计师的每周灵感WIFD 003

设计师的每周灵感WIFD 004

2018设计师的未来指南|干货分享

这份切图命名指南,让我和开发们成为了好盆友

如何一键将PSD转换成Sketch源文件|Sketch技能分享

布局怎么做到不单调而有层次?来看高手的9个技巧

波普先生官网:www.mrpop.cn

KEYWORDS

后台回复下列关键词,发现更多设计干货

回复字体,获得苹果中文/英文字体,安卓思源黑体/宋体

回复光效,获得珍藏Photoshop光效制作插件

回复壁纸,获得精选手机壁纸,每天有新惊喜

回复科学上网,获得设计师翻墙神器

访问官网:Mrpop.cn 获得免费精选

原文始发于微信公众号( 波普先生 ):布局怎么做到不单调而有层次?来看高手的9个技巧