2013年10月9日 星期三

網站製作-華海國際案例分享

我的媽呀!本週要介紹的網站製作案例又是一個小編夢想的廚房世界設計公司阿,看完這案例,下班我肯定會衝去逛逛這家公司的產品了,這家公司的產品光看圖就讓小編我整個失去控制了。讓我們先進入正題,今天的網站製作客戶位於台北市大度路三段的華海國際。


1.      需求確認:第一次和客戶見面瞭解網站製作需求時,瞭解到客戶很需要一個可以讓他們自由更新資料的後台,這時候心想,想要能夠自由自在的更新網頁資訊上傳產品圖片,找我們紅威就對了!!為了能夠讓客戶瞭解到我們的後台是多麼的方便操作所以我也帶客戶玩了快2個小時的後台,客戶也真的能夠感受到我們的後台真的就像使用word的一樣簡單,客戶的產業別是代理人造石的所以有建議客戶在產品呈現及實際案例我們會用點小圖放大圖的方式來呈現,讓瀏覽者可以清楚的看到如果我家或我設計的房子用了人造石會是多麼的棒!




2.      風格確認:客戶喜歡簡單大方的感覺,所以有建議客戶我們可以用白底並加上大圖輪播的方式來呈現首頁,並在每個內頁都會再加一張具有代表性的圖片來增加整個網頁的豐富度,讓人進來瀏覽網頁時就有家的感覺,並且再大圖下方做了3個連結,讓人可以一進到首頁就能夠快速的找到華海的第一手資訊




設計端部份

設計部門在拿到華海此案時,其實在網站製作上還蠻快的,最主要是因為客戶網站製作風格很明確,也相當好製作,客戶對於整個網站製作的風格,就是要簡單大方;整體的設計,因為客戶賣的產品是衛浴的相關設備及產品,所以他們要的色系就是要清新,整個網站製作的重點就是要凸顯他們賣的產品。所以設計部門也花了相當多的時間在配色方面,以及整體內頁的色系搭配,讓整個網站製作的風格達到客戶想要的感覺。

    
(整體網站設計的風格呈現清新大方、簡單的色調)

網站製作的過程當中,我們碰到了幾項的困難之處:內頁左側按鈕的部份,因為我們都是使用黑快馬的相關模組聯結下去製作的,但是客戶部分地方會需要兩階層,所以我們在相關模組的外面,就包了一個模組外關,這樣才有辦法達到使用相關模組,然後又可以有下拉兩階層的程式設計。
另外此處也使用了一個小技巧,就是我們在按鈕的地方增加了jQuery的語法,這樣一來,客戶停留在某個頁面的話,也可以藉由這支小程式來判斷現在停留的頁面,搭配CSS語法,這樣瀏覽者才會知道現在停留在哪個頁面上….

(左側的按鈕列使用了相關模組+模組外觀,維護上相當簡單)

最後此網站有一個蠻特別的地方,就是服務據點的頁面,左側我們使用了地圖導覽的這種按鈕,這樣可以快速的分三區,對瀏覽者來講也相當的快速能找到自己想找的服務據點。左側明細的部份,我們用了一點jQuery語法來去除原本明細應該會有的超聯結;這樣一來,客戶在維護據點的時後,就變得相當的好維護了!


(左側的地圖導覽按鈕,快速的將台灣分成北、中、南區)


Q&A部份使用了拉展方式,找問答相當的方便簡單!




沒有留言:

張貼留言