網(wǎng)站設(shè)計(jì)中的布局分割方法有哪些?
  • 更新時間:2024-12-26 14:04:04
  • 網(wǎng)站建設(shè)
  • 發(fā)布時間:1年前
  • 386

網(wǎng)頁設(shè)計(jì)師如何讓他們的網(wǎng)站在用戶瀏覽后迅速抓住他們的注意力?本文向用戶介紹一種簡單的頁面布局方式:拆分布局。這種布局方式試圖讓用戶在第一次瀏覽頁面時感受到一種友好的瀏覽體驗(yàn)。

作為網(wǎng)站設(shè)計(jì)者,我們可以參考很多設(shè)計(jì)范式和布局原則,例如:網(wǎng)格、垂直一致性、F型布局、Z型布局、三分法則、黃金分割法等。注意這些原則會帶來設(shè)計(jì)的視覺吸引力和功能性—— 現(xiàn)在讓我們看一下將頁面分成兩半的簡單方法。

雖然一開始聽起來很傻,但這種基本布局非常有效。當(dāng)我們?yōu)g覽一頁時,我們的眼睛通常會沿著之字形移動。并且如果用戶的視線像在Z 布局中一樣沿著水平線—— 移動,那么他/她正在注意(或試圖集中注意力)。但由于90% 的第一次訪問您網(wǎng)站的用戶不會非常仔細(xì)地關(guān)注您的頁面,因此讓您的設(shè)計(jì)“對瀏覽器友好”一定會獲得豐厚的回報(bào)!

眼動和“之”字形

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

1. 人們掃描頁面的主要部分以確定它是什么站點(diǎn)以及他們是否想在這里停留一段時間。

2. 如果用戶決定留在頁面上,他們將最關(guān)注屏幕頂部的內(nèi)容。

3. 用戶在三秒內(nèi)做出關(guān)于頁面的決定

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

我們不能責(zé)怪這些用戶。永遠(yuǎn)記住,當(dāng)你想查詢某些東西時?你沖向第一個谷歌搜索結(jié)果并匆匆瀏覽它,或者更確切地說,瀏覽整個頁面。大多數(shù)時候,你會在不知不覺中滾動到頁面底部。在此階段之后,如果您認(rèn)為該頁面值得您花時間,您將回到頁面頂部并真正投入精力閱讀和關(guān)注。

那么,用戶最初瀏覽的目的是什么?這是關(guān)于在您最初掃描頁面時捕獲盡可能多的信息。如果我們以某種方式“實(shí)施”這種瀏覽模式,我們應(yīng)該能夠吸引訪問者的更多注意力。通過查看大量網(wǎng)站的熱圖,我得出了一個共同的趨勢。

設(shè)計(jì)不僅僅是它的外觀或感覺,而是它的工作原理。 —— 史蒂夫喬布斯”

例如,您可以使用半拆分布局的這一功能來有效地安排您的產(chǎn)品組合預(yù)覽、產(chǎn)品或服務(wù)的重要功能,以便它們能夠快速吸引網(wǎng)站訪問者的注意力。這最終將激勵用戶在您的網(wǎng)站上停留更長時間,并說服他們采取行動。在這種情況下,結(jié)果會怎樣?它將為您的網(wǎng)站帶來更高的轉(zhuǎn)化率,同時為您的訪問者帶來更好的用戶體驗(yàn)。

使您的設(shè)計(jì)和布局與之字形兼容很容易。事實(shí)上,這就像將您的頁面分成相等的兩半一樣簡單!平分效果很好,因?yàn)橹中蔚哪┒嘶蚨嗷蛏僭趦砂氲闹行膶R。當(dāng)堆疊使用時,它們可以很好地相互呼應(yīng)。將重要元素放置在網(wǎng)頁上之字形的紅色端點(diǎn)是拆分布局或1/2 布局背后的基本思想。

最近,我致力于設(shè)計(jì)一個“即將推出”的登陸頁面。我嘗試了幾種布局,但沒有一種適合我。光柵化、黃金比例、F布局等幾乎各種——我都試過了,但只有當(dāng)我平分頁面時,才有強(qiáng)烈的“我找到了!”的感覺。那一刻的感覺。解決方案非常簡單!它看起來優(yōu)雅而整潔,讓我想起了一個重要的事實(shí):簡單不一定是壞事。

你可以看到二分法如何代表一個好的

好的視覺層次。首先,頂部的“即將來臨”的紅色緞帶很引人注目。其次,標(biāo)志也很鮮明。現(xiàn)在,跟隨我之前提到的“之”字形,訪問者看到右半部分的圖片滑塊,最后,到達(dá)電子郵件提交表格。
現(xiàn)在讓我們來看一下,分割布局在一個網(wǎng)頁設(shè)計(jì)師的作品集頁面中能起到多大作用?設(shè)計(jì)作品集頁面的目的是為了向潛在顧客快速展示你作品的主體部分。隨著現(xiàn)在這個產(chǎn)業(yè)如此飽和,顧客的選擇有很多很多,為什么他們要付錢給你呢?因此,一個很棒的第一印象將會在你的事業(yè)方向中起到?jīng)Q定性作用。讓我們看看,我們可以做些什么?
上圖的布局被劃分為兩等分,但是并不遵循我之前提到的“之”字形原則。
雖然它看起來是個不錯的布局并且易于觀看,但是在看完前兩塊元素后就會讓人感到非常沉悶死板。打破這樣的視覺流向并且增添視覺趣味性將會讓之有所改變。不僅如此,當(dāng)你試著去瀏覽上面這種布局時,你的眼睛會最先看到第一張圖片,然后跳轉(zhuǎn)到第二塊的文本上。然而你的訪問者并沒有打算在這個階段閱讀,因此,他們會跳轉(zhuǎn)到其它的點(diǎn),或者徹底離開你的頁面!
但是如果你做了這樣一個簡單的調(diào)整呢?

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

本文章來源推來客:網(wǎng)站設(shè)計(jì)公司

我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個項(xiàng)目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!

本文章出于推來客官網(wǎng),轉(zhuǎn)載請表明原文地址:https://www.tlkjt.com/web/11667.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部