隨著互聯(lián)網(wǎng)的高速發(fā)展，各種各樣的網(wǎng)站層出不窮。在這樣的環(huán)境下，用戶是如何在浩瀚的互聯(lián)網(wǎng)海洋中快速挑選網(wǎng)站的呢?網(wǎng)頁設(shè)計(jì)師又如何能讓自己的網(wǎng)站在用戶匆匆一瞥后就迅速吸引到他們進(jìn)一步注意的呢?本文作者向用戶介紹了一種簡單的頁面布局方式——分割布局，這種布局方式試圖讓用戶初覽頁面時(shí)感受到一種友好的瀏覽體驗(yàn)。

下面進(jìn)入翻譯正文：

　　作為網(wǎng)頁設(shè)計(jì)師，我們可以參考的設(shè)計(jì)范例和布局原則有很多，比如說：柵格化、縱向一致性、F型布局、Z型布局、三分法則、黃金分割法等等。注重這些原則將會給你的設(shè)計(jì)帶來視覺吸引力和功能性——現(xiàn)在讓我們來看一種簡單的方式，將頁面兩等分。

　　雖然在一開始聽起來有點(diǎn)傻，但是這種基本布局確實(shí)能起到非常好的效果。當(dāng)我們通覽一個頁面時(shí)，我們的視線常常會沿著一個“之”字形移動。而如果用戶的視線是沿著一條水平線移動時(shí)——就像在Z型布局里一樣，那么他/她就會很專注(或者說嘗試著專注)。但由于初來你網(wǎng)站90%的用戶都不會很仔細(xì)的去關(guān)注你的頁面，因此讓你的設(shè)計(jì)“瀏覽起來友好”肯定會獲得不錯回報(bào)哦!

　　(圖1)

眼動和“之”字形

　　從雅虎的眼動追蹤研究可以發(fā)現(xiàn)：

　　·人們通過掃視頁面的主要部分去判定這是個什么網(wǎng)站以及他們是否想在這多呆一會。

　　·用戶僅僅在三秒內(nèi)就會對頁面做出決定

　　·如果用戶決定留在頁面，他們會最關(guān)注屏幕頂部的內(nèi)容。

　　網(wǎng)站的用戶總是很匆忙，他們有其它的事情要做，你不要指望他們會停下來去欣賞你網(wǎng)站的美學(xué)。雖然良好的美學(xué)設(shè)計(jì)是非常重要的，但是這并不能完全激發(fā)訪問者去采取行動——去點(diǎn)擊“立即購買”或者“了解更多”按鈕。

　　我們不能去埋怨這些用戶。永遠(yuǎn)記住，當(dāng)你想查詢什么東西時(shí)?你會急著打開谷歌的第一個搜索結(jié)果并且火速看完，或者更確切的說，是粗略的瀏覽整個頁面。大多數(shù)時(shí)間，你甚至是毫不留意就將鼠標(biāo)滾動到了頁面底部。經(jīng)過這個階段后，如果你認(rèn)為這個頁面值得你花時(shí)間，你就會又回到頁面頂端并且著實(shí)花精力去閱讀和關(guān)注。

　　那么，用戶初始瀏覽的目的究竟是什么呢?就是在你最初掃視頁面時(shí)，捕捉到盡可能多的信息。如果我們以某種方式“制定”這種瀏覽模式，應(yīng)該就能夠得到更多訪問者的關(guān)注。通過觀察大量網(wǎng)站的熱圖，我得出了一個共通的趨勢。

　　(圖2)

　　在上圖中你會發(fā)現(xiàn)，你毫不費(fèi)勁就能看到那些紅點(diǎn)。奇怪的是，就經(jīng)驗(yàn)看來，相比于斜線而言，我們的視線能更輕易的跟隨水平線移動——因?yàn)槲覀兌际茄刂本€閱讀。但請注意，我討論的是在初始瀏覽階段，并不是你關(guān)注網(wǎng)站每個細(xì)節(jié)時(shí)的階段。

　　每當(dāng)你不是很專注時(shí)，你的視覺流向很自然的就會呈現(xiàn)為“之”字形。除非有對比度更高或者更重要的元素“召喚”你，不然你的視線就將會遵循上圖的模式。你還會發(fā)現(xiàn)，這種模式看起來和F型布局非常相似，并且用戶會在紅色端點(diǎn)有短暫的停留。

　　你的大腦會在這些“暫停點(diǎn)”生成快照。在之字形布局里，在這些“暫停點(diǎn)”布置一些包含重要信息的元素，用戶的大腦就會很自然的吸收更多的細(xì)節(jié)，并將這些作為獨(dú)立實(shí)體存在的“之”形端點(diǎn)聯(lián)結(jié)起來。

　　(圖3)

　　“設(shè)計(jì)不僅僅是它的外觀怎樣或者感覺如何，而是它是如何工作的?！返俜颉滩妓埂?/p>

　　舉例來說，你可以利用半分割布局的這一特點(diǎn)去有效的布置你作品集的預(yù)覽、你的產(chǎn)品或服務(wù)的重要特性，這樣很快就能引起網(wǎng)站訪問者的注意。最終會激勵用戶在您的網(wǎng)站停留更久，并說服他們采取行動。這樣的話，結(jié)果會是怎樣呢?將給您的網(wǎng)站帶來更高的轉(zhuǎn)換率，同時(shí)給訪問者帶來更好的用戶體驗(yàn)。

將分割布局應(yīng)用到設(shè)計(jì)中

　　(圖4)

　　讓你的設(shè)計(jì)和布局兼容“之”字形非常簡單。實(shí)際上，這和將你的頁面分為兩等份一樣簡單!兩等分的效果很好，因?yàn)椤爸弊中蔚亩它c(diǎn)或多或少能對齊到這兩等分的中心。疊加使用，它們能很好的相互呼應(yīng)。將重要元素放置在你網(wǎng)頁中“之”字形的紅色端點(diǎn)處，這就是分割布局或者說1/2布局包含的基本理念。

　　最近，我致力于設(shè)計(jì)一個“即將來臨”的登陸頁面。我嘗試了多種布局，但是沒有一種效果讓我滿意。我?guī)缀踉嚵嗣恳环N——比如柵格化，黃金分割比，F(xiàn)型布局等。但是僅當(dāng)我將頁面兩等分時(shí)，那一刻有一種強(qiáng)烈的“我找到了!”的感覺。解決的辦法竟如此簡單!它看起來優(yōu)雅而整潔，并且提醒了我一個重要的事實(shí)：簡單不一定是壞事。你看到微軟的新標(biāo)志了嗎?

　　(圖5)

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

　　(圖6，http://www.futfolle.com/)

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

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

　　(圖7)

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

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

　　但是如果你做了這樣一個簡單的調(diào)整呢?

　　(圖8)

　　變得更生動有趣了，對吧?簡單的互換每個項(xiàng)目里文本和圖片的位置來增加視覺上的生動性，這樣，這種一致性就不會讓你的用戶感覺到無聊了。同時(shí)，你還能在“之”字模型后放置一個行為召喚按鈕。

　　(圖9)

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

　　(圖10)

　　“設(shè)計(jì)是一項(xiàng)計(jì)劃，它將所有元素以最好的方式組織起來去完成一個特定的目標(biāo)?！闋査埂ぐＤ匪埂?/p>

有效的分割布局的例子

　　隨著Facebook新的時(shí)間軸的設(shè)計(jì)，分割式布局受到了眾人的注目。留意一下，你的視線多輕易就從一個帖子流向了另一個。

　　(圖11，http://www.facebook.com)

　　Apple公司也采用了分割式布局。這里是iPad mini的頁面，看看它是多么輕易地將每個展示iPad mini不同特征的圖片聯(lián)系起來的。感覺不錯吧!

　　(圖12，http://www.apple.com/ipad-mini/overview/)

　　很多人認(rèn)為，微軟為它最近的品牌重塑鋪設(shè)了很多新方式，下圖就是他們Surface的信息頁，這個頁面也采用了分割式布局。

　　(圖13，http://www.microsoft.com/Surface/en-GB/surface-with-windows-rt/home)

　　Stacey是1/2型布局的極簡寫照

　　(圖14，http://www.staceyapp.com/)

　　我很喜歡Quora的主頁，分割式布局能被示范的更簡單一些么?

　　(圖15，https://www.quora.com/)

　　Consumerbarometer.com 利用動畫將“之”字形提升到了一個新的等級，并且對之進(jìn)行了三角形變異。

　　(圖16，http://www.consumerbarometer.com/#?app=home&viewMode=0)

總結(jié)：

　　那么，我們學(xué)到了什么呢?

　　·用戶僅在三秒內(nèi)就能對你的頁面做出判定

　　·為了吸引訪問者的注意力并且降低頁面跳出率，我們應(yīng)該試著讓我們的頁面布局“瀏覽起來友好”

　　·就在中心位置劃分你的布局，并且將重要元素調(diào)整到“之”字形的端點(diǎn)上，以確保你的訪問者在瀏覽后記住更多的細(xì)節(jié)

　　本文僅僅是一個善意的提醒，我們在設(shè)計(jì)網(wǎng)頁時(shí)，不應(yīng)忘記使用基本布局和基本設(shè)計(jì)方法。實(shí)際上，如果應(yīng)用合適的話，這將會提高你的轉(zhuǎn)換率。

文章題目：產(chǎn)品經(jīng)理必讀：了解網(wǎng)頁設(shè)計(jì)中的分割布局
文章路徑：http://jinyejixie.com/news/166325.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈、定制網(wǎng)站、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)