济南UI培训
达内济南趵突泉中心

17156168575

热门课程

方形设计元素在设计当中的妙用

  • 时间:2016-10-29
  • 发布:济南达内
  • 来源:互联网

随着现在技术越来发达,设计师也会将杂志中的一些元素,融入到网页设计中去。让网页设计更加有新意。

下面我们就来说下方形方框在网页之中的运用。

作用

01:分割

我们已知的分割的元素,主要是线 和 面 ,其实方形/方框也是具有分割的作用。在设计中运用的话会让你的作品别具一格。

下面设计作品 画面中出现了多个文案信息,这么多的信息集中在一个画面中,如何让它们

变得有主有次呢,为了让用户清晰的阅读到每一个单独的文案信息,所有设计师加入方框的

元素,利用大小对比的关系,有效的避免了内容的冲突和杂乱 。这里的设计通过加方框的元素,使画面中的文字也具有一定的强调作用。

02:强调

如何让文字内容在众多元素里面突出。 要么弱化其他,要么强化自己,显然下面设计中为

了让用户第一视觉就能看到表达的文字信息,所有设计师利用了方框的元素进行了强突出。

03:修饰

当我们的在设计一个海报,或者网站页面中的一段文字的时候,有时候画面太单薄,一些设计师会用其他的方式进行修饰,但是也有设计师利用方框,或许并不一定是完成的方框,有残缺的 有截取了方框中的部分元素去作为一种修饰。这样整个画面一定会别具一格。下面来看设计案例吧。

04 :色块对比让版面变得有血有肉

这里使用色块形式,主要出现的在网站布局方面,设计师利用方形的色块让网站变得生动创新,使网站在布局上面变得有节奏,有主次,逻辑清晰。下面我们来看看这些设计案例。

05:信息引导的作用

在复杂而多的海报或者网站架构中,利用方框进行信息引导是非常有效而且新颖的表现方式

06:让文字之间相关联

海报设计,如果按照正常设计师的话,对于文案的处理方式,肯定会根据文案信息以及海报架构 进行分散拍版设计。这样的处理方式,对海报的画面要求会比较高,如果海报比较乱的话,哪么文案的识别性就会降低,哪么为了解决这些问题,设计师选择了方框的元素,利用方框讲文案信息关联再一起。然后再利用方框的大小,根据文案内容的主次进行合理的组织分配。这样不仅让视觉上的到别具一格,而且也降低了画面上其他的元素对文案内容的干扰。让用户第一视觉了解到海报需要传达的信息。

如果我们在设计中充分利用上述几个表现方式,相信我们的设计一定会在众多中间脱颖而出。所以设计优秀的作品并不难,难的是你去发现优秀作品的规律。当然还有很多点值得我们去发现~

应用

上诉讲到了方框元素的作用,哪么我们来说说方框 方形元素经常运用在那些地方。

01:网页 板块

方框方形元素,经常运用于网页中的各大板块,它们能够有效的将网页中的元素组织的整洁,调理清晰等,

那么我门来看看下面一些案例是如何巧妙的运用方框已经方形元素

下面是一个旅行网页。整个网站用了大面积的方形元素,利用这些方形的大小和改变长宽比例来错列排版。

使得整个网页信息分类明确,节奏感十足。

一些商城网站也融入了方形的元素,有效的管理和整合了各类商品信息。同时也利于网站适配不同端口设备展示

02:btn按钮,搜索,表单 等

网页中常见的按钮,其实近几年开始流行的幽灵按钮(透明按钮)就是大量借鉴了方框元素,当然实心按钮

也采用了方形元素。下面我们来看下运用了这些元素的案列。

下面整个网页色调明亮清新,除了渐变的背景就是内容。高饱和度的蓝色背景里有点状的世界地图作为纹理点缀,使之不显得单调。大小错落的内容靠左对齐,下面设计师在按钮上利用了框型的元素设计了幽灵按钮,使得整个文字内容搭配更加通透。

这个网站使用了视频作为背景,访问者只需要通过变化的背景就可以明白组织的工作流程。通过调色之后的背景视频并不影响前景的Logo、设计师利用了框型的元素设计了幽灵按钮使得整个网站显得巧妙而优雅。

越来越多的图片,为了让他们展示的更有,告别单调。也结合了方框方形的元素。现在越来越多的方框/方形

元素出现在网站图片中啦,可以说开启啦一段新的潮流。那么我们来看看这些精彩的案例。

下面案例是一个标准的图文结合的设计案例,设计师为了让图片和文案左右两边的视觉平衡,于是加入了方框

/方形的元素与图片进行结合。瞬间整个画面变的富有设计感起来了。

下面案例图片中设计师为了让多张图片进行统一 协调起来,也加入了方框的元素。

给用户传达了三块内容的体系关系。让原本简约而优雅的画面变得多姿多彩。

一个人物如何简单的让他在平面中变得有立体感?下面案例设计师采用了框型的元素,于人物结合起来,让原本

没有空间感,头重脚轻点男士,变得稳重而富有层次,同时也抓住了用户的视觉。让原本平淡的页面变得富有创意。

05: 文字

复杂的文案排版起来单调,过于平淡,无层次感?哪么我们来看看方框/方形是如何解决这些问题的。

下面案例中,设计师在这段文案进行设计排版的时候,如果在素材有限的情况下不能放图片,如何才能让它们变得富有设计感,左右平衡呢?于是设计师再左边的文字与方框元素结合起来。轻松的解决了这个问题。

04:Vi logo

方框方形的元素如果放在vi中结合,是不是很有趣~

以下是1+手机的logo ,logo本身就是简约。通过结合了方框的一部分,通过两边的线条将用户的视觉引导至+的图形上去,即使在不了解这个品牌的用户 也能够快速的阅读了解这是1+(这是我个人的见解。)

搭配整个画面,大量的留白,左上-右下的视觉定律,让画面变得简约而不简单。

类别

这里我就不做细的分析啦~主要在于大家的灵活运用

01:方框之间的结合

方框/方框之间的结合,一般主要是用于在复杂而多的文案内容中间起到相互关联的作用。让彼此更加的紧密

03:方形与方框之间的结合

就目前流行的设计趋势,这样的方式以及慢慢开始常见啦。主要的作用是用来修饰过于单调的物体,丰富画面的美感,以及左右平衡关系往往方框和方形之间会伴随着图片或文字一起出现。

03:用于标签部分

表单按钮之类的就不做举例子啦,大家都知道~

04:大的方框/方形

大的方框/方形主要运用于海报之中,或者网页的架构上。等较多的信息内容中。

主要作用在 起到画面协调,强调 ,区分等等用途。

05:残缺的方框/方形

这类元素往往结合文案一起展示,主要作用通过方框的线条将用户的视觉中心指引到作者想要表达的内容,往往也会起到或者文案修复的作用。

上一篇:设计师的10个小技巧
下一篇:双11最受欢迎的电商设计语言

网页渐变色重新归来

选择城市和中心
贵州省

广西省

海南省