在設(shè)計(jì)中可以使用許多數(shù)學(xué)公式，比如常用的黃金分割比就是其中之一。在網(wǎng)頁(yè)設(shè)計(jì)布局中，我們也能通過精密的計(jì)算來(lái)獲得理想的排版比例，本文將介紹使用數(shù)學(xué)中的“模數(shù)”來(lái)計(jì)算網(wǎng)頁(yè)布局大小，從而獲得更為合理的布局。 在IT工業(yè)中，內(nèi)置標(biāo)準(zhǔn)、國(guó)際標(biāo)準(zhǔn)、國(guó)家標(biāo)準(zhǔn)才是真正意義的規(guī)范、而在應(yīng)用領(lǐng)域（包括web應(yīng)用的開發(fā)）的開發(fā)中，標(biāo)準(zhǔn)是各自為政亂七八糟的，微軟如果不考慮市場(chǎng)和經(jīng)濟(jì)利益也不是不吊這些標(biāo)準(zhǔn)的。我不得不汗一個(gè)。

二、模數(shù)網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

好了，鄙視完小兒科的網(wǎng)頁(yè)設(shè)計(jì)，我們來(lái)談?wù)劇澳?shù)”在網(wǎng)頁(yè)設(shè)計(jì)中的用途。

（一）網(wǎng)頁(yè)設(shè)計(jì)中的尺寸單位

網(wǎng)頁(yè)設(shè)計(jì)中的尺寸單位有那么幾個(gè)：em ex px pt pc in cm mm % 最常用的就是px（像素），因?yàn)檫@個(gè)單位與圖片單位可以互通，所以常用。 （二）網(wǎng)頁(yè)設(shè)計(jì)中的常用模數(shù)

（1）最常用的是100、10、5的倍數(shù) 比如分欄的時(shí)候，滿寬式950px，左欄式180px，欄與欄之間的間距是10px、15px、20px （2）模數(shù)要盡量取整或末位為偶數(shù)

這里要在提一下模數(shù)中有個(gè)概念就是，不滿足常用模數(shù)的，位數(shù)盡量要用偶數(shù)，為的避免歧義和好記。還有個(gè)道理是，一律取偶數(shù)，那么按組件的偶數(shù)量組合順序，疊加結(jié)果一定是偶數(shù)，末尾加再加個(gè)組件一定是奇數(shù)了，這樣好判斷是否有錯(cuò)。

比如你的圖片寬是231px，為啥不舍1取整為230px； 再比如你的圖片高時(shí)237px，你可以取235px、236px、238px （3）使用模數(shù)的好處——輕松獲得秩序美 這個(gè)世界上什么是美？是秩序?？纯丛鼐w、看看飄落到你手中尚為融化的雪花、看看人類的基因螺旋結(jié)構(gòu)，這些微觀世界的東西，凝練了美得本源。而自然界、動(dòng)物界、乃至宇宙星系，由于其包含了雜志和不斷地衰減變化，這種“美”只是表象。

人之所以是人，就是在一直探索事物的本源。并不斷提煉還原美的本質(zhì)。在中世紀(jì)人們迷戀于幾何，在現(xiàn)代人們充分將其提高到工業(yè)設(shè)計(jì)中。工業(yè)設(shè)計(jì)是以規(guī)范標(biāo)準(zhǔn)和計(jì)算設(shè)計(jì)為基礎(chǔ)的，升華成一套追求完美的秩序。形成秩序的模數(shù)，是一個(gè)遞增量，這個(gè)增量可以是倍數(shù)、方根、冪、圓周率、素?cái)?shù)、或以個(gè)方程式等等。而倍數(shù)恰恰是形成秩序的一種最簡(jiǎn)單的方法。所以在工業(yè)設(shè)計(jì)中，尤其是建設(shè)設(shè)計(jì)中大量運(yùn)用了倍數(shù)來(lái)充當(dāng)模數(shù)。

現(xiàn)在我們有了簡(jiǎn)單的倍數(shù)類模數(shù)，那么這個(gè)模數(shù)又是怎么把美體現(xiàn)出來(lái)的呢？ 你說我感覺不到啊。答對(duì)了，模數(shù)美的確是人無(wú)法直接一下感受到的。因?yàn)檫@種美不僅僅體現(xiàn)在感官上，還體現(xiàn)在設(shè)計(jì)制作開發(fā)過程中，它不僅提高了制作效率，減小了莫名其妙的累計(jì)誤差，還把一種整體的設(shè)計(jì)美蘊(yùn)含在整體作品中，它的美是整體美和局部美一種相互轉(zhuǎn)換。更直白點(diǎn)，你會(huì)在網(wǎng)頁(yè)中感受到一種工業(yè)設(shè)計(jì)的“精致”和“用心”，反過來(lái)說，一個(gè)界面中的模塊之間的間距或某模塊四個(gè)邊界與其內(nèi)容的間隔，一會(huì)是8px，一會(huì)是12px，一般用戶一定會(huì)在潛意識(shí)中感覺不精致，因?yàn)樵O(shè)計(jì)者沒有用心，沒有用模數(shù)把秩序美設(shè)計(jì)進(jìn)去。

有多少UI設(shè)計(jì)師不懂得啥是模數(shù)呢？ 有多少UI設(shè)計(jì)師因?yàn)椴挥媚?shù)而使整個(gè)網(wǎng)站缺乏設(shè)計(jì)美呢？ 有多少UI設(shè)計(jì)師即便是在局部或某組建用了符合秩序的倍數(shù)，但沒有在整頁(yè)布局和整站中是使用統(tǒng)一的模數(shù)呢？

用你的眼睛細(xì)心觀察，用放大鏡去研究，用心靈去感受，你就知道你的設(shè)計(jì)師是什么水平了。

（4）不被模數(shù)所束縛 上面一直說模數(shù)要用倍數(shù)，要用偶數(shù)。要活血活用啊，一旦秩序美的追求與效率和規(guī)范沖突，哪就放棄模數(shù)。比如即成的國(guó)際標(biāo)準(zhǔn)小logo圖片的尺寸是88*31px，你非得為了符合模數(shù)而不遵循國(guó)際通用標(biāo)準(zhǔn)而改成88*30px嗎？

題外話，除了模數(shù)，IT工業(yè)還有其內(nèi)置的一套標(biāo)準(zhǔn)，我也懶得去管他，比如圖片和頭像大小，有其一套特殊的模數(shù)，16*6、24*24、32*32、48*48、64*64、128*128，你要是非得破壞這個(gè)標(biāo)準(zhǔn)而改成15*15、25*25、030*30、50*50、65*65、130*130，我就真無(wú)語(yǔ)了。

咦，我發(fā)現(xiàn)paidai的頭像，居然是50*50px，呵呵?？磥?lái)表現(xiàn)層不必非得拘泥于模數(shù)。

設(shè)計(jì)美就是這么簡(jiǎn)單，你必須用計(jì)算器來(lái)布局！

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁(yè)名稱：使用數(shù)學(xué)中的模數(shù)精確布局
文章轉(zhuǎn)載：http://www.rwnh.cn/news48/317548.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、網(wǎng)站排名、動(dòng)態(tài)網(wǎng)站、、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)