2012年3月30日 星期五

Share to grow more for less-ViewSonic產品網站設計

emg案例分享
ViewSonic產品網站

案例簡介
為了響應環保愛地球的理念,ViewSonic結合最新技術推出ViewSonic MultiClient™系列產品:能多人同時使用之高效能主機及周邊系統。由於客戶曾看過我們所設計之「光寶創新獎人氣王活動網站」,十分肯定我們對清新、簡潔風格的表現,因此選定此次與我們合作。這個案子的主要任務在於資訊架構的處理:如何讓不同使用者(採購、電腦專業人員)能清楚掌握產品目的、功能及服務,同時又能傳達環保節能的終極理念。

設計重點


ViewSonic MultiClient™主要鎖定以教育團體為客層,而採購人員是第一線的溝通對象,這種屬於B to C而非B to B之溝通,更講求以親切、清晰的內容邏輯來滿足使用者的需求。
網站整體使用了白色、青綠色呼應產品之環保概念,大量留白搭配較為輕盈的灰色字體,使視覺清爽也帶出永續希望。同時,為連結學校與產品的關聯,在網頁下方也設計了可愛的小圖示,打造出友善的溝通環境。

首頁
首頁主要分成三大區塊:上段情境圖片搭配提問文案,以搶眼吸睛的方式帶出產品訴求;中段則以簡潔、明確的內容說明,闡述產品的開發理念和使用利益;下段的三塊選單,則是網頁最上方功能選單的放大版,此特殊設計在便於使用者選取下一步想獲取的訊息。當首頁達到目的、功能的明確導引,使用者便能很快掌握要點、知道何去何從。

內頁藉由設計圖表達到有效溝通

內頁
內頁的設計重點在於如何藉由設計的力量使龐雜的資訊擁有高度的閱讀性,其中分頁的規劃則是第一步。我們透過網頁最上方的功能選單為資訊做分類,而選單名稱的訂定也融入了「如何讓對的人找得到所需資訊」的思考;而舒適的文字間距提高閱讀意願,重新經過設計美化的圖表也增加資訊的易讀性。

內頁的三層選單設計

除了前述網頁最上方的功能選單、下方放大版之功能選單,網頁中央上段也加入第二層內容的快速選單,為在簡化使用者層層點選的路徑,而打造出「被所需資訊友善環繞」的使用情境。
內頁「case study」以flash串流影片,使播放更順暢。

此外,由於ViewSonic已有自行管理的後台介面,因此這個案子在設計時也需考量到前台規劃與後台資料處理的相容性。

專業人員則能直接點入內頁「product」,了解產品規格。

網站設計的重點之一,在於能從首頁就開始做出動線規劃,並確實模擬使用者的思維邏輯創造出有效的溝通環境,也因此每一個案件都能展現出我們對使用者的了解、客戶訊息的掌握度。在看似簡約、清爽的視覺風格下,其實融入了許多設計思維在裡頭,這也是寓設計於無形的一個好例證吧。