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

學(xué)習(xí)

總結(jié)：那么，我們學(xué)到了什么呢？·用戶僅在三秒內(nèi)就能對(duì)你的頁(yè)面做出判定·為了吸引訪問(wèn)者的注意力并且降低頁(yè)面跳出率，我們應(yīng)該試著讓我們的頁(yè)面布局“瀏覽起來(lái)友好”·就在中心位置劃分你的布局，并且將重要元素調(diào)整到“之”字形的端點(diǎn)上，以確保你的訪問(wèn)者在瀏覽后記住更多的細(xì)節(jié)本文僅僅是一個(gè)善意的提醒，我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)，不應(yīng)忘記使用基本布局和基本設(shè)計(jì)方法。實(shí)際上，如果應(yīng)用合適的話，這將會(huì)提高你的轉(zhuǎn)換率

“簡(jiǎn)潔是終極的復(fù)雜.——萊昂納多·達(dá)·芬奇”??你能看到兩等分如何體現(xiàn)出一種良好的視覺(jué)層次。首先，頂部的“即將來(lái)臨”的紅色緞帶很引人注目。其次，標(biāo)志也很鮮明�，F(xiàn)在，跟隨我之前提到的“之”字形，訪問(wèn)者看到右半部分的圖片滑塊，最后，到達(dá)電子郵件提交表格�，F(xiàn)在讓我們來(lái)看一下，分割布局在一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的作品集頁(yè)面中能起到多大作用？設(shè)計(jì)作品集頁(yè)面的目的是為了向潛在顧客快速展示你作品的主體部分。隨著現(xiàn)在這個(gè)產(chǎn)業(yè)如此飽和，顧客的選擇有很多很多，為什么他們要付錢給你呢？因此，一個(gè)很棒的第一印象將會(huì)在你的事業(yè)方向中起到?jīng)Q定性作用。讓我們看看，我們可以做些什么?上圖的布局被劃分為兩等分，但是并不遵循我之前提到的“之”字形原則。雖然它看起來(lái)是個(gè)不錯(cuò)的布局并且易于觀看，但是在看完前兩塊元素后就會(huì)讓人感到非常沉悶死板。打破這樣的視覺(jué)流向并且增添視覺(jué)趣味性將會(huì)讓之有所改變。不僅如此，當(dāng)你試著去瀏覽上面這種布局時(shí)，你的眼睛會(huì)最先看到第一張圖片，然后跳轉(zhuǎn)到第二塊的文本上。然而你的訪問(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ì)讓你的用戶感覺(jué)到無(wú)聊了。同時(shí)，你還能在“之”字模型后放置一個(gè)行為召喚按鈕。這個(gè)“聯(lián)系我”按鈕將會(huì)有更大的機(jī)會(huì)被注意到，并且被你更多的用戶點(diǎn)擊（為什么不進(jìn)行一個(gè)A/B測(cè)試去再次驗(yàn)證一下？）“設(shè)計(jì)是一項(xiàng)計(jì)劃，它將所有元素以最好的方式組織起來(lái)去完成一個(gè)特定的目標(biāo)�！�—查爾斯·埃姆斯”

將分割布局應(yīng)用到設(shè)計(jì)中??讓你的設(shè)計(jì)和布局兼容“之”字形非常簡(jiǎn)單。實(shí)際上，這和將你的頁(yè)面分為兩等份一樣簡(jiǎn)單！兩等分的效果很好，因?yàn)椤爸�”字形的端點(diǎn)或多或少能對(duì)齊到這兩等分的中心。疊加使用，它們能很好的相互呼應(yīng)。將重要元素放置在你網(wǎng)頁(yè)中“之”字形的紅色端點(diǎn)處，這就是分割布局或者說(shuō)1/2布局包含的基本理念。最近，我致力于設(shè)計(jì)一個(gè)“即將來(lái)臨”的登陸頁(yè)面。我嘗試了多種布局，但是沒(méi)有一種效果讓我滿意。我?guī)缀踉嚵嗣恳环N——比如柵格化，黃金分割比，F(xiàn)型布局等。但是僅當(dāng)我將頁(yè)面兩等分時(shí)，那一刻有一種強(qiáng)烈的“我找到了！”的感覺(jué)。解決的辦法竟如此簡(jiǎn)單！它看起來(lái)優(yōu)雅而整潔，并且提醒了我一個(gè)重要的事實(shí)：簡(jiǎn)單不一定是壞事。你看到微軟的新標(biāo)志了嗎？

眼動(dòng)和“之”字形從雅虎的眼動(dòng)追蹤研究可以發(fā)現(xiàn)：·人們通過(guò)掃視頁(yè)面的主要部分去判定這是個(gè)什么網(wǎng)站以及他們是否想在這多呆一會(huì)�！び脩魞H僅在三秒內(nèi)就會(huì)對(duì)頁(yè)面做出決定·如果用戶決定留在頁(yè)面，他們會(huì)最關(guān)注屏幕頂部的內(nèi)容。網(wǎng)站的用戶總是很匆忙，他們有其它的事情要做，你不要指望他們會(huì)停下來(lái)去欣賞你網(wǎng)站的美學(xué)。雖然良好的美學(xué)設(shè)計(jì)是非常重要的，但是這并不能完全激發(fā)訪問(wèn)者去采取行動(dòng)——去點(diǎn)擊“立即購(gòu)買”或者“了解更多”按鈕。我們不能去埋怨這些用戶。永遠(yuǎn)記住，當(dāng)你想查詢什么東西時(shí)?你會(huì)急著打開(kāi)谷歌的第一個(gè)搜索結(jié)果并且火速看完，或者更確切的說(shuō)，是粗略的瀏覽整個(gè)頁(yè)面。大多數(shù)時(shí)間，你甚至是毫不留意就將鼠標(biāo)滾動(dòng)到了頁(yè)面底部。經(jīng)過(guò)這個(gè)階段后，如果你認(rèn)為這個(gè)頁(yè)面值得你花時(shí)間，你就會(huì)又回到頁(yè)面頂端并且著實(shí)花精力去閱讀和關(guān)注。那么，用戶初始瀏覽的目的究竟是什么呢？就是在你最初掃視頁(yè)面時(shí)，捕捉到盡可能多的信息。如果我們以某種方式“制定”這種瀏覽模式，應(yīng)該就能夠得到更多訪問(wèn)者的關(guān)注。通過(guò)觀察大量網(wǎng)站的熱圖，我得出了一個(gè)共通的趨勢(shì)。在上圖中你會(huì)發(fā)現(xiàn)，你毫不費(fèi)勁就能看到那些紅點(diǎn)。奇怪的是，就經(jīng)驗(yàn)看來(lái)，相比于斜線而言，我們的視線能更輕易的跟隨水平線移動(dòng)——因?yàn)槲覀兌际茄刂�直線閱讀。但請(qǐng)注意，我討論的是在初始瀏覽階段，并不是你關(guān)注網(wǎng)站每個(gè)細(xì)節(jié)時(shí)的階段。每當(dāng)你不是很專注時(shí)，你的視覺(jué)流向很自然的就會(huì)呈現(xiàn)為“之”字形。除非有對(duì)比度更高或者更重要的元素“召喚”你，不然你的視線就將會(huì)遵循上圖的模式。你還會(huì)發(fā)現(xiàn)，這種模式看起來(lái)和F型布局非常相似，并且用戶會(huì)在紅色端點(diǎn)有短暫的停留。你的大腦會(huì)在這些“暫停點(diǎn)”生成快照。在之字形布局里，在這些“暫停點(diǎn)”布置一些包含重要信息的元素，用戶的大腦就會(huì)很自然的吸收更多的細(xì)節(jié)，并將這些作為獨(dú)立實(shí)體存在的“之”形端點(diǎn)聯(lián)結(jié)起來(lái)�！霸O(shè)計(jì)不僅僅是它的外觀怎樣或者感覺(jué)如何，而是它是如何工作的。——史蒂夫·喬布斯”舉例來(lái)說(shuō)，你可以利用半分割布局的這一特點(diǎn)去有效的布置你作品集的預(yù)覽、你的產(chǎn)品或服務(wù)的重要特性，這樣很快就能引起網(wǎng)站訪問(wèn)者的注意。最終會(huì)激勵(lì)用戶在您的網(wǎng)站停留更久，并說(shuō)服他們采取行動(dòng)。這樣的話，結(jié)果會(huì)是怎樣呢?將給您的網(wǎng)站帶來(lái)更高的轉(zhuǎn)換率，同時(shí)給訪問(wèn)者帶來(lái)更好的用戶體驗(yàn)。