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