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

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

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

【 tulaoshi.com - 网页设计 】

网页板块

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

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

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

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

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

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

常见按钮

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

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

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

图片

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

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

文字

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

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

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

搭配

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

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

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

VI logo

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

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

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

残缺的方框/方形

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

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

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

延伸阅读
基本的页面设计元素布局比例,给大家做个参考 标志图案 : 位置 统计结果 左上角 84% 右上角 6% 上方居中 6% 其他位置 4%   搜索功能 : 位置 统计结果 右上角 35% 左上角 ...
标签: Web开发
网页制作Webjx文章简介:笼统来说,“标准网页”的文件组织就是XHTML+CSS。其中XHTML主要用来表示网页结构和显示内容,而CSS则是定义结构布局和修饰内容样式。 笼统来说,“标准网页”的文件组织就是XHTML+CSS。其中XHTML主要用来表示网页结构和显示内容,而CSS则是定义结构布局和修饰内容样式。 常用于布局的XHTML一般有: ...
涂鸦是上课的时候给历史书的古人加两撇胡子;涂鸦是在一面空白的墙上刷出斑斓的花纹;涂鸦是将线稿扫描进电脑然后用手绘板在PS里润色涂鸦早已走进我们每个人的生活,从服装到装潢到海报广告,到处都有那些温暖可爱的线条。 手绘是应用于各个行业手工绘制图案的技术手法,设计类手绘,主要是前期构思设计方案的研究型手绘和设计成果部分...
标签: Web开发
笼统来说,标准网页的文件组织就是XHTML CSS。其中XHTML主要用来表示网页结构和显示内容,而CSS则是定义结构布局和修饰内容样式。 常用于布局的XHTML一般有: DIV:主要用于页面内容逻辑上的分块,比如一张网页一般包括头部、导航、侧栏、内容和版权等责任分区。此时即可使用DIV标签分割。 同时对各区块建议这样的命名:  以下为引用的...

经验教程

245

收藏

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