栅格系统怎样设定？是根据每次图文资料的内容决定的吗？
2012-01-19 19:48:25   来源：   点击：

4 个答案

• 答案 1：

  前面已有一些比较有用的回答。结合我自己的实际经验，再补充一些 : )在传统纸品印刷设计方面：

  首先，“每一次都根据具体的图文内容来设定栅格系统”

  理论上，这肯定是最优的设计方法——所谓的定制化设计，大概就是这样的。但其实，根据实际经验来看，栅格系统的“变数”，似乎没有这样地大；也就是说，每个版式设计师，都可以有几套自己保留的网格系统，用来解决大部分的内容——比如最简单的三栏网格（源自瑞士的学院派理论），一些杂志排版提倡的七栏／九栏分隔（相对更为灵活）。虽然我自己每次接受新的设计项目，都会重头构造栅格，可实际上，每次都大同小异。（自己每次都重头做，其实是工作习惯不好，没有积累或制作一些精良的可复用模版。）

  其次，关于Fibonacci数列的运用

  其实Fibonacci数列，就是一个“相邻两项的比值不断逼近黄金分隔”的数列，所以，运用这个数列来构造栅格，其实就相当于是运用黄金分隔来构造网格。在实际运用时，0.618...的相对精确的黄金比例，不会直接出场（因为太过精确，造成工程制造上过于麻烦），因此，总是会取一些近似的“整值”来取代。最简单的2:3、3:5等，是Fibonacci数列的前几项，它们某种程度上，都在“逼近”着黄金分隔。实际操作中，我自己也用过 21:34 这样“非主流”的分隔比例，但实际效果，可能不如“理论”上那么明显，在非常“较真”的场合，可以偶尔用一下。

  最后，关于经典的书籍版式栅格

  Jan Tschichold的经典栅格构造法，个人认为参考意义不大。我自己在实际设计中一次都没有用上过，只在某些小范围讲座中，提到过它，算是余兴的“科普”。这种栅格，首先得是基于2:3的开本（或者是更严格的黄金比例开本），才相对合适的，而现代的纸张标准中（例如最通行的ISO Paper Size），很少再直接用到2:3了。其他经典的栅格，《版式设计原理》[1] 这本书里提到过1:1.2:1.44:1.73 [2]，及 1:1.5:2:3 [3] 这样两种，说是英文栅格的经典。（比值是指四个页边距，依次为：订口:天头:切口:地脚）PC端的网页设计方面：可以参考960 Grid System的东西（http://960.gs/）。相对比较实用，网站上也提供了多种电子文件格式的模版。其中的 12col / 16col / 24col，个人都试用过，布局比较快捷，效果也不错。 // 厚颜挂两个自己的作品 XD (都是基于960grid而来) // (1) flickr.com/photos... // (2) flickr.com/photos...--[1] 《版式设计原理》book.douban.com/subject...[2] 1:1.2:1.44:1.73，据[1]书中说，是William Morris提出的，未考证过。[3]1:1.5:2:3，据[1]书中说，是一叫JONJJI AREN ANDO ANUIN的公司提出的，未考证过。（大概考据了下公司名称，很可能是 "George Allen and Unwin"en.wikipedia.org/wiki...)

• 答案 2：

  是根据每次图文资料的内容决定的吗？分情况，我经常遇到的有两种~

  需要重新定制的

  这种需要设计从新开始~由主style页面（如网站中的首页、某主题下的主页）/ 特意定制的页面（如网站中的运营页）这得根据产品的需要来置办它们~就是你说的「根据每次图文资料的内容」来决定怎么分~

  需要延续风格的

  在已有规范的框架内（如接手做了一半的项目时）做的时候需要遵从已定的栅格继续做~--------------------------固定的规则有~目前部分web2.0站点中采用主管纵向的12分格~例子：朱印的Rigohttp://www.robinzhu.com/home/也有不主用栅格用黄金比的~例子：eicohttp://www.eicodesign.com/门户类的需要遵从既定的栅格~因为这些站点的浏览数量已经培养出了庞大的用户习惯~例子：淘宝首页 http://www.taobao.com/门户站点首页yahoo.com/&n... http://www.163.com/这些是20px基准的、web业内的经典版式~UGC/运营类页面的栅格可以随意发挥~例子：http://lp.taobao.com/ --------------------------Jan Tschichold 设计的由跨页对角线发展出的版心删格这个请原谅我的火星~「版心删格」十分不了解~版心外到出血的距离在出产的时候控制不了太细啊~那是以什么为基本单位的呢？还请柳生指点~--------------------------数列在划分版面空间的时候起到了重要作用最后的「数列」是指什么呢？是指「斐波那契数列」这种？还是说的栅格系统里「x轴向最大列数」呢？

• 答案 3：

  受邀答。只说平面和书籍设计，经验不足还请指正。Jan Tschichold 的系统做比较经典的老的书比较合适。做现代的书的 grid 系统多数时候还是人为设定的，没有遵循太多的传统，只是按照几何来。我做过的几本书主要是按照内容和设计概念来做 grid。另外很少做中文书，所以无论是 Tschichold 的系统还是新一点的规则，适合中文与否都不敢妄论。

• 答案 4：

  我觉得淘宝ued这系列的文章可以让我们很好了解栅格系统（网页）。网页栅格系统研究ued.taobao.com/blog...在技术实现上，我补充一个：yui3-grid。实际上，文中最后一篇也有提到，只是版本是2.x的，此版本的实现过于复杂，个人认为。yui 3 grid的实现非常简洁、高效。网页的栅格系统设计ued.taobao.com/blog...至于平面设计上的栅格系统，如报纸等，设计上应该差不多，不过平面的阅读基本处于水平状态，而屏幕的界面是垂直的，差别总是有的，个人了解不深，也就不提了。