NAVER（???）是NHN公司下韓國著名門戶/搜索引擎網(wǎng)站，其Logo為一頂草帽，于1999年6月正式投入使用。

http://shopping.naver.com/? 在前不久對頁面整體進(jìn)行了改版，改版后的頁面較之以前的更加整潔，增加了層次感，張馳有度，將頁面整體的品質(zhì)感也做大的提升，從本期開始，我們將對韓國網(wǎng)站的一些細(xì)節(jié)進(jìn)行部分研究和學(xué)習(xí)，也做為和大家的一個討論，希望能夠一起從網(wǎng)站本身的視覺細(xì)節(jié)上多做研究，在設(shè)計時，能讓頁面更有節(jié)奏感

?……………………………………………………………………………………………………………………………………

第一期 柵格

我們先來看一下shopping.naver的首頁

從上面可以看出來，naver是按照一個固定的柵格來進(jìn)行擴(kuò)展的，那么他的區(qū)塊為多大呢？

……………………………………………………………………………………………………………………………………

對各個區(qū)塊進(jìn)行測量：

從上面測量出來的區(qū)塊大小來看，他都是按照一個210×290為標(biāo)準(zhǔn)的柵格塊來對各個版塊進(jìn)行區(qū)分

分為塊狀結(jié)構(gòu)后，不僅使整個頁面的區(qū)塊更加明顯，內(nèi)容更有條理和清晰外，同時還平衡了每塊內(nèi)容區(qū)的比重，無論在哪一屏，都擁有了強(qiáng)烈的一致性，同時，還有一個非常明顯的好處 ，那就是～～

……………………………………………………………………………………………………………………………………

我們來看一下小的分辨率下頁面的布局吧

是不是，感覺非常靈活和自然，無論是在哪種屏幕分辨率下，他都進(jìn)行了自然的重組和排序，而且對于內(nèi)容上也沒有絲毫的影響，不必考慮太多對于響應(yīng)式實現(xiàn)的過多準(zhǔn)備，表現(xiàn)非常棒?。?/p>

……………………………………………………………………………………………………………………………………

看完了shopping.naver的柵格，想必大家現(xiàn)在第一反應(yīng)就是舉個我們中國網(wǎng)站的例子。那就拿一淘網(wǎng)站來做例子，目前一淘網(wǎng)站特別是首頁，的確是沒有應(yīng)于任何柵格，只做了一些基準(zhǔn)的對齊和小范圍的柵格。通過對shopping.naver的柵格分析，一淘的網(wǎng)站柵格也做了shopping.naver同樣的標(biāo)準(zhǔn)化柵格實驗。

按照目前寬度為990的話，通過計算，會發(fā)現(xiàn)，190也同樣是一個神奇的數(shù)字，在990下，我們以naver寬度比例來假定一淘網(wǎng)站的柵格比例

……………………………………………………………………………………………………………………………………

以190×270為一個基本柵格單元格

我們先按照shopping.naver的版式，以990的寬度對etao.com進(jìn)行柵格劃分