设计技巧分享:11个图形深度暗示的方法

文章描述:提升设计的立体感、深度感!11招.

为设计增加深度能够让你的设计看起来更写实,而且也有视觉趣味。营造出一种三维的延伸感,从而让观看者陷入你的设计之中。而且,还能帮助你在你想要的地方构建视觉切入点。

我们是三维的存在,我们周围的物体也是三维的,但是屏幕是二维的,缺少的那个维度意味着在页面上的视觉表现要比真实生活的视觉感差。通过一些图形手段,把缺少的那维找回来可以提升真实感,一种物理感。

那我们怎样在设计中创造深度呢?

深度感暗示

首先,有两种深度暗示:

一种是图形暗示——可以在真实的绘画或者相片中再现质感;
一种是非图形暗示——不能在真实的绘画或者相片中再现质感;

绘画艺术家把他们使用的静态单眼线索(观察着和景物都是静止的)称为图形暗示(pictorial cues),通过这些暗示,可在两维的平面上产生出三维的深度效果。

图形深度暗示不会给整体设计造成突兀感,可以独立的作用于不同的设计元素,最后所有元素统一汇合成你的设计时,深度感就出来了。
每种暗示方式都有自己独一无二的特性,表达了不同的视觉信息。每种暗示方式都用自己不同的方式去传递深度感。
很多用户能够在扁平化设计中寻找到深度感,因此问题不在于是三维还是二维的设计,问题在于你怎样选择深度暗示的方式。

下面我将介绍一些图形深度暗示的方法

图形深度暗示

1、重叠

这是深度暗示中很强烈的暗示方法,它比其他方式都要好用,而且提供了一种物体间冲突的感觉。
当一个物体被另一个物体所掩盖的时候,那肯定在他们之间有纵深的空间。
被掩盖的物体一定要设计的清楚,以便能够识别他们的形状。否则整体作品的感觉僵尸两个形状二维上紧紧贴在一切,而不是纵深关系。

透明度是重叠的方法之一,能够让我们清楚的了解到被掩盖物体的情况。视差是另外的一种展现被掩盖物体的方法。

从上面我们可以了解到,我们可以通过重叠的方法,把主要信息放在最上面,次要信息放在下面,让主要信息掩盖次要信息,同时营造了一种纵深感。

2、尺寸和比例

大的物体看起来近一些,而小的物体看起来远一些,通过摆放不同尺寸的并且紧挨着的物体,能够带来一种感觉就是:并不是他们的实际尺寸不同,而是因为远近纵深的原因。

如果我们把物体复制并延伸,创造了一系列形状相似的物体,仅仅比例相同,那么纵深感就出来了。
信息组织上,重要信息放在近处,醒目点,不重要的信息放远一点。

3、材质

材质的运用会给人一种暗示,就是这有点像现实生活中视觉元素的表面。
材质一般精细紧密,精密的材质也能让人联想到现实生活中三维的物体。

4、直线透视法

通过组织,将图形中位置紧挨的平行线汇聚到一点或一处,能够营造一种三维视感。
单独的线不能构造三维视感,但是大量的线能。同时也可以暗示物体之间位置的关系。

透视法是在二维平面上构建三维物体纵深感的技法典范。

5、阴影

从一个物体投射到另外一个物体上的阴影可以暗示他们之间的距离观影。投影可能是我们用来增加纵深感最常用的方法。
当阴影变得更小,更黑,形状更锐,这就说明离被投影物体更近了。如果颜色更浅,阴影更大,阴影越模糊,说明与被投影物体更远了。

6、图像面上的位置关系

物体越高,通常都表示离我们越远。
我们可以用现实生活中的例子表示。
我们在下方看到的东西比如(土壤、草地)这些东西我们身体都能所接触到的,因此离我们很近
我们看到的云和天,我们无法触及,在上方,因此离我们很远。

7、光影和明暗

正如投影那种方法一样。光在物体的表面上产生的不同效果暗示出物体是三维的。
渐变、斜面、凹凸,都能展示出光影效果,从而展示纵深感。
而且可以通过光的明暗度来展示与光源的三维位置关系,如果亮一点,说明近,如果暗一点,说明远。

8、聚焦

眼睛所聚焦之处会清晰,其他的放会变得模糊。
越清晰的地方说明离焦点越近,越模糊的地方说明离焦点越远;根据这种暗示,空间上的关系便建立了。

9、参照物

任何已知大小的物体都能给我们作为一种比较另外一种物体的参照物。根据两种熟悉物体的大小比例的关系,我们隐约的可以感觉到他们的纵深关系或位置关系。

10、颜色对照

距离越远,那么物体和背景之间的对照就小。因此更黑的投影看起来近。原因在于更具有对比性。再想下聚焦,越远的物体,越模糊,对比因此比较小。

11、颜色

黑色似乎远一点,温暖明亮的颜色似乎要靠近一点。

总结

更多的纵深度暗示方法能够让你更好的驾驭设计,不同的深度暗示方法提供不同的深度质感。
纵深感做的越好,那么前景和背景的差异越大,前景元素就能得以更好的图形展示。
上面这些方法你用过几种?我自己用过了集中,或许,一个更巧妙的问题是”上面这些方法哪种你没用过?”

可以尝试一下没用过的方法,探索,或许你会收获意想不到的结果。

时间: 2025-01-30 08:36:36

设计技巧分享:11个图形深度暗示的方法的相关文章

WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心

原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心     流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更强的编程支持及对WPF其他元素的兼容.   直接来看代码吧,需要讲解的地方比较多,我就直接注释在代码里了,看起来更方便些:     Code<Window x:Class="流文档.Window1"     xmlns="http://schemas.microso

搜索框设计技巧分享 帮助优化网站性能

在浏览整个网站中,搜索框通常是通向用户使用的最后一道关卡.如果你的网站内容很多,包含了详尽的特色,功能,设计元素,产品和服务等等,那么搜索框就成为了网站不可或缺的一部分.网站的成长往往需要时间.当然,从整个网站设计和开发过程来看,设计肯定要简洁,有文章和评论,以及非正式的网站通知,特色内容和服务等等.不过,随着网站层次不断提升和更新,与网站相关的内容的只是起到了装饰作用.因此,搜索框对网站的性能优化起到了至关重要的作用.   优质的职能和运作对网站开发确实很重要,但与此同时,我们也不可忽视网站的

WEB视觉设计:折叠的图形文字设计技巧分享

文章描述:字体图形化设计小谈 . 当你在做设计的时候碰到一个标题, 你会怎么做? 翻字库?一遍一遍试各种字体? 来看看大湿都是怎么做的吧. 图形化视频 文字是一种记录与传达语言的符号,它的产生是人类文明进步的一种重要标志.随着图形化时代的来临,文字与图形的关系在设计领域尤其是平面设计当中,起着举足轻重的作用.针对目前国际平面设计界以文字为主体元素的设计,本文以平面设计中文字的图形化表现为切入点,对文字图形化的表现形式和表现手法以及在平面设计的应用进行探讨性分析,希望挖掘出文字与图形化设计的更多表

用户界面设计经验分享:界面设计技巧分享

如此有用的文章我已记不得是什么时候发现的了,但在看完的那一刻便想将之翻译,分享给大家自己也受用. 时间过了很久,来到了2014年,终于静下心来花了大把时间连同图片一起译成了中文.像我这样业余的翻译六级分数只够及格的程序员,不敢说做到信雅达,但求意思到位. 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控.同时用户也可以一目了然内容.而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达.最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮. 2 放出礼品往往更具

网页设计技巧分享:网页页面光影特效的运用

文章描述:浅谈页面设计中光影的特效. 为了展现页面的主题或者是贴近游戏的氛围,常常会看见游戏的页面中运用了许多不同类型的光效的渲染,一个简单的元素有时候加上一点光效就可以化腐朽为神奇.那么光效究竟是如何具体地影响页面的视觉观感的呢? 1. 丰富页面的层次 当人物和背景的颜色比较接近时,为了增强人物的立体感和空间感,可以在人物上添加光效,拉开人物和背景的距离,形成视觉差异,这样需要强调的人物就瞬间凸显了出来,页面的层次也一下子体现出来了. 2. 烘托气氛 光效的颜色.形状和出现的位置会对设计表达的

Illustrator中让文字绕着图形排版技巧分享

给各位Illustrator软件的使用者们来详细的解析分享一下让文字绕着图形排版的技巧. 技巧分享:   把图形放在文字上选中图形,切记图形一定要置于顶层把文字盖住,然后打开工具栏上:对象-文字绕排-建立就可以了.文字绕排-建立下方有个选项是调节图形与文字之间的距离的. 方法: 1.AI中实现文本绕排必须是文本框内的文本才可以,也就是说,必须是用文字工具拖拽出来的文本框里输入的文字才能文本绕排 2.将文字输入或粘贴到拖拽出来的文本框中 3.置入图片,或绘制图形 4.将图片或图形置于文本框上方你想

Illustrator设计中图案的填充经验技巧分享

给各位Illustrator软件的使用者们来详细的解析分享一下设计中图案的填充的经验技巧. 教程分享:   如图在"色板库"/图案/基本图形/--中找到所需要的填充图案.填充路径. 如果库中没有也可以自制 [色板的自制方法其实也很简单只要把自己做的图案元素直接拖入"色板"面板即可] 注意: 未转曲的文字不可以做色板. 有些时候渐变也是不允许做色板的. 选择物体路径为其填充基本的图案和描边. 执行"对象>变换>--" 或者 "

网站建设网页设计小技巧分享

网站建设网页设计小技巧分享.在网站建设的过程中我们会遇到很多问题,我们也会去解决各类问题.无论是网站设计还是代码编写.今天针对网站建设过程中我们会遇到的一些小问题,并给出一些简单的解决办法. Ie6不支持Png格式下的透明.效果图如下: 应用解析:有不少人都会对LOGO进行透明处理以融入head部分的渐变背景. 解决方案:采用JS代码实现或CSS滤镜功能,当然问题也存在部分,导致图片质成像量不高. 小技巧1:将透明的LOGO用高于IE6的浏览器打开网页,然后采用FF的PearlCrescentP

Illustrator实用性很强常用设计小技巧分享

给各位Illustrator软件的使用者们来详细的解析分享一下实用性很强常用设计小技巧. 技巧分享:                   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的实用性很强常用设计小技巧解析分享的全部内容了,各位看到这里的使用者们,小编相信你们喜爱你在是非常的清楚了吧,希望小编上面的教程能给大家带去有用的帮助.