珠海市天惠設計制作有限公司，成立于1996年8月,是為拓展中國Internet領域應用而專門成立的高新技術企業，是企業電子商務術服務和解決方案綜合服務提供商。
設計中存在很多關于留白的只是，零零散散在網上也看過很多，總感覺比較零散，自己根據自己的感覺，重新把留白的原理和一些技巧系統的歸納整理了以下，也對自己的一個提升。分享給大家。本文章由沒位道博主Chuckie Chang分享整理, 歡迎大家交流。
英文：Whitespace
感知概念：歸結于web網頁設計中的負空間，它將web網頁設計中的圖形、文字、行列、圖片和其它元素合理的布局到整個頁面空間里，使其顯得優雅和諧并不破壞原有的空間結構，屬于一種空間關系。
網頁中留白的運用方式 ：How to Use Whitespace
1.保持導航和內容的清晰流暢。
留白不代表一定要用白色，而是預留出一些范圍來組織頁面空間中的元素，組織頁面中的細節： 導航、頁眉頁腳、圖像、文字、列表、LOGO、圖片等
如圖所示：拿google首頁和google產品做一個對比，同一個空間下的logo、導航、文字的清晰元素布局
web網頁設計 Web優化 網站優化 網站留白設計
web網頁設計 Web優化 網站優化 網站留白設計
2. 增強文字和圖片的可讀性。
研究用戶，設計師即使是創建一些簡單簡潔的設計，其過程也是非常復雜的。
如圖所示：這是國內外最知名的專注寫作的社區，標題與摘要，側邊欄與正文區的區隔
web網頁設計 Web優化 網站優化 網站留白設計
web網頁設計 Web優化 網站優化 網站留白設計
3. 建立平衡和諧的布局。
網格布局是貫穿整個web網頁設計的，網格設計在美國視覺設計中是一門深入的學科，保持各種網格的輕重，平衡設計模塊。
如圖所示：彈窗與正文的網格平衡，網格系統的黃金比例的平衡
web網頁設計 Web優化 網站優化 網站留白設計
379c6167f6e399b1d77809ea
2
web網頁設計 Web優化 網站優化 網站留白設計
4. 減少視覺疲勞。
充分利用色彩、光、影來適配人的視覺系統，減少疲勞，調配感官色。
如圖所示：使用設計師網站和谷歌音樂做一個對比，寬屏下的視覺效果和作品hover時的文字按鈕間距大小差異, 谷歌音樂內容和純色底色，頭部底部的距離差異
web網頁設計 Web優化 網站優化 網站留白設計
web網頁設計 Web優化 網站優化 網站留白設計
5. 能夠給元素的藝術表現提供可持續的空間。
倘若你孤單一人，站在一個2平米的石板上和站在一個10平米的石板上，在10平米的范圍內你的周圍可以放置音響，你可以跳舞(哈哈，抱歉，我就是熱于跳舞的才打這個比方)，在2平米的石板上你可以拿個麥克風喊麥，可以玩倒立。留白也可以說能夠預留儲存空間，便于擴展和利用。
如圖所示：人的活動空間，文字的表達空間
web網頁設計 Web優化 網站優化 網站留白設計
web網頁設計 Web優化 網站優化 網站留白設計
總之，我們分析留白的時候，需要引入原生的一些原理，會比較容易理解。比如美術中的透視，色彩關系，空間關系，比如網格設計理論，比如web網頁設計中的中英文字體規范，分辨率，安全寬度，首屏高度規范。通過這些原生的原理，我們能更好的把握設計布局和設計細節。OK!希望對大家有幫助。本文章由沒位道博主Chuckie Chang分享整理, 歡迎大家交流。
我們的承諾：
天惠公司將一如既往，秉承專業服務精神，一切從客戶利益出發，為您率先建站,令您把握先機，長遠的眼光定使您在商海搏擊中穩操勝券。
