我們研究了100個(gè)獨(dú)立站，總結(jié)出兩個(gè)轉(zhuǎn)化率優(yōu)化秘訣---長(zhǎng)樂(lè)外貿(mào)獨(dú)立站-長(zhǎng)樂(lè)谷歌推廣-長(zhǎng)樂(lè)谷歌優(yōu)化

不知道大家平常在瀏覽獨(dú)立站的時(shí)候，是否偶爾會(huì)冒起個(gè)想法：這個(gè)品牌到底是咱們國(guó)人做的還是海外DTC品牌？---長(zhǎng)樂(lè)外貿(mào)獨(dú)立站-長(zhǎng)樂(lè)谷歌推廣-長(zhǎng)樂(lè)谷歌優(yōu)化

問(wèn)大家這個(gè)問(wèn)題是因?yàn)橹拔覀兎窒磉^(guò)一篇商品圖要怎么拍才好的文章，后臺(tái)有小伙伴留言表示希望多分享一些相關(guān)內(nèi)容。

雖然這些知識(shí)表面上看起來(lái)是跟網(wǎng)站視覺(jué)UI相關(guān)的，其實(shí)本質(zhì)上是在講如何真正做好一個(gè)網(wǎng)站——而獨(dú)立站，恰巧首先得是一個(gè)好的網(wǎng)站。

在服務(wù)咱們獨(dú)立站賣家的過(guò)程中，我們?cè)絹?lái)越發(fā)現(xiàn)一個(gè)現(xiàn)狀——作為一個(gè)為獨(dú)立站效果負(fù)責(zé)的人，不管是網(wǎng)站運(yùn)營(yíng)、活動(dòng)運(yùn)營(yíng)抑或是用戶運(yùn)營(yíng)，千萬(wàn)不能做出策劃之后就把整個(gè)網(wǎng)站的呈現(xiàn)丟出去不管，而是應(yīng)該在一些基本的視覺(jué)規(guī)律基礎(chǔ)上把握獨(dú)立站的整體呈現(xiàn)，讓你的策劃和視覺(jué)效果碰撞出“事半功倍”的火花。

當(dāng)打開(kāi)這樣一個(gè)頁(yè)面的時(shí)候，請(qǐng)問(wèn)你會(huì)注意到Lucky Tuesday的優(yōu)惠券懸浮條、引導(dǎo)下載APP的懸浮條、一屏2個(gè)的SHOP NOW的CTA、風(fēng)情萬(wàn)種的年輕模特還是母親節(jié)特惠的文字？

清爽的用色、明確的內(nèi)容，用戶要么被吸引去查看具體內(nèi)容、要么被吸引去點(diǎn)擊“Try 5 at home for free”的按鈕。

我們從此出發(fā)去研究了超過(guò)100個(gè)獨(dú)立站，總結(jié)出了兩個(gè)能夠幫助快速優(yōu)化頁(yè)面排版設(shè)計(jì)的規(guī)律，你只要掌握了這兩個(gè)基本規(guī)律，以后提升頁(yè)面轉(zhuǎn)化這件事不管任務(wù)多緊迫都能做的八九不離十。---長(zhǎng)樂(lè)外貿(mào)獨(dú)立站-長(zhǎng)樂(lè)谷歌推廣-長(zhǎng)樂(lè)谷歌優(yōu)化

對(duì)比：顏色的轉(zhuǎn)變可以用來(lái)抓人眼球。一個(gè)元素的顏色與另一個(gè)元素的顏色形成對(duì)比，很容易吸引人們的注意力；

頁(yè)面掃描模式：視線追蹤研究顯示，一旦訪客到達(dá)一個(gè)網(wǎng)頁(yè)，他們的視線會(huì)以固定的順序集中在整個(gè)頁(yè)面中的某些位置。

上述所有的設(shè)計(jì)元素都很重要，但本文中我們將重點(diǎn)關(guān)注經(jīng)由研究所證明的視線瀏覽模式——特別是F模式和Z模式。

2006年，尼爾森-諾曼集團(tuán)關(guān)于視線追蹤的研究被認(rèn)為是當(dāng)今最有用且引用最多的研究之一。在研究過(guò)程中，他們觀察了232名用戶如何瀏覽數(shù)千個(gè)不同的網(wǎng)頁(yè)。研究結(jié)果顯示，用戶的主要閱讀習(xí)慣在不同的網(wǎng)站和測(cè)試中是相對(duì)一致的。

F模式是用戶首先以水平方向閱讀頁(yè)面，主要是沿著內(nèi)容區(qū)的上部閱讀；然后向頁(yè)面下方移動(dòng)，閱讀到第二條水平線之上。最后，用戶以垂直方向?yàn)g覽左側(cè)頁(yè)面。---長(zhǎng)樂(lè)外貿(mào)獨(dú)立站-長(zhǎng)樂(lè)谷歌推廣-長(zhǎng)樂(lè)谷歌優(yōu)化

上圖中的三張熱力圖來(lái)自于對(duì)三個(gè)不同網(wǎng)站的用戶視線追蹤研究。值得一提的是，F(xiàn)模式不一定要遵循嚴(yán)格的雙維度水平模式，而是可能有多條水平的閱讀線（見(jiàn)上面右邊的熱圖）。

這里需要牢記的一點(diǎn)是：用戶的視線移動(dòng)從左上角開(kāi)始，在整個(gè)頁(yè)面上移動(dòng)，然后向下掃描頁(yè)面，尋找他們認(rèn)為有吸引力的元素。所以對(duì)于在文字密集的頁(yè)面上，那些你希望用戶注意到的元素（比如CTA），建議將它們放在F模式的核心位置中確保這些元素被看到。

用戶進(jìn)入到頁(yè)面后，眼睛首先會(huì)看到最大的標(biāo)題和字體大小次之的副標(biāo)題，接下來(lái)自然而然會(huì)到我們希望其點(diǎn)擊的CTA部分。而用戶很有可能也會(huì)因此按我們的設(shè)計(jì)點(diǎn)擊CTA繼續(xù)下一步的瀏覽。

而相對(duì)于上面的例子，下面這個(gè)頁(yè)面顯然就有優(yōu)化空間，不管是CTA的位置、Trust Stamp的擺放還是母親節(jié)折扣的文案，都可以重新考慮設(shè)計(jì)方案。---長(zhǎng)樂(lè)外貿(mào)獨(dú)立站-長(zhǎng)樂(lè)谷歌推廣-長(zhǎng)樂(lè)谷歌優(yōu)化

就像F模式一樣，Z模式的布局也不一定是一個(gè)精確的Z型圖案。水平線不必完全是水平的，它們也可以是有角度的，而整個(gè)頁(yè)面也可以有多個(gè)Z字型，只是要確保以下幾個(gè)方面即可：

回到我們文章開(kāi)頭的問(wèn)題，就當(dāng)前時(shí)點(diǎn)的情況來(lái)說(shuō)，我們會(huì)較為可悲的發(fā)現(xiàn)，當(dāng)一個(gè)獨(dú)立站頁(yè)面中的視覺(jué)層次結(jié)構(gòu)較為混亂時(shí)，背后有可能就是國(guó)內(nèi)跨境賣家在運(yùn)營(yíng)。---長(zhǎng)樂(lè)外貿(mào)獨(dú)立站-長(zhǎng)樂(lè)谷歌推廣-長(zhǎng)樂(lè)谷歌優(yōu)化

不過(guò)隨著越來(lái)越多賣家開(kāi)始選擇品牌模式，相信獨(dú)立站的設(shè)計(jì)也會(huì)越來(lái)越精細(xì)，而也希望我們今天分享的知識(shí)能夠起到小小的助力。