InfoPower Corp
健康風險評估暨健檢報告管理系統
管理你的健檢報告 管理你的健康
Duration
5 Months
Rule
UI/UX Designer,Interaction Designer
Scope
功能規劃討論、設計完稿、工程交付
Team
Infopower
┃Background
┃Challenges and Objectives
此系統是一個彙整健康檢查報告，讓使用者統一做管理設定及編輯瀏覽的平台。
使用者分為三類
1. 醫療人員 : 填寫健檢報告之專業建議及說明
2. 醫療管理人員 : 管理設定健檢報告後台資料
3. 會員 : 線上瀏覽健檢報告結果
-
系統使用者分為會員、醫療人員及管理員三種身份，登入後需要呈現的資訊和操作模式都不相同，頁面設計以符合使用者需求為要，同時也維持系統的整體性。
-
頁面需要傳達許多文字訊息透過清晰的層級以提升易讀性。
-
健檢報告有多種狀態 (未審查 / 健管師已審查 / 被退回 / 醫師已審查 / 已完成 / 已匯出PDF) 需要對不同狀態做區別標示。
-
希望跳脫醫療系統的冰冷形象，營造出清新、自然、健康、溫暖的氛圍。
┃UI Flow + Wireframe
-
呈現會員、醫療人員及管理員三種不同身分的功能需求及畫面流程。
-
主要畫面之初步線框槁
┃Flow Chart
-
呈現會員、醫療人員及管理員三種不同身分登入後之邏輯操作流程。
┃Design Decision
一、 表格設計方法
-
頁面需要傳達及編輯大量文字訊息，所以利用表格形式整理資訊。
-
依照主要操作功能將表格分為兩類。
(一) 資訊編輯用表格 : 應用在醫療人員及管理員的部分
-
使用灰白兩色來區分表格的標題及內容編輯區塊，讓畫面清晰簡單，使用者可快速執行資料的編輯 (新增、刪除、修改) 及儲存作業。
-
表格同時搭配 icon 按鈕以滿足操作時可針對單一欄位做編輯的需求 。
(二) 資訊瀏覽用表格 : 應用在會員及醫療人員的部分
-
表格內容區塊使用灰白兩色隔行換色，在表格標題及分類的欄位使用彩度較高的主色。
-
標題明顯的提示讓使用者在大量瀏覽時能隨時掌握瀏覽的進度。
-
根據完形心理學，善用顏色的對比、區塊及留白來整理資訊內容，提高易讀性。
二、 報告針對使用者不同的呈現方式
-為符合三種角色使用者的操作需求，同一份報告內容在介面呈現方式上有所不同。
(一) 會員-瀏覽報告頁 :
-
主要功能為健檢報告的瀏覽。
-
為了大範圍呈現整份報告，介面上將報告的Banner放大延伸取代原先系統的Banner避免重複兩塊。
-
功能選單及不同類的報告列表整合在左方側邊攔，讓使用者在瀏覽報告時可方便快速切換。
(二) 醫療人員-編輯報告頁 :
-
主要功能為健檢報告的相關說明編輯。
-
醫療人員做編輯前必須先清楚報告目前之審查狀態，因此介面上先呈現報告的分類按鈕及狀態列表，下方才依據選擇呈現該份報告及編輯功能按鈕。
(三) 管理員-設定預設之報告說明 :
-
主要功能為健檢報告的後台資料設定
-
有別於前兩項不需要瀏覽及參照檢查結果，因此將表格簡化為兩欄項目及說明 (編輯區塊)。
-
考慮到告報告之項目繁多將帶狀分類標題改成抽屜式表格之標題，讓管理員可快速尋找欲編輯之欄位。
-
同樣利用側邊選單方便快速切換報告。
三、 報告設計方法
觀察報告內容原檔可看出內容繁多且包含圖文，卻因為用色無明確邏輯導致即便利用表格做整理仍顯雜亂，用色無明確邏輯。
報告資料原稿 :
-
同性質欄位用不同顏色
-
不同性質欄位用同一顏色
-
隔行換色無固定順序、固定顏色，且沒有貫徹整列表格
-
未善用顏色做層級區分，次要分類標題反而較主要分類標題搶眼
報告設計說明 :
報告主標題用色較高彩較高彩度結合圖片 Banner 強化視覺焦點更易於快速辨別此份報告主題。
主要分類標題在選色和長寬比例上與報告主標題做區隔以清楚標示報告內容的分類配置。
報告內容區塊整體寬度內縮做明顯區塊區分。
內容表格的標題以及子分類在不影響大標辨識度的條件下，利用顏色做強調，將大量資訊做分組提高易讀性。
內容表格用色較低彩度以避免影響大標辨識度，維持清楚的資訊層級區分，整份報告內容區塊維持隔行換色的規律以提高大量文字內容的易讀性。
檢查結果超標及醫師的意見指導為受檢者最在意的部分，因此以紅色系作明顯的標示。
┃Mockup - Report
-
健檢報告共分為六類，分別以六種自然植物圖片為Banner搭配六套色系，讓類別之間容易區分又保有一致性。
┃Mockup - System
-
系統畫面Mockup組合
┃Interface Design Element/UI kit
-
以藍綠色系為主色傳達清新、放鬆、自然的氛圍。
-
在重點部分使用橘色系，以中和整體藍綠色系的冷調。
-
思考同一元素需針對不同使用者、不同操作，呈現不同狀態來滿足其需求。
-
系統頁面需要傳達許多文字訊息，所以多利用同色系的濃淡變化搭配並以表格方式呈現，以提供好的閱讀體驗。
-
報告的意像圖片摒除一般常見人物照片及醫療場景，使用植物的局部以傳達自然、自在、健康的意象。
┃Operation Display - 會員
┃Operation Display - 醫療人員
┃Operation Display - 醫療管理員
┃Micro Animation
-
系統在執行中有時須花費時間傳送大量資料，所以設計一套共三款 loader 動畫。
-
應用於一般情形，報告發布，報告PDF發布。
┃Reflection
需要同時符合三種不同使用者的功能需求，是這個系統的重點，也是最需要花時間釐清的部分，經過這次專案後，有機會可以思考一個組織較複雜的系統平台要如何操作以及畫面的呈現方式，學到的經驗 :
-
面對不同使用者需求，畫面要如何滿足需求容易操作的同時，利用資訊排列方式和色系等元素，維持同一種畫面的風格呈現。
-
同一份資料對於不同身分不同的狀態呈現，例如健檢報告對於會員-瀏覽及下載，對於醫療人員-編輯結果相關內容，對於管理員-設定相關預設說明以及檢查結果判斷邏輯原則。
-
大量文字內容資訊的呈現方式，利用表格及顏色作區分，並做出優先次要之層次分別。
