基於網格系統塑造獨特的版式——櫟工坊評改過程
最近自己參與評改網友作業分享，設計選圖感覺很贊，版式有自己的思考。但是擺放有些失控，因為沒有利用到基礎網格的功能。
原來問題如下
那個男人12月12日 提問:老師您好，仰慕已久。我主要是碰到了一下問題：▍在製作網頁的時對於網頁交互的體驗不夠了解，往往是做的很平。
▍優秀網頁應該具備那幾點呢？來證明一個網頁作品。▍網頁在製作過程中對於後台優化的問題怎麼盡量做到最好，本人略懂代碼，在平時學習中經常聽到在製作網頁的時候要考慮到後台優化問題。
問題回答：
▍交互體驗，這類型的網頁可以嘗試用視察滾動處理
▍優秀網頁整體統一，每個模塊都自己細節，包括視覺和交互細節。
▍根據程序員的思維製作源文件，最直觀的就是圖層的命名。還有每個模塊圖片比例尺寸的問題，盡量做到一致。
左/原圖 右/效果圖
那如何改進呢？
▍利用網格柵格系統，規範整體設計
▍圖層編組要有邏輯規範▍視覺平衡，每個畫面處理都應該是感覺是平衡
小提示：
對於柵格系統，我們利用到PS參考輔助線插件神器GuideGuide。他能根據畫布，畫板，所選圖層或您的選擇添加輔助線，快速生成滿足不同場景的參考線。修改流程
因為是特殊構造的網頁，那麼，為了保持在特立中尋找統一的特點。
設計最好遵循在完整的網格系統進行，方便調整時有規範可尋。
為了保證快速生成網格系統
我們會用到Photoshop插件GuideGuide，設置時注意劃分的數量以及每個組件的間距即可。
一般，自己習慣將此劃分為20等分，每個間距是8.
當然更理想的狀態如上，將整個頁面寬度劃分為12等分。
這一套體系，基本沿用了現有前端框架常用的柵格系統，即12等分系統。譬如Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
Photoshop插件GuideGuide
每個元素都遵循柵格系統對齊
主要是物體的左側和右側元素間交叉對齊針對圖層進行調整
設計師成不成熟的標誌，有一個細節可以看出來，就是對圖層的處理。
就像程序員的代碼為了時別人看懂，都會做好注釋工作。
最後調整重點都是視覺平衡。
物理上的平衡和感知上的平衡是不一致。後者更強調感覺，就如同下圖，物理層面上，左右方塊大小質量都是一致，而但我們觀察時會發現，明顯右側的方塊顯得更重要。
這是由於視覺神經在作怪，此時如果只是單純以數值為調整基礎，就會顯得很無力。
一般我們會做這樣的調整：
- 將右側方塊往天平中間挪動
- 將左側方塊的藍色調亮一點
同樣，在具體處理每個畫面時，也是基於這點考慮。
譬如上圖，我們觀察發現左側是盆栽整體偏暗，即視覺認知上是顯得比較重。
此時調整的策略：
- 右側添加一塊差不多重量的暗色平衡視覺
- 左側盆栽的亮度稍微提高或往版面的中間線靠攏
如果你對我這次講演感興趣
可以移步到如下網址觀看完整的講解過程：http://www.xuehui.com/pinggai/239推薦閱讀：
