在网页设计中怎样使用方块元素

   使用方块布局的目的是什么?

  或许这对你而言有点哲学和理论化,我们来看看别人选择方块布局的原因。(顺便提一句,我所指的方块也包括矩形,有些案例也使用矩形。)使用这种元素有两大原因。首先也是最重要的,它有助于组织内容。其次,它也能打造特殊的样式。它们是展现内心渴望和需求的完美元素。

  看看Dennis Adelmann的作品集,显而易见,方块元素被用来组织排列他的作品。这是组织排列任意数量内容的简单途径,让事物保持简洁。


  不过再看看We Love Noise这个网站,它就完全不同!是的,到处都是方块,移动鼠标时还有个有趣的动画效果。不过除了组织内容之外,你会发现方块元素也成为了设计风格的一部分。它是这种风格关键的决定性元素。


  怎样用好它们?

  我不觉得使用方块元素是什么难事。尤其是网页,自从诞生之初就开始使用方块形状来设计界面。但是你若想更有效地使用它,请遵循以下几个步骤。

  制定希望达成的目标

  根据你所要达成的目标,页面和区块会有很大的不同。一旦你确定了,方块元素就能帮助你完成目标。你是用它来组织内容?还是想为页面增添一点乐趣?

  看看Paper and Paint。他们使用方块元素保持页面井井有条,并且突出了页面特有的流动性。随着鼠标向下滚动,每个方块中的不同内容都在进行着视觉差滚动——这是个非常酷的效果——每个方块都向你讲述独特的故事,汇聚成整个页面。这些方块元素的作用,就是保持各部分对齐,形成一种整洁的时尚,同时也为各个页面营造不同的故事氛围。


  Anthony John Group使用方块来展示他们创作的各个项目,还有关键的公司信息,比如“幕后团队”。主页的规划与构建很棒,但也结合紧密。很明显,他们致力于创造像这个页面一样优雅的高端建筑设计,如果没有这些方块,可达不到这样的效果。


  使用方块来组织内容

  既然了解了你所追求的目标——尽管那几乎就是整合现有的信息——你会接触到内容组织的。你得把内容编成目录。要如何在各个方块中组织信息——某些方块内容会比其他的更多吗?这对组织内容很有帮助,你会来回摆弄,看看哪些有用哪些没用,发现哪些内容太多,哪些内容太少。我保证这不是什么高超技巧,实际上它不太需要凭直觉,大多时候都很简单——坐下来去完成它就是了。


  注意到上面这个网站没有,Block Level,方块和方块中的图标就是全部了,只有图标。这就是我所指的组织内容,Block Level的设计者故意在每个方块中只留下一个图标。下一步就是要考虑如何将调整过的内容放在令人愉悦的设计中,这正是我们下面要讲的。

  调整这些方块,或者干脆不动它!

  既然组织内容的工作让你了解一组组信息看起来是什么样,你就要思考应该怎么处理这些方块。这是让你打磨内容块大小的一步,可能你希望它们都保持一致——又或者你决定让它们错落杂乱排布。这还是得取决于你的具体目标。

  从Nedd中可以看出,方块元素都非常巨大,它们有着近似的宽度和相等的高度,让网站看起来井井有条。我希望你注意的是,虽然这是偏向于内容组织的用法,网站的样式仍然非常有趣轻快,这主要得益于它的颜色、矢量元素、圆形的应用、字体等等。


  另一方面,我们还有像Banana Café这样元素散乱的网站——如果你想,也可以这样优美地乱序排列。这个网站看起来也很好玩,得益于它的字体、颜色的选用等等。方块的这种特殊用法其实没什么,只是一种特定的设计手段。


  点缀样式

  有千万种设计方法,可以为你下个项目中的方块元素打造特殊风格。你可以将它们与其他元素自由组合,比如圆形,或者采用贯穿始终的矩形或正方形来营造网站的视觉焦点。最后两个例子中,你会再次见识如何将方块良好地应用于设计中,希望对你有所启发,并能在你下个项目中发挥作用。

  Jan Finnesand用了全屏的宽度与高度来放置方块,每一块都有特殊作用,大多展示了他以往的项目案例。充满整个浏览器窗口的方块造就了一件非常酷的设计。


  这家公司无处不用方块!主页上可以看到,他们也展示不同的案例。通过不同尺寸的正方形引导用户视线。我最喜欢的一点是,他们用两个正方形来组成一张更大的图片,但每一张都指向一个独特的项目——我觉得这很酷。

时间: 2024-10-29 07:15:51

在网页设计中怎样使用方块元素的相关文章

优秀网页设计中的易视性元素

有没有碰上如此情况?你进入会议室,发现墙上的开关控制板有很多相同模样的按钮,你不知道那个开启灯光,那个控制投影机,你大概会采用"试误法"方法来探究每一个的功能,尽管这过程只会花少于10秒,但关键是为甚么我们要站在开关控制板旁边,像傻瓜般不断尝试,忍受由劣质设计所带来的苦果. Donald A. Norman (<设计&日常生活>的作者) 提及优良设计其中一个必须元素是"易视性".易视性就是当你看见工具或仪器的外观,便会知道如何使用及操作,外观能实

大图片背景网页设计中文字设计重要性

文章描述:浅析文字在国际范网页中的重要性. 网页设计中最重要的元素是什么?你不知道?思考一下:你是如何将信息传递给用户的?你是如何展示产品的?现在你明白了吧,答案很简单,用文字将信息传递给用户,用图像展示产品.两者结合之后,表达能力呈几何级上升. 图像胜过文字 大多数人认为图像比文字易于理解,这已经不是什么秘密了.通过观看的形式,图像更容易表达情绪,也更容易让用户铭记.用户很可能因为页面中一幅动人的图像而记住你的网站. 在网上,你可能看过很多信息图.信息图的绘制规则很简单--人们更喜欢读图.很多

网页设计中的轮廓框

  网页设计中使用轮廓框元素的案例不多.但实际上,这些纤细的.整洁的轮廓框效果极佳.为了保证效率的最大化,轮廓框一般采用纯色线条,这样便能产生前景与背景的明显对照.黑和白,是最传统的配色,以其对比强烈,效果突出而著称.因此很多轮廓框采用了白色线条.除了颜色,线条的粗细也是一大考量,纤细的线条让人感觉精致细腻,粗厚的线条显得异常醒目. 下面,本文收集了一些网页设计中轮廓框应用的案例. Olivier Staub 此网页设计一反传统,对菜单采取了简化设计,蔚为壮观的全屏图像滚动.厚重的轮廓狂和粗字体

网页设计中的装饰元素总结的应用

前言:看本教程,必须先仔细看前言的内容,否则会进入误区!最近在做个性休闲服装内网站的设计课程,过程中发现,个性元素的应用成为最难的问题,第一项目风格适合使用什么样的个性元素:其次,个性元素如何把握,什么样的元素才是个性元素,才能突出项目定位:这里聊的共性与个性纯粹是在本人对网页设计中的装饰元素总结的应用,不代表其它方面的解释,"共性与个性"也是个人用来区分常规元素与个性元素的用词,大家可以理解为正规的突破的: 了解共性与个性 共性解释:共性就是常规的东西,自然存在并被人们认可的:比如一

网页设计中透明元素和透明度使用的艺术

每隔一段时间我都要在网页设计的各个方面做一个研究探讨,以提升网页设计水平.互相学习交流! 网页设计中使用透明元素,即美观又棘手.为什么这么说呢,当你某个模块的透明度没有把握恰当时,可能难免造成体验失调,字体信息不清晰,信息捕获不明确,主次不分明,色调失调.所以一个透明度却能造成这么多严重后果?当然,细节成就美,但是我们只要主题运用细节,相信能发挥透明元素的作用,让你的网页更加栩栩如生.由于国外网站原创性比较高,下面我将采用国外的一些案例来做一些研究探讨.(当然不是说国内网页不好哦,但是国内和国外

如何将海洋元素运用于网页设计中

网页设计若是每一页都如海报一般精致,精心雕琢,那么这将会是万众瞩目的作品.对某一个网页精雕细琢也许可以,但是要是对整个网站而言,这却是难上加难.不用着急,大自然为我们想好了办法.在网页设计中采用自然图案是一个很别致的一点,大多数设计师都采用乡村风格的风景或者是景观照片,这样固然能增加网站自身的自然度,但是所要表达的情绪过于单调.如果让网页"溺于深海"呢?大海不缺乏强大的情绪,可以骇俗,也可以小清新文艺范,更可以让人联想翩翩.在各种庸俗的网页设计后,不如尝试感受一下海洋的博大宽广. 网页

网页设计中尽量避免的设计元素有哪些

随着网页设计技术的不断更新与升级,一个又一个的创新技术接踵而至.尽管在网页设计中,跟风会让自己的设计显得毫无主见,但是有很多设计潮流确实值得追随,就如当下的响应式设计.扁平化设计.滚动视差等.但是部分设计师却顺从了一些极为"糟粕"的设计趋势,下面就列举了在网页设计中即将被淘汰的趋势. 1. 页面跳转 目前部分网站页面会有页面跳转的标识 - "下一张",甚至一页就能全部展现的内容,却要让用户跳转多次才能看完.类似这种跳转过于频繁的页面不仅操作繁琐.效率低下,也会浪费用

网页设计中尽量避免的设计元素都有哪些?

随着网页设计技术的不断更新与升级,一个又一个的创新技术接踵而至.尽管在网页设计中,跟风会让自己的设计显得毫无主见,但是有很多设计潮流确实值得追随,就如当下的响应式设计.扁平化设计.滚动视差等.但是部分设计师却顺从了一些极为"糟粕"的设计趋势,下面就列举了在网页设计中即将被淘汰的趋势. 1. 页面跳转 目前部分网站页面会有页面跳转的标识 - "下一张",甚至一页就能全部展现的内容,却要让用户跳转多次才能看完.类似这种跳转过于频繁的页面不仅操作繁琐.效率低下,也会浪费用

在网页设计中对称手法使用技巧

文章描述:在网页设计中,对称/不对称的有效运用可以达到非常与众不同的效果. 在设计中,对称创造了平衡,平衡了创造和谐.秩序和审美.自然界中对称无处不在,也许正是这种无处不在的状态让我们发现对称的美.形态学的基本原则之一就是对称,它是一套人类形为理论,形态学认为人类对看到和遇到的事物本能的产生出秩序和完整性. However, symmetry can get boring. Asymmetry is a break in symmetry, which when used effectively