网站设计案例(网站设计案例哪家强)

前沿拓展:

网站设计案例

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

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

  创造可以引导人们视觉的路径;

  展示有序的信息内容;

  在将各种元素组合的同时,使它们显得自由独立,模块间可呼吸

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

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


网站发展这么多年了,企业在做网站前都需要考虑定位和方向。每个企业的产品,风格等都不一样,有些企业要求要大气,简约,有的企业要求要做长条,大量的文字内容,有的企业做成平台的,层级内容特别多,有的是功能需求型,侧重在于路径和交互……

我们在服务市场和客户中,也看到有些企业有比较个性的网站定位,直接把网站的首页做成一屏式,不需要跨屏或做成长条型的页面风格,直接在首页第一屏来进行布局,总结起来做这样的页面有2个相同点:一是资料少,没有那么多素材在首页进行长条式布局的表达,二是定位简约,通过首页一屏式来引导客户进入内页的点击,注重点在于让访客快速扫描,通过鼠标点击后对号入座,满足访客希望快速找到的资料或信息页面。

仪器仪表行业 一屏式网站案例

一屏式网站设计考虑的要点

1、页面要有冲击力

用户的第一印象从打开网站的首页开始,网站首页把握冲击力这个点非常重要,借助视觉效果照片、视频或多张插图来立即吸引访客,页面的文字写法对吸引也是显得非常重要的。

2、导航一定要直观

导航必须在侧边栏或整个屏幕顶部明显显示,隐藏和弹出导航样式已变得非常流行(部分归功于移动设备),但不要隐藏导航栏或使其难以找到入口的做法。

3、F形状网页布局考虑

人们大多不由自主地以“F”字母形状的模式来阅读网页,一屏式网站设计要点更需要考虑到该点,遵循眼睛轨迹的研究报告,才能策划设计出一个留住访客的页面。

4、号召访客做一些事情

一屏式网站毕竟篇幅不大,首屏网站除了提供独特的视觉体验时,还需要考虑加大让访客行动,马上做一些事情的指引。这些动作可以包括:明显的栏目指引,让用户去点击进入下一层。有颜色区别的箭头滑动,让用户清楚去切换图片或点击进入,折叠的菜单图标设计让客户去打开展开等等……

房地产行业 一屏式网站设计案例

网页第一个屏幕是重要的,如何定位策划也是网站设计的关键核心点!如果您有更好的想法或不同的观点,欢迎在评论区留言!

天极科技[Since 2006] 专注网站建设、小程序定制开发、营销推广等企业服务!欢迎私信交流、学习、合作!

蓝色色系网站设计:信息科技类产品(蓝色色系)响应式官网 好网站是策划设计出来的

首页访问

拓展知识:

网站设计案例

你可以上花瓣网 站酷网看看 找点灵感