2020電商視覺設計的5種方法

在設計電商平台時,以用戶的角度進行思考很重要。此外根據市場的營銷分析和設計的預算.您所選擇的方式也會有所改變.不幸的是,這些都沒有一定的標準答案。

但是這些不外乎以下這五個設計方向.都是基礎,若這五點都沒做到,我相信您所開設的網路商店一定無法正常銷售的,因為這些都是建議一個網站最基本必備的。

 

[1]從信息設計入手很重要

要點1:信息設計是電商網站設計的第一步
如果要適當地組織要發佈在網站上的信息並將其顯示/存儲在適當的位置,則該網站將很容易“看到(瀏覽)”,“單擊(加入)”和“使用(購買)”。此外,在組織和設計信息的過程中,公司的實力和所要傳達的內容都得到了明確,並且提供了設計所需的零件(文本和圖像方向)。信息設計是電商網站設計的第一步。
要點2:組織信息,確定優先及並創建樹形圖
分類要發佈在網站上的信息(產品信息,購物所需的信息,支持購買的信息,操作員信息等),並考慮網站選單和主頁。在樹狀圖中收集組織的信息,檢查信息的過多和不足,選擇信息並確定優先級。
產品分類也很重要。
>大類“女士”
   >中類“褲子”
      >小類“綁腿”,“牛仔布”,“高喬”等。我們
將考慮一種便於客戶找到所需產品的層次結構。
要點3:簡化網站結構
了解網站所需的菜單和頁面內容後,請考慮您的網站結構。當時,以訪問者如何完成“看見(瀏覽)”→“點擊(參與)”→“使用(購買)”為目標的假設。是重點。
在一個極端的示例中,如果您所設計的介面會讓人點了而離開你的網頁.那這絕對是不良的設計,客戶一但被帶走後,要再回來就很難了。考慮一下您的網站結構,以避免這種情況。

[2]佈局網站的框架

要點1:確定網站佈局
根據預先完成的信息設計,確定將成為站點骨架的基本佈局。
通常,網站的頂部和底部很容易讓人看到,因此建議您放置想要查看的信息。
●標題第一行(較小):“主頁按鈕”,“會員登錄”,“購物車”,“產品搜索窗口”等。
●標題第二行(較大):“商店徽標”,“運輸條件”,“付款方式”等。內部申訴點
●主菜單:“產品類別”,“購物方式”,“聯繫方式”等。
●標頭的第三行:“推薦產品標語”,“優惠券”等。•主要
內容:“熱門排名”,“新產品”,“推薦產品”,“聲明”等。
●頁腳(底部):“站點使用摘要”,“主選單連結”等。
要點2:注意第一個觀點
您無需滾動屏幕即可看到的第一個區域稱為“第一視圖”。在PC上,第一個視圖很寬,可以一次顯示站點的主要信息,但是對於小型智能手機,信息量不可避免地受到限制。讓我們在關注第一個視圖的同時考慮一下佈局。
第三點:不要得到太多信息
僅僅因為“第一視圖”很重要,所以打包大量信息就會適得其反。如果信息太多,文本將很小且難以看清,如果選擇太多,則將很難找到您要查找的產品或信息。讓我們根據信息設計階段確定的優先級來縮小信息量。

[3] 電腦網站和行動版手機網站在標題設計上的差異

要點1:電腦網頁站點
在電腦用螢幕觀看可以更容易地看到標題的每個元素的大小和設計。例如,應該突出顯示自己的網上商店和查詢電話號碼的優勢,並且在任何站點上都可以看到的項目(例如主頁按鈕和會員登錄名)應標有一個小圖標(標記)。
要點2:對於手機網站
對於具有小螢幕的手機,請充分利用可以在較小空間中顯示的圖標。此外,由於經常在旅途中或在通勤火車上查看手機網頁,因此考慮降低顯示速度的設計很重要。因此,某些商家將標題中的推薦產品廣告圖在電腦版是動態幻燈片顯示但在手機上的靜止的廣告圖片。

[4]移除不用的按鈕及連結

要點1:使按鈕和鏈接脫穎而出
如果按鈕和鏈接不明顯,則客戶將無法瀏覽多個頁面,並且網站的遷移率將下降。通過使其看起來像可以通過類似按鈕的設計(塊狀,三維等)被單擊,或者通過在鏈接文本中添加特殊的顏色或箭頭,將其與普通文本區分開。
要點2:請特別小心,因為智能手機上沒有滑鼠滑動的動作
由於智能手機上沒有滑鼠滑動的動作的概念,因此,如果您僅通過查看就不知道它是按鈕或鏈接,則將無法用手指輕擊它。該按鈕的最小寬度約為10mm,其設計易於用指尖輕敲。

 

[5]在網站底部設計頁腳

要點1:總結購買前需要了解的信息
許多站點將信息放在客戶希望購買之前的頁腳中。具體而言,感覺是在頁眉中補充諸如“送貨方式/天數”,“付款方法”,“退貨方法”和“聯絡我們”之類的不適合於頁眉的重要信息。
如果是PC站點,請注意不要使頁腳文本太長,並使用較大的標題或圖標進行設計,以便您可以快速掌握內容。智能手機站點的空間很小,因此最好從標題和圖像標語進入詳細頁面。
要點2:頁腳是下一步操作的重要位置
假設客戶查看了產品頁面,向下滾動屏幕,瀏覽了該頁面,但沒有購買。那時,如果頁腳中有指向相關產品的鏈接,則很有可能繼續看到其他產品。由於頁腳有很大的銷售機會,因此我們設置了吸引客戶眼球的圖像橫幅,並建立了帶有措辭的鏈接,使您無需考慮就單擊,例如“其他人也在檢查此內容”。 ,創建下一個動作。
 

 

arrow
arrow

    Fanny 發表在 痞客邦 留言(0) 人氣()