基于栅格的网站设计

news/2024/5/21 15:49:59/文章来源:https://blog.csdn.net/weixin_30608503/article/details/98155806

如今,Grid-based(基于栅格的)网页设计已相当普遍,这意味着网页布局混乱的日子就要终结。尽管还无法用肉眼分辨,但我们的确是步入了有 序和结构化的时代。栅格布局整体趋于匀称,通常会使网页更加整洁美观。同时,栅格框架已经成为现代所有网站功能实现的基础,这都要归功于它为终端用户提供 了完美不失真的设计体验。

 

一般来说,栅格仅仅是水平线和垂直线隔出来的特定空间,它似乎很难承载任何设计元素,所以大部分设计师会根据路径描绘出几何特性。我们已然看惯画 廊、博客、以及新闻相关网站中那些干净利落的栅格,但其实只需要巧妙地处理下这些框框条条,就能将用户的目光吸引到内容本身,增加访客粘性。是滴,这不是 天方夜谭!也不足为奇,因为栅格具有以下特性:

 

  1. 创造可以引导人们视觉的路径;
  2. 展示有序的信息内容;
  3. 在将各种元素组合的同时,使它们显得自由独立,模块间可呼吸

 

接下来,您将在我们的展示中亲眼目睹如何巧妙利用栅格来做出富有魅力的网页设计。

 

Grid-based网站设计实例

 

Spazio Dipaolo

主页被分割成了相等的、正方的、和带有渐暗效果的单元格,呈现了多种组合的图像艺术。

Bernd Kammerer

主页被分割成三列,每一列都用图片瀑布设计漂亮地展示了形形色色的摄影作品。此外有意思的是,在您滚动页面的同时,会交替出现(滚动视差)一些带有链接的红色圆圈,而每个链接都指向一个摄影系列集。

 

强化阅读: 无线滚动加载适用于你的作品么?

Adam Hayes

 

将色彩及图片有规律地布满整个网页,从而创造出了一个炫耀华丽的艺术作品。(伏地呜咽)

 

Necto

运用大小不同但匀称的栅格突出前面的作品,并控制单元格的尺寸来说明内容的重要性。越大尺寸,越重要复杂。

 

Salon

另一个巧妙运用大小不同的栅格的范例,在这个设计中,行的位置取决于列。

Christmas Gifs

充分利用了大小相等匀称的栅格来装载各种圣诞节主题的gif。

Activation Group

很好地运用了暗沉色调,给每个单元块都抹上了一块阴影。这种既自由又束缚的色彩运用,给整个主页略微增添了是棋盘的错觉。(译者注:此网站为国人出品。)

Portal Portinari

一个充满生气的网站, 它通过整页整页的Grid-based画廊般的方式展示各个时期画家的杰出作品,并用时间轴来分类归档。

Candy Buffet

采用现代干净清晰的平面风格,并用鲜艳的色彩为简洁的几何图形增添了几分趣味。

Betel Bar and Kitchen

恰当地处理了图片和文字块的组合,以整齐有序的页面再现了强烈的视觉感受。

RVLT

将导航链接块与商品图片放于矩形栅格之中,由此呈现了它的主页。

 

Stefan Froescher

一个传统的左侧菜单栏网站,它以一个普通摄影画廊网站的形象来迎接用户的光临。

 

Jean-Georges

通过栅格,实现了令人振奋的大幅照片导航效果。

 

SilkTricky

将每个单元格对半分隔,分别用主题相同的图片和文字填充。除此之外,设计师还大胆增加了一些较大的方形滑块,使整个栅格带了点混乱感。

Bastian Preussger

看起来相当神秘和奇特,这都归功于它全黑的背景;以及它用来放作品缩略图的栅格,摆放略微混乱。

Daniel Vane

为了使网站看起来整洁干脆,突出了黑白色调和栅格。

Rosas and Co Films AG

运用了一个很常见的方式来排列并过滤视频缩略图,再以栅格系统展示出来。

Far From the Tree

将整个主页布满缩略图,从而形成了一个精美细致的栅格页面,尽管这使它看起来很繁琐和凌乱。

Boomerang 2013

创造了一个真正的爆炸氛围。整个设计注重于用户体验,通过栅格使用户参与到其独一无二和无比精彩的动画中。

Bobby Digital Studios

将所有的画廊元素运用得淋漓尽致,它能快速地让用户熟悉网站作品是如何有序无误地摆放的。当然,这也是通过栅格实现的。

Hommard

拥有一个很现代的精致外表。该网站主要是基于栅格和一大堆高清照片。

National Traveller

一个拥有大量矩形功能块的传统的,结构完善的博客。

My Poor Brain

漂亮地运用了窄列栅格来传递尽可能多的信息。

Nowy Teatr

利用不同尺寸的行列间隔,为页面增加了些许混乱感。

Woodwork Amsterdam

在竖列中放置可视化内容,并恰如其分地移去线条,从而更好地展示了大幅照片。

Karl Anders

通过大量留白创造出了一个清新的氛围。设计师恰当地将页面分割成四列,分别将大字标题或照片穿插其中。

 

反思
栅格是一种不可或缺的设计工具,因为它简化了混乱到有序的过程,而在网站设计中这样的能力是相当重 要的。大多数普通用户都希望以一种方便快捷的方式获取信息,为满足这个需求就有必要将信息有序化,结构化。当然,这并不代表网站的外观就应该变得朴素和平 淡。就算是再简单的几何形状也能被色彩,图像和图形消去本来的模样,这样的喧宾夺主却使它变得更具魅力。另外,无论是在线杂志,还是创意作品集,对于任何 类型的网站,显性Grid-based设计都能完美地融入其中 。

 

那么,对于Grid-based网站设计您有何见解?这种很明显带有故意成分的分割设计会很有吸引力吗?这是否算是一个得体的创意?又或者,这类设计会更适合博客,在线杂志,和新闻主题的网站?

转载于:https://www.cnblogs.com/webqiand/p/4610032.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_787254.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html怎么做购物车页面,网站购物车界面(div+css实现)

叮咚网购物车.main{width:100%;height:590px;border:1px solid #000;text-decoration: none;}.top{width:100%;height:52px;border:1px solid #000;}.downMenu{width:100%;height:30px;font:normal normal 20px "宋体";color:#fff;background-color: #000000;}#searc…

iis发布网站问题-由于权限不足而无法读取配置文件,无法访问请求的页面

错误一: HTTP Error 500.19 - Internal Server Error 配置错误: 不能在此路径中使用此配置节。如果在父级别上锁定了该节,便会出现这种情况。锁定是默认设置的 (overrideModeDefault"Deny"),或者是通过包含 overrideMode"Deny…

python爬虫-爬取网站图片。

突然在网上看见自己喜欢的图片,想下载,只能一张图片一张图片的点击,想一想,你要下载的图片有10000张,那会是一个怎么样的画面,答案很简单,你会哭的,假如一张图片从搜索出来&#xff…

教你如何快速将网站开发为桌面应用

“ 教你如何快速开发桌面应用” 首先,我们来想像一下喜欢某个网站,或者我们自己有一个网站,在某个时间我们不知道怎么的突然想把某个网站做成我们自己桌面应用(不要问为什么,之前没有,现在得有)…

live2d 看板娘 简单添加看版娘到自己的网站

简单添加看版娘到自己的网站 关注公众号后台回复 “看板娘” 获取全部文件(接口,源代码)。 我们先来看一下我们的网站会变成什么样吧! http://www.djyqxbc.vip (官网)注意左下角。 简单制作一个简单的看板娘 点击左下角的4个方块(开始…

使用fiddler抓包工具替换网站文件

使用fiddler抓包工具替换网站文件 注:要知道如何替换,首先要学会fiddler的基础用法。1、抓包,2,抓图片的包。 要抓图片的包,如图,抓图片的包,前面的勾需要去除掉。 第一步:找到我们…

浏览器插件,轻松-快速获取网站源代码

浏览器插件,轻松-快速获取网站源代码 我们在学习和研究的时候,需要网站的源代码进行借鉴,但每次需要下载网站源代码,我们都需要找到一个,下载一个,每次只能下载一个文件,非常缓慢,而…

【python爬虫 2】BeautifulSoup快速抓取网站图片

前言 学习,最重要的是要了解它,并且使用它,正所谓,学以致用、本文,我们将来介绍,BeautifulSoup模块的使用方法,以及注意点,帮助大家快速了解和学习BeautifulSoup模块。有兴趣了解爬…

服务器上搭建wordpress动态网站

首先我们要有自己的服务器和租一个域名,这个可以根据自己情况自己去找,国内阿里,腾讯.国外也有很多.域名可以在万网或者腾讯上都可以买,之后要把域名指向自己服务器的ip地址(其实没有域名也可以打开网页,不…

egg解析html怎么指定数据,egg学习笔记第十六天:eggjs爬取数据并监控网站是否被篡改...

一、爬取百度新闻数据。①首先看下我们要爬取的网站数据:news.baidu.com②首先在service>spider.js下写入如下方法,写一个requestUrl方法 传入url并获取数据。"use strict";const Controller require("egg").Controller;class S…

Apache服务:使用 Apache 服务部署静态网站

1.安装Apache服务 第一步:安装Apache服务程序 yum install httpd 具体流程参考https://www.cnblogs.com/python-wen/p/10168452.html 第二步:启动 httpd 服务程序并将其加入到开机启动项中,使其能够跟随系统开机而运行,从而持续…

mpls 保留标签值_壹起航:如何设置标签使标签更有利于网站优化?

当许多网站优化人员刚进入SEO(yiqihang.cn)行业时,他们并不了解什么是标签标签。所有产品内容都使用分类列表进行区分。由于使用的是cms程序,框架的设计存在问题,导致分类过多。,网站加载异常。标签的作用是将相同类型的内容汇总在…

nodejs php集成,VUEJS+PHP(YII2)+NODEJS 实战视频类电商网站 :(四)结合nodes+web pack+vue开启时尚学习套路...

前言学习了如何简单的使用yii框架,如何去查看手册和折腾。今天开始正式学习制作视频类电商网站。一、开发前的准备当前vue已经发布了2.0版本,从学习的角度我们自然选择2.0。简单的说明一下vue。vue是核心部分,它缺乏ui,因此我们需…

python建站与java建站有何不同_【云速建站】小白的云“速”建站The road

首先,小白小白小白真的小白,不会程序,不会开发,不知Java,不知H5,也不了解python。完全空白~~~就这,网站建成了!!!!!!&…

面向java+的区块链,区块链技术基于java+jsp+servlet+mysql的小说网站

第4664篇区块链技术文章区块链技术基于javajspservletmysql的小说网站需求基于javajspservletmysql技术实现一个小说阅读网站, 其中后台能够对小说 读者 分类进行管理, 前台能够按照分类阅读小说本站提供其他类型的 在线小说阅读网站源代码 点击查看运行环境java, jdk1.8,tomca…

Jenkins部署.NET网站项目

Jenkins Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能。 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 持续的软件版本发布/测试项目。 监控外…

英特尔nuc做网站服务器,难以想象 英特尔把至强处理器塞进了NUC

一提起NUC,大家就会想到小巧到只有巴掌大的电脑主机,虽然机身小巧,但在硬件方面依旧有不错表现。此前英特尔推出了性能非常不错的冥王峡谷,虽然性能强大,但散热压力不小。如今英特尔又将至强处理器塞进了NUC中。NUC工作…

通过servlet实现几个网站常用的功能

帮朋友写的小程序,由于功能比较简单所以就偷懒只使用了Servlet 一、JSP页面部分(这个部分的设置比较粗糙,主要是为了查看功能能否实现,如果需要向用户展示还得修饰一下) 1)功能页(所有需要后台实…

无法访问此网站localhost 拒绝了我们的连接请求_网站为什么会抓取异常?

什么是抓取异常?有时,在SEO工作中会出现搜索引擎蜘蛛无法正常抓取页面的情况。这种情况我们称之为“网站抓取异常”。图片源自网络网站抓取异常的原因:1、服务器异常服务器连接异常的最大可能是网站服务器太大、过载,建议检查一下…

2013.12.21网站更新记录

2019独角兽企业重金招聘Python工程师标准>>> 更换网站logo更改了主页的关键词,描述词语增加了导航栏,随页面滚动到一定位置,然后停止在固定位置转载于:https://my.oschina.net/songjianguo/blog/729037