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

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

　　1. 圖片尺寸與布局：

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

　　比如首頁(yè)Banner，不用做死板的正方形或1:1比例，按16:9（接近黃金分割衍生比例）來(lái)做，這樣視覺(jué)延伸感更強(qiáng)；

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

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

　　2. 文字排版：

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

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

　　3. 圖文組合：

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

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

　　最后提醒一下大家：

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

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