2012年11月20日 星期二

貝比優格 淑女的優雅誕生-網頁設計案例分享

貝比優格  淑女的優雅誕生-網頁設計案例分享
期待網站分享的忠實粉絲們大家好,貝比優格歷經數個月的製作終於在本月進行結案, 
新網站一落成小編就迫不急待分享給大家^^

貝比優格算是一個很成熟的購物網站,負責的業務Kimo表示當初和接洽采硯創意時,羅小姐及盧先生即表示希望網站的目的,是希望帶給消費者悠享生活及高質感的購物經驗,強調產品的天然有機或特殊性,且客戶提供的素材充斥者濃濃的異國風。

起初在規劃網站時,除了網站基本的分類選項外同時還建議客戶,一般購物網站一定會置入的相關欄位,包含隱私權政策、退換貨原則及付款方式等等,讓消費者可以很清楚的了解,當產品有爭議的時候,可用何種管道捍衛自身權益。

首頁的樣式是依照采硯創意提供的想法編排,當初花較多的時間在和客戶討論上版Flash的呈現方式,因產品定位的關係所以動畫希望以生動活潑、引人入勝為出發點,來回改了數次之後最後是以LOGO貫通全分鏡的方式表示出網站的生命力及逗趣!

製作中期溝通較多的部分為魚骨圖的呈現及樣式,魚骨圖的圖片因為取得特殊後來是建議客戶到國外網站買版權才得以解決!!

在網站製作接近尾聲時,客戶要求可以在結案前學習後台的操作方式及維運,除了到客戶端教學給後台權限之外,紅威也提供的客製化的電子檔教學講義讓采硯備查,此舉有好有壞,就客戶而言因網站教學後可在結案前已可編輯網站,能提升網站的完整成度及提早熟悉後台,但就我方來說,除了未結案就先給後台權限不符合公司規定外,也無法判定紅威的階段性任務成果為何,加上結案前的數度修改,該案件也在公司例行性的會議中提出,並檢討缺失及可以學習的地方。
 

小編也訪問了長老級設計師Ellis,這個設計網站的跌宕起伏,因為客戶沒有做購物網站的經驗,我們參考了客戶給的拼湊式網站概念方向後花了許久時間溝通和修改,LAYOUT的製作上,使用了日本網站的設計風格,盡量以簡約大方為原則,用線條來呈現網站的版面,看起來乾淨又不失去整體的視覺感(如下圖)

這讓少女少婦尖叫的日式塗鴉插畫風完全是小編的最愛!!

客戶對設計有個獨特的見解和想法,還親臨本公司與設計師做面對面的溝通和討論。於是有了幾次的修改意見,針對局部地方做了修改,中間版面的魚骨圖連結也經過幾次修改和美化,也變成另外一種樹狀圖的呈現方式,下圖為修改過後的幾個LAYOUT





在內頁LAYOUT設計部份,客戶很喜歡無印良品網站,簡約舒適感覺又有著高質感的味道,故參考了客戶的想法和無印良品的排版。也經過了1~2次的修改和細節的調整,因客戶的產品類別眾多,則以單項簡單齊列方式呈現,在瀏覽動線上更能快速了解客戶品牌及產品的連結,所以有了以下的內頁LAYOUT版型。


網站上線後,客戶對於網站的動畫和流暢度都秉持著公司形象能夠強調自然、有機環保愛地球,甚至設計元素盡量以綠意盎然生動為原則。在和客戶經過幾次溝通,上版的FLASH動畫也修改了好幾次,則中間的樹狀圖圖片在跟客戶討論過後,則以具有生機活力的樹枝葉做為代表,以下為最終上線的LAYOUT版本。


在網站快接近尾聲,因客戶公司內部有做局部調整,也希望在網站正式開放前能將所有的商品上線,將公司的品牌意識讓消費者更能享受到不一樣的購物感覺。便詢問了操作後台的方式和一些關於設計面的修改,客戶幾經學習與我們討教後, 竟能夠善用後台可自行編改自由創作的優勢. 立刻進去更新其網頁開始進行營業, 讓小編心中默默讚嘆客戶對網站編輯的功力實在是太強了。

關於采硯網站有幾個值得學習的設計特點

1. 分類清單的製作,跳脫出傳統下拉式,可藉由商品分類大項,再呈現更多細項商品名稱。
2.  樹狀圖的連結,文章則對應呈現在右邊,並非是以跳頁顯示,這樣更能讓網友快速閱讀到網站的資訊。

3. 訂閱電子報用表單製作,而以lightbox彈跳視窗方式表現,更能讓瀏覽者以為真的在訂閱電子報,而不是在填寫表單。
4.明細頁的推薦親友和加入收藏夾原本依照客戶需求移到FB按讚和分享,但發現會照成語法衝突到,故只能擺放在最原本的位置,然後加以美化。




目前采硯的網站尚缺金流設定尚未銜接,等金流設定完成後建議各位可到該網站看看紅威與客戶一起努力的成果唷^◇^!

小編這次也在大家依依不捨中慢慢淡出,期待下次精彩分享囉 ^ω^


負責業務:Kimo
負責設計師:EllisJerry
 







沒有留言:

張貼留言