糖心香巧

小编:写在前面:什么是破? ?破:行话“破画面”。

是打破规矩与常见的一种设计技巧,它类似于平面构成中的变异处理。

破图的作用:1?让人眼前一亮?? ? ?2?有吸引人的视觉焦点 ? ? ? 3?打破条框的约束?? ? ?4?增加画面层次

_______________________________________________________________________

在开始正式分享之前,我们试着从下面几个图中对破图的目的有个初步的理解哈。

5dbe5843f4eca8012060c84892a8.jpg

图1:翻着翻着,一条真蛇就从画面中跑出来了,慎人不?这就是打破角度的作用;让视觉更加的真实!

图2:爬着爬着,一不小心我就爬在你的屏幕前,真实不?这就是打破条框的作用;让视觉更加的刺激!

图3:忙着忙着,一脚油门车就开出了田间地头,好玩不?这就是打破布局的作用;让视觉更加的自由!

图4:玩着玩着,一个大海浪就把我打出了画框,刺激不?这就是打破场景的作用;让视觉更加的有故事!

好了,闲聊完毕?;毓檎猓?/p>

_______________________________________________________________________

今天我要分享的目录有

一、破图的2种应用

二、破图的3种方法

点破

大破

小破

_______________________________________________________________________

破的二种应用:

一破:破常规

打破一些常见的设计形式,或整体,或细节。这些都可是“破图”的常用方式。

9a515843f52da801219c77a5b000.jpg

二破:破细节

在视觉元素与版式的局部,图像与文字的局部等,做一些突破性的处理,用于加强细节表现力、提高整体视觉的冲击力。

58d35843f559a8012060c865a429.jpg

破图3种方法:1?点破 ? ? ?2、大破? ? ??3?小破

ba295843f5e2a801219c7704a8df.jpg

1、点破

点破,是设计眼前一亮作品的开始。一个立意不同的点子,能更好的引导用户体验与众不同的视觉设计,直观且讨巧的抓住用户的眼球,使之印象深刻,真正起到视觉传达的目的性。

点,指的是设计切入点。

破,指的是前期对需求、对目的的整理和分析,通过求异的设计出发点,找到与众不同的表现形式,从而点出整体风格的第一步。

b65d5843f62ca8012060c86a7d15.jpg

左图:某国外矿泉水的产品专题页设计

点破视觉的切入点就是:地表深处的矿物质水。通过突出产品优势,明确告诉用户产品的与众不同之处是什么?设计师通过整体页面设计,直观的让用户了解到产品的来源(深挖地表深处几千米矿物质水而成);

右图:中国的卫龙辣条天猫官网设计

点破视觉的切入点就是:

老乡,加入我们一起抢辣条吧。页面里各种“纲领性”的文案,鬼畜风的gif动效,满屏清新脱俗的大字报风格,让人感觉瞬间穿越回了60年代?!袄舷?,加入我们双11抢辣条,”模仿了史上最成功的广告,再加上一句亲切的承诺:“全村包邮”。从文案策划到视觉表现都非常不错,打破了双11来临前各种店铺,翻新式的促销设计。

_______________________________________________________________________

点破在设计中怎么用?

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

286e5843f68aa801219c770f4450.jpg

1?故事的场景化

看图1:

http://www.ccopus.com/ 酒类网站:点破视觉的切入点就是:设计师以霓虹灯管与造型各异的装饰元素为主,直奔主题;斑驳的肌理背景哄托出墙面的质感与洒吧的氛围感;霓虹灯光的装饰元素扩大出现,形成独特风格;带有渐变的大字母与清晰的产品拍摄,让用户细细品味产品特色;霓虹光的变化,是这个网站的特色之处,也是设计师抓住了最本质元素的体现;

2?页面的故事性

看图2:

http://www.ccopus.com/kfc宣传官网设计

点破视觉的切入点就是:(利用视觉滚动技术还原汉堡从到封装再到体验店的过程)

页面视觉营造出一个欢快有趣的汉堡世界。

看图3:

windows一代一代的变化史

点破视觉的切入点就是(以时间的角度还原变化的时间)

从1985年到产品蛋生 再到 蓝屏的DOS界面(PS:当时学校用的还是win还有版本的选择,那会的机箱还是横着放的),到win95的时候 微软发布了第一代操作系统 WIN95 ,深灰色的开始菜单设计 竖着的主机箱!1998年的时候 增加了光驱和QUICK一款音频、视频的软件;到2001年的WINXP——再到2015的WIN10 扁平处理;

3?文案的画面感

看图4

银泰3周年庆预热会场设计(ps:这个案例收录在我的新书中,请关注我的站酷动态。)

文案以“泰给力 5折封顶不留余力”为主,给人一种即将上演的价格战一样“惊心动魄”。设计师也正好通过对文案的深度诠释,把整体设计构思出一种一种“引爆”的紧张感;

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?鲜艳并不是刺眼;要点:

0a5c5843f82fa801219c77910667.jpg

小破,指的是对细节或者边角的打破处理方式,它打破了条框以内的某个角,使人物或者商品破出画面的某个边。

_______________________________________________________________________

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

1?破个角

破角的处理,使人有种呼之欲出的视觉印象;它更像是扔掉了那些条条框框,去用力打破某个边角的方式。它使元素更加灵活的呈现,也使画面细节更加的到位;

453e5843f864a8012060c8cb992f.jpg

要点:

1?破一处,远比破多处,视觉效果更集中;

2?破个角的作用可以加强画面的真实感;

3?破个角的处理方式常用于一些人物的设计中;

_______________________________________________________________________

2?破出去

让设计元素部分或者完整部分破出规矩的位置,给人视觉的舒服感;

试想如果将某元素置入到某矩形内,就会给一种很憋气感受。而如果让元素破出某个形状后,就绘给个犹如”打开天窗说亮话“的通透感。

d7735843f891a8012060c890bcd2.jpg

要点:

1?元素的部分突破会有一种敞快感,像是打开了天窗一样透气;

2?元素的整体突破出条条框框后,给人一种自由的、灵活的感觉;

_______________________________________________________________________

3、破层次

打破层次的作用就是让主体元素置于视觉前,使得人物、产品更加的突出、更有视觉冲击力,也使主体元素有种近在咫尺的视觉体验。

ac275843f8bfa8012060c844fdb9.jpg

要点:

1?常见的几种玩法是主体元素压在前面、压在上面,使主要元素有种跳出画面的感觉;

2?打破层次的元素不要过多,一个视觉点应只有一处最好,起到聚集视线的作用;

最后

对我来说,破图不仅是设计的一种处理技巧。破图更像是一种扔掉各种瓶颈,突破心境不断突破自我的一种设计执念。

_______________________________________________________________________

再回顾一下

破图的作用:

1?让人眼前一亮 ? ?2?有吸引人的视觉焦点 ? ? ? 3?打破条框的约束 ? 4?增加画面层次

破图的3种方法:

1、点破

点破,是设计眼前一亮作品的开始。一个立意不同的点子,能更好的引导用户体验与众不同的视觉设计,直观且讨巧的抓住用户的眼球,使之印象深刻,真正起到视觉传达的目的性。

2、大破

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

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

3、小破

小破,指的是对细节或者边角的打破处理方式,它打破了条框以内的某个角,使人物或者商品破出画面的某个边。

原文链接:站酷

2016.8.31

转载请注明:学UI网—UI设计师学习教程平台 » 网页设计中的破图3法

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
怎么为你的产品选择最合适的颜色?怎么为你的产品选择最合适的颜色?
50个设计精美的蓝色系网站欣赏50个设计精美的蓝色系网站欣赏
7大原则让列表页面更好看7大原则让列表页面更好看
浅谈网易严选企业购的交互设计!浅谈网易严选企业购的交互设计!
20个使用3D动画背景的网站欣赏20个使用3D动画背景的网站欣赏
2017年最新的流行WEB的设计方法2017年最新的流行WEB的设计方法
网页设计中的大事件 - 彩色字体网页设计中的大事件 – 彩色字体
图表设计-远不止“好看”这么简单图表设计-远不止“好看”这么简单
网页正文字体应该更大的四个理由网页正文字体应该更大的四个理由
25个卡通型网站欣赏25个卡通型网站欣赏
?