1.3 電商視覺設(shè)計黃金構(gòu)圖法

在現(xiàn)實生活與自然界中，我們隨處可見幾何圖形的存在，簡單的三角形、正方形、長方形和圓形，甚至幾根線條就可以組成很多有趣的圖形，也很符合現(xiàn)代審美的要求，適當?shù)漠嬅媲懈钅芙o頁面帶來動感與節(jié)奏感。在頁面中加入幾根線條或幾個塊面，就能起到意想不到的效果。

好的頁面構(gòu)圖能夠讓頁面設(shè)計更加出彩，也能讓設(shè)計工作事半功倍。說起構(gòu)圖原理，大致可以分為以下幾種：對稱切割構(gòu)圖法、組合切割構(gòu)圖法、整體場景構(gòu)圖法、多重切割構(gòu)圖法、簡單切割構(gòu)圖法、流程構(gòu)圖法、放射構(gòu)圖法、物體輪廓構(gòu)圖法等。下面將分別對其進行簡要介紹。

1.3.1 對稱切割構(gòu)圖法

對稱切割構(gòu)圖法的前提一般是將內(nèi)容分為對立的兩部分，將整個頁面一分為二，內(nèi)容劃分明確。這種設(shè)計具有視覺沖擊力，可以使畫面具有平衡不失重的效果，如圖1-8所示。

1.3.2 組合切割構(gòu)圖法

組合切割構(gòu)圖法是通過集中而有規(guī)律的排列，從整體上抓住人們的視覺，讓整個頁面設(shè)計更具有立體感。這種構(gòu)圖方式適合每個區(qū)塊中的內(nèi)容屬于平級關(guān)系產(chǎn)品的展示，用這種組合的排列能夠保持各種內(nèi)容的并列關(guān)系，也能讓布局更具創(chuàng)意，如圖1-9所示。

1.3.3 整體場景構(gòu)圖法

整體場景構(gòu)圖法專題內(nèi)容不多，適用于促銷、節(jié)日、活動等頁面。整體場景構(gòu)圖法可以將目標客戶快速地帶入到頁面氛圍中，使寶貝信息更加精準、流暢。

在設(shè)計這種頁面時，設(shè)計人員的頭腦中對專題內(nèi)容要有畫面感，首先搭建大的畫面關(guān)系，再往里面添加細節(jié)和內(nèi)容。切記場景不要搶了內(nèi)容的視覺焦點，在適當?shù)臅r候可以做些減法，如圖1-10所示。

1.3.4 多重切割構(gòu)圖法

多重切割構(gòu)圖法，其不規(guī)則的構(gòu)圖穩(wěn)定而銳利，干凈的排版易于識別，讓單一的頁面變得生動，復(fù)雜的頁面變得時尚，能夠避免畫面出現(xiàn)生硬感，不宜產(chǎn)生審美疲勞，如圖1-11所示。不同的形狀和排列，呈現(xiàn)出來的視覺效果也不一樣。這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時尚感、科技感與鋒利感覺的專題。

1.3.5 簡單切割構(gòu)圖法

簡單切割構(gòu)圖法使用簡單的線條或圖案整齊地分割整個頁面，使畫面變得有趣、生動起來，內(nèi)容區(qū)域也能得到有效的劃分。這類構(gòu)圖方式對內(nèi)容沒有過多的要求，可以隨意安排，具體排版可根據(jù)內(nèi)容來處理。這類構(gòu)圖法同樣具有不可忽視的視覺沖擊力，如圖1-12所示。

1.3.6 流程構(gòu)圖法

如果設(shè)計創(chuàng)意需要按照循序漸進的方式展現(xiàn)產(chǎn)品，不妨采用流程構(gòu)圖法。千言萬語不如一張圖，運用這種構(gòu)圖方式能夠?qū)⒉襟E、關(guān)系、各個節(jié)點及整體流向展示清楚，再配合圖片，一個枯燥的流程瞬間變得個性十足，用戶瀏覽起來簡單明了，且充滿了趣味性，如圖1-13所示。

1.3.7 放射構(gòu)圖法

放射構(gòu)圖法能展示出由一個中心點向四周擴散的效果，起到導(dǎo)向的作用，讓整體頁面呈現(xiàn)出立體與空間感，畫面沖擊力強，富有動感。需要注意的是，放射狀的排版不太適合文字閱讀，要注意文字排版的方式。在文字數(shù)量較少的情況下可以選擇這種構(gòu)圖，其效果如圖1-14所示。

1.3.8 物體輪廓構(gòu)圖法

物體輪廓構(gòu)圖法主要適用于活動、節(jié)日或新品創(chuàng)意等專題。根據(jù)專題的主要內(nèi)容，從整體上構(gòu)建一個邊界或外形線，形成一個大的輪廓，將內(nèi)容巧妙地填充進去。

物體輪廓構(gòu)圖法能讓整體頁面更加生動、形象、有趣，如圖1-15所示。需要注意的是，設(shè)計時要將形狀進行輪廓化，加以強調(diào)突出。主體不需要太抽象，應(yīng)舍棄一些煩瑣的、次要的元素，以免影響用戶閱讀內(nèi)容。

在視覺設(shè)計越來越注重個性、趣味性及視覺沖擊力的今天，專題頁面的構(gòu)圖也已經(jīng)千變?nèi)f化，以上只是列舉出了其中較為常見的一部分。不同的主題，不同的內(nèi)容，構(gòu)圖排版的出發(fā)點也不盡相同。上面列舉出來的方法也可以混合搭配使用。

在構(gòu)思時可以大膽嘗試，先考慮內(nèi)容和風(fēng)格，確定構(gòu)圖，再往里面添加內(nèi)容。應(yīng)充分考慮到內(nèi)容的排版，盡量做到讓一個專題有大創(chuàng)意的同時又兼顧小細節(jié)，實現(xiàn)整體的和諧與統(tǒng)一。