Roche HK

淋危不亂 健康資訊網站

羅氏大藥廠香港有關淋巴癌的資訊網站,提供癌症相關活動訊息、醫生分享等等。

健康資訊平台

配合生動插圖,提供有用癌症資訊,與病人同行

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

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

香港健康資訊網站

客戶背景:一站式淋巴癌 健康資訊網站

Roche羅氏大藥廠是一家跨國的醫藥生產商,推出各類型疾病相關的產品。而lymphoma.hk則是一個為淋巴癌病人提供全方位資訊的平台。由醫生分享、癌症成因、治療到術後復康等等。配合可愛的插圖設計令病人不會被癌症資訊帶來更多負面情緒。做到與病人同行。

淋巴癌健康資訊網站
淋巴癌健康資訊網站

客戶需求及網站規劃

原有網站已經使用一段長時間,客戶希望透過設計新的卡通人物插圖的同時,為網站更換新形象。以幾個卡通插圖的清新配色,製作簡潔資訊內容鮮明的網站。

風格確認及前期mock up

作為一個醫療相關的資訊網站,在帶給用家清晰易讀的同時,設計師運用了卡通人物其中的深藍跟淺綠配色突顯醫療感覺,而且利用兩種顏色區分不同資訊層級,引導用家更清晰瀏覽網站不同部分。在跟羅氏的討論過程中,我們首先會制定網站地圖(sitemap),然後按客戶需求製作主頁mockup。設計師提供了數個不同風格的版本,由圖片統一用色風格到以插圖為主供客戶參考。

經過跟羅氏反覆討論最終決定以文章展示為先,卡通角色貫穿基本癌症資訊的風格,令角色更多出現在全網內容之中。與此同時,我們亦由卡通角色的繪圖風格伸展出網站其他資訊的插圖,務求統一整個視覺形象。

Final Output

最後定稿

經過與客戶在主頁內頁設計的討論、不同mock up版本設計,最終客戶選擇了以下頁面設計風格。以插圖及界面元素清晰區分不同癌症資訊,亦令瀏覽網站的用戶可以方便地查看到所需的資訊。

Features

網站特色功能

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

動態效果及懸停Popup設計

客戶希望在主頁有一個介紹全部卡通角色的section。為了用一個更活潑的方式展示,設計人員加入了圖像的動態進場效果以及懸停後popup顯示文字描述的效果。 有動力之餘,亦加強跟用戶的互動感覺。

互動視窗設計

點擊相關的圖標按鈕才popup詳細資訊,縮短頁面篇幅同時,用家可按感興趣的項目互動點擊,讓用家感受到用心的設計。

多重blog文章欄位 & 懸浮側邊選單

為了讓用戶更快看到最新的癌症資訊,按照客戶需求在主頁首個section加入多個類似blog形式的文章banner。以及banner輪播功能,令整體更加活潑。而側邊選單展示了最熱門瀏覽的頁面,令網站訪客更方便瀏覽到逐資訊。

Website color

網站色調處理

設計團隊在網頁整體視覺設計的色調取材於客戶原有的卡通角色設計。再以藍色及綠色作為網站主色,強調網站作為醫療相關的主題

藍色及綠色的對比亦應用於資訊的分隔之中,清楚展示內文跟標題的層級關係。而為了搭配不同插圖角色,採用了飽和度較低的顏色作背景,令整體視覺效果更加平和以及重點標題、資訊、插圖角色更加鮮明。

網頁界面設計

網站雖然都圍繞淋巴癌為主,但當中都包括了很多複雜的訊息,例如:淋巴癌的類別及區分、復康評估等等。設計團隊需要考慮資訊分佈以及展示方式,同時注重標題文字設計,因為網頁用家可能有一定年紀的族群,清楚意讀是他們的首要考量。

收合區塊及表格設計

根據客戶提供的癌症資料,一個主要的癌症類別會劃分多個子類別。為了用戶可以更清晰查看到所需的資訊,設計團隊利用了不同收合區塊作劃分,配合常見的表格整合資料,令整體跟用家有戶動之餘,也容易閱讀。

圖表式展示

網站亦會提供存活率等數據,設計團隊認為利用圖表取代冷冰冰的文字描述更合適。可動的設計令整體視覺更為活潑,減少數字帶來的負面感覺。
怎樣才是成功的網站?

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

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

Back