网页设计中的破图法设计技巧分享(2)

来源:网络   作者:热心网友   发布时间:2016-12-20    浏览次数:410

d5675843f6c4a8012060c8a424a0.jpg


大破

大破是对常见设计,常见手法的另类思考。

大,指的是从整体上做大幅度的风格设计。

破,指的是打破传统的排版和布局。


下面介绍3种常见的处理手法:

1、破布局

网页设计中的布局样式,在2013年前大部分都以中规中矩、模版化的方框风格为主。给人比较呆板和约束的感觉。而在此之后的几年间,逐渐的以卡片式、大色块、扁平化的设计趋势为主,在整体的布局样式上打破早前的“方框和规矩的印象”,给人感觉更加灵活和多变。


eb0b5843f6f6a801219c778e8406.jpg


看图1:整体布局以一条曲折蜿蜒的公路为主,打破传统布局中的条框感;

看图2:整体的布局虽然没有图1做那么大的破处理,还是隐约能看出规矩的方框元素,但是在方框以外的装饰元素就打破了传统布局的表现;

看图3:打破传统的多列式、方框式的布局样子,整体布局以衣服的轮廓为主,合理安排了各种信息;


破布局的3种方式

(扔掉死板的方框)

(自由放置)

(加入装饰路径)


1、栅格式

栅格,就是通过对信息的整理和分级,利用网格的组合与分离,合并与折分,大小与颜色等的设计形式,对要传递的信息进行层级分类,最后实现对规矩的布局样式进行打破。


de135843f731a801219c7729f65b.jpg


从上述的4个案例中我们不难发现,打破布局的规律之一就是(扔掉死板的方框)


要点:

1、打破传统布局的方框印象,利用网格的多变实现对从前横平竖直布局的破;

2、布局的样式并非只有直线、方框。并非只有规矩的放置;

3、利用栅格处理时,需要控制好每个栅格间的结构划分,从而更好的分清信息的主次关系和栅格块的大小对比;



2、自由式

如果说栅格式是种理性突破横平竖直布局的方式,那么自由式的布局,就是感性破布局的自由排版方式之一。

c0425843f75ea8012060c8815160.jpg


从上述的4个案例中我们不难发现,打破布局的规律之二就是(自由放置)

要点:

1、自由式的排版布局更适合于信息量比较小的专题单页中;例如:产品官网首页、时尚类的单品页等;

2、自由式的排版并非是无规律,在整体中求变化,在变化中寻求对齐和统一;



3、路径式

路径是最为自由形式之一,现阶段的设计常见到的有s型、z型、斜线型等。路径式的布局与自由式类似,但是路径式更多的是,通过在布局中加入具有引导性的线形装饰元素,让页面更加的有设计感。


84c85843f790a8012060c8cc3de4.jpg


从上述的案例中我们不难发现,破布局的规律之三就是(加入装饰元素)

要点:

1、路径式的应用也仅适用于信息量不大的专题或者单页设计中;

2、路径式的元素出现仅仅是装饰而非主要,切误喧宾夺主;

3、关于利用路径的作用,更多的是用于视觉引导,而非无意添加;



2、破角度

打破常见图像出现的角度,可以使图像的表现力更有冲击力。在以强调速度和动感的需求中,独特且标新立异的视角往往是打破画面的利器之一。


6b875843f7e1a801219c7735cd31.jpg


要点:

1、不一样的俯视、平视、仰视等角度都可以让图像呈现的方式更加的新鲜化;

2、在以图像为主的视觉中,打破图像出现的常规角度后,其实也是让作品眼前一亮的另一种方式;


3、破色彩

色彩,无疑是第一时间吸引用户眼球的设计语言。在以扁平化风格为主的现在,类似的排版越来越多,作品也越来越同类化。尝试鲜亮的颜色和渐变色,也是打破画面简单的处理技巧。


79ef5843f80aa8012060c8e3368d.jpg


要点:

1、大胆的去尝试使用不同的颜色,但一定要确保他们和你想要表达的内容和谐一致,不能冲突。

2、鲜艳并不是刺眼;要点:


123共3页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/dianshangsheji/5458.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通