网站设计之三：设计中的模数和秩序美

大家看到个好站，有时感觉，咋那么精致、舒服、有信赖感呢？
学会模数，就会精致设计，立即轻松获得秩序美。

一、模数是什么东西？

设计中还有模数？顶尖UI设计师大部分都闻所未闻吧？
模数在大多数网页设计教程和课程中，都没有提到过，那么啥叫模数呢？

------------------------引用维基百科定义------------------------
模数是选定的标准尺度单位，作为尺寸协调中的增值单位所谓尺寸协调是指在房屋构配件及组合的建筑中，与协调尺寸有关的规则，供建筑设计，建筑施工，建筑材料与制品，建筑设备等采用，其目的是使构配件安全吻合，并有互换性。
---------------------------------------------------------------------

模数是建筑设计中的专业术语，是自定义的长度增量单位。按单位不同，建筑构件尺寸、钢筋直径、开间、进深、层高、跨度等一般以2、5、10、100的倍数或偶数倍为尺寸增量。比如层高优3米3、3米7等；比如钢筋半径有32mm、10mm、比如灰浆厚度有3个（3cm）、2个（2cm）等。

为啥要用模数，这得从有了钢筋混凝土，出现了现代建筑的工业设计才出现的。建筑工业为了组建化、标准化、流水线化提高生产建设效率，不得不引进了模数，来使建筑构配件有互换性，更高效地设计组装。同理，自打室内装饰伴随广告产业的兴起，模数也引入到装修领域里了。

往往一个建筑设计师到了退休年龄才达到建筑设计的成熟期，无论从艺术产出物的量级还是从其工序来说，都是任何其他艺术品所无法比拟的。建筑艺术被称为人类社会最伟大的艺术。而平面艺术、演艺、影视想比较来说就是小儿科了。网页设计呢，归属平面艺术范畴，再加上国内IT工业设计规范的幼稚水平，没有模数这个概念，也就顺利成章了。

顺便再吹一下规范。建设领域分为不同的专业，比如建筑设计、建筑施工、结构设计、设备工程、材料预算等等，比较繁杂。单一个门类的明文纸质规范就是以尺来计算厚度的。专业人员在使用的时候都叫查规范，为啥？谁脑子进了水把几千万字的规范往脑子记啊。记的上学的时候，全校就我们系功课最繁重，单力学就三门，还学什么线性代数，至今我就没弄明白线性代数是咋会事。建筑领域所用的知识真是浩如烟海啊。现在已经把这些知识都还给老师了，唯一现在还用的就是“模数”。

在IT工业中，内置标准、国际标准、国家标准才是真正意义的规范、而在应用领域（包括web应用的开发）的开发中，标准是各自为政乱七八糟的，微软如果不考虑市场和经济利益也不是不吊这些标准的。我不得不汗一个。

二、模数网页设计中的应用

好了，鄙视完小儿科的网页设计，我们来谈谈“模数”在网页设计中的用途。

（一）网页设计中的尺寸单位

网页设计中的尺寸单位有那么几个：em   ex   px   pt   pc  in   cm   mm   %
最常用的就是px（像素），因为这个单位与图片单位可以互通，所以常用。

（二）网页设计中的常用模数

（1）最常用的是100、10、5的倍数
比如分栏的时候，满宽式950px，左栏式180px，栏与栏之间的间距是10px、15px、20px

（2）模数要尽量取整或末位为偶数

这里要在提一下模数中有个概念就是，不满足常用模数的，位数尽量要用偶数，为的避免歧义和好记。还有个道理是，一律取偶数，那么按组件的偶数量组合顺序，叠加结果一定是偶数，末尾加再加个组件一定是奇数了，这样好判断是否有错。

比如你的图片宽是231px，为啥不舍1取整为230px；
再比如你的图片高时237px，你可以取235px、236px、238px

（3）使用模数的好处——轻松获得秩序美
这个世界上什么是美？是秩序。看看元素晶体、看看飘落到你手中尚为融化的雪花、看看人类的基因螺旋结构，这些微观世界的东西，凝练了美得本源。而自然界、动物界、乃至宇宙星系，由于其包含了杂志和不断地衰减变化，这种“美”只是表象。

人之所以是人，就是在一直探索事物的本源。并不断提炼还原美的本质。在中世纪人们迷恋于几何，在现代人们充分将其提高到工业设计中。工业设计是以规范标准和计算设计为基础的，升华成一套追求完美的秩序。形成秩序的模数，是一个递增量，这个增量可以是倍数、方根、幂、圆周率、素数、或以个方程式等等。而倍数恰恰是形成秩序的一种最简单的方法。所以在工业设计中，尤其是建设设计中大量运用了倍数来充当模数。

现在我们有了简单的倍数类模数，那么这个模数又是怎么把美体现出来的呢？
你说我感觉不到啊。答对了，模数美的确是人无法直接一下感受到的。因为这种美不仅仅体现在感官上，还体现在设计制作开发过程中，它不仅提高了制作效率，减小了莫名其妙的累计误差，还把一种整体的设计美蕴含在整体作品中，它的美是整体美和局部美一种相互转换。更直白点，你会在网页中感受到一种工业设计的“精致”和“用心”，反过来说，一个界面中的模块之间的间距或某模块四个边界与其内容的间隔，一会是8px，一会是12px，一般用户一定会在潜意识中感觉不精致，因为设计者没有用心，没有用模数把秩序美设计进去。

有多少UI设计师不懂得啥是模数呢？
有多少UI设计师因为不用模数而使整个网站缺乏设计美呢？
有多少UI设计师即便是在局部或某组建用了符合秩序的倍数，但没有在整页布局和整站中是使用统一的模数呢？

用你的眼睛细心观察，用放大镜去研究，用心灵去感受，你就知道你的设计师是什么水平了。

（4）不被模数所束缚
上面一直说模数要用倍数，要用偶数。要活血活用啊，一旦秩序美的追求与效率和规范冲突，哪就放弃模数。比如即成的国际标准小logo图片的尺寸是88*31px，你非得为了符合模数而不遵循国际通用标准而改成88*30px吗？

题外话，除了模数，IT工业还有其内置的一套标准，我也懒得去管他，比如图片和头像大小，有其一套特殊的模数，16*6、24*24、32*32、48*48、64*64、128*128，你要是非得破坏这个标准而改成15*15、25*25、030*30、50*50、65*65、130*130，我就真无语了。

咦，我发现paidai的头像，居然是50*50px，呵呵。看来表现层不必非得拘泥于模数。

设计美就是这么简单，你必须用计算器来布局！