網(wǎng)頁(yè)設(shè)計(jì)的分割布局秘密

“簡(jiǎn)潔是終極的復(fù)雜.——萊昂納多·達(dá)·芬奇”

你能看到兩等分如何體現(xiàn)出一種良好的視覺(jué)層次。首先，頂部的“即將來(lái)臨”的紅色緞帶很引人注目。其次，標(biāo)志也很鮮明。現(xiàn)在，跟隨我之前提到的“之”字形，訪(fǎng)問(wèn)者看到右半部分的圖片滑塊，最后，到達(dá)電子郵件提交表格。

現(xiàn)在讓我們來(lái)看一下，分割布局在一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的作品集頁(yè)面中能起到多大作用？設(shè)計(jì)作品集頁(yè)面的目的是為了向潛在顧客快速展示你作品的主體部分。隨著現(xiàn)在這個(gè)產(chǎn)業(yè)如此飽和，顧客的選擇有很多很多，為什么他們要付錢(qián)給你呢？因此，一個(gè)很棒的第一印象將會(huì)在你的事業(yè)方向中起到?jīng)Q定性作用。讓我們看看，我們可以做些什么?

上圖的布局被劃分為兩等分，但是并不遵循我之前提到的“之”字形原則。

雖然它看起來(lái)是個(gè)不錯(cuò)的布局并且易于觀看，但是在看完前兩塊元素后就會(huì)讓人感到非常沉悶死板。打破這樣的視覺(jué)流向并且增添視覺(jué)趣味性將會(huì)讓之有所改變。不僅如此，當(dāng)你試著去瀏覽上面這種布局時(shí)，你的眼睛會(huì)最先看到第一張圖片，然后跳轉(zhuǎn)到第二塊的文本上。然而你的訪(fǎng)問(wèn)者并沒(méi)有打算在這個(gè)階段閱讀，因此，他們會(huì)跳轉(zhuǎn)到其它的點(diǎn)，或者徹底離開(kāi)你的頁(yè)面！

但是如果你做了這樣一個(gè)簡(jiǎn)單的調(diào)整呢？

變得更生動(dòng)有趣了，對(duì)吧？簡(jiǎn)單的互換每個(gè)項(xiàng)目里文本和圖片的位置來(lái)增加視覺(jué)上的生動(dòng)性，這樣，這種一致性就不會(huì)讓你的用戶(hù)感覺(jué)到無(wú)聊了。同時(shí)，你還能在“之”字模型后放置一個(gè)行為召喚按鈕。

這個(gè)“聯(lián)系我”按鈕將會(huì)有更大的機(jī)會(huì)被注意到，并且被你更多的用戶(hù)點(diǎn)擊（為什么不進(jìn)行一個(gè)A/B測(cè)試去再次驗(yàn)證一下？）

“設(shè)計(jì)是一項(xiàng)計(jì)劃，它將所有元素以最好的方式組織起來(lái)去完成一個(gè)特定的目標(biāo)。——查爾斯·埃姆斯”