網(wǎng)站設(shè)計(jì)之三:設(shè)計(jì)中的模數(shù)和秩序美

0 評(píng)論 2941 瀏覽 1 收藏 9 分鐘

大家看到個(gè)好站,有時(shí)感覺,咋那么精致、舒服、有信賴感呢?學(xué)會(huì)模數(shù),就會(huì)精致設(shè)計(jì),立即輕松獲得秩序美。

一、模數(shù)是什么東西?

設(shè)計(jì)中還有模數(shù)?頂尖UI設(shè)計(jì)師大部分都聞所未聞吧?模數(shù)在大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)教程和課程中,都沒有提到過,那么啥叫模數(shù)呢?

模數(shù)是選定的標(biāo)準(zhǔn)尺度單位,作為尺寸協(xié)調(diào)中的增值單位所謂尺寸協(xié)調(diào)是指在房屋構(gòu)配件及組合的建筑中,與協(xié)調(diào)尺寸有關(guān)的規(guī)則,供建筑設(shè)計(jì),建筑施工,建筑材料與制品,建筑設(shè)備等采用,其目的是使構(gòu)配件安全吻合,并有互換性。
引用維基百科定義

模數(shù)是建筑設(shè)計(jì)中的專業(yè)術(shù)語(yǔ),是自定義的長(zhǎng)度增量單位。按單位不同,建筑構(gòu)件尺寸、鋼筋直徑、開間、進(jìn)深、層高、跨度等一般以2、5、10、100的倍數(shù)或偶數(shù)倍為尺寸增量。比如層高優(yōu)3米3、3米7等;比如鋼筋半徑有32mm、10mm、比如灰漿厚度有3個(gè)(3cm)、2個(gè)(2cm)等。

為啥要用模數(shù),這得從有了鋼筋混凝土,出現(xiàn)了現(xiàn)代建筑的工業(yè)設(shè)計(jì)才出現(xiàn)的。建筑工業(yè)為了組建化、標(biāo)準(zhǔn)化、流水線化提高生產(chǎn)建設(shè)效率,不得不引進(jìn)了模數(shù),來(lái)使建筑構(gòu)配件有互換性,更高效地設(shè)計(jì)組裝。同理,自打室內(nèi)裝飾伴隨廣告產(chǎn)業(yè)的興起,模數(shù)也引入到裝修領(lǐng)域里了。

往往一個(gè)建筑設(shè)計(jì)師到了退休年齡才達(dá)到建筑設(shè)計(jì)的成熟期,無(wú)論從藝術(shù)產(chǎn)出物的量級(jí)還是從其工序來(lái)說,都是任何其他藝術(shù)品所無(wú)法比擬的。建筑藝術(shù)被稱為人類社會(huì)最偉大的藝術(shù)。而平面藝術(shù)、演藝、影視想比較來(lái)說就是小兒科了。網(wǎng)頁(yè)設(shè)計(jì)呢,歸屬平面藝術(shù)范疇,再加上國(guó)內(nèi)IT工業(yè)設(shè)計(jì)規(guī)范的幼稚水平,沒有模數(shù)這個(gè)概念,也就順利成章了。

順便再吹一下規(guī)范。建設(shè)領(lǐng)域分為不同的專業(yè),比如建筑設(shè)計(jì)、建筑施工、結(jié)構(gòu)設(shè)計(jì)、設(shè)備工程、材料預(yù)算等等,比較繁雜。單一個(gè)門類的明文紙質(zhì)規(guī)范就是以尺來(lái)計(jì)算厚度的。專業(yè)人員在使用的時(shí)候都叫查規(guī)范,為啥?誰(shuí)腦子進(jìn)了水把幾千萬(wàn)字的規(guī)范往腦子記啊。記的上學(xué)的時(shí)候,全校就我們系功課最繁重,單力學(xué)就三門,還學(xué)什么線性代數(shù),至今我就沒弄明白線性代數(shù)是咋會(huì)事。建筑領(lǐng)域所用的知識(shí)真是浩如煙海啊。現(xiàn)在已經(jīng)把這些知識(shí)都還給老師了,唯一現(xiàn)在還用的就是“模數(shù)”。

在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)源:http://www.paidai.com/displaythread.php?boardid=18&topicid=21219

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!