MENU 服務(wù) 案例
網(wǎng)站建設(shè)-網(wǎng)站設(shè)計(jì)-北京網(wǎng)站建設(shè)-高端網(wǎng)站制作公司-尚品中國
我們通過擁抱變化創(chuàng)造
360°的品牌價(jià)值__
簡體
簡體中文 English

尚品與山東真諾智能設(shè)備有限公司簽署網(wǎng)站改版合作協(xié)議

類型：尚品動(dòng)態(tài) 了解更多

網(wǎng)站設(shè)計(jì)中的布局分割方法有哪些？

來源：尚品中國| 類型：網(wǎng)站百科| 時(shí)間：2018-09-11
網(wǎng)站設(shè)計(jì)師如何能讓自己的網(wǎng)站在用戶匆匆一瞥后就迅速吸引到他們進(jìn)一步注意的呢？本文向用戶介紹了一種簡單的頁面布局方式：分割布局，這種布局方式試圖讓用戶初覽頁面時(shí)感受到一種友好的瀏覽體驗(yàn)。
作為網(wǎng)站設(shè)計(jì)師，我們可以參考的設(shè)計(jì)范例和布局原則有很多，比如說：柵格化、縱向一致性、F型布局、Z型布局、三分法則、黃金分割法等。注重這些原則將會給你的設(shè)計(jì)帶來視覺吸引力和功能性——現(xiàn)在讓我們來看一種簡單的方式，將頁面兩等分。
雖然在一開始聽起來有點(diǎn)傻，但是這種基本布局確實(shí)能起到非常好的效果。當(dāng)我們通覽一個(gè)頁面時(shí)，我們的視線常常會沿著一個(gè)“之”字形移動(dòng)。而如果用戶的視線是沿著一條水平線移動(dòng)時(shí)——就像在Z型布局里一樣，那么他/她就會很專注（或者說嘗試著專注）。但由于初來你網(wǎng)站90%的用戶都不會很仔細(xì)的去關(guān)注你的頁面，因此讓你的設(shè)計(jì)“瀏覽起來友好”肯定會獲得不錯(cuò)回報(bào)哦！
 
眼動(dòng)和“之”字形
從雅虎的眼動(dòng)追蹤研究可以發(fā)現(xiàn)：
1、人們通過掃視頁面的主要部分去判定這是個(gè)什么網(wǎng)站以及他們是否想在這多呆一會。
2、如果用戶決定留在頁面，他們會最關(guān)注屏幕頂部的內(nèi)容。
3、用戶僅僅在三秒內(nèi)就會對頁面做出決定
網(wǎng)站的用戶總是很匆忙，他們有其它的事情要做，你不要指望他們會停下來去欣賞你網(wǎng)站的美學(xué)。雖然良好的美學(xué)設(shè)計(jì)是非常重要的，但是這并不能完全激發(fā)訪問者去采取行動(dòng)——去點(diǎn)擊“立即購買”或者“了解更多”按鈕。
我們不能去埋怨這些用戶。永遠(yuǎn)記住，當(dāng)你想查詢什么東西時(shí)?你會急著打開谷歌的第一個(gè)搜索結(jié)果并且火速看完，或者更確切的說，是粗略的瀏覽整個(gè)頁面。大多數(shù)時(shí)間，你甚至是毫不留意就將鼠標(biāo)滾動(dòng)到了頁面底部。經(jīng)過這個(gè)階段后，如果你認(rèn)為這個(gè)頁面值得你花時(shí)間，你就會又回到頁面頂端并且著實(shí)花精力去閱讀和關(guān)注。
那么，用戶初始瀏覽的目的究竟是什么呢？就是在你最初掃視頁面時(shí)，捕捉到盡可能多的信息。如果我們以某種方式“制定”這種瀏覽模式，應(yīng)該就能夠得到更多訪問者的關(guān)注。通過觀察大量網(wǎng)站的熱圖，我得出了一個(gè)共通的趨勢。
 
設(shè)計(jì)不僅僅是它的外觀怎樣或者感覺如何，而是它是如何工作的。——史蒂夫·喬布斯”
舉例來說，你可以利用半分割布局的這一特點(diǎn)去有效的布置你作品集的預(yù)覽、你的產(chǎn)品或服務(wù)的重要特性，這樣很快就能引起網(wǎng)站訪問者的注意。最終會激勵(lì)用戶在您的網(wǎng)站停留更久，并說服他們采取行動(dòng)。這樣的話，結(jié)果會是怎樣呢?將給您的網(wǎng)站帶來更高的轉(zhuǎn)換率，同時(shí)給訪問者帶來更好的用戶體驗(yàn)。
讓你的設(shè)計(jì)和布局兼容“之”字形非常簡單。實(shí)際上，這和將你的頁面分為兩等份一樣簡單！兩等分的效果很好，因?yàn)?ldquo;之”字形的端點(diǎn)或多或少能對齊到這兩等分的中心。疊加使用，它們能很好的相互呼應(yīng)。將重要元素放置在你網(wǎng)頁中“之”字形的紅色端點(diǎn)處，這就是分割布局或者說1/2布局包含的基本理念。
最近，我致力于設(shè)計(jì)一個(gè)“即將來臨”的登陸頁面。我嘗試了多種布局，但是沒有一種效果讓我滿意。我?guī)缀踉嚵嗣恳环N——比如柵格化，黃金分割比，F(xiàn)型布局等。但是僅當(dāng)我將頁面兩等分時(shí)，那一刻有一種強(qiáng)烈的“我找到了！”的感覺。解決的辦法竟如此簡單！它看起來優(yōu)雅而整潔，并且提醒了我一個(gè)重要的事實(shí)：簡單不一定是壞事。
 
你能看到兩等分如何體現(xiàn)出一種良好的視覺層次。首先，頂部的“即將來臨”的紅色緞帶很引人注目。其次，標(biāo)志也很鮮明?，F(xiàn)在，跟隨我之前提到的“之”字形，訪問者看到右半部分的圖片滑塊，最后，到達(dá)電子郵件提交表格。
現(xiàn)在讓我們來看一下，分割布局在一個(gè)網(wǎng)頁設(shè)計(jì)師的作品集頁面中能起到多大作用？設(shè)計(jì)作品集頁面的目的是為了向潛在顧客快速展示你作品的主體部分。隨著現(xiàn)在這個(gè)產(chǎn)業(yè)如此飽和，顧客的選擇有很多很多，為什么他們要付錢給你呢？因此，一個(gè)很棒的第一印象將會在你的事業(yè)方向中起到?jīng)Q定性作用。讓我們看看，我們可以做些什么?
上圖的布局被劃分為兩等分，但是并不遵循我之前提到的“之”字形原則。
雖然它看起來是個(gè)不錯(cuò)的布局并且易于觀看，但是在看完前兩塊元素后就會讓人感到非常沉悶死板。打破這樣的視覺流向并且增添視覺趣味性將會讓之有所改變。不僅如此，當(dāng)你試著去瀏覽上面這種布局時(shí)，你的眼睛會最先看到第一張圖片，然后跳轉(zhuǎn)到第二塊的文本上。然而你的訪問者并沒有打算在這個(gè)階段閱讀，因此，他們會跳轉(zhuǎn)到其它的點(diǎn)，或者徹底離開你的頁面！
但是如果你做了這樣一個(gè)簡單的調(diào)整呢？

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

本文章來源尚品中國：網(wǎng)站設(shè)計(jì)公司

來源聲明：本文章系尚品中國編輯原創(chuàng)或采編整理，如需轉(zhuǎn)載請注明來自尚品中國。以上內(nèi)容部分(包含圖片、文字)來源于網(wǎng)絡(luò)，如有侵權(quán)，請及時(shí)與本站聯(lián)系（010-60259772）。
TAG標(biāo)簽：

如果您的網(wǎng)站可以增加轉(zhuǎn)化次數(shù)并提高客戶滿意度，該怎么辦？

預(yù)約專業(yè)咨詢顧問溝通！

*尚品專業(yè)顧問將盡快與您聯(lián)系

免責(zé)聲明

非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前，請您仔細(xì)閱讀本聲明的所有條款。

1、本站部分內(nèi)容來源自網(wǎng)絡(luò)，涉及到的部分文章和圖片版權(quán)屬于原作者，本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流，切勿用于任何商業(yè)活動(dòng)。

2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī)，當(dāng)本聲明與國家法律法規(guī)沖突時(shí)，以國家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益，請您及時(shí)與我們,我們會在第一時(shí)間刪除相關(guān)內(nèi)容!

聯(lián)系方式：010-60259772
電子郵件：394588593@qq.com

現(xiàn)在就與專業(yè)咨詢顧問溝通！

  • 全國服務(wù)熱線

    400-700-4979

  • 北京服務(wù)熱線

    010-60259772

信息保護(hù)中請放心填寫
在線咨詢

免責(zé)聲明

非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前，請您仔細(xì)閱讀本聲明的所有條款。

1、本站部分內(nèi)容來源自網(wǎng)絡(luò)，涉及到的部分文章和圖片版權(quán)屬于原作者，本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流，切勿用于任何商業(yè)活動(dòng)。

2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī)，當(dāng)本聲明與國家法律法規(guī)沖突時(shí)，以國家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益，請您及時(shí)與我們,我們會在第一時(shí)間刪除相關(guān)內(nèi)容!

聯(lián)系方式：010-60259772
電子郵件：394588593@qq.com