很多人做網站圖文設計的時候，總覺得自己的作品不夠美觀、不夠協調，其實問題可能就出在這個“比例”商，而黃金分割，就是幫你搞定比例的“萬能工具”，大家不用懂復雜的公式，簡單的套用就能讓圖文搭配更舒服、更顯專業。今天就帶大家一起來詳細的了解一下。

　　先簡單說下黃金分割：核心就是把一個整體分成兩部分，較大的部分和整體的比例，等于較小部分和較大部分的比例，這個比值比值大概是0.618。咱們不用死記數值，記住“6:4”左右的比例感就行，這個比例通常會比較符合人的視覺習慣，看久了不疲勞，還會覺得協調自然。

　　1. 圖片尺寸與布局：

　　按照黃金分割比例，網站里的Banner圖、產品圖、資訊配圖，都能用到黃金分割。

　　比如首頁Banner，不用做死板的正方形或1:1比例，按16:9（接近黃金分割衍生比例）來做，這樣視覺延伸感更強；

　　如果是圖文搭配區域，比如資訊詳情頁，圖片占比60%-70%，文字占比30%-40%，重點圖片突出，文字輔助說明，用戶一眼就能抓住核心信息。

　　還有產品列表頁的卡片設計，圖片區域和文字描述區域也可以按黃金分割劃分，圖片區域稍大，文字區域緊湊，這樣既不遮擋產品細節，還能讓賣點清晰可見。

　　2. 文字排版：

　　用黃金分割找節奏，文字是網站的核心信息載體，排版亂了用戶就不想看。比如標題和正文的大小比例，標題字號如果是24px，正文就用14-16px，這個比例接近0.618，層級感很明顯，用戶能快速區分標題和內容；還有行間距，正文行間距設為字號的1.5-1.6倍，也是黃金分割的延伸應用，讀起來不擁擠、不費力。

　　另外，頁面文字區域的寬度，也可以按黃金分割來定，比如頁面總寬度1200px，文字區域就設為740px左右（1200×0.618），剩下的空間留作邊距，避免文字拉得太寬導致閱讀疲勞。

　　3. 圖文組合：

　　按黃金分割定焦點。有時候網站需要在一張圖上疊加文字或按鈕，這時候黃金分割能幫你找對“視覺焦點”。

　　比如在產品宣傳圖上放賣點文字，別放在正中間，而是放在圖片的黃金分割點上：比如左上、右下這兩個位置（把圖片想象成一個矩形，畫兩條橫線和兩條豎線，按黃金分割比例劃分，交叉點就是焦點）。這樣的布局能引導用戶的視線先落到核心賣點上，再擴散到整個圖片，讓信息傳遞更高效。

　　最后提醒一下大家：

　　黃金分割是參考，不是硬規定，咱們也不用精準到小數點后三位去計算，只要把握“6:4”的比例感就行。比如有時候也要根據內容需求，把比例調整成7:3，只要視覺上協調，也完全可以。主要就是用戶體驗好就行。

　　其實黃金分割的本質，就是讓設計“順應視覺規律”。不管是圖片尺寸、文字排版，還是圖文組合，按這個思路來設計，相信都能幫助網站提升質感，用戶瀏覽起來也更舒服。