企業(yè)網(wǎng)站必不可少的一個欄目或者頁面，就是產(chǎn)品中心。而產(chǎn)品中心最為常見的設(shè)計方式就是“圖文并排”“產(chǎn)品列表”。簡單來說，打開產(chǎn)品中心，我們常?？吹胶芏喈a(chǎn)品圖片排列著，每張圖片下方有文字介紹。
關(guān)于產(chǎn)品頁面，最大的問題就是“凌亂”，即便是一線商城也存在這樣的問題。如何從設(shè)計層面想辦法，讓企業(yè)網(wǎng)站的“圖文列表”看起來更為整齊呢？



為何圖文列表會很“亂”？

為什么軍人的隊列會給我整齊劃一的感受呢？秘訣在于顏色（統(tǒng)一的服裝）、動作（統(tǒng)一的動作）、形狀（身高、形體）、方陣（人數(shù)）。
同理，而“很亂”，無非是顏色、動作、形狀、數(shù)量的不統(tǒng)一。顏色方面，不同的產(chǎn)品外觀顏色不同的；動作方面，不同產(chǎn)品拍攝視角不同，呈現(xiàn)出現(xiàn)的視覺效果不同；形狀，有的企業(yè)官網(wǎng)產(chǎn)品大小不一；數(shù)量方面，頁面呈現(xiàn)的產(chǎn)品數(shù)量不等。
綜上，大多數(shù)的網(wǎng)站產(chǎn)品列表會給人“很亂”的感受。
網(wǎng)站設(shè)計方面，能不能幫幫忙，讓產(chǎn)品列表頁面看起來更為整齊劃一呢？

讓產(chǎn)品圖文列表好看的辦法

辦法一：背景
產(chǎn)品圖片可以是有背景層的，也可以是透明背景的。無論是那一種背景，都應(yīng)該追求統(tǒng)一。要么全是透明背景，要么就是有背景層的，并且背景層最好設(shè)置成為統(tǒng)一的顏色。避免有的是透明的，有的是有背景層的。當(dāng)然，將所有的產(chǎn)品圖片設(shè)置成為統(tǒng)一背景，也是需要美工勞動的。
辦法二：構(gòu)圖
構(gòu)圖應(yīng)該追求統(tǒng)一。這也是電商平臺的做法。例如服飾商鋪，概覽頁面的構(gòu)圖可能是一致的，都是“模特+產(chǎn)品”的構(gòu)圖，亦或者是“單獨產(chǎn)品+元素”的構(gòu)圖。當(dāng)然，構(gòu)圖的統(tǒng)一，需要對攝影提出要求。
辦法三：字?jǐn)?shù)
為了要讓整個頁面看起來整齊，需要在產(chǎn)品概覽頁面限制每一個圖片的文字說明。新聞網(wǎng)站就遵循了這一規(guī)則，新聞的概覽頁面就是“圖片+限制字?jǐn)?shù)”。
辦法四：小圖
適當(dāng)縮小呈現(xiàn)的圖片，而增加留白，也是讓整個頁面看起來更加規(guī)整的方法。因為產(chǎn)品列表頁面“雜亂”，主要是圖片的不一致，而縮小圖片，就消減了導(dǎo)致“雜亂”的因子。
辦法五：分割
可以使用橫線、豎線、條塊等對整個頁面進行分割和隔開，如此，會讓整個頁面看起來更為整齊。
辦法六：少字
有的圖文組合，還可能呈現(xiàn)其它內(nèi)容，例如“評論”“購買數(shù)量”“性能”等等，這類最好能夠在詳情頁進行呈現(xiàn)，而不要呈現(xiàn)在概覽頁面。
辦法七：要素
產(chǎn)品頁面的圖片設(shè)計三要素最好能夠統(tǒng)一，或者不至于相差太多，包括明暗度、飽和度、色相。
辦法八：例外
如果有的產(chǎn)品沒有圖片，或者圖片無法融入整個頁面，為了讓整個頁面看起來更為整齊，可以舍棄圖片，而選擇一個“通用”圖片進行展示。