更新時(shí)間：2024-11-06 19:21:50
網(wǎng)站建設(shè)
348網(wǎng)頁(yè)設(shè)計(jì)師如何讓他們的網(wǎng)站在用戶(hù)瀏覽后迅速抓住他們的注意力？本文向用戶(hù)介紹一種簡(jiǎn)單的頁(yè)面布局方式：拆分布局。這種布局方式試圖讓用戶(hù)在第一次瀏覽頁(yè)面時(shí)感受到一種友好的瀏覽體驗(yàn)。
作為網(wǎng)站設(shè)計(jì)者，我們可以參考很多設(shè)計(jì)范式和布局原則，例如：網(wǎng)格、垂直一致性、F型布局、Z型布局、三分法則、黃金分割法等。注意這些原則會(huì)帶來(lái)設(shè)計(jì)的視覺(jué)吸引力和功能性—— 現(xiàn)在讓我們看一下將頁(yè)面分成兩半的簡(jiǎn)單方法。
雖然一開(kāi)始聽(tīng)起來(lái)很傻，但這種基本布局非常有效。當(dāng)我們?yōu)g覽一頁(yè)時(shí)，我們的眼睛通常會(huì)沿著之字形移動(dòng)。并且如果用戶(hù)的視線像在Z 布局中一樣沿著水平線—— 移動(dòng)，那么他/她正在注意（或試圖集中注意力）。但由于90% 的第一次訪問(wèn)您網(wǎng)站的用戶(hù)不會(huì)非常仔細(xì)地關(guān)注您的頁(yè)面，因此讓您的設(shè)計(jì)“對(duì)瀏覽器友好”一定會(huì)獲得豐厚的回報(bào)！
眼動(dòng)和“之”字形
從雅虎的眼球追蹤研究中可以發(fā)現(xiàn)：
1. 人們掃描頁(yè)面的主要部分以確定它是什么站點(diǎn)以及他們是否想在這里停留一段時(shí)間。
2. 如果用戶(hù)決定留在頁(yè)面上，他們將最關(guān)注屏幕頂部的內(nèi)容。
3. 用戶(hù)在三秒內(nèi)做出關(guān)于頁(yè)面的決定
網(wǎng)站用戶(hù)總是很匆忙，他們有其他事情要做，您不希望他們停下來(lái)欣賞您網(wǎng)站的美感。雖然良好的美學(xué)設(shè)計(jì)非常重要，但它并不能完全激發(fā)訪問(wèn)者采取行動(dòng)—— 以單擊“立即購(gòu)買(mǎi)”或“了解更多”按鈕。
我們不能責(zé)怪這些用戶(hù)。永遠(yuǎn)記住，當(dāng)你想查詢(xún)某些東西時(shí)？你沖向第一個(gè)谷歌搜索結(jié)果并匆匆瀏覽它，或者更確切地說(shuō)，瀏覽整個(gè)頁(yè)面。大多數(shù)時(shí)候，你會(huì)在不知不覺(jué)中滾動(dòng)到頁(yè)面底部。在此階段之后，如果您認(rèn)為該頁(yè)面值得您花時(shí)間，您將回到頁(yè)面頂部并真正投入精力閱讀和關(guān)注。
那么，用戶(hù)最初瀏覽的目的是什么？這是關(guān)于在您最初掃描頁(yè)面時(shí)捕獲盡可能多的信息。如果我們以某種方式“實(shí)施”這種瀏覽模式，我們應(yīng)該能夠吸引訪問(wèn)者的更多注意力。通過(guò)查看大量網(wǎng)站的熱圖，我得出了一個(gè)共同的趨勢(shì)。
設(shè)計(jì)不僅僅是它的外觀或感覺(jué)，而是它的工作原理。 —— 史蒂夫喬布斯”
例如，您可以使用半拆分布局的這一功能來(lái)有效地安排您的產(chǎn)品組合預(yù)覽、產(chǎn)品或服務(wù)的重要功能，以便它們能夠快速吸引網(wǎng)站訪問(wèn)者的注意力。這最終將激勵(lì)用戶(hù)在您的網(wǎng)站上停留更長(zhǎng)時(shí)間，并說(shuō)服他們采取行動(dòng)。在這種情況下，結(jié)果會(huì)怎樣？它將為您的網(wǎng)站帶來(lái)更高的轉(zhuǎn)化率，同時(shí)為您的訪問(wèn)者帶來(lái)更好的用戶(hù)體驗(yàn)。
使您的設(shè)計(jì)和布局與之字形兼容很容易。事實(shí)上，這就像將您的頁(yè)面分成相等的兩半一樣簡(jiǎn)單！平分效果很好，因?yàn)橹中蔚哪┒嘶蚨嗷蛏僭趦砂氲闹行膶?duì)齊。當(dāng)堆疊使用時(shí)，它們可以很好地相互呼應(yīng)。將重要元素放置在網(wǎng)頁(yè)上之字形的紅色端點(diǎn)是拆分布局或1/2 布局背后的基本思想。
最近，我致力于設(shè)計(jì)一個(gè)“即將推出”的登陸頁(yè)面。我嘗試了幾種布局，但沒(méi)有一種適合我。光柵化、黃金比例、F布局等幾乎各種——我都試過(guò)了，但只有當(dāng)我平分頁(yè)面時(shí)，才有強(qiáng)烈的“我找到了！”的感覺(jué)。那一刻的感覺(jué)。解決方案非常簡(jiǎn)單！它看起來(lái)優(yōu)雅而整潔，讓我想起了一個(gè)重要的事實(shí)：簡(jiǎn)單不一定是壞事。
你可以看到二分法如何代表一個(gè)好的
好的視覺(jué)層次。首先，頂部的“即將來(lái)臨”的紅色緞帶很引人注目。其次，標(biāo)志也很鮮明。現(xiàn)在，跟隨我之前提到的“之”字形，訪問(wèn)者看到右半部分的圖片滑塊，最后，到達(dá)電子郵件提交表格。
但是如果你做了這樣一個(gè)簡(jiǎn)單的調(diào)整呢？
變得更生動(dòng)有趣了，對(duì)吧？簡(jiǎn)單的互換每個(gè)項(xiàng)目里文本和圖片的位置來(lái)增加視覺(jué)上的生動(dòng)性，這樣，這種一致性就不會(huì)讓你的用戶(hù)感覺(jué)到無(wú)聊了。同時(shí)，你還能在“之”字模型后放置一個(gè)行為召喚按鈕。
本文章來(lái)源推來(lái)客：網(wǎng)站設(shè)計(jì)公司
我們專(zhuān)注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類(lèi)API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿(mǎn)意為止，多一次對(duì)比，一定讓您多一份收獲！
