外貿(mào)網(wǎng)站制作：如何在英文建站設(shè)計(jì)中使用F＆Z模式

2015-11-21 分類(lèi)：網(wǎng)站制作

著陸頁(yè)設(shè)計(jì)是外貿(mào)網(wǎng)站制作的重要部分，力求以清晰直接的方式向訪(fǎng)問(wèn)者傳達(dá)您的信息，以確保您影響人們注意您希望他們做什么。使用空格來(lái)整理頁(yè)面并添加對(duì)比的CTA按鈕只是實(shí)現(xiàn)此目的的幾種方法。但最后，著陸頁(yè)設(shè)計(jì)不只是關(guān)于元素的外觀，而是它們向訪(fǎng)問(wèn)者傳達(dá)的信息。

網(wǎng)站設(shè)計(jì),英文網(wǎng)站設(shè)計(jì),外貿(mào)網(wǎng)站建設(shè)" />

視覺(jué)吸引力只是著陸頁(yè)設(shè)計(jì)的一個(gè)方面- 頁(yè)面元素如何相互交互并且流動(dòng)在一起決定了您的頁(yè)面是否會(huì)成功吸引訪(fǎng)問(wèn)者。這就是視覺(jué)層次結(jié)構(gòu)發(fā)揮作用的地方。下面我們會(huì)根據(jù)幾個(gè)國(guó)外的英文網(wǎng)站設(shè)計(jì)案例來(lái)做解析

什么是視覺(jué)層次？

可視層次結(jié)構(gòu)確定哪些頁(yè)面元素首先與訪(fǎng)問(wèn)者互動(dòng)，以及在頁(yè)面上與哪些元素交互（以及以何種順序）。通過(guò)建立可視化層次結(jié)構(gòu)，您可以確保訪(fǎng)問(wèn)者和登錄頁(yè)面之間的通信是無(wú)縫的。

可以使用以下技術(shù)實(shí)現(xiàn)視覺(jué)層次結(jié)構(gòu)：

比例： D不同尺寸的元素將引導(dǎo)用戶(hù)注意 -與較小的元素相比，較大的元素吸引更多的注意力。

顏色：人們被吸引到大膽，對(duì)比鮮明的顏色。

對(duì)比度：顏色的變化可以用來(lái)吸引注意力。Ç ontrasting一個(gè)元件的反對(duì)色的其他繪制焦點(diǎn)。

對(duì)齊：列和網(wǎng)格可以在元素之間創(chuàng)建對(duì)齊，并使訪(fǎng)問(wèn)者注意到。

鄰近度：這有助于將某些著陸頁(yè)元素分開(kāi)并分組（或分開(kāi)），以幫助區(qū)分 m。

頁(yè)掃描模式：眼動(dòng)研究顯示，游客在這里集中他們的目光，一旦他們到達(dá)的網(wǎng)頁(yè)上，并在那里他們將繼續(xù)執(zhí)行整個(gè)頁(yè)面。

所有上述設(shè)計(jì)元素都很重要，但這篇文章將重點(diǎn)關(guān)注眼動(dòng)追蹤研究顯示與閱讀網(wǎng)絡(luò)內(nèi)容相關(guān)的頁(yè)面掃描模式- 特別是F和Z模式。

F模式

2006年，尼爾森諾曼集團(tuán)進(jìn)行了被認(rèn)為是當(dāng)今最有用和最引用的眼動(dòng)追蹤研究之一。在研究期間，他們觀察了232位用戶(hù)如何查看數(shù)千個(gè)不同的網(wǎng)頁(yè)。調(diào)查結(jié)果顯示，用戶(hù)的主要閱讀行為在各個(gè)站點(diǎn)和任務(wù)中相對(duì)一致。

更具體地說(shuō)，用戶(hù)以F模式閱讀。

F模式規(guī)定訪(fǎng)問(wèn)者首先在水平方向上閱讀頁(yè)面，主要是沿著內(nèi)容區(qū)域的上部，然后向下移動(dòng)頁(yè)面并在第二條水平線(xiàn)上閱讀。?F inally，游客掃描內(nèi)容的左側(cè)垂直運(yùn)動(dòng)。

這就是運(yùn)動(dòng)通常的樣子：

外貿(mào)網(wǎng)站制作-F模式1.jpg

上圖所示的三張熱圖來(lái)源于三個(gè)不同網(wǎng)站的用戶(hù)眼動(dòng)追蹤研究。值得一提的是，F(xiàn)模式不必遵循嚴(yán)格的雙桿水平模式（參見(jiàn)右上圖中的熱圖）。

顏色鍵如下：

紅色=觀看次數(shù)最多，固定最多的區(qū)域

黃色=一些觀點(diǎn)，但固定較少

藍(lán)色=觀看次數(shù)最少，注意力很少

灰色=非常少的視圖和沒(méi)有注視

這里要記住的關(guān)鍵是用戶(hù)的眼球運(yùn)動(dòng)從左上角開(kāi)始并在頁(yè)面上移動(dòng)，然后向下掃描頁(yè)面以搜索他們發(fā)現(xiàn)有吸引力的元素。對(duì)于元素你想游客到注意到在文字為主的頁(yè)面（如圖像），將它們放置在F方式確保元素被看到。

Hootsuite在其著陸頁(yè)上使用F圖案來(lái)突出顯示最重要的元素（在首頁(yè)上方）：

F-模式著陸頁(yè)，例如，來(lái)自HootSuite

首先，T 他訪(fǎng)客的眼睛第一次去的標(biāo)題和小標(biāo)題。

接下來(lái)，他們將掃描b ullet-point的好處（圖標(biāo)）。

之后，訪(fǎng)問(wèn)者會(huì)看到兩個(gè)CTA按鈕。

BigCommerce也在其著陸頁(yè)上使用F模式（在首頁(yè)上方）：

F-模式著陸頁(yè)，例如-的Bigcommerce

標(biāo)題是頁(yè)面上大的字體，因此可能首先看到。

然后將子標(biāo)題跨越到圖像。

接下來(lái)是項(xiàng)目符號(hào)中的副本。

最后，在用戶(hù)掃描左至右觀看兩個(gè)CTA按鈕。

安排您的著陸頁(yè)面元素小號(hào)，使他們陷入這種特殊的視覺(jué)為了確保游客通過(guò)你的頁(yè)面，然后點(diǎn)擊按鈕CTA。

F模式通常適用于內(nèi)容較重的頁(yè)面，但當(dāng)然可以應(yīng)用于內(nèi)容較少的頁(yè)面。

Z模式

在Z-圖案布局通常用于對(duì)不重內(nèi)容的網(wǎng)頁(yè)。它的設(shè)計(jì)模仿當(dāng)人眼行進(jìn)的路線(xiàn)就讀取-左到右，曲折從上到下：

參觀者首先從左上角掃描到右上角，形成一條假想的水平線(xiàn)

接下來(lái)，它們向下掃描并向左掃描，創(chuàng)建一條假想的對(duì)角線(xiàn)

最后，他們?cè)俅位氐接疫?，形成第二條水平線(xiàn)

這是從這些眼球運(yùn)動(dòng)中出現(xiàn)的觀察模式：

Z-圖案視圖案

就像F圖案一樣，Z圖案布局不一定是精確的Z圖案。水平線(xiàn)不必完全水平 - 它們也可以成角度。此外，可以有多個(gè)z的整個(gè)頁(yè)面。請(qǐng)確保：

頂部水平線(xiàn)包括您希望訪(fǎng)客首先關(guān)注的主要組件。

對(duì)角線(xiàn)應(yīng)該包含導(dǎo)致您的CTA按鈕的任何信息。

底部水平線(xiàn)應(yīng)突出顯示沿該線(xiàn)的任何點(diǎn)的CTA。

該Lyft著陸頁(yè)采用了Z-模式的一個(gè)很好的例子：

Z-模式著陸頁(yè)，例如，lyft

訪(fǎng)客首先在頂部水平線(xiàn)上查看徽標(biāo)和注冊(cè)騎行;CTA按鈕。

接下來(lái)，他們沿對(duì)角線(xiàn)向下行并掃描表格的標(biāo)題。

最后，看看底部水平線(xiàn)，其中Lyft vs. Uber標(biāo)題和小標(biāo)題通向CTA按鈕。

我們的最后一個(gè)示例使用Z模式的LinkedIn：

Z-模式著陸頁(yè)，例如，LinkedIn

第一條水平線(xiàn)包括開(kāi)始招聘;標(biāo)題和女性的臉部

向左掃描，訪(fǎng)問(wèn)者然后看到兩個(gè)藍(lán)色CTA按鈕上方的副本

在第二個(gè)對(duì)角線(xiàn)中，眼睛移動(dòng)到40％統(tǒng)計(jì)數(shù)據(jù)并在頁(yè)面上從左向右移動(dòng)以查看其他兩個(gè)統(tǒng)計(jì)數(shù)據(jù)

最后，您可以使用Z模式讓訪(fǎng)問(wèn)者專(zhuān)注于說(shuō)服他們更接近轉(zhuǎn)換目標(biāo)的元素。

在外貿(mào)網(wǎng)站設(shè)計(jì)過(guò)程中，使用F和Z模式創(chuàng)建引人入勝的登錄頁(yè)面體驗(yàn)

將最重要的目標(biāo)網(wǎng)頁(yè)元素放置在訪(fǎng)問(wèn)者的自然眼睛路徑上，無(wú)論是F還是Z模式，都可以確保您創(chuàng)建引人入勝的著陸頁(yè)體驗(yàn)。利用目標(biāo)網(wǎng)頁(yè)上的可視層次結(jié)構(gòu)，確保訪(fǎng)問(wèn)者吸收您的郵件并采取您希望他們采取的操作。

當(dāng)前文章：外貿(mào)網(wǎng)站制作：如何在英文建站設(shè)計(jì)中使用F＆Z模式
地址分享：http://muchs.cn/news/33482.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)、網(wǎng)站制作等

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

猜你還喜歡下面的內(nèi)容