網站設計評論#4：Home Plus企業官方網站

關於Home Plus

全球知名連鎖超市Tesco在進軍韓國後，以Home Plus為名進駐韓國，而Home Plus是南韓第二大實體連鎖超市，在去年展開了將超市搬到捷運站的QR code行銷活動，大獲好評並且大量提升銷售量，成為整合行銷界新穎的成功案例。Home Plus致力成為南韓最大超市品牌，並且提供顧客更快、更便利的購物環境，讓到超市購物這樣的行為變得越來越簡單容易，顧客不用再花多餘的時間跑超市，而超市也可以將所想購買的商品直接宅配到府，希望做到你在外頭下單，到家就可以收到商品的簡單購物生活。

初次遇見Home Plus

對於這樣一間大公司來說，官方網站肯定會出現許多數據化的資訊，比方說何時建立公司每年有什麼大事記、目前公司員工多少人、店面數與全國佈局等等，對於這樣數據的圖像化處理，韓國網站通常都有他們一套的方法，每每看到都會覺得非常驚奇，個人也覺得這是韓國網站的特色，希望透過網站的分析拆解，可以學習到韓國人把數據圖像化的設計功力。在Home Plus的首頁部分，一映入眼簾的就是很大的輪動式Banner設計，在幾張Banner上我就可以看見一些數據圖像化的跡象，比方說我們常用的四象限分析圖表，在Home Plus就以四葉幸運草來設計，讓原本生硬的四象限變得活潑了起來，這樣一個小小的變動，就襯托出設計的價值，真的非常不容易。

網站色系

 #e90013     #0f258b   #181818  #ffffff
紅色為Home Plus的企業主色系，藍色則是紅色的相近色，使用相近色來做設計會讓成品感覺較為柔和自然，不至於太過突兀。

Logo設計這回事

Home Plus的Logo非常簡單，前面一個看起來很像Home的房子造型，後面跟隨著Home Plus的公司名稱，下方畫了一條線，有將兩個單字聯結在一起的意味，企業主色系就是紅色，對超市來說紅色可以代表魚肉類的新鮮，也可以代表充滿熱情，加上名稱是Home Plus就顯得是要熱情服務每位顧客，提供每戶人家最新鮮的食材。而房屋內示意窗戶的圓圈，則可以表示作業上流暢，與服務講求圓滿和諧，一個簡單的Logo設計卻充滿了很多涵義。

選單設計這回事

Home Plus的選單設計非常單純，採精簡設計，當滑鼠移過去會調換影像，偏黑色會變企業紅色，當點擊後進入選單內頁，該選項也會換為紅色，顯示出當前頁面位置，在簡單的設計下也沒有遺忘標示，對使用者經驗設計上沒有忽略。

子選單部分，設計上延續主選單，但在前方加上數字，讓網友可以很快明瞭在這個選項下有多少資料，而數字上的線段就與Logo上Home Plus的線段相做呼應，不但不會突兀，還會顯得整齊且似曾相識。

內文排列方式分析

內文排列就如同選單一般，採用簡潔設計，右上角可以看到麵包屑設計，最前面的首頁icon採用的就是Home Plus的Logo前面的icon，標題字體與次標題字體大小落差大概1:0.7左右，兩者之間的行距大概是三行內文的行距，內文行距與一般常見的1.5倍行距不同，行距大概只有0.5，並沒有為了要讓閱讀舒適就拉開行與行的距離，但是由於內文顏色是採灰色，相較於全黑的內文來說，閱讀久了眼睛比較不會有壓力，所以對舒適度的考量還是有的。

在時間表部分，利用折線圖設計，讓整體的時間與事件做了密切的結合，也讓網友願意仔細的閱讀進而提高了閱讀率，自然而然對Home Plus的印象與奮鬥史就更加了解。

另外一個頁面（應該是指公司核心價值，我看不懂韓文只能用猜測的），那兩張臉的設計真的讓人印象深刻，一個代表成長，一個代表回餽，讓看過這一頁的網友都能夠說出Home Plus的核心價值是整體的成長與對社會的回餽。

在同一頁下方有個列表，標題部分文字加粗以顯示重要性，內文與標題對齊而不是與前面的紅點對齊，在很多網站上常常會看到內文排版對其的部份部份是與前面紅點對齊，但是真正對其的方式應該是與標題第一個字對齊，這樣才是正確的排版方式。

在企業大事記詳細記錄的頁面上，Home Plus有一個簡單時間軸作為選單（也就是上圖中間淺灰色區塊），右邊紅點顯示當年年份，所以可以看到2012年的紅點比較大，意思就是指今年，而年份下方的列表是以月份做列表分類，可以看到2011年是以02、04做開頭，意思就是2月、4月的意思，詳細列出每一年每個月的重大事件，透過這一個頁面，可以詳細了解每個時間點的Home Plus，這是我在台灣的企業官方網站比較少看到的部分，真的記錄的太仔細了。

再來上張是Home Plus員工的基礎價值，也就是進入Home Plus後你會變成什麼樣的員工，這件事對員工來說是很重要的，對Home Plus來說更是重要，因為什麼樣員工就會表現出什麼樣的企業，如果要落實企業核心價值，最重要的一環就是員工，所以在這樣的頁面透過一個六環圖就詳細傳達所有的基礎價值，簡單、明瞭。

接著是一個循環圖示，這張圖顯示出Home Plus在品管上的運作，四大主軸下方又有許多細項，注意到了嗎？主軸對齊的是細項內的第一個字，為什麼要這樣排列？主要是因為細項前面的點太過細小，與文字相比，區塊比例過小，所以主軸的文字如果與點對齊，整體反而會顯得歪一邊，但是如果與細項第一個字對齊反而就不會有歪一邊的感受，這麼細微的排版設計，我不說，你會注意到嗎？

再來一張，一樣是四個象限，Home Plus將此設計成四葉幸運草，整體看起來不在這麼枯燥，就只是一張圖表，這張圖的內容指出Home Plus對於整體的社會貢獻，而四葉幸運除了讓人覺得幸運以外，也會感覺到幸福，這樣的延升感受就表現出了Home Plus對社會的貢獻是讓社會更加幸福。

內文排版部分整體來說都偏向雜誌設計排版方格，以上圖來說就很明顯的有雜誌三欄式內文排版的格局出現，欄與欄之間間隔約30px，標題與內文行距約ㄧ行距，這樣的排版方式會讓我想把左邊第一欄的標題，想辦法變成兩行，讓整體看起來正家整齊劃一，而不會產生內文齊頭的行數落差一行，整體看起來就會讓區塊比例顯得有點奇怪。

接著是比較特別的地方，這個地方似乎是客戶留言板，除了讓顧客回饋以外，也讓整體服務透明化，對照現今的台灣網站，這樣的留言板似乎已經消失了，因為隨便來一個負面評論就會讓網站上上下下顯得驚恐萬分，但是通常危機都是轉機，如果處理得宜，讓其他顧客看到反而會是一種安心，唯一要思考的問題，就是公司有沒有人力可以去處理，以目前我所接觸過的客戶通常都沒有這樣的人力分配，自然而然也就無法有提供這樣的線上服務了，就我來看這是蠻可惜的一件事。

表單設計這回事

Home Plus的表單設計依然與網站一樣走向簡潔風格，表單格式與類型有所不同，所以是混合型的表單，這樣的表單要讓欄位對齊的可能性非常低，所以Home Plus在這方面的設計就採用齊頭式設計，在項目部分也採靠左對齊，與人吉旅館的置中對齊不同，但是整體來說感覺卻比人吉旅館還好，會有這樣的感覺，主要的原因就是Home Plus是混合式表單，有填寫文字的input也有核取項目的radio button，所以整體來說就比較不會出現人吉旅館那種尾端沒有對齊的問題，自然整體看起來就會覺得還不錯。