方框/方形元素在设计中的运用(2)

来源:网络   作者:热心网友   发布时间:2016-12-20    浏览次数:672


应用

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

01:网页板块


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

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


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

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


c5155807a33fa84a0d304fdd9be9.jpg


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


f9ad5807a57aa84a0d304f5c26a6.jpg


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


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

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


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


ea6a5808ddd3a84a0e282b830ac3.jpg


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


c76c5808ddfba84a0e282ba8df94.jpg


下面是网站中一段引导语,采用浅灰色的背景加上文字在一起,加上一定的留白,整个画面显得洁净而优雅。设计师在这里采用方形元素来设计了实心按钮,使用户对新页面起到了引导作用。


a59d5808df25a84a0d304f15eabb.jpg


下面网站是利用了方型/方框的元素,来设计了 表单和搜索框部分,表单部分让原本复杂相互干扰的文案信息

变得调理清晰,画面简洁。搜索框部分视觉强化,引导用户进行网站搜索获取内容。


c6ba5808dfbda84a0d304fe08adc.jpg


04:图片


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

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


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

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


da515808e3a2a84a0e282b266d27.jpg

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

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


dd5b5808e49aa84a0e282b589dae.jpg


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

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



fb7c5808e5a4a84a0e282b86bef2.jpg


05: 文字


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

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


113a58097b19a84a0e282b26cb22.jpg



下面案例中,设计师如何巧妙的利用方形元素,将banner 和内容两块链接,原本应该放置在banner 上的文字,也被放在了方形色块上,不但在传统的版式架构上得以突破,而且引导了用户从上而下的阅读信息。


333f58097b36a84a0d304fb0cc4c.jpg



下面案例中,banner中的文案只有一句话,搭配其他产品。设计师利用方框元素,将分散的文字

变成了整体,所以使得瓶子靠在文字上,更实,更安全,稳定。使得文案 产品两者完美结合。


bad458097df6a84a0e282bc8eb17.jpg


下面案例中,设计师利用方框元素,设计成一个图形与文字进行结合起来。让整个文字的疏密对比性加强

即使没有图片也能 瞬间提升整个画面的创意。


eb7158098221a84a0d304f778f0c.jpg

文字这一块就不多讲啦,还有很多的运用,等待你们去发现。



04:Vi logo

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

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


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


0916580982dea84a0e282b8f8158.jpg


41b3580982f9a84a0e282ba09fb9.jpg


123共3页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:版式构图

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/5459.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通