網站設計之三:設計中的模數和秩序美

AI時代,如何更快入行搶占紅利得高薪?前阿裡巴巴産品專家帶你15天入門AI産品經理。了解一下>

大家看到個好站,有時感覺,咋那麼精緻、舒服、有信賴感呢?學會模數,就會精緻設計,立即輕松獲得秩序美。

一、模數是什麼東西?

設計中還有模數?頂尖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,呵呵。看來表現層不必非得拘泥于模數。

設計美就是這麼簡單,你必須用計算器來布局!

來源:http://www.paidai.com/displaythread.php?boardid=18&topicid=21219

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言讨論~!
圈子
關注微信公衆号
大家都在問