我們研究了100個獨立站，總結出兩個轉化率優化秘訣---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優化
* 來源: * 作者: admin * 發表時間: 2023-09-19 11:43:30 * 瀏覽: 57
我們研究了100個獨立站，總結出兩個轉化率優化秘訣---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優化
內容提要：
1.優質頁面的共同特征
2.什么是視覺層次？
3.利用F模式和Z模式優化獨立站頁面
本文共約2600字，閱讀時間5-7分鐘。
優質頁面的共同特征
不知道大家平常在瀏覽獨立站的時候，是否偶爾會冒起個想法：這個品牌到底是咱們國人做的還是海外DTC品牌？---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優化
問大家這個問題是因為之前我們分享過一篇商品圖要怎么拍才好的文章，后臺有小伙伴留言表示希望多分享一些相關內容。
雖然這些知識表面上看起來是跟網站視覺UI相關的，其實本質上是在講如何真正做好一個網站——而獨立站，恰巧首先得是一個好的網站。
在服務咱們獨立站賣家的過程中，我們越來越發現一個現狀——作為一個為獨立站效果負責的人，不管是網站運營、活動運營抑或是用戶運營，千萬不能做出策劃之后就把整個網站的呈現丟出去不管，而是應該在一些基本的視覺規律基礎上把握獨立站的整體呈現，讓你的策劃和視覺效果碰撞出“事半功倍”的火花。
那么今天，我們就從獨立站內容排版的規律講起。
首先我們來看看下面的獨立站頁面：
當打開這樣一個頁面的時候，請問你會注意到Lucky Tuesday的優惠券懸浮條、引導下載APP的懸浮條、一屏2個的SHOP NOW的CTA、風情萬種的年輕模特還是母親節特惠的文字？
我們的大腦在同一時間被過多內容同時侵入的時候，第一反應往往是點擊右上角的退出按鈕。
換句話說，滿屏的重點=沒有重點=用戶流失
當然，同為服裝獨立站，也不乏這樣的情況：
簡單的構成元素、清晰的布局、明確的CTA，會引導用戶一步步點擊頁面元素，最終順利完成瀏覽。
我們另外再舉一個例子：
清爽的用色、明確的內容，用戶要么被吸引去查看具體內容、要么被吸引去點擊“Try 5 at home for free”的按鈕。
通過對比相信你可能也有一些發現，頁面瀏覽作為跟用戶最直接的交互方式，其實也有跡可循。
我們從此出發去研究了超過100個獨立站，總結出了兩個能夠幫助快速優化頁面排版設計的規律，你只要掌握了這兩個基本規律，以后提升頁面轉化這件事不管任務多緊迫都能做的八九不離十。---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優化
什么是視覺層次？
視覺層次決定了哪些頁面元素會首先吸引用戶，以及用戶在頁面上會以何種順序、與哪些元素互動。
通過建立一個視覺層次，你可以確保用戶和其訪問的頁面之間的交流是無縫銜接的。
視覺層次可以通過以下技術來實現：
格式：不同大小的元素將引導用戶的注意力。與較小的元素相比，較大的元素能吸引更多的注意力；
顏色：人們總是會被黑體的、對比強烈的顏色所吸引；
對比：顏色的轉變可以用來抓人眼球。一個元素的顏色與另一個元素的顏色形成對比，很容易吸引人們的注意力；
對齊：柱形圖和網格能使元素對齊，從而也更易吸引注意；
組合：用其來將某些挨著頁面的元素分開或組合在一起，以幫助區分它們的位置；
留白：通過頁面上的留白來突出真正重要的元素；
頁面掃描模式：視線追蹤研究顯示，一旦訪客到達一個網頁，他們的視線會以固定的順序集中在整個頁面中的某些位置。
上述所有的設計元素都很重要，但本文中我們將重點關注經由研究所證明的視線瀏覽模式——特別是F模式和Z模式。
F模式
2006年，尼爾森-諾曼集團關于視線追蹤的研究被認為是當今最有用且引用最多的研究之一。在研究過程中，他們觀察了232名用戶如何瀏覽數千個不同的網頁。研究結果顯示，用戶的主要閱讀習慣在不同的網站和測試中是相對一致的。
更確切地說，用戶的閱讀方式是F模式。
F模式是用戶首先以水平方向閱讀頁面，主要是沿著內容區的上部閱讀；然后向頁面下方移動，閱讀到第二條水平線之上。最后，用戶以垂直方向瀏覽左側頁面。---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優化
上圖中的三張熱力圖來自于對三個不同網站的用戶視線追蹤研究。值得一提的是，F模式不一定要遵循嚴格的雙維度水平模式，而是可能有多條水平的閱讀線（見上面右邊的熱圖）。
關于視線的運動軌跡解釋如下：
紅色=瀏覽量最大、固定率最高的區域
黃色=有一些觀看，但固定率較少
藍色=觀看次數最少，固定次數極少
灰色=瀏覽量非常少，沒有固定率
這里需要牢記的一點是：用戶的視線移動從左上角開始，在整個頁面上移動，然后向下掃描頁面，尋找他們認為有吸引力的元素。所以對于在文字密集的頁面上，那些你希望用戶注意到的元素（比如CTA），建議將它們放在F模式的核心位置中確保這些元素被看到。
我們發現一些DTC品牌已經在運用這個模式了：
此頁面就采用了標準的F模式來布局：
用戶進入到頁面后，眼睛首先會看到最大的標題和字體大小次之的副標題，接下來自然而然會到我們希望其點擊的CTA部分。而用戶很有可能也會因此按我們的設計點擊CTA繼續下一步的瀏覽。
下面的兩個例子也如出一轍：
而相對于上面的例子，下面這個頁面顯然就有優化空間，不管是CTA的位置、Trust Stamp的擺放還是母親節折扣的文案，都可以重新考慮設計方案。---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優化
Z模式
Z型布局的設計模仿了人眼在閱讀時的路線——從左到右，從上到下的模式。
用戶首先從左上角掃描到右上角，形成一條假想的水平線；
接下來，他們會向左下掃描，形成一條假象中的對角線；
最后，他們再次向右看去，形成第二條水平線。
就像F模式一樣，Z模式的布局也不一定是一個精確的Z型圖案。水平線不必完全是水平的，它們也可以是有角度的，而整個頁面也可以有多個Z字型，只是要確保以下幾個方面即可：
頂部的水平線包括你希望訪問者首先關注的主要組成部分；
底部的水平線應該在某個位置突出CTA
比如上圖就是一個很好的利用了Z模式來進行設計的頁面：
用戶首先看到的是傳遞品牌形象并突出季節性的文字；
然后沿著對角線前進可以看到所售鞋款的上腳圖；
最后落到引起下一步行動的CTA上，從而帶動用戶的下一個動作。
當然我們還能看到其他的一些例子：
不管是引導用戶購買還是引導填寫留資表單，都是在Z模式的核心位置留下了讓用戶行動的Trigger。
寫在最后
回到我們文章開頭的問題，就當前時點的情況來說，我們會較為可悲的發現，當一個獨立站頁面中的視覺層次結構較為混亂時，背后有可能就是國內跨境賣家在運營。---長樂外貿獨立站-長樂谷歌推廣-長樂谷歌優化
不過隨著越來越多賣家開始選擇品牌模式，相信獨立站的設計也會越來越精細，而也希望我們今天分享的知識能夠起到小小的助力。
-END-
是不是被本文的FZ模式震驚到了！這種知識在我們的視頻課程里還有很多，歡迎大家掃碼添加坤城網絡小助手咨詢!
關閉返回