2022-06-18 分類: 網(wǎng)站建設(shè)
作為網(wǎng)頁(yè)設(shè)計(jì)師,我們可以參考的設(shè)計(jì)范例和布局原則有很多,比如說:柵格化、縱向一致性、F型布局、Z型布局、三分法則、黃金分割法等等。注重這些原則將會(huì)給你的設(shè)計(jì)帶來(lái)視覺吸引力和功能性——現(xiàn)在讓我們來(lái)看一種簡(jiǎn)單的方式,將頁(yè)面兩等分。
從雅虎的眼動(dòng)追蹤研究可以發(fā)現(xiàn):
·人們通過掃視頁(yè)面的主要部分去判定這是個(gè)什么網(wǎng)站以及他們是否想在這多呆一會(huì)。
·用戶僅僅在三秒內(nèi)就會(huì)對(duì)頁(yè)面做出決定
·如果用戶決定留在頁(yè)面,他們會(huì)最關(guān)注屏幕頂部的內(nèi)容。
網(wǎng)站的用戶總是很匆忙,他們有其它的事情要做,你不要指望他們會(huì)停下來(lái)去欣賞你網(wǎng)站的美學(xué)。雖然良好的美學(xué)設(shè)計(jì)是非常重要的,但是這并不能完全激發(fā)訪問者去采取行動(dòng)——去點(diǎn)擊“立即購(gòu)買”或者“了解更多”按鈕。
我們不能去埋怨這些用戶。永遠(yuǎn)記住,當(dāng)你想查詢什么東西時(shí)?你會(huì)急著打開谷歌的第一個(gè)搜索結(jié)果并且火速看完,或者更確切的說,是粗略的瀏覽整個(gè)頁(yè)面。大多數(shù)時(shí)間,你甚至是毫不留意就將鼠標(biāo)滾動(dòng)到了頁(yè)面底部。經(jīng)過這個(gè)階段后,如果你認(rèn)為這個(gè)頁(yè)面值得你花時(shí)間,你就會(huì)又回到頁(yè)面頂端并且著實(shí)花精力去閱讀和關(guān)注。
那么,用戶初始瀏覽的目的究竟是什么呢?就是在你最初掃視頁(yè)面時(shí),捕捉到盡可能多的信息。如果我們以某種方式“制定”這種瀏覽模式,應(yīng)該就能夠得到更多訪問者的關(guān)注。通過觀察大量網(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í),你的視覺流向很自然的就會(huì)呈現(xiàn)為“之”字形。除非有對(duì)比度更高或者更重要的元素“召喚”你,不然你的視線就將會(huì)遵循上圖的模式。你還會(huì)發(fā)現(xiàn),這種模式看起來(lái)和F型布局非常相似,并且用戶會(huì)在紅色端點(diǎn)有短暫的停留。
“設(shè)計(jì)不僅僅是它的外觀怎樣或者感覺如何,而是它是如何工作的。——史蒂夫·喬布斯”
舉例來(lái)說,你可以利用半分割布局的這一特點(diǎn)去有效的布置你作品集的預(yù)覽、你的產(chǎn)品或服務(wù)的重要特性,這樣很快就能引起網(wǎng)站訪問者的注意。最終會(huì)激勵(lì)用戶在您的網(wǎng)站停留更久,并說服他們采取行動(dòng)。這樣的話,結(jié)果會(huì)是怎樣呢?將給您的網(wǎng)站帶來(lái)更高的轉(zhuǎn)換率,同時(shí)給訪問者帶來(lái)更好的用戶體驗(yàn)。
讓你的設(shè)計(jì)和布局兼容“之”字形非常簡(jiǎn)單。實(shí)際上,這和將你的頁(yè)面分為兩等份一樣簡(jiǎn)單!兩等分的效果很好,因?yàn)椤爸弊中蔚亩它c(diǎn)或多或少能對(duì)齊到這兩等分的中心。疊加使用,它們能很好的相互呼應(yīng)。將重要元素放置在你網(wǎng)頁(yè)中“之”字形的紅色端點(diǎn)處,這就是分割布局或者說1/2布局包含的基本理念。
你能看到兩等分如何體現(xiàn)出一種良好的視覺層次。首先,頂部的“即將來(lái)臨”的紅色緞帶很引人注目。其次,標(biāo)志也很鮮明。現(xiàn)在,跟隨我之前提到的“之”字形,訪問者看到右半部分的圖片滑塊,最后,到達(dá)電子郵件提交表格。
上圖的布局被劃分為兩等分,但是并不遵循我之前提到的“之”字形原則。
雖然它看起來(lái)是個(gè)不錯(cuò)的布局并且易于觀看,但是在看完前兩塊元素后就會(huì)讓人感到非常沉悶死板。打破這樣的視覺流向并且增添視覺趣味性將會(huì)讓之有所改變。不僅如此,當(dāng)你試著去瀏覽上面這種布局時(shí),你的眼睛會(huì)最先看到第一張圖片,然后跳轉(zhuǎn)到第二塊的文本上。然而你的訪問者并沒有打算在這個(gè)階段閱讀,因此,他們會(huì)跳轉(zhuǎn)到其它的點(diǎn),或者徹底離開你的頁(yè)面!
“設(shè)計(jì)是一項(xiàng)計(jì)劃,它將所有元素以最好的方式組織起來(lái)去完成一個(gè)特定的目標(biāo)。——查爾斯·埃姆斯”
那么,我們學(xué)到了什么呢?
·用戶僅在三秒內(nèi)就能對(duì)你的頁(yè)面做出判定
·為了吸引訪問者的注意力并且降低頁(yè)面跳出率,我們應(yīng)該試著讓我們的頁(yè)面布局“瀏覽起來(lái)友好”
·就在中心位置劃分你的布局,并且將重要元素調(diào)整到“之”字形的端點(diǎn)上,以確保你的訪問者在瀏覽后記住更多的細(xì)節(jié)
我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí),不應(yīng)忘記使用基本布局和基本設(shè)計(jì)方法。實(shí)際上,如果應(yīng)用合適的話,這將會(huì)提高你的轉(zhuǎn)換率。
本文來(lái)自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
分享文章:了解網(wǎng)頁(yè)設(shè)計(jì)中的分割布局
轉(zhuǎn)載注明:http://m.newbst.com/news10/168710.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、微信公眾號(hào)、企業(yè)建站、網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容