网页设计中如何运用方框/方形元素?(4)

UI / UI设计 / 网页设计 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词
01:网页板块

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

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

网页设计中如何运用方框/方形元素?

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

网页设计中如何运用方框/方形元素?

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

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

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

网页设计中如何运用方框/方形元素?

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

网页设计中如何运用方框/方形元素?

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

网页设计中如何运用方框/方形元素?

下面网站是利用了方型/方框的元素,来设计了 表单和搜索框部分,表单部分让原本复杂相互干扰的文案信息变得调理清晰,画面简洁。搜索框部分视觉强化,引导用户进行网站搜索获取内容。

网页设计中如何运用方框/方形元素?

 收藏