電商網站實戰測試篇—版型幾大常見錯誤

Astral WebBy Astral Web 2 years ago1 Comment
首頁  /  網站設計與開發  /  網站測試  /  電商網站實戰測試篇—版型幾大常見錯誤

撰寫一個電商網站,就好比是在蓋房子一樣,要先蓋好基底,基底蓋穩了,才能搭配水泥與磚頭或是其他相關建材元素混合使用,接著一層一層往上蓋。所以版型就好比是房子的基底,它會間接影響使用者在瀏覽網站時的體驗度。所以今天Astralweb要來跟大家分享『電商網站版型常見幾大錯誤』。

 

常見的版型錯誤,大部分應該都是落在以下幾點:

  1. 文字:字型、顏色、大小是否一致(含英文大小寫部分)
  2. 版型色彩配置
  3. 位置是否跑版
  4. 破圖

 

什麼是破圖?

所謂的破圖就是指圖沒有連貫以及在圖的邊邊還有界線。容易發生破圖的情況大部分是在大螢幕的時候,很容易會出現瑕疵,所以需要留意這部分。

 

在這裡小編提供一張破圖給大家看

電商網站測試

而造成圖沒有連貫的原因有兩個,第一個是可能是設計師沒有處理好;好比說上面這張圖,它就是沒有連貫。

 

第二個則是可能因為寬度限制,結果導致圖被切到了,就好比下面這張範例圖。

電商網站測試

是不是非常明顯地可以看到在Banner的圖已經被切到,沒有呈現完整的圖。

 

接下來我們來看正確、完整的圖,如下圖。

電商網站測試

是不是和剛剛那張被切到的Banner圖差很多呢! 在整體視覺觀感上就有很大的落差。

 

現在我們來看位置是否跑版

在這張範例圖有兩個錯誤的地方,在這裡我們先來看Menu部分。

電商網站測試

在上圖這張範例圖,可以很清楚地看到次選單已經蓋住主選單上的選項內容了,這樣不易於使用者看到主選單上的選項內容。

 

下圖這張範例圖也是,位置也是處於跑版的狀態。此時,應該將問題例出來請工程師調整。

電商網站測試

接下來,我們來看版型色彩配置

一個好的網站版型色彩配置,能讓使用者在瀏覽網站時感到舒適,而一個糟的版型色彩搭配,就很有可能讓使用者在瀏覽網站時感到不舒服或反感。就好比下圖這個版型的色彩配置,著時讓人看不太清楚網頁上的字。

電商網站測試

所以一個網站的版型色彩配置是很重要,因為它足以影響使用者在視覺上的觀感。

 

文字部分,我們將分成3個部分來例舉說明。

1. 文字大小是否統一

下圖以英文大小寫為範例來說明。

電商網站測試

 

在上圖,可以明顯地看到整體頁面英文設計都是設計為大寫。但在圖中下方Footer處(紅框處)的標題並不是都是大寫,這就表示這個頁面的英文文字沒有統一為大寫,是需要去修正的。

而下圖這張則是以文字大小來說明。

 

電商網站測試

在圖中可以清楚地看到ABOUT US的文字大小明顯比其他同區塊的還大,所以也是文字大小沒有統一必須去修正的地方,如此一來ABOUT US才不會顯得特別突兀。

 

 

2. 文字字型風格是否一致

在下圖中,我們可以看到字型並沒有一致,相同的區塊卻有不同的字型(紅框),這也是需要被修正的,才不會影響整體頁面字型的一致性。

電商網站測試

 

 

3. 文字顏色是否一致

下圖可以看到金額部分(紅框)沒有統一顏色,這樣很容易讓使用者在瀏覽該商品時產生疑惑,這點也是要謹慎小心的。

電商網站測試

上面所例舉的這些都是在網站中常見的幾大版型錯誤,然而一個版型的好壞與流暢度,會間接影響使用者在瀏覽網站時的視覺觀感與體感,所以該如何修改或調整讓版型達到最佳效果與流暢度,才不會影響使用者的視覺觀感與體感,這是身為一名QA工程師在進行測試時都應該去留心與注意的。

 

這就是今天與大家分享的電商網站版型常見的幾大錯誤,如有任何問題歡迎洽詢歐斯瑞。

 

欲了解版型相關測試可參考以下2篇文章

1. 網站測試-單元篇(上)

2. 網站測試-單元篇(下)

 

截取破圖範例圖之參考來源:http://web.cyvs.tyc.edu.tw/html/

 

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站測試

One Comment

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。