但網站改版應該注意哪些地方?網站改版會如何進行,透過KIISMET品牌購物網站的改版過程,希望能給手上正要執行網站改版計畫的朋友們,對網站改版或網站製作流程有一個初步的概念。

Chloe是KIISMET品牌負責人,透過網路搜尋找到CADIIS。一開始,Chloe提出了在舊網站中的一些問題。當時是第一次做網站,經驗不多,並沒有詳細審閱設計公司的背景專長,因此直接委託視覺專長的個人設計師設計網站。建置完成後,才發現網站的更新非常困難,每次更新都需要透過設計師處理,有時候僅僅是網站選單文字的更新,或是商品說明的修改,也沒辦法快速處理。另外,還有一個急需改版的原因,是需要建置購物車系統,與原有的網站相結合。

在聽完Chloe對於KIISMET網站的需求說明後,我們提出幾項改版建議,並且以CMS模組化系統為工程基礎建置網站,也便於日後的管理和維護。另外,針對KIISMET的視覺風格設計專屬KIISMET的版型,透過模組元件的相互搭配,完成一個在可透過後端管理系統自行維護網站資料的功能性網站。

在逐一和KIISMET討論確認各單元的規劃與架構後,CADIIS依據完成網站架構內容所需的工時提出報價,在Chloe同意報價後即開始著手網站版型的設計。

 

網站版型設計

看過舊網站首頁後,CADIIS和Chloe一致同意保留KIISMET舊網站首頁的視覺風格,但在資訊區塊的劃分上需要重新設計,讓訪客一看到首頁就了解這是什麼性質的網站。

網頁設計 kiismet網站原版

Kiismet舊版網站首頁

 

另外KIISMET也提出幾個喜愛的網站做為參考。

Chloe偏好簡單有型的網站,如UGMONK品牌服飾網站。

網頁設計 ugmonk版型
  資料來源:http://shop.ugmonk.com/
 

Chloe還希望網站背景可隨機更換,如TheMusicTee服飾品牌網站

網頁設計 TheMusicTee網站版型

資料來源:https://www.themusictee.com/

CADIIS在為KIISMET量身訂做網站版型時,即將這兩個設計想法考慮進來,並保留舊網站的視覺風格,最後提出改造後新網站的版型。

版型的設計的同時也要考慮網站各功能的規劃,因此,我們同時進行網站規劃與使用介面設計相關工作,接下來逐一介紹各區塊功能設計。


首頁規劃

KIISMET是品牌購物網站,但在原有的首頁只有單純圖片的形象呈現,幾乎看不到與購物有關的文字資訊,也缺少說明文字的引導。

改版後將首頁做功能性的定義,左上角為購物訊息的SP(特別企劃區塊),以圖示提供消費者購物相關的訊息快速連結;中間上方的大塊區SP,則定義為品牌形象或主要特惠商品的廣告區塊,以圖片輪撥方式表現,形象圖中穿插model插著品牌服飾的照片,讓消費者看了較容易理解這個網站是賣什麼產品,也較能表現品牌個性。大SP下方的三個捷徑區塊做為中型的促銷看版,提供品牌特色的相關資訊。這三個SP區塊都可以讓網站管理者從後端自行修改內容。

網頁設計 Kiismet新版網站版型

KIISMET新版網站首頁版型

資料來源:http://www.kiismet.com/tw/

 

選單設計

舊網站的選單以gif圖檔製作,不利Google等搜尋引擎爬行,Google也沒辦法辨識圖片中關鍵字。另外,圖片式的選單,還有一個缺點:沒辦法透過後台即時修改選單名稱。圖片式選單的修改必須取得網站主機上的原圖,修改後再透過FTP更新回主機,並確定與其他圖片是使用一致的字型與字體大小。

網頁設計 網站選單設計 舊版

上圖為舊網站主選單
 

新網站改以文字選單方式建置,輔以CSS包裝選單文字的字型、大小、色彩,解決舊網站的問題,可直接於後台變更選單標題。

網頁設計 網站選單設計 新版

上圖為新網站主選單


品牌標語

再來是品牌精神標語的部份。舊網站是以純圖片做成品牌標語,同樣不利Google搜尋。

新網站改以純文字表現,加上CSS的包裝,解決了Google搜尋的問題,另外還將品牌標語資料庫化,讓KIISMET每新增一筆blog,就自動產生為首頁的品牌標語,大大減少網站維護所需花費的時間。

網頁設計 網站品牌標語 舊版 新版

左圖為舊版,右圖為新版。
 

最新消息

在「最新消息」的部份,舊網站標題以圖片製作標題,同樣有Google搜尋的問題,簡述說明以12px微軟中黑做為字型,也有不利閱讀的問題。

網頁設計 最新消息 版面設計

舊版KIISMET網站,「最新消息」版面設計

 

新網站將「最新消息」資料庫化,並且能抓取文章中的圖片,自動產生縮圖,如果沒有縮圖,就以淺色logo做為預設圖形,避免出現破圖(俗稱叉燒包)的問題。

網頁設計 最新消息 版面設計

新版KIISMET網站,「最新消息」版面設計

 

購物車

在購物車的部份,舊網站為靜態網頁,沒辦法從後端管理商品資訊,這也是改版的重點。但更大的問題是,舊網站以iFrame的方式建置內容,不但沒辦法被Google搜尋到商品內容,也沒辦法針對個別商品提供顧客單一的商品網址,造成KIISMET(商家)與顧客溝通上的困擾。

網頁設計 舊版KIISMET網站「購物車」版面設計

圖為舊版網站的產品頁畫面

 

新網站依照KIISMET的需求導入購物車平台,除原本的購物功能外,還提供了顧客評論、相關商品等附加功能,讓消費者可以在網路上和商家產生互動。

網頁設計 新版KIISMET網站「購物車」版面設計

圖為新版網站的產品頁畫面

 

聯絡我們

舊網站的聯絡方式是直接在網頁上留下Email,這個方式很直接,但也容易被有心人搜集成為網路上販售的Email名單。

網頁設計 舊版KIISMET網站「聯絡我們」版面設計

圖為舊版網站的聯絡我們畫面

 

新網站以form表單建置,並且可以因應管理上的需求,透過後端即時調整聯絡表單中所需要的欄位。

alt

圖為新版網站的聯絡表單畫面

 

其他

除了上面幾個網站既有的功能重新改造外,還增加並改善了一些功能。

 

SEO - 網頁標題自動產生

網頁內容標題(如:新訊的標題)自動產生到網頁標題。這個動作可以讓搜尋引擎快速辨識網站的每一個頁面的獨特性,對於網路搜尋排名,也有正面影響。另外,網站管理者還可以在後端自行定義顯示在網頁標題上的網站名稱,因應行銷計畫隨時調整網站關鍵字,不需要再委託網頁工程師逐頁修改網站名稱。

網頁設計 KIISMET網站 META title description

圖為新網站網頁原始碼畫面

 

頁底快速連結

網站下方的快速連結區塊,除了提供顧客快速找到常用的資訊(不需要連到內頁,像翻垃圾筒一樣四處翻找),同時也提供Google等搜尋引擎良好的爬行路徑。

網頁設計 頁底快速連結

圖為新網站頁底快速連結畫面

 

網站設計不單只是畫面上美觀的問題,為了便於日後的管理及維護,必須和網站工程相互配合。相較之下,網站設計近似於產品設計或建築設計,設計成果不只是拿來「看」,還要拿來「用」,在設計及規劃過程中,要同時考量使用性上的問題。藉由網站改版,我們可以檢討過去舊網站有哪些地方令人不滿意,在改版時予以改進。同時也檢視目前有哪些網路上流行的工具或平台,與官網整合後提高官網的曝光率,提升品牌知名度。
 

ABOUT CADIIS

凱士網頁設計公司專精於建置RWD及SEO網頁設計規範的網站,採用客製化設計為您打造與企業形象一致的公司網站,同時提供台北、台中、台南、高雄、海外等地網站設計相關服務。

 

網站設計洽詢