Home > Work > Commercial > 保健食品網站設計

保健食品網站網頁設計

網站不僅是品牌呈現資訊 , 或購物的平台 , 更是對市場表述自我的重要媒介 , 即品牌敘事的載體 . 讓目標用戶感覺了解本品牌 , 進而建立信任 , 達成購買 .
舉個例子 : 我們為何會喜歡布萊德·彼特 , 湯姆·克魯斯 , 安海瑟薇 … ? 其中一個重要原因是他們飾演的角色讓我們感動 : 高善 , 深情 , 勇敢 , 堅定 … 同時也讓我們感覺自己了解他們的 : 經歷 , 性格 , 做過的事 , 甚至品格等 . 這就組成了他們的人物敘事 . 可以說 : 是敘事讓我們了解他們 , 進而愛上他們 .
而建立品牌 , 就像塑造一個人一樣 . 我們需要透過品牌敘事 , 讓目標用戶愛上我們 , 而網站就是承載品牌敘事的最佳載體 .
宏觀來說 , 網站設計屬於品牌建立的第二步驟 , 此步驟最重要的目標是 : 建立信任 . 延伸閱讀 : 品牌建立四步驟 . 但隨著品牌的發展 , 網站的目標會相應轉向 , 在此先不延伸 .
在設計網站時 , 我們會去發掘品牌獨特的敘事 , 這樣利於<高效與低成本>的與目標用戶溝通 , 建立穩固的情感連結 . 這個網站我們就是發掘出創辦人曾經是癌症患者 , 後來透過積極治療 , 主動去找好的養身保健品 , 堅持服用 , 最後康復的勵志故事 . 將其以恰當的比例 , 有條理的表述在網站上 , 並兼顧了品牌形象 , 網站功能等 .

網站首頁主視覺_電腦與橫式平板

因為品牌形象也是品牌敘事的一部分 , 或是濃縮與轉譯的結果 . 畢竟網站是品牌在數字世界的總部 , 也是品牌建立的宇宙 . 有自己的世界觀 , 價值觀 , 萬物之邏輯等 . 我們希望用戶在一打開網站時 , 就進入我們設定的情境 : 清晨的大自然 , 微涼的空氣很清新 , 陽光從樹葉間灑落 . 鬱鬱蔥蔥 , 綠意盎然的林間 , 萬物都甦醒了 , 生機勃勃 .
接著我們與用戶連結 : 妳亦是這大自然的一份子 , 妳也漸漸的甦醒 . 暗示用戶的身體也漸漸康復 , 變得充滿活力 .
最後一個行動呼籲 , 由一句親切的問候 <看看今天怎麼愛護自己>的按鍵 , 連去部落格 . 策略中 : 因為我們是新品牌 , 故會以先與用戶建立連結與信任為第一優先 , 不以導購為目標 , 故先引導用戶去連結部落格 . 部落格中再引導客戶去商品頁 , 也以每篇文章所提到的營養成分等 , 導去相應的產品 , 有機會產生更好的導購效果 . 當然在每一頁中都會有可以直接連結到商品頁的按鈕或 icon . 但我們不希望這些按鈕或 icon 去干擾每一頁所要傳達的目標 .
右下設一個 LINE 的 icon , 便於用戶直接與品牌聯繫與購買 .

網站首頁主視覺_手機與直式平板

手機版除了轉換成直式版面 , 漢堡的使用綠色半透明遮罩 , 既保留操作清晰 , 與整體性 , 也兼顧品牌色 .

網站策略以品牌敘事為主軸

我們仔細與品牌端客戶溝通與討論 , 理解品牌的源起 , 故事等 , 試圖找出品牌優勢與獨特之處 , 再制定出相應的網站策略 .
我們了解到 : 創辦人 Tiffany , 曾經是一位癌症患者 . 通過積極的治療 , 以及自己專注找尋與研究好的食物與運動 , 來調理身體 , 最後順利康復 .
我們認為這是一個動人的故事 , 很勵志 . 且當前癌症患者日漸增多 , 社會大眾有對康復的渴求 . Tiffany 的故事 , 也會讓人們對康復充滿希望 .
這樣的故事是會產生共鳴的 . 故我們希望以 Tiffany 的故事為網站的脈絡主線 .

文案以第一人稱書信的形式

嗨，我是 Tiffany。
我是木萃的創辦人，我想跟你說說我的故事。
跟大多數人一樣，是個平凡的職場女性，同時也是媽媽，與妻子。
但我有一點不同，曾經是個癌症病人。
九年前，我確診癌症，在知道的那一刻，腦中其實是一片空白的。心裡只剩下一個念頭：我還有多少時間？
接下來的路，不是我選的，是我必須走的。

品牌敘事即人物敘事

我們先製作出 Tiffany 每天都真實會去進行的日常活動 : 慢跑 , 瑜珈 , 與打各種果菜汁 . 並都穿著綠色系的服裝 , 環境也是 . .

網站文案設計

完成治療後，運動就變成我每天必要的功課。
跑步機一天五公里、瑜珈、機械皮拉提斯伸展，心肺有氧訓練 …
我開始自己學著做綠拿鐵，把羽衣甘藍、綜合蔬菜水果搭配好油；這些都是我一路上慢慢增加及建立起來的日常習慣。也很認真去找天然、有機、自己信任的原料來源，後來遇到仁義潭紅薑黃。

農場生技廠照訪與洽談之敘事

依據我們對客戶的訪談 , 我們得知創辦人 Tiffany 曾真實地去走訪各農場 , 生技廠等 , 去找尋與洽談最好的食材與生技 .
我們就將這樣的經歷部分展示出來 , 例如在洽談薑黃等產品時 , 有找到仁義潭觀光有機農場等 .
這也會更加的彰顯本品牌 : 真實的去研究與開發最好的健康保健品的行為 , 讓用戶更加信任本品牌的產品 .

網站規劃 : 建構<品牌 x 知識 x 導購>之信任與商業飛輪

在確定了網站之設計策略為敘事 , 及敘事內容之後 . 我們規劃出本網站的三大主題頁 , 分別為 : 首頁 , 產品頁 , 與文章頁 . 去建構 : <品牌 x 知識 x 導購>之信任與商業飛輪 .
在頁面設計上 , 我們計畫利用良好的留白比例去創造 : 順暢的閱讀節奏 , 讓用戶愉快又清晰的接收到我們希望傳達的資訊 .
色彩上用各階層的綠色去彰顯品牌 , 強化品牌印象 . 並在導購的區域善用金色 , 引導用戶完成購買轉換 .

< 網站首頁設計 >

最後將以上的品牌敘事策略與規劃落實到網頁設計上 . 寬版為電腦版 , 窄版為手機版 . 圖案下方會配合文字與圖形符號 , 去讓閱讀更加順暢 , 重點也更加清晰 . 文字也有利於 SEO .
頁面下方建立了文章精選 , 讓用戶若想要了解更多健康知識 , 可以連結去專門的頁面 , 當然我們也規劃 : 有些文章是針對產品的優勢與用法 , 會引導用戶購買 .
頁面下方也建立了產品精選 , 用戶若想直接購買 , 也是非常直覺的 .
也因為最後業主選擇使用開店平台 , 而平台有很多限制 . 故我們也花了人力與時間 , 盡量去探索與挑戰平台在技術上的極限 . 最終將網站調整到功能 , 視覺美感 , 比例 , 排列等 , 都到一個程度之上 .

< 網站產品頁設計 >

打開產品頁 , 第一眼就是目前產品的全家福 . 清晰地告訴用戶 : 這是產品頁 , 也讓用戶大致看到全部的產品 .
接下來是各品類的 icon ( 未來因應品類變多 , 調整 icon 數量 ) , 除了讓用戶看到產品品類 , 也可以通過點擊 , 快速的滑到相應的產品 .
再來就是每類產品的形象視覺與簡介 , 下面是此品類的不同支產品 , 可直接點擊<加入購物車>購買 , 或是進入本產品之獨立頁 , 查閱與購買 .
最後再推薦與促銷某幾支產品 , 促進導購 .
就不再加入文章頁 , 原因是希望用戶就留在本產品頁 , 促進導購 . 若加入其他頁面的 icon 等 , 客戶就有可能跳離本頁 .
所有的形象視覺圖在手機版改為正方形 , 既不影響閱讀 , 又避免佔的篇幅太長 , 拉長滑到產品的時間與距離 , 影響導購 . 這都是最佳化導購的設計 .

< 品類按鈕設計 >

出國旅行幾乎是所有人很有興趣的事 , 健康才能常出國旅行 . 飛機窗是坐飛機出國非常具象的符號語言 . 故我們將產品品類按鈕設計為飛機窗的形狀 , 讓人產生美好的聯想 .

< 產品 icon 導購設計 >

導購對轉換的影響很大 , 這裡我們使用最誘人 , 最有好感度 , 最搶眼的橘色 , 設計在<放入購物車>的按鈕上 .
如最右圖所示 , 並且在滑鼠移至本按鍵與按下時 , 按鍵邊緣會轉變成金色 , 且字體轉為深綠 , 引導客戶進行購買 .
icon 的整體設計上 , 產品壓在淺綠漸層底色上 , 符合品牌與網站視覺 . 下方是品名與產品資訊 . 既清楚表達本產品為何物 , 又不影響導購 .

< 網站文章頁設計 >

第一主視覺就是中年女性養身保健的意象圖 , 給人以滋潤溫暖的感受 .
下面就是各篇文章 , 這裡的 icon 縮圖改為橫式 , 與產品頁做區隔 . 每篇文章下方有綠色的主標 , 與每篇文章的大致說明 , 讓用戶可以大致知道本篇內容 , 再決定要不要點進去 , 降低文章跳出率 .
最後進入推薦產品與進入產品頁的 icon , 引導用戶去產品頁 , 增強導購 .
右側為手機版 , 主視覺改為正方形 , 方便閱讀 , 但又不至於太長 , 影響後面的篇幅 .