電商百問第85集，教你如何統一品牌官網設計風格，讓你日進斗金、賺錢如有神助。我們在前面的章節分享了如何做好品牌官網設定，下一步就是要開始設計品牌官網，也就是裝潢這個品牌官網的門面。這個階段最常遇到的狀況就是行銷活動一直上，最後網站看起來五顏六色的，消費者也不知道該怎麼逛起。事實上，想要擺脫這種窘境，只要團隊對品牌官網的設計方向有共識就可以！
品牌官網設計2大重點 創造品牌魅力
品牌官網設計就像我們與陌生人見面的第一印象，不同的穿著打扮會帶給人不同的感受，因此如何做好品牌官網設計，讓消費者進入網站的第一個瞬間就感受到品牌魅力，是一件很重要的事情。不要忘了英國臨床心理學家 Linda Blair提出的七秒鐘理論：「第一印象的建立，在於初次見面的七秒鐘。」事實上，消費者上網的耐性超級低，連七秒都不一定會給你，可能只有三秒鐘的時間。
一個結構不清晰、圖面陳舊、佈局雜亂、配色俗氣的官網，對消費者來說就像是一間長了很多蜘蛛網、牆面斑駁的老公寓，他們連進去都會害怕，更別提要他們付錢了。
但也不需要花好幾百萬找人設計網站，只要掌握幾個基礎設計原則就好。只要我們能做到結構清晰、內容精簡準確、配色合適、佈局合理，消費者對你的品牌官網的印象，自然不會太差。尤其是以「美」為賣點的品牌，例如彩妝、服裝、飾品、家居等等，如果你的品牌官網設計沒有展現出「美」的特點，消費者又怎麼會有購買慾呢？就像Apple的設計風格就是以簡潔大氣為主，這件事情除了展現在他們的各類產品外，也呈現在他們的官網設計。
如果你對品牌官網設計還是有疑慮的話，我會建議你先參考MOMO、蝦皮這類購物平台，因為消費者經常到這類平台購買商品，所以他們已經很熟悉這類平台的產品跟動線了，就像你去看淘寶、京東的商城介面會發現他們都長得很像，並不是因為這些品牌沒有能力做出一套完全不一樣的UI介面（User Interface，使用者介面），而是因為消費者已經習慣了這樣的介面安排，所以與其重新設計一套邏輯讓消費者熟悉，不如直接用類似的介面省去消費者的學習成本，也更容易把競品的客戶都洗過來。所以我建議你先參考市占率高的購物平台以及競品網站是怎麼設計的，再來規畫你的品牌官網設計，並且要思考以下兩個重點：
- 網站定位
- 設計風格
品牌官網設計重點1：網站定位
品牌官網的設計重點是，如何讓消費者對品牌和產品產生興趣，進而產生消費行為。因此不管是官網的設計風格或是網站內容，都要以目標消費者為中心進行規劃，並且讓消費者對你的品牌有信任感。
品牌官網設計重點2：設計風格
這就要根據前面的網站定位以及你的產品TA進行判斷了，就像是MOMO的消費者以女性居多，所以創造了一隻吉祥物叫momoco，配色也是採用MOMO的品牌主色調桃紅色；但像是PCHOME的消費者以男性居多，因此他的品牌主色調不會是桃紅色而是藍色。如果你賣的是彩妝類產品，在色彩上可以選擇比較強烈的顏色，如果是家具或生活類用品可能就比較適合暖色調。
如果你對品牌的顏色或設計還沒有太多方向的話，我建議你可以看一下國內外的龍頭企業都怎麼設計的，另外我也建議你把握兩個設計風格重點：
- 思考商品特性
- 兼顧易讀性
👉品牌官網設計風格重點1：思考商品特性
就像前面說的，設計品牌網站的原則是符合行業特色，比如首飾類網站一般想體現奢華和尊貴，通常會建議你的官網採用淺色調，比較容易表現出金屬的光澤感。參考下圖你會發現，白色背景與深色背景比起來，白色背景更能襯托飾品的金屬光澤。但是，這並不代表你一定要用淺色的設計，而是要根據當時的產品特性做彈性調整。
👉品牌官網設計風格重點2：最適合閱讀的排版設計
除了顏色，文字的閱讀體驗，也是品牌官網的設計重點。我們的建議是，背景色切勿與文字反差太小，行距不要過密，文字過多時要注意分段和段落之間的間距。文字如果過於密集，頁面會顯得雜亂，閱讀上也會造成壓力。
文字的大小也要注意，且應該與頁面的佈局呼應。一般英文字體最小10px、中文最小12px，如果版位較大，文字可以適當變大，和頁面大小達到平衡很重要。
字體選擇則要考慮適配性，現在市面上比較主流的是windows和Mac兩種系統，其通用字體為微軟雅黑和平方體，因此我們在設計頁面時就要考慮這兩個字體在頁面上的效果；如果使用者沒有這些字體也要考慮替代字體方案。另外要注意的是，如何依照消費者狀況做版面微調，例如天下雜誌跟康健雜誌的網站字體大小跟行距就不會一樣。
品牌官網設計更吸睛3大原則
最常見的網站版面配置基本分為左右、居中、左中右、左上右、滿版和非滿版等，不同的佈局給人的感覺不一樣。由於官網佈局影響的是整個頁面的框架，對於網站是否整齊劃一起了很大的作用，因此佈局時要尊重大眾審美，不要太特立獨行。基本建議你遵循以下三個原則：
- 設計的黃金比例原則
- 網站的載入速度
- 頁面呈現
品牌官網設計原則1：設計的黃金比例原則
無論哪一種佈局都要考慮黃金比例，也就是網頁的第一個著眼點。一般網頁的著眼點都在左上角，所以通常會把網站logo和slogan都放在這裡。當然我們也需要根據頁面內容調整位置，比如Google的首頁就只有一個中間的搜尋框，視覺自然就會落到中間這個位置了。
品牌官網設計原則2：網站的載入速度
在設計時也要考慮技術層面，過於複雜的佈局或者充滿了奇形怪狀的區塊，除了可能對網頁設計師造成困擾，還可能會影響載入的速度。這些都可能會影響到消費者的網站閱讀體驗，與其花時間做很炫麗的特效，還不如給消費者一個簡約大方的設計。
品牌官網設計原則3：RWD頁面呈現
使用手機進行線上購物已經成為網購的主流，為了讓消費者不論透過桌機或是手機，都可以擁有一致的消費體驗，有越來越多品牌採用RWD響應式設計網站，同時也省去後端的維護時間。因此我們在設計官網的時候，就要考慮這些頁面在手機和桌機上的呈現是否合理，以及大小是否合適等問題。如果你沒有考慮清楚，讓消費者在手機上找不到各項功能，或是得不斷的放大跟縮小，他自然就不願意繼續透過你的網站購買商品。
5大選圖重點 品牌官網設計必殺技
對電商品牌官網來說，如何設計和挑選圖片是非常重要的。如果一個網站同時出現影片、圖片跟文字，消費者的注意力肯定是：影片＞圖片＞文字。
這時你可能會問：如果影片的效果很好，那為什麼不多放一些影片？原因很簡單，除非是大型的行銷活動，否則一般的活動檔期頂多一到兩個禮拜，但宣傳影片的製作工期就可能需要兩個禮拜了，況且若成效不好需要調整也是費時費工。如果是使用圖片的話，成效不好隨時都可以換，影片很難做到這麼靈活的調動。
如果你想了解更多圖文搭配的技巧，請參考「【電商百問72】一頁式網站案例可以參考哪個品牌?」這篇文昭。另外如果想讓圖片發揮最大的效果，我建議遵循以下5個原則重點：
- 相關性
- 真實性
- 生動性
- 尺寸統一
- 使用者偏好
品牌官網選圖重點1：圖片要有相關性
行銷活動主題和圖片表達要統一，兩者之間一定要有強烈的相關性。圖片的吸引力大於文字，所以文字是用來輔助圖片呈現的。如果今天的活動主題是過年特惠，結果圖片裡面放了一張摩天輪的照片，圖片跟活動的相關性自然會受到質疑。
品牌官網選圖重點2：圖片要真實
我們雖然希望透過圖片美化產品，但真的不能做得太過。如果修圖修到不像樣，造成消費者拿到實際商品的落差感過大，最後還是要承擔後果。有一些在蝦皮上架的商品偶爾會有這種問題，但對蝦皮賣家來說，蝦皮店被客訴沒差，頂多換一間店重洗評價就好。然而，如果今天是你的品牌官網被消費者投訴，不太可能直接換個品牌經營呀，所以只需要做適當的修飾就好了，千萬不要修過頭。
品牌官網選圖重點3：圖片要生動
圖片不是死的，就像是我們要拍一包茶葉，那你就要表現出茶葉的香氣跟喝起來的感覺，而不是直接用相機直拍就好。更簡單的說，如果你要表達果汁的新鮮感就要透過視覺的上面的呈現去表現出這個產品的亮點。
品牌官網選圖重點4：圖片尺寸要統一
這個是很常被忽略的問題，無倫你今天在同樣的版面還是不同的版面，你一定要很注意各版面的圖片設計尺寸是否整齊一致，不要有大有小，給人頁面很錯亂。因為我們永遠無法確定消費者會看到我們那些頁面，所以我更建議你的做法是直接先出一個版面的規範表，這樣如果有任何版面上的調整疑慮都可以看這張表，會讓你方便很多。
品牌官網選圖重點5：圖片要符合消費者偏好
根據自己的使用者群，選擇相應的色彩圖片，比如目標客戶是女生，粉色或者紅色比較適合，如果是要打貴婦市場，則可以用黑色或者白色更顯典雅。
小結：品牌官網設計最重要的是官網支援調整CSS與HTML
我們剛才講了非常多的品牌官網設計原則，但其實最重要的是品牌官網設計的彈性空間有多大，如果你使用的開店平台是向蝦皮這種沒有開放調整版型的平台，那對消費者來說，你就跟7-11一樣到處都有，他也不會記得他家旁邊的7-11跟他公司樓下的7-11有甚麼差別。而當我們能做出差異化的時候，會讓消費者更願意去逛你的品牌官網，就像你逛街時看到一個新開幕或是裝潢特別不一樣的店，你就會想多看兩眼一樣。也就是說，如果我們做出了一個是消費者喜歡的品牌官網就能有效的提高消費者的購買意願跟訂單的轉換率。
但是問題就在於許多的架站平台都是提供一些簡易的模板讓客戶去套，你想阿，他們設計一個模板出來一定是希望可以讓越多人能使用越好，所以想當然爾，他們會提供的模版就會是安全牌，那這個安全牌適不適合你的品牌也不一定。所以我會建議你優先找像我們CYBERBIZ這種有開放CSS與HTML調整的開店平台，你就能夠設計出一個完全跟套版網站不一樣的品牌官網。而這樣經過精心設計的網站，也更容易讓消費者對你產生品牌印象。就像是你去逛百貨，有一些特別裝潢過的櫃位一定比什麼設計都沒有的櫃位還要讓你有印象。
當然我並不是說，你一定要從頭設計一個版型才能符合你的品牌官網開店需求，而是如果有這樣的開放空間就是有備無患，因為我們未來也不可能因為品牌官網的版型設計不夠好看就換一間開店平台，要換開店平台是一個非常花費時間跟精力的事情，所以讓自己在一開始就有足夠的選擇權是比什麼都來的重要的。
說實話現在經營電商並不是件困難的事情，這個就像考試，你沒有先做好準備，可能就考個六十分，而如果有做準備，你就可以考個八九十分。沒有考好也不用太擔心，因為電商就是每天都可以補考，只要不斷修正就可以越做越好。這些過往的經驗都會成為你未來成長茁壯的養份。如果你想要知道更多的網拍經營策略，也歡迎跟我們的開店顧問聯絡。他們都能夠跟你分享很多輔導店家的經驗，讓你花最少的力氣，賺最多的錢。
✨延伸閱讀：【電商百問95】如何設計電商商品頁？
✨延伸閱讀：一頁網站常見的3大設計問題，你都避開了嗎？
