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

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

　　1. 圖片尺寸與布局：

　　按照黃金分割比例，網(wǎng)站里的Banner圖、產(chǎn)品圖、資訊配圖，都能用到黃金分割。

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

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

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

　　2. 文字排版：

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

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

　　3. 圖文組合：

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

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

　　最后提醒一下大家：

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

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