header_v0.7.31

用好对话框,设计很简单

272天前发布

原创文章 / 多领域 / 观点
葱爷 原创,如需商业用途或转载请与葱爷联系,谢谢配合。

如何利用一个简单的对话框,做出好看的设计?


用好对话框,设计很简单


话框是在设计中被运用得非常广泛的一个元素,我们在各个设计领域都可以看到它的身影,而且还往往起着关键性作用,很多普通的设计作品因为合理地使用对话框,都会变得更加出彩,它是名副其实的设计界万精油。那么,你想掌握对话框的使用技巧吗?

不过,在这之前,我们先来看看这些琳琅满目的对话框。


021d585925d6a801219c77276d00.jpg


方的、圆的、规则的、不规则的、线的、面的、扁平、立体的,各式各样,当然,这些还只是冰山一角,几乎在任何物体下面加一个凸出来的角就可以形成一个对话框。下面我们再来看看对话框具有什么寓意、特点和作用?

寓意:说、交流、语言、解释、说明、分享等。
特点:多变化性(可延展性)。
作用:区隔、装饰、说明、划分区域、限制等。


正是因为对话框比较大众的寓意、丰富的作用、易于延展的特点,才使得它在设计领域里遍地开花。接下来,我将详细给大家解读:如何通过用好对话框,做出优秀的标志设计、画册设计、广告设计以及网页设计?

一、标志设计


标志设计中使用对话框一般是想引用其交流、分享的寓意,所以一些社交平台、论坛、语言类产品或服务很喜欢使用对话框作为标志设计的主要元素。具体用法一般有这几种:


1.把能体现某品牌行业属性的某个元素变形为对话框,例如橙语的标志,我们可以把橙子设计成一个对话框,开讲啦的标志就是一个黑板做成对话框。

2.把文字置于对话框内,当然,要想标志出彩,对话框可以设计成比较独特的形状,置于对话框内的文字也要有设计感。
3.用对话框与其他元素组合成一个新的图形,可以把对话框置某元素内,也可以把某个元素放进对话框里,或者交叉处理也行。



41c35859262fa8012060c8f160be.jpg


二、画册设计


册排版中使用对话框,是因为其具有很好的版面分割、可容性、引导说明的效果,一般用它来充当色块的角色,但是对话框又比色块多一层针对性说明的意思,当某一段文字是针对某个标题或某张图片进行说明时,就可以把文字用对话框框起来处理,反过来也行得通。给这些对话框填充一个颜色,再根据底色来使用黑色或白色字体,这样的画册设计会显得很时尚、内容呈现也会显得很简单整洁。(注意:让对话框以比较大的块面出现时,效果会比较好)。


fa695859267ba801219c770645a7.jpg


三、广告设计


对话框在广告设计中的应用主要体现在两个方面:

1.画面设计


500a585926b8a8012060c87e5590.jpg


很多经典的创意广告都是从对话框身上找到的灵感,上面这组广告就是用对话框来表现语言:您的言语代表中国的形象、您的言语将决定您的形象。

4e615859271aa801219c77a8b6a7.jpg


而在以上这组商业广告中,体现的是对话框的装饰性和可容性,放大对话框的框框区域,用来承载一些简单而重要的信息,再加上一些质感的处理、鲜艳的配色,对话框可以让广告画面看起来很漂亮。(注意:让对话框与画面的其他元素产生互动,效果会更好)

2.标题设计


题在广告中的意义其实可以看成是对画面的解读,所以在标题设计中使用对话框就变得理所当然了。除此之外它还有三个意义:

a.当标题文字比较多时,使用对话框把文字整合起来,可以让标题看起来更整体;

b.当画面的背景不利于标题的突出时,可以利用对话框将背景和标题文区别开来;

c.通过把对话框立体化,或者根据文字轮廓做出比较有视觉冲击力的形状,可以让整个标题更加突出、醒目。

89c35859274ca801219c77ddc24a.jpg


四、网页设计


网页设计中,对话框也是备受亲睐的设计元素,由于对话框的多变性,使其能够很好的与色块结合,这些方方正正的平面对话框,既时尚又便于创建模板,既可以容纳文字与图片又具有说明与从属功能(例如某一堆文字属于某张图片)。除此之外,对话框总会有一个角是凸出来的,所以比普通的色块看起来更特别。(注意:对话框在网页设计中使用时,颜色的搭配是关键,形状越简洁、对话框的内的文字越少越好。)


c15e585927b9a801219c777dce60.jpg


其实对话框在设计中的运用远远不止以上四种,但由于篇幅的关系我就不一一列举了,设计都是相通的,关键是要能够灵活运用好对话框的意义、作用以及特点。


最后,恭喜你,又get到了一个设计新技能!


41
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功