her2morrow

Roche HK 乳癌資訊網站

her2morrow 是香港羅氏的一個關於乳癌治療、乳癌資訊的資訊網站。致力提供多方面的乳癌最新資訊以及治療方法,協助患者面對困難,迎接更好的人生。
香港乳癌資訊網站

羅氏一直尋求更好的方法預防、診斷和治療疾病,持續為社會帶來貢獻

響應式設計 支援各類型設備

本公司設計的網頁,支援多設備瀏覽,滿足不同用戶及現時的網頁設計趨勢。

乳癌資訊平台

客戶背景:一站式乳癌資訊網站

Roche羅氏大藥廠是一家跨國的醫藥生產商,推出各類型疾病相關的產品。而her2morrow.com.hk則是一個為乳癌病人提供全方位資訊的平台。提供過來人分享、最新消息、乳癌成因、治療到術後等等資訊。透過不同講解的插圖及icon圖標令網站訪客以清晰、正面的情緒了解相關資訊。

客戶需求及網站規劃

客戶原有網站以簡單的圖像及文字介紹為主,希望透過更新網站有更多彈性,加入不同類型的資訊以及功能。因此,客戶透過本公司重新規劃視覺設計及網站。

風格確認及前期mock up

在前期跟客戶討論網站內容及視覺階段,設計人員製作了超過10款的mockup設計給予客戶選擇。因為未完全確定網站文字內容,所以在mockup階段設計人員設計了不同的元素,同時跟客戶商討,務求協助客戶制定出,每頁的內容及元素。
Final Output

最後定稿

經過mockup階段的緊密溝通,最終客戶挑選了以下的主頁設計以及內頁設計。同時,因為本公司亦有為客戶提供維護更新服務,在之後網站上線的時間亦都加入了其他新功能。

Features

網站特色功能

本次項目除了基本視覺設計之外,跟客戶討論需求過程中,亦 設計了不同的網頁功能。

資訊卡輪播效果 + 懸停效果

客戶希望網站內容可以顯示原來為治療項目而設計的插圖。同時,設計師考慮到相關資訊有一定的篇幅,直接將不同治療方式的內容擺放在同一網頁,頁面將會十分冗長。故此,設計人員為客戶設計了使用一個插圖的的info box然後加入懸停後展示內文的效果;而且再利用輪播效果收藏不同項目的info box。

懸浮網站導覽 + UI設計

為了增強網站的閱讀性,在之後為客戶的維護更新中,我們為客戶設定了懸浮menu,令瀏覽內頁資訊的訪客,更方便地查閱相關的其他文章,增加用戶停留網站的時間,使平台得以發展。另外,網站上亦應該用了客戶一系列的圖標、插圖設計,令資訊更加具體及圖像化,更有利用戶閱讀。
Website color

網站色調處理

設計師利用了乳癌常見的象徵顏色粉紅色作為網站的主要顏色。而內文則使用比較中立的灰黑色,這樣的明暗對比,令整體視覺十分清晰,亦清楚區分標題及內文的區塊,用戶閱讀不會感到困難。

網頁界面設計

特別為網站標題設定為Noto serif的襯線體,凸顯不同的標題,引導用戶瀏覽網站。同時,襯線體帶來正式、嚴謹的感覺,跟本身平台的主題呼應。

摺合式選單設計

利用摺合式的選單整理繁雜的資訊,為用戶查閱文章時提供了休息的空間,而不是一段又一段詳細的內文。而且用戶可以根據有興趣的標題選擇點擊,更願意停留頁面進行瀏覽。

Youtube影片嵌入

根據上文所說,客戶不定時都會更新平台上的文章及最新消息,內容除了有醫生講解亦包含過來人的分享,有時會有影片的訪談。利用youtube的嵌入功能,可以輕鬆兩個步驟就將客戶影片擺放在文章當中,令內容更豐富,資訊更有用。
怎樣才是成功的網站?

除了外觀,還有搜索引擎排名

我們提供SEO優化增值服務為你的網站處理好外觀後再提升搜索排名,得到更多曝光。

Back