2019/2/22 18:58:23
前段時間在網絡上(shàng)發現最近網絡上(shàng)開(kāi)始有(yǒu)很多人(rén)在討(tǎo)論栅格化的(de)網頁布局,嗯。我也(yě)先介紹一下網頁栅格化的(de)布局情況吧(ba)。
最早提出網頁栅格化的(de)設計(jì)的(de)人(rén)我忘記是誰了,但(dàn)是應該是網頁還停留在780寬度的(de)時候就聽說過栅格化的(de)問題。從taobao ued的(de)博客了解到(dào)
“1692年,新登基的(de)法國國王路(lù)易十四感到(dào)法國的(de)印刷水(shuǐ)平強差人(rén)意,因此命令成立一個(gè)管理(lǐ)印刷的(de)皇家特别委員會(huì)。他(tā)們的(de)首要任務是設計(jì)出科學的(de)、合理(lǐ)的(de), 重視功能(néng)性的(de)新字體。委員會(huì)由數學家尼古拉斯加宗(Nicolas Jaugeon)擔任領導,他(tā)們以羅馬體爲基礎,采用(yòng)方格爲設計(jì)依據,每個(gè)字體方格分(fēn)爲64個(gè)基本方各單位,每個(gè)方各單位再分(fēn)成36個(gè)小(xiǎo)格,這樣,一個(gè)印 刷版面就有(yǒu) 2304個(gè)小(xiǎo)格組成,在這個(gè)嚴謹的(de)幾何網格網絡中設計(jì)字體的(de)形狀,版面的(de)編排,試驗傳達功能(néng)的(de)效能(néng),這是是世界上(shàng)最早對字體和(hé)版面進行(xíng)科學實驗的(de)活動,也(yě) 是栅格系統最早的(de)雛形。”
嗯。簡單說來,網頁栅格化解決的(de)問題即是網頁如(rú)何能(néng)最多的(de)分(fēn)割成爲各種整數寬度的(de)問題。。通過看上(shàng)面的(de)圖片大(dà)家應該基本可(kě)以了解到(dào)什(shén)麽是網頁栅格化的(de)設計(jì),以上(shàng)是950寬度的(de)網頁設計(jì)。如(rú)果把30作爲每個(gè)單獨的(de)單元格的(de)寬度,10作爲每個(gè)單元格之間的(de)寬度。那麽950恰好可(kě)以分(fēn)成24個(gè)小(xiǎo)列,每個(gè)間隔10像素。
結果黃(huáng)金(jīn)分(fēn)割很好的(de)解決了我的(de)問題。用(yòng)中文(wén)最常見的(de)12px宋體和(hé)14px宋體爲例:
最合适閱讀(dú)的(de)行(xíng)高(gāo)是12像素:12× 1.618=19.4 PX
最合适閱讀(dú)的(de)行(xíng)高(gāo)是14像素:14× 1.618=22.7 PX
再舉個(gè)實際的(de)例子,在豆瓣上(shàng)目前的(de)行(xíng)高(gāo)度是150%,因此12像素宋體是18像素的(de)行(xíng)高(gāo)。如(rú)果換用(yòng)1.618的(de)高(gāo)度。我們對比一下:
因此,這個(gè)就是網頁栅格化最簡單的(de)一個(gè)解釋了。下面我想說另外一個(gè)問題,即使黃(huáng)金(jīn)分(fēn)割。
在一些比例問題上(shàng),就討(tǎo)論到(dào)這裏把。歡迎各抒己見。
把一條線段分(fēn)割爲兩部分(fēn),使其中一部分(fēn)與全長之比等于另一部分(fēn)與這部分(fēn)之比。其比值是[5^(1/2)-1]/2,取其前三位數字的(de)近似值是0.618。由于按此比例設計(jì)的(de)造型十分(fēn)美(měi)麗(lì),因此稱爲黃(huáng)金(jīn)分(fēn)割,也(yě)稱爲中外比。這是一個(gè)十分(fēn)有(yǒu)趣的(de)數字,我們以0.618來近似,通過簡單的(de)計(jì)算就可(kě)以發現:
1/0.618=1.618
(1-0.61 / 0.618=0.618
這個(gè)數值的(de)作用(yòng)不僅僅體現在諸如(rú)繪畫、雕塑、音(yīn)樂(yuè)、建築等藝術(shù)領域,而且在管理(lǐ)、工(gōng)程設計(jì)等方面也(yě)有(yǒu)著(zhe)不可(kě)忽視的(de)作用(yòng)。
如(rú)果細心一些的(de)人(rén)會(huì)發現,黃(huáng)金(jīn)分(fēn)割無所不在,包括拍(pāi)張照(zhào)片人(rén)物(wù)放(fàng)在畫面的(de)黃(huáng)金(jīn)分(fēn)割點上(shàng)也(yě)是一種很好的(de)構圖方法。因此,黃(huáng)金(jīn)分(fēn)割是一種公認最優秀的(de)分(fēn)割比例。
因此如(rú)果以一個(gè)950寬度的(de)網頁爲例。最合适的(de)分(fēn)割比例其實是。
左側:950× 0.618 = 587
右側:950 × 0.382 =363
個(gè)人(rén)覺得黃(huáng)金(jīn)比例分(fēn)割比栅格化靠譜很多,但(dàn)是如(rú)果是一個(gè)門戶網站,需要很多的(de)小(xiǎo)區塊分(fēn)割的(de)網站,你(nǐ)要考慮倒栅格化的(de)化,即是爲了以後再分(fēn)割考慮的(de)化,那兩列的(de)比例也(yě)應該是最接近的(de)應該是590像素和(hé)360像素。
爲什(shén)麽呢?
590 = 14 × (30+10) + 30
360 = 9 × (30+10)
其實這個(gè)比例已經幾乎等于黃(huáng)金(jīn)分(fēn)割。因此這樣的(de)使用(yòng)比較好。
同時,黃(huáng)金(jīn)分(fēn)割不僅僅體現在網頁的(de)栅格化中,還體現在行(xíng)高(gāo)(line-height)上(shàng),一個(gè)網站的(de)文(wén)字怎麽樣的(de)距離(lí)才是最合适閱讀(dú)的(de)呢?這個(gè)是我一個(gè)困擾了很久的(de)問題。
深圳市南山區南山街(jiē)道南海(hǎi)大(dà)道西(xī)桂廟路(lù)北陽光(guāng)華藝大(dà)廈1棟4F、4G-04
咨詢電話(huà):136 8237 6272
大(dà)客戶咨詢:139 0290 5075
業(yè)務QQ:195006118
技術(shù)QQ:179981967