网页设计中方框元素的应用 摆脱呆板方形也能美

2017-02-23 10:53 33 1 收藏

方框方形元素,经常运用于网页中的各大板块,它们能够有效的将网页中的元素变得条理清晰等,那么我们来看看下面一些案例是如何巧妙的运用方框。学会了怎么灵活运用方框,也可以体现不一样的美。

【 tulaoshi.com - 网页设计 】

网页板块

  方框方形元素,经常运用于网页中的各大板块,它们能够有效的将网页中的元素变得条理清晰等,那么我们来看看下面一些案例是如何巧妙的运用方框。

  下面一个旅行网页。整个网站用了大面积的方形元素,利用这些方形的大小和改变长宽比例来错列排版,使得整个网页信息分类明确,节奏感十足。

网页设计中方框元素的应用 摆脱呆板方形也能美

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

网页设计中方框元素的应用 摆脱呆板方形也能美

常见按钮

  网页中常见的按钮,其实近几年开始流行的幽灵按钮(透明按钮)就是大量借鉴了方框元素,当然实心按钮也采用了方形元素。下面我们来看下运用了这些元素的案列。

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

网页设计中方框元素的应用 摆脱呆板方形也能美

图片

  现在越来越多的方框/方形元素出现在网站图片中,下面案例是一个标准的图文结合的设计案例,设计师为了让图片和文案左右两边的视觉平衡,于是加入了方框/方形的元素与图片进行结合。瞬间整个画面变的富有设计感起来了。

网页设计中方框元素的应用 摆脱呆板方形也能美

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/wysj/)

文字

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/wysj/)

网页设计中方框元素的应用 摆脱呆板方形也能美

搭配

  下面案例中,banner中的文案只有一句话,搭配其他产品。设计师利用方框元素,将分散的文字变成了整体,所以使瓶子靠在文字上,给人更安全稳定的感觉。

网页设计中方框元素的应用 摆脱呆板方形也能美

VI logo

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

  以下是1+手机的Logo ,通过结合了方框的一部分,两边的线条将用户的视觉引导至+的图形上去,即使在不了解这个品牌的用户 也能够快速的阅读了解这是1+(个人见解)。搭配整个画面,大量的留白,左上-右下的视觉定律,让画面变得简约而不简单。

网页设计中方框元素的应用 摆脱呆板方形也能美

残缺的方框/方形

  这类元素往往结合文案一起展示,主要通过方框的线条将用户的视觉中心指引到作者想要表达的内容。更多网页设计信息请看:网页设计方形元素有什么作用?色彩对比有血有肉

网页设计中方框元素的应用 摆脱呆板方形也能美

来源:https://www.tulaoshi.com/n/20170223/2614338.html

延伸阅读
标签: Web开发
网页制作Webjx文章简介:笼统来说,“标准网页”的文件组织就是XHTML+CSS。其中XHTML主要用来表示网页结构和显示内容,而CSS则是定义结构布局和修饰内容样式。 笼统来说,“标准网页”的文件组织就是XHTML+CSS。其中XHTML主要用来表示网页结构和显示内容,而CSS则是定义结构布局和修饰内容样式。 常用于布局的XHTML一般有: ...
标签: Web开发
笼统来说,标准网页的文件组织就是XHTML CSS。其中XHTML主要用来表示网页结构和显示内容,而CSS则是定义结构布局和修饰内容样式。 常用于布局的XHTML一般有: DIV:主要用于页面内容逻辑上的分块,比如一张网页一般包括头部、导航、侧栏、内容和版权等责任分区。此时即可使用DIV标签分割。 同时对各区块建议这样的命名:  以下为引用的...
基本的页面设计元素布局比例,给大家做个参考 标志图案 : 位置 统计结果 左上角 84% 右上角 6% 上方居中 6% 其他位置 4%   搜索功能 : 位置 统计结果 右上角 35% 左上角 ...
标签: 化妆 美瞳 彩妆
化妆也能化出“美瞳”感 自从学生时代带上美瞳以来,若再不带美瞳便不敢出门的“美瞳中毒者”不在少数,他们化着与昔日相同的妆容,再看着裸眼的自己,总是感觉怪怪的:“好不对劲儿啊”。化妆妙招整理如下,让我们一起来看一下吧! 1、美瞳妆与裸眼妆的最大区别 “带惯了美瞳的人摘...

经验教程

780

收藏

16
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部