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

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

著陸頁(yè)設(shè)計(jì)是外貿(mào)網(wǎng)站制作的重要部分，力求以清晰直接的方式向訪問者傳達(dá)您的信息，以確保您影響人們注意您希望他們做什么。使用空格來整理頁(yè)面并添加對(duì)比的CTA按鈕只是實(shí)現(xiàn)此目的的幾種方法。但最后，著陸頁(yè)設(shè)計(jì)不只是關(guān)于元素的外觀，而是它們向訪問者傳達(dá)的信息。
外貿(mào)網(wǎng)站制作,外貿(mào)<a href=網(wǎng)站設(shè)計(jì),英文網(wǎng)站設(shè)計(jì),外貿(mào)網(wǎng)站建設(shè)" />
視覺吸引力只是著陸頁(yè)設(shè)計(jì)的一個(gè)方面- 頁(yè)面元素如何相互交互并且流動(dòng)在一起決定了您的頁(yè)面是否會(huì)成功吸引訪問者。這就是視覺層次結(jié)構(gòu)發(fā)揮作用的地方。下面我們會(huì)根據(jù)幾個(gè)國(guó)外的英文網(wǎng)站設(shè)計(jì)案例來做解析
什么是視覺層次？
可視層次結(jié)構(gòu)確定哪些頁(yè)面元素首先與訪問者互動(dòng)，以及在頁(yè)面上與哪些元素交互（以及以何種順序）。通過建立可視化層次結(jié)構(gòu)，您可以確保訪問者和登錄頁(yè)面之間的通信是無縫的。
可以使用以下技術(shù)實(shí)現(xiàn)視覺層次結(jié)構(gòu)：
比例： D不同尺寸的元素將引導(dǎo)用戶注意 -與較小的元素相比，較大的元素吸引更多的注意力。
顏色： 人們被吸引到大膽，對(duì)比鮮明的顏色。
對(duì)比度：顏色的變化可以用來吸引注意力。Ç ontrasting一個(gè)元件的反對(duì)色的其他繪制焦點(diǎn)。
對(duì)齊：列和網(wǎng)格可以在元素之間創(chuàng)建對(duì)齊，并使訪問者注意到。
鄰近度： 這有助于將某些著陸頁(yè)元素分開并分組（或分開），以幫助區(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位用戶如何查看數(shù)千個(gè)不同的網(wǎng)頁(yè)。調(diào)查結(jié)果顯示，用戶的主要閱讀行為在各個(gè)站點(diǎn)和任務(wù)中相對(duì)一致。
更具體地說，用戶以F模式閱讀。
F模式規(guī)定訪問者首先在水平方向上閱讀頁(yè)面，主要是沿著內(nèi)容區(qū)域的上部，然后向下移動(dòng)頁(yè)面并在第二條水平線上閱讀。?F inally，游客掃描內(nèi)容的左側(cè)垂直運(yùn)動(dòng)。
這就是運(yùn)動(dòng)通常的樣子：
外貿(mào)網(wǎng)站制作-F模式1.jpg
上圖所示的三張熱圖來源于三個(gè)不同網(wǎng)站的用戶眼動(dòng)追蹤研究。值得一提的是，F(xiàn)模式不必遵循嚴(yán)格的雙桿水平模式（參見右上圖中的熱圖）。
顏色鍵如下：
紅色=觀看次數(shù)最多，固定最多的區(qū)域
黃色=一些觀點(diǎn)，但固定較少
藍(lán)色=觀看次數(shù)最少，注意力很少
灰色=非常少的視圖和沒有注視
這里要記住的關(guān)鍵是用戶的眼球運(yùn)動(dòng)從左上角開始并在頁(yè)面上移動(dòng)，然后向下掃描頁(yè)面以搜索他們發(fā)現(xiàn)有吸引力的元素。對(duì)于元素你想游客到注意到在文字為主的頁(yè)面（如圖像），將它們放置在F方式確保元素被看到。
Hootsuite在其著陸頁(yè)上使用F圖案來突出顯示最重要的元素（在首頁(yè)上方）：
F-模式著陸頁(yè)，例如，來自HootSuite
首先，T 他訪客 的眼睛第一次去的標(biāo)題和小標(biāo)題。
接下來，他們將掃描b ullet-point的好處（圖標(biāo)）。
之后，訪問者會(huì)看到兩個(gè)CTA按鈕。
BigCommerce也在其著陸頁(yè)上使用F模式（在首頁(yè)上方）：
F-模式著陸頁(yè)，例如-的Bigcommerce
標(biāo)題是頁(yè)面上大的字體，因此可能首先看到。
然后將子標(biāo)題跨越到圖像。
接下來是項(xiàng)目符號(hào)中的副本。
最后，在用戶掃描左至右觀看兩個(gè)CTA按鈕。
安排您的著陸頁(yè)面元素小號(hào)，使他們陷入這種特殊的視覺為了確保游客通過你的頁(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)的路線就讀取-左到右，曲折從上到下：
參觀者首先從左上角掃描到右上角，形成一條假想的水平線
接下來，它們向下掃描并向左掃描，創(chuàng)建一條假想的對(duì)角線
最后，他們?cè)俅位氐接疫?，形成第二條水平線
這是從這些眼球運(yùn)動(dòng)中出現(xiàn)的觀察模式：
Z-圖案視圖案
就像F圖案一樣，Z圖案布局不一定是精確的Z圖案。水平線不必完全水平 - 它們也可以成角度。此外，可以有多個(gè)z的整個(gè)頁(yè)面。請(qǐng)確保：
頂部水平線包括您希望訪客首先關(guān)注的主要組件。
對(duì)角線應(yīng)該包含導(dǎo)致您的CTA按鈕的任何信息。
底部水平線應(yīng)突出顯示沿該線的任何點(diǎn)的CTA。
該Lyft著陸頁(yè)采用了Z-模式的一個(gè)很好的例子：
Z-模式著陸頁(yè)，例如，lyft
訪客首先在頂部水平線上查看徽標(biāo)和注冊(cè)騎行;CTA按鈕。
接下來，他們沿對(duì)角線向下行并掃描表格的標(biāo)題。
最后，看看底部水平線，其中Lyft vs. Uber標(biāo)題和小標(biāo)題通向CTA按鈕。
我們的最后一個(gè)示例使用Z模式的LinkedIn：
Z-模式著陸頁(yè)，例如，LinkedIn
第一條水平線包括 開始招聘;標(biāo)題和女性的臉部
向左掃描，訪問者然后看到兩個(gè)藍(lán)色CTA按鈕上方的副本
在第二個(gè)對(duì)角線中，眼睛移動(dòng)到40％統(tǒng)計(jì)數(shù)據(jù)并在頁(yè)面上從左向右移動(dòng)以查看其他兩個(gè)統(tǒng)計(jì)數(shù)據(jù)
最后，您可以使用Z模式讓訪問者專注于說服他們更接近轉(zhuǎn)換目標(biāo)的元素。
在外貿(mào)網(wǎng)站設(shè)計(jì)過程中，使用F和Z模式創(chuàng)建引人入勝的登錄頁(yè)面體驗(yàn)
將最重要的目標(biāo)網(wǎng)頁(yè)元素放置在訪問者的自然眼睛路徑上，無論是F還是Z模式，都可以確保您創(chuàng)建引人入勝的著陸頁(yè)體驗(yàn)。利用目標(biāo)網(wǎng)頁(yè)上的可視層次結(jié)構(gòu)，確保訪問者吸收您的郵件并采取您希望他們采取的操作。

分享名稱：外貿(mào)網(wǎng)站制作：如何在英文建站設(shè)計(jì)中使用F＆Z模式
網(wǎng)頁(yè)路徑：http://www.bm7419.com/news32/33482.html

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

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司