• 
• 
• 
• 
• 
• 
• 

返回貼子列表		發(fā)表新貼
主題： 柵格化的網(wǎng)頁布局和0.618的關(guān)系	共有1399人瀏覽過本貼	主貼管理 置　頂 加　精 結(jié)　貼 轉(zhuǎn)　貼

昵稱：奈薇建站網(wǎng) 論壇積分：108000 發(fā)貼等級(jí)：21 發(fā)貼數(shù)：1156 回貼數(shù)：1282 被砸雞蛋：1 獲贈(zèng)鮮花：182

發(fā)表時(shí)間：2019/11/13 11:22:00 樓　主 柵格化的網(wǎng)頁布局和0.618的關(guān)系 　　前段時(shí)間在網(wǎng)絡(luò)上發(fā)現(xiàn)最近網(wǎng)絡(luò)上開始有很多人在討論柵格化的網(wǎng)頁布局，嗯。我也先介紹一下網(wǎng)頁柵格化的布局情況吧。 　　最早提出網(wǎng)頁柵格化的設(shè)計(jì)的人我忘記是誰了，但是應(yīng)該是網(wǎng)頁還停留在780寬度的時(shí)候就聽說過柵格化的問題。從taobaoued的博客了解到 　　“1692年，新登基的法國國王路易十四感到法國的印刷水平強(qiáng)差人意，因此命令成立一個(gè)管理印刷的皇家特別委員會(huì)。他們的首要任務(wù)是設(shè)計(jì)出科學(xué)的、合理的，重視功能性的新字體。委員會(huì)由數(shù)學(xué)家尼古拉斯加宗（NicolasJaugeon）擔(dān)任領(lǐng)導(dǎo)，他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為64個(gè)基本方各單位，每個(gè)方各單位再分成36個(gè)小格，這樣，一個(gè)印刷版面就有2304個(gè)小格組成，在這個(gè)嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計(jì)字體的形狀，版面的編排，試驗(yàn)傳達(dá)功能的效能，這是是世界上最早對(duì)字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動(dòng)，也是柵格系統(tǒng)最早的雛形?！?br /> 　　嗯。簡單說來，網(wǎng)頁柵格化解決的問題即是網(wǎng)頁如何能最多的分割成為各種整數(shù)寬度的問題。。通過看上面的圖片大家應(yīng)該基本可以了解到什么是網(wǎng)頁柵格化的設(shè)計(jì)，以上是950寬度的網(wǎng)頁設(shè)計(jì)。如果把30作為每個(gè)單獨(dú)的單元格的寬度，10作為每個(gè)單元格之間的寬度。那么950恰好可以分成24個(gè)小列，每個(gè)間隔10像素。 　　因此，這個(gè)就是網(wǎng)頁柵格化最簡單的一個(gè)解釋了。下面我想說另外一個(gè)問題，即使黃金分割。把一條線段分割為兩部分，使其中一部分與全長之比等于另一部分與這部分之比。其比值是[5^(1/2)-1]/2，取其前三位數(shù)字的近似值是0.618。由于按此比例設(shè)計(jì)的造型十分美麗，因此稱為黃金分割，也稱為中外比。這是一個(gè)十分有趣的數(shù)字，我們以0.618來近似，通過簡單的計(jì)算就可以發(fā)現(xiàn)： 　　1/0.618=1.618(1-0.61/0.618=0.618 　　這個(gè)數(shù)值的作用不僅僅體現(xiàn)在諸如繪畫、雕塑、音樂、建筑等藝術(shù)領(lǐng)域，而且在管理、工程設(shè)計(jì)等方面也有著不可忽視的作用。 　　如果細(xì)心一些的人會(huì)發(fā)現(xiàn)，黃金分割無所不在，包括拍張照片人物放在畫面的黃金分割點(diǎn)上也是一種很好的構(gòu)圖方法。因此，黃金分割是一種公認(rèn)最優(yōu)秀的分割比例。 　　因此如果以一個(gè)950寬度的網(wǎng)頁為例。最合適的分割比例其實(shí)是。 　　左側(cè)：950×0.618=587 　　右側(cè)：950×0.382=363 　　個(gè)人覺得黃金比例分割比柵格化靠譜很多，但是如果是一個(gè)門戶網(wǎng)站，需要很多的小區(qū)塊分割的網(wǎng)站，你要考慮倒柵格化的化，即是為了以后再分割考慮的化，那兩列的比例也應(yīng)該是最接近的應(yīng)該是590像素和360像素。 　　為什么呢？ 　　590=14×(30+10)+30 　　360=9×(30+10) 　　其實(shí)這個(gè)比例已經(jīng)幾乎等于黃金分割。因此這樣的使用比較好。 　　同時(shí)，黃金分割不僅僅體現(xiàn)在網(wǎng)頁的柵格化中,還體現(xiàn)在行高（line-height）上，一個(gè)網(wǎng)站的文字怎么樣的距離才是最合適閱讀的呢？這個(gè)是我一個(gè)困擾了很久的問題。 　　結(jié)果黃金分割很好的解決了我的問題。用中文最常見的12px宋體和14px宋體為例: 　　最合適閱讀的行高是12像素：12×1.618=19.4PX 　　最合適閱讀的行高是14像素：14×1.618=22.7PX 　　再舉個(gè)實(shí)際的例子，在豆瓣上目前的行高度是150%，因此12像素宋體是18像素的行高。如果換用1.618的高度。我們對(duì)比一下： 　　非常明顯，下面是最合適閱讀的一種比例。 　　在一些比例問題上，就討論到這里把。歡迎各抒己見。 奈薇建站網(wǎng)致力于，讓每個(gè)中國人、每個(gè)中國企業(yè)都擁有自己的“官方網(wǎng)站”！ 回復(fù)此貼 單貼管理 修　改 刪　除 清理簽名 TOP

共0個(gè)回貼   分0頁

上一頁 / 下一頁   當(dāng)前第頁

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶