我們研究了100個獨立站，總結出兩個轉化率優(yōu)化秘訣---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優(yōu)化

不知道大家平常在瀏覽獨立站的時候，是否偶爾會冒起個想法：這個品牌到底是咱們國人做的還是海外DTC品牌？---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優(yōu)化

問大家這個問題是因為之前我們分享過一篇商品圖要怎么拍才好的文章，后臺有小伙伴留言表示希望多分享一些相關內容。

雖然這些知識表面上看起來是跟網站視覺UI相關的，其實本質上是在講如何真正做好一個網站——而獨立站，恰巧首先得是一個好的網站。

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

當打開這樣一個頁面的時候，請問你會注意到Lucky Tuesday的優(yōu)惠券懸浮條、引導下載APP的懸浮條、一屏2個的SHOP NOW的CTA、風情萬種的年輕模特還是母親節(jié)特惠的文字？

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

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

對比：顏色的轉變可以用來抓人眼球。一個元素的顏色與另一個元素的顏色形成對比，很容易吸引人們的注意力；

頁面掃描模式：視線追蹤研究顯示，一旦訪客到達一個網頁，他們的視線會以固定的順序集中在整個頁面中的某些位置。

上述所有的設計元素都很重要，但本文中我們將重點關注經由研究所證明的視線瀏覽模式——特別是F模式和Z模式。

2006年，尼爾森-諾曼集團關于視線追蹤的研究被認為是當今最有用且引用最多的研究之一。在研究過程中，他們觀察了232名用戶如何瀏覽數(shù)千個不同的網頁。研究結果顯示，用戶的主要閱讀習慣在不同的網站和測試中是相對一致的。

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

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

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

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

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

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

回到我們文章開頭的問題，就當前時點的情況來說，我們會較為可悲的發(fā)現(xiàn)，當一個獨立站頁面中的視覺層次結構較為混亂時，背后有可能就是國內跨境賣家在運營。---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優(yōu)化

不過隨著越來越多賣家開始選擇品牌模式，相信獨立站的設計也會越來越精細，而也希望我們今天分享的知識能夠起到小小的助力。