為什麼一些很厲害的設計師用 Photoshop 時都喜歡拉網狀輔助線？
比如上圖這個。。小格子是1px大格子是10px。
渣前端表示百思不得其解，因為身邊的渣美工基本就幾條輔助線。。。
網格確保了設計結構的組織分明、結構明晰。我們可以通過網格系統更好的打造設計的信息層級，讓設計閱讀起來更具有韻律感。就跟編碼一樣，編碼需要有機的組織結構，而網頁設計的網格系統也是同樣的作用。
The Grid System 設計師用起來舒服，開發者用起來順手，當然，網格系統對於用戶也是大有裨益的。我一直在強調設計要注重用戶體驗——畢竟，客戶為你的內容消費，因此你要向他們提供有價值的體驗。使用堅固的網格系統會對你大有幫助，不但能保持設計的一致性，還能更好的引導用戶。
如果你的網站設計的已經很不錯，那麼可以通過網格來讓你的網站更進一步，讓用戶瀏覽起來更愉悅。但有一點需要注意，網格系統不意味著循規蹈矩，一味按照網格線來進行布局。就拿響應式設計來說，靈活性是其最大的特點——網格系統也應如此，網格系統的意義在於更靈活的幫助你有序布局，而不是限制你的設計。
什麼是網格系統？包含了水平和垂直方向的參考線，用來合理排列內容。
最基本的網格系統由一系列水平和垂直的、彼此交叉參考線構成，這些格線讓內容布局變得簡單起來，讓內容更具可讀性。
網格系統在紙媒中廣泛應用，有著悠長的歷史，引入到網頁設計後，出現了很多CSS網格框架，幾乎成了網頁設計的標準。利用網格系統可以更好的駕馭內容，保持一致性。均勻化的布局，一致性自然就有了，這樣導航功能就能更易於使用，好的用戶體驗也有了。——當然你也可以打破網格系統，用更好的布局取而代之，也可從網格系統中衍生出自己的布局方式。
科普一下960px網格系統（http://960.gs/） , 也稱 960柵格布局, 數年來作為網頁設計人員的最愛, 被用來搭建網站和設計網頁布局. 。該無疑是非常好的網格系統, 因為相當靈活. 它幫助網頁設計者快速地構造以下欄柵數目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 網格系統可能是現在最受歡迎的網格系統, 並已經在很多網站和設計模板上使用。如新浪、網易、搜狐等。
範例, the Gerstner, 收錄於 Gridset App
用戶看不到網格系統，他們也很少有人能夠了解網格系統的重要性。有句老話說的好，規矩就是用來被打破的。無需拘泥於網格系統的形式，我們使用網格系統只是為了理解布局的理念和手法，之後，我們便可以進行」革命」、創新。
網上可以找到很多合適的網格框架，當然，我們也可以自己創造。而且值得一提的是，設計網格框架是極佳的思維訓練，能讓我們更深層次的理解布局，更好的進行思維訓練，想的也會更遠。
使用網格系統的好處好處很多——設計、開發、管理網站都用得到。
網格系統的好處之一是，允許按比例設計，可以組織不同元素之間的平衡感。網格系統一般都很靈活，這樣就可以在需要時自由調整。PS中參考線
使用網格系統，讓你的設計具有正式感和規範感，還具有一種結構分明的設計感。這讓你設計起來更輕鬆，對於開發者來說，同樣如此。
網格系統的缺點有好就有壞，我們來談談缺點。
首先，很多人，尤其是對於新手來說——網格系統會阻礙他們的發揮創造。你會感覺你的靈感被束縛在這些條條框框裡面了。如果出現這種狀況，我建議你從網格系統中跳出來，用自己的創意去設計，按照自己的經驗來排布元素，然後再切出網格系統，想出一個二者結合的兩全其美的辦法，稍做調整，如果網格系統和你的原創設計出入過大，不能有效協調，那麼建議換一個網格系統，或者自己設計一個。
其次，網格系統用起來比較困難，有一定的學習成本，需要有一定的數學基礎，你得懂比例，會計算。對於那些數學不好的人來說，網格系統真的是太複雜了。但是我認為，剛開始雖然比較難以上手，但是習慣之後，你會得心應手，設計也將會更加出彩。
在設計中應用網格系統：幾條小建議：
在設計中使用重疊網格(網格線要可見）：
如果你能喜歡使用CSS網格框架，那就再好不過了，無論是PS還是其他什麼程序，將網格設置為疊加，然後鎖定。這樣設計的時候心中就有數了。
設置參考線：
有了重疊網格之後，設置分欄參考線。這樣就能夠更清楚的劃分邊界。
嘗試一下有限制的設計
最多16欄，6欄布局最明智。
運動員練習時都綁著沙袋還記得嗎，有限制的練習，之後再脫去舒服，跑的更快。
因此，可以試著自我約束一下，練習在限制的條件下進行布局，這樣你就能更專註於重點，進步更大。注意空間問題.
每一欄之間的寬度越大，留給元素的空間越富裕。然而不要忘記垂直方向上的空間布局。是緊密還是充滿留白？這需要按情況而定。
結論
現在你對網格系統已經了解了大概。
可以嘗試一下在設計前多做規劃，這樣網格系統用起來更得心應手，布局更流暢，多想想結構，多想想怎樣分欄的布局方式來規劃內容。網格系統是一種好的習慣，也是一種格式化的設計工具。有了它，你能更專註於內容呈遞，更專註於強調重點。
原文地址：webdesign優設網翻譯：@MartinRGB推薦ps裡面安裝的一個插件：GuideGuide
因為要對齊啊！！！！
因為大小要固定啊！！！！因為預先要設計好結構啊！！！！參考線和標尺都不用，你做什麼圖啊。。。。(ノ=Д=)ノ┻━┻看題主的兩張圖，應該是960 grid system，用吧，用後你會喜歡上他的
大量的輔助線能確保你的設計結構的組織分明、結構明晰（強迫症犯起來，1px都得對齊個半天XD）我不覺得用上1px的輔助線就很裝逼了...
等你能跳開不用了並能設計出有新意的網頁時，你也算是一名優秀的網頁設計師了~GL不一定要厲害的才用，我是菜鳥…我也用…何止PS，CDR/AI我都喜歡拉輔助線。對齊方便么。
網格布局是一種主流、簡單、而且很容易做出美觀效果的布局方式。
這個很重要，一個像素都不能差！絕對不行！
這就是那些設計師看起來很屌的原因。有時候評判一個設計師有多厲害，不是看他能多快做完一個設計，或者有多炫的技能，而恰恰是在他對細節的把握和處理，面面俱到，一絲不差
方便對齊，只看網格目測還是有偏差的，一般做頁面不是一屏就顯示完了，拖參考方便整個頁面都是對齊像素，自動吸附不能對齊的時候還可以手動對齊參考線，設計師都有強迫症，精確到1px這種事是必須的
我看很多人都講強迫症。我講一下我的愚見吧。
其實我認為道理很簡單：
1. 網格排版法。所謂網格排版法是比較傳統和保守的排版方法。我不知道現在國內的院校在教授排版時有沒有這一部分內容，通常國外的設計專業在涉及到排版部分時一定會講到網格排版的。具體講會有點複雜，大致就是講版面分割成若干等分，圖片和文字或插畫或者是留白部分是按照比例填充頁面的。你可以按等分均分，或按照黃金比例分割，總之是按照一定的規律進行嚴格的空間分割。
2. 由於APP或軟體的UI是你經常要面對的，比如PS吧。我們知道人眼是很敏銳的，人類對幾毫米的誤差都是非常敏感的。所以你必須要保證非常精確的布局和排版。這就是上面說的為什麼要用網格排版法了。當然了，所謂的網格排版這樣的方式是非常傳統的。我們在排版的時候不一定非要遵循這樣古老的方式，特別是在互動領域和移動互聯網領域網格排版法不一定適用。
以上是我的一些理解，沒有特別的依據，算是一種見解。如有不恰當的地方請指出，共勉。
謝謝拉參考線是最基本的。職業病養成了不拉參考線就會死，不對齊就會死，差一個像素就會死！
怒答！
做設計的強迫症！
為了對齊和參照！
為了結構和思路！
差一個像素都不行！
拉輔助線也得經過「看山」三個階段，看題主的圖估計已經是中期往後發展了。
是為了「對齊，至於為什麼要「對齊」，建議看這本書《寫給大家看的設計書》
設計課程裡面有一門叫柵格設計柵格設計
為了對齊，然後有個清晰並被量化的結構。有時候也可以用自動對齊的功能代替，但是自動對齊並不局限於跟一個形狀的邊對齊，還有很多不一樣的參照部分，所以東西多了之後就容易看錯。這個時候用網狀輔助線就保險的多了。
是很重要的內在細節就像地基，歪歪扭扭的，你覺得做出來的建築會好看么
注重細節就能給用戶更多更好的體驗。柵格線就是為了細節而生的吧。 O(∩_∩)O哈哈哈~
設計其來會精確很多，如果沒有的話很容易產生不協調感
ps渣渣一枚強迫症犯起來，不拉輔助線真的感覺會死啊！！！為了對齊會被自己糾結死的自從拉了輔助線，再也不用擔心對齊這個問題了
推薦閱讀：
※怎樣可以成為頂級服裝設計師？
※已經帶設計師去過建材店之後，怎麼要到更低的折扣，或者說怎麼繞過設計師？
※如果讓你來設計知乎的首頁 feed，你會怎麼設計？
※做景觀設計師熬個5、6年就真的能賺錢嗎?
※如何帶動設計小團隊的氛圍？