從內容到視覺:重新定義照護品牌的官網形象

從0到1的設計,規劃照護官網內容。
我的角色
UI/UX Designer
我的角色
UI/UX Designer
我的角色
UI/UX Designer
團隊組成
UI/UX 設計X1、PM X1、前端工程師X1
專案時間
1.5 個月

專案背景

公司專長除了承接政府交通接駁平台設計外,另有長照居服人員,此專案為希望將兩項專業服務重新用一個形象網站來呈現。

我的角色

負責規劃網站內容和實際執行視覺風格。

前往實際官網

許願

  • 簡單介紹公司的服務

  • 有可以前往交通服務平台、以及照護官網的按鈕

  • 照護服務之後會再建置一個以人為主的服務網站,目前這個網站是一個形象頁能夠倒去其他地方的首頁

  • 看起來要專業、有親和力、讓人充滿希望的網站

客戶的大致想法如下圖

架構規劃

我將網站規劃如下圖,主要的交通服務和照護服務放在關於我們下方的區塊,並設置明顯的 CTA 按鈕在服務內容區塊。

實際介面呈現

LOGO 區

  • 用in care 、i care帶出關鍵核心「您的健康,我們在乎」

  • 整體色系已有活力的淡綠色呈現健康的概念

  • 運用動畫和有溫度的手些文字編排呈現照護有溫度的一面

About 區

  • 不規則的畫面裁切banner

  • 手動調整輪播畫面切換不同主視覺

  • 藉由圖文編排讓整體看起來是有溫度的

體驗服務 CTA

  • 運用滑鼠移入反黑的效果呈現出這區塊為整個首頁的重點區

  • 將主要的交通服務以及照護服務放在此區塊

服務內容

  • 上下錯開的排列方式讓畫面看起來有層次

  • 運用滑鼠移入效果配合照片轉會色彩及大小讓互動更顯而易見

最新消息

  • 乾淨的綠色系讓資訊簡潔明瞭

  • 一樣有滑鼠移入的小小互動效果

使用者回饋

  • 一進來的LOGO動畫滿吸睛的~不知道能不能在滑走以後再滑回來的時候可以繼續再跑一次!

  • 排版和配色都很清爽,讓人看了很舒服。

  • 界面整潔,資訊分類明確,連長輩都可以容易上手。

  • 點到某個主題會反黑是一個很不錯的設計,可以讓視力不佳的長輩清楚知道游標到哪裡了!

結論

覺得可以再優化的地方:

服務內容的部分點到會變色的地方,從彩色變成灰階好像比較不討喜,有點像像人生彩色變黑白,更優化的話可以改為放大圖片即可不要變色。


這個專案,時間短促緊湊,但為了讓每一個設計決策都能夠提升網站的體驗,我在開始畫設計稿前先進行內容規劃,確保符合使用需求,提升了整體的設計效率。

其他專案作品

Copyright 2025 by Camille Li

Copyright 2025 by Camille Li

Copyright 2025 by Camille Li