第六章 網站設計美學篇

本章大綱 6.1 網站設計衡量指標 6.2 網站美學的形塑 6.3 章節小結 個案討論：大囧美肌王

學習目標 型塑網站美學的概念 網站美學與故事的結合 網頁資訊的配置 色彩的概念與使用

6.1 網站設計衡量指標 Daniel(2000)提出網站設計品質高低可從內容(Content)、視覺呈現(Visual Appearance)以及可用性(Usability)三個面向衡量 Aladwani和Palvia(2002)的研究指出，網站品質的好壞，可從使用者感知的角度從適當的科技、網站的內容以及網站的呈現等三個面向提出25項與網站品質相關的衡量指標（表6-1 ） Lavie與Tractinsky(2004)則針對不同的觀點在其研究中指出，網站美學可從兩個觀點呈現：傳統美學(Classical Aesthetics)與表現美學(Expressive Aesthetics) 詹偉雄(2005)在其研究中指出，美學深度決定於和諧(Harmony)、舒適(Comfort)和深意(Profundity)

表6-1 網站品質評估指標

6.2 網站美學的形塑(1/8) 圖6-1 網站美學元素

6.2 網站美學的形塑(2/8) 網站配置 「功能選項」或設計盡可能維持在同一個畫面不被切割 視覺動線習慣是「由左至右；由上而下」 整個資訊或版面的切割，應呈現倒金字塔狀或整齊切割，切勿以不規則狀呈現 網站中每個頁面之間的連結必須讓瀏覽者能夠了解與掌握，瀏覽者隨時都能知道目前是處在網站的那個單元。建議可在網站中加上「網站導覽」(SiteMap)或「全文檢索」，以提供瀏覽者在網站上更佳的導覽資訊

6.2 網站美學的形塑(3/8) 網站配色 色彩的巧妙運用，足以營造出不同的氛圍，進而影響或改變個人的感知。 一般而言色彩心理學可分為： 色彩的溫度：冷、中、暖色系(對比) 色彩的距離：色彩波長折射差異產生前進或後退 色彩的面積：前進性的暖色有擴散性(膨脹色)，後退性的寒色收縮性(收縮色) 色彩的重量：明度愈高感覺愈輕，明度愈低則愈重 柔軟和堅硬：寒色系的色彩較冷硬，暖色系較溫柔 華麗和樸實：彩度愈高或明度高者愈華麗 如表6-2

表6-2 色彩象徵意涵與使用時機

6.2 網站美學的形塑(4/8) 資訊呈現 資訊呈現的方式無非透過文字、聲音、圖片、動畫以及影像等 文字最容易使用 文字以外，最常使用的素材就是圖片與影像 相較於文字，圖片與影像不只能將抽象的概念具體化眼睛看到圖片，大腦不需要經過想像就可以直接吸收 圖片本身也比文字更能激發我們自由聯想的能力，比較不會侷限我們的思考方向 大腦對圖片的興趣大於對文字的興趣

圖6-2 文字版關於我

圖6-3 圖文並茂的「關於我」與「產品說明」

6.2 網站美學的形塑(5/8) Logo 設計 「品牌」的深度與生命力來自於創造者的靈魂，它傳達了創立者最原初的情感、熱忱與特定的生命經驗，無疑的Logo設計必須要能傳達出品牌創造者或公司的理念 案例

6.2 網站美學的形塑(6/8) 產品包裝 商品在現代消費社會中，已具有了某種社會、文化的表徵與再現功能。物品與符號透過實質的抽離和意義的接合作用，蛻變成為「商品符號」的再現，商品早已脫離先前為「商品形式」 如何營造「可愛」的感受呢？ 商品的線條上，圓滑或圓形的比起有稜角的設計容易營造可愛的感覺 材質方面，若要營造出可愛的感受，柔軟的要比堅硬的材質好 可愛的東西其設計經常偏好精緻小巧而非大型的商品 顏色上的選擇柔軟清淡的顏色(如：粉紅色、水藍色、鵝黃色)比濃烈的顏色容易營造出可愛的感覺

6.2 網站美學的形塑(7/8) 產品照片呈現案例 在電子商務的環境中，很多的資訊，最終都融入這一張張的產品照片，透過產品照片，我們可以示範一種生活形態，可以教導消費者怎麼使用產品，甚至販售一個故事

6.2 網站美學的形塑(8/8) 案例 此為Micro SD Card Reader 此商品有男版與女版，透過“守護你的愛情”可以增加成對購買的機率

6.3 章節小結 感動消費者的很少是來自於物體本身，重點事故事或與消費者共同創造的回憶或特殊時刻 扣緊3-6個足以傳達公司意像或意涵的視覺形容詞，而後所有的網站美學的元素都應緊扣 所有的設計與配色都應統整

個案討論：大囧美肌王(1/5) 個案介紹 「大囧美肌王」為文藻外語學院2009參與Yahoo! 電子商務創意競賽的隊伍之一。使用「囧」作為商店名稱，意味著使用該團對所販售的面膜後，會讓顧客更為囧光煥發 大囧美肌王主要是販售網路上頗有名氣的“芳緹雅”面膜，這是一家台灣的化妝品製造商，經過ISO認證的高水準工廠，原料來自日本及歐美各國，主要的產品有美白與保濕兩種基本款面膜 由於大囧美肌王的商業模式為「批貨販售」，所以在產品的包裝設計上，無可避免的受制於原來商品包裝的侷限。該團隊為了讓自己所販售的商品能與其他販售芳緹雅面膜的網拍業者有所差異，必須針對產品進行加值

個案討論：大囧美肌王(2/5) 行銷策略 大囧美肌王是採取「批貨販售」的經營模式若要與其他廠商有所差異，必須重新思考 如何改良包裝，讓客戶留下良好的印象？ 如何透過包裝再設計將自己與其他販售相同商品的商家成功的做出市場區隔？

個案討論：大囧美肌王(3/5) 產品包裝 大囧美肌王希望能以最少的印刷、使用最少的油墨以及最簡約的方式做為產品包裝再設計的主軸，如此就能在符合產品既定形象下進行加值，同時也能符合廠商的環保理念。經過團隊成員的發想，大囧美肌王採用能營造出環保概念的牛皮紙與麻繩。大囧美肌王只是簡單的用牛皮紙包裹商品，而後利用麻繩裹起整個包裝，再打上個一個可愛的蝴蝶結

個案討論：大囧美肌王(4/5) 用心經營 為了讓顧客能夠感受到大囧美肌王對顧客的重視與無微不至的貼心，大囧美肌王決定親自手寫小卡片附在包裏內，針對不同的顧客寫下不同的感謝卡，如此能夠讓消費者有「您是獨一無二」與「客製化」的感覺

個案討論：大囧美肌王(5/5) 網站設計 在網站的設計部分，由於販售的商品是保濕和美白面膜，且產品包裝採用的是具有清新與潔淨感的白色與水藍色，所以整個網站設計之配置與用色，就必須乾淨清爽。另外，為了克服Yahoo！拍賣的平台特性，大囧美肌王團隊將所有的資訊以圖片的方式呈現

問題與討論 以網站設計美學的六大要素來分析大囧美肌王，他們欠缺了Logo設計。如果你是大囧美肌王團隊成員之一，請為他們設計出一個Logo 請就網站設計美學的六大要素，針對大囧美肌與其他販售相同商品的網站就其優劣進行比較