欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

网页设计工具-灰盒排版方法<灰盒模型>

flash 夜阑小雨 924℃ 0评论

注:在一些书籍中看到过”灰盒方法”,网上很多人用(包括我自己),但真正关于方法本身的介绍却很少.最近重读<超越CSS:Web设计精髓> 时候”灰盒方法”的原出处.2004年一个叫Jason Santa Maria的设计师在自己设计的过程中逐渐总结出来的这种方法,原文中有对灰盒用法和流程的详细介绍.更重要的作者描述了他是在什么样的情况下发现使用这 种方法的好处. 度过之后,对灰盒有更清晰的理解.所以翻译出来,希望对从事网页设计的朋友能有帮助.

在阅读了Douglas Bowman的Underline Text in Adobe Illustrator后,我开始思考自己在网站设计时的工作流程。 他的文章并不是描述如何在Illustrator中给文字加上下划线效果的解决方案。在文章的后半部分有一些关于设计软件的讨论。让我对自己多年来使用的方法和这些总结这些方法的过程进行了一些思考.

我慢慢发现自己开始用一种新的方法去设计网站。我是说当然,我也和你一样是用纸笔开始设计,以前我一直是先完成草图然后在Photoshop中绘制 最终模型。但过去一年,我开始直接使用CSS和XHTML(或FLASH)制作页面并乐在其中. 当时我对视觉效果的设计已经非常得心应手.所以便开始在设计的时候思考整个过程.暂时抛开已经在草图中实现的视觉细节,我将更多心思投去谋划如何使CSS 更好的成为网站的一部分.对于那些已经这样思考的人,也许你们已经受益匪浅,但当时对我来说就好像对自己的脚开枪的感觉.对我来说CSS和FLASH的各 种对页面设计技术限制让我心烦意乱.我更喜欢开放头脑去思考如何创造美丽的艺术效果.如果我的设计的某些效果不能用CSS或者其他的什么技术实现,没有太 大关系.在考虑页面代码之前,我宁愿先实现我能做出来的最好的艺术效果.而不是CSS的或FLASH最容易实现的效果.程序对我来说只是用来传达信息的代 码而已.我发现在我设计的时候,放弃以前的方法,现在我觉得以前不可能实现的事情成为了工作中新的探索方向,而我也已经找到了正确的方法.这就是对新方法 探索的过程.

对于网页设计,我最关键的问题是怎样把一个设计合理的分割成较小的组块. 如果有太多的块互相重叠,我就很难决定那些设是已经完善的.如果我很快就进入Photoshop设计,在页面结构上的注意力就会被字体或者颜色一类的事情分散.

jasonsantamaria.com sketches

这里解释一下.左边是我网站原来的一些草图 (请忽略那草稿中的那两只猴子…).开始设计的时候,我对整体外观和效果已经有了一些想法,但我还是先画下来.其实不管是哪一类设计,这是最重要的一步. 我个人认为草图能用最短的时间发挥你的想象力和改正设计中发现的不足,而且在画图的过程中你还能看到自己如何从一个点子逐渐衍生出其他令人惊喜的想法.不 要急于实现,修改你的设计,因为一但你座在电脑前的那一刻,你便进入了一个充满了选择的世界.理论上这不是坏事,但无数的难以取舍的选择,或各种不同的版 式,图片,让你整个人瞬间就淹没在各种细节中.所以,从画草图开始设计,就能让自己有充裕的时间专注于整体而不用费尽心思的去决定各种图片颜色或字距一类 的琐碎问题.

jasonsantamaria.com grey box method

完成草图之后,我马上就转入Illustrator进行所谓的”灰盒”排版.你也可以用Photoshop实现,但我更喜欢Illustrator 的各种形状而且它们是矢量图形-高清晰而且容易改变大小.然后,已经有了清晰的草图,现在可以把一些具体的文字和层级关系应用布局中.这个过程中,变形工 具永远是你最好的朋友.可以先不用担心颜色或者图片上的问题,只专注于网站结构和层级.先按照内容的重要性把页面划分成块以确认网站的整体结构对应项目的 整体需求是否清晰.你可以看到网站初期版式的截图(左 图). 你也许已经发现最终的效果和灰盒的版式有一定出入,但我们可以保证两个效果的底层结构是一致的.我在不同的区块中标示出命名的文字,然后确定内容流和层级 结构都得到合理的安排.这种简单的灰色块要比我以前做的加入了LOGO或者使用不同颜色的排版要好的多.我会在这一步之后才进入Photoshop实现效 果,原因有两个,首先这是我自己的网站,其次能让我很清晰的看到自己想要的结果.

Sideshow grey box method

还有一个,左边是我最近为Sideshow网站所作的灰盒排版图 (网站已经下线,可以查看模型 ).这三个排版看起来有些相似,但结构组织上的确有一些不同. 三个页眉都差不多的排版主要区别在不同的内容;第一个是对称的两栏布局,第二个是不对称的,最后一个则是三栏式布局.在确定了使用哪个布局之后,由于我已 经有了很完整的底层结构,我完全可以放开想法去研究视觉美化上面的细节.更棒的是,因为我已经事先知道布局上的各种问题,所以在针对某些视觉细节而调整布 局的时候更有把握.摆在左边?还是右边?还是哪里移动几个像素?都不会影响底层结构的完整.

其实就像作家在写作之前都会准备提纲一样,灰盒就是我在设计之前准备的视觉提纲.它只是一种方法,一种适应我工作方式的方法.设计中还有其他更多的 办法和途径去帮助你实现好的设计.而且,不是每次工作都有时间或者需求让我使用灰盒排版,但在有需要的时候它能让我保持对设计结构的清晰把握的同时更轻松 的发挥创造力.有些时候我甚至直接在Illustrator里根据灰盒模型直接实现效果,因为客户也许会需要不同形式打印稿,这就需要设计稿灵活修改的基 础上输出不同规格高像素效果.甚至在FLASH设计的时候,因为矢量图形可以直接导入FLASH所以Illustrator也是我最常用的设计软件.

以前我工作的时候总是迫不及待的直接坐在电脑前便开始开始制作版式或者各种效果.由于没有结构设计,大多数得到的结果都是失败的.现在我将设计的流 程分解下来,在其中使用灰盒方法后者其他的办法,在应对细节以有充足的时间和准备去考虑好设计和结构上的各种可能性,这对我的设计带来极大的帮助.

原文:Grey Box Methodology

出处:JansonSantaMaria.com

转载请注明:夜阑小雨 » 网页设计工具-灰盒排版方法&#60;灰盒模型&#62;

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址