最近自己參與評改網(wǎng)友作業(yè)分享雏婶，設(shè)計選圖感覺很贊，版式有自己的思考白指。但是擺放有些失控留晚，因為沒有利用到基礎(chǔ)網(wǎng)格的功能。
原來問題如下
那個男人12月12日 提問:老師您好告嘲，仰慕已久错维。我主要是碰到了一下問題：
▍在制作網(wǎng)頁的時對于網(wǎng)頁交互的體驗不夠了解，往往是做的很平橄唬。
▍優(yōu)秀網(wǎng)頁應(yīng)該具備那幾點呢赋焕？來證明一個網(wǎng)頁作品。
▍網(wǎng)頁在制作過程中對于后臺優(yōu)化的問題怎么盡量做到最好仰楚，本人略懂代碼隆判，在平時學(xué)習(xí)中經(jīng)常聽到在制作網(wǎng)頁的時候要考慮到后臺優(yōu)化問題。
問題回答：
▍交互體驗僧界，這類型的網(wǎng)頁可以嘗試用視察滾動處理
▍優(yōu)秀網(wǎng)頁整體統(tǒng)一侨嘀，每個模塊都自己細(xì)節(jié)，包括視覺和交互細(xì)節(jié)捂襟。
▍根據(jù)程序員的思維制作源文件咬腕，最直觀的就是圖層的命名。還有每個模塊圖片比例尺寸的問題葬荷，盡量做到一致涨共。
那如何改進(jìn)呢纽帖？
▍利用網(wǎng)格柵格系統(tǒng)，規(guī)范整體設(shè)計
▍圖層編組要有邏輯規(guī)范
▍視覺平衡煞赢，每個畫面處理都應(yīng)該是感覺是平衡
小提示：
對于柵格系統(tǒng)抛计，我們利用到PS參考輔助線插件神器GuideGuide。
他能根據(jù)畫布照筑，畫板吹截，所選圖層或您的選擇添加輔助線，快速生成滿足不同場景的參考線凝危。
修改流程
因為是特殊構(gòu)造的網(wǎng)頁波俄，那么，為了保持在特立中尋找統(tǒng)一的特點蛾默。
設(shè)計最好遵循在完整的網(wǎng)格系統(tǒng)進(jìn)行懦铺，方便調(diào)整時有規(guī)范可尋。
為了保證快速生成網(wǎng)格系統(tǒng)
我們會用到Photoshop插件GuideGuide支鸡，設(shè)置時注意劃分的數(shù)量以及每個組件的間距即可冬念。
一般，自己習(xí)慣將此劃分為20等分牧挣，每個間距是8.
當(dāng)然更理想的狀態(tài)如上急前，將整個頁面寬度劃分為12等分。
這一套體系瀑构，基本沿用了現(xiàn)有前端框架常用的柵格系統(tǒng)裆针，即12等分系統(tǒng)。
譬如Bootstrap 提供了一套響應(yīng)式寺晌、移動設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)世吨，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列呻征。
每個元素都遵循柵格系統(tǒng)對齊
主要是物體的左側(cè)和右側(cè)元素間交叉對齊
針對圖層進(jìn)行調(diào)整
設(shè)計師成不成熟的標(biāo)志耘婚，有一個細(xì)節(jié)可以看出來，就是對圖層的處理陆赋。
就像程序員的代碼為了時別人看懂边篮，都會做好注釋工作。
最后調(diào)整重點都是視覺平衡奏甫。
物理上的平衡和感知上的平衡是不一致。
后者更強(qiáng)調(diào)感覺凌受，就如同下圖阵子，物理層面上，左右方塊大小質(zhì)量都是一致胜蛉，而但我們觀察時會發(fā)現(xiàn)挠进，明顯右側(cè)的方塊顯得更重要色乾。
這是由于視覺神經(jīng)在作怪，此時如果只是單純以數(shù)值為調(diào)整基礎(chǔ)领突，就會顯得很無力暖璧。
一般我們會做這樣的調(diào)整：
- 將右側(cè)方塊往天平中間挪動
- 將左側(cè)方塊的藍(lán)色調(diào)亮一點
同樣，在具體處理每個畫面時君旦，也是基于這點考慮澎办。
譬如上圖，我們觀察發(fā)現(xiàn)左側(cè)是盆栽整體偏暗金砍，即視覺認(rèn)知上是顯得比較重局蚀。
此時調(diào)整的策略：
- 右側(cè)添加一塊差不多重量的暗色平衡視覺
- 左側(cè)盆栽的亮度稍微提高或往版面的中間線靠攏
如果你對我這次講演感興趣
可以移步到如下網(wǎng)址觀看完整的講解過程：
http://www.xuehui.com/pinggai/239
