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

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

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

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

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

什么是視覺層次？

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

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

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

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

對比度：顏色的變化可以用來吸引注意力。Ç ontrasting一個元件的反對色的其他繪制焦點。

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

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

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

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

F模式

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

更具體地說，用戶以F模式閱讀。

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

這就是運動通常的樣子：

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

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

顏色鍵如下：

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

黃色=一些觀點，但固定較少

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

灰色=非常少的視圖和沒有注視

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

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

F-模式著陸頁，例如，來自HootSuite

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

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

之后，訪問者會看到兩個CTA按鈕。

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

F-模式著陸頁，例如-的Bigcommerce

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

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

接下來是項目符號中的副本。

最后，在用戶掃描左至右觀看兩個CTA按鈕。

安排您的著陸頁面元素小號，使他們陷入這種特殊的視覺為了確保游客通過你的頁面，然后點擊按鈕CTA。

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

Z模式

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

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

接下來，它們向下掃描并向左掃描，創(chuàng)建一條假想的對角線

最后，他們再次回到右邊，形成第二條水平線

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

Z-圖案視圖案

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

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

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

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

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

Z-模式著陸頁，例如，lyft

訪客首先在頂部水平線上查看徽標(biāo)和注冊騎行;CTA按鈕。

接下來，他們沿對角線向下行并掃描表格的標(biāo)題。

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

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

Z-模式著陸頁，例如，LinkedIn

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

向左掃描，訪問者然后看到兩個藍色CTA按鈕上方的副本

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

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

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

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

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

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

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

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

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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