Radispine
Lumbar Spine MRI AI Analysis Software
Year
2022
Category
Software
Client
RadiRad
Role
UI/UX Designer
Credits
Design: Jinwen, Tia
Development: RadiRad Team
Background
專案背景：
RadiRad是一家專注於開發醫療應用AI的科技公司。 此專案為脊椎MRI的智能閱片軟體，能幫助醫師更精準地判讀脊椎MRI結果，提供包含脊椎狹窄、椎間盤突出、椎間盤退化等相關數據分析報告。
這次的合作目標是優化軟體介面，將所開發的功能進行畫面排版與互動方式調整，讓產品更符合醫師使用需求。
1. Understand
專案初期，我們先與客戶就目前開發的AI功能，使用需求進行討論，並進行競品分析，總結出以下幾個設計重點：
✔ 操作的準確性與效率
資訊或按鈕需盡可能在第一層顯示，避免不必要的頁面切換或按鈕隱藏
✔ 最大化的影像檢視：
讓醫師能專注於影像的評估，減少不必要的工具列
✔ 介面的回饋感：
提供明確的回饋，讓使用者清楚了解系統當前的狀態，包括功能切換、開啟、關閉等操作
2. Define
軟體的主要操作流程為:登入→選擇病歷資料→檢視MRI分析報告。雖然流程是簡單的，但在畫面中需進行的操作是複雜的。
因次我們先整理了每個頁面的任務列表，確保在設計時不會有重要功能被遺漏。
3. Design
-
影像檢視區域最大化
在原有版本中可看到頁面中所需提供的功能與資訊，但MRI檢視區域較小，我們將這些資訊和功能做重要性的區分，讓最主要的MRI檢視區塊做滿版設計，將主要與次要的功能，依左上到右下排列，符合直覺瀏覽動線。
✔ 解決問題：影像檢視區域從佔比約1/3放大到了約1/2
-
浮動AI數據面板
Radispine軟體提供4項不同的AI偵測，我們將各項AI分析的數據或圖表顯示於浮動面板，讓醫師可依需求檢視。
✔ 解決問題：避免資訊直接疊加在原本的MRI影像，導致縮放影像時看不到數據或圖表。
-
即時對應影像與圖表：
因為MRI影像與AI分析圖表在判讀時需要有對應關係，我們設計了，當游標指向MRI影像中的脊椎位置，相對應的圖表位置會同步亮起，以幫助判讀。
拖拉放直覺操作：醫師查看不同series，可以拖拉放的方式，指定到檢視視窗。縮圖選單列會標示出目前正在檢視的series
✔ 解決問題：介面上的操作回饋能提示使用者目前系統的狀況
4. Develop
這個專案使用了MUI的套件進行設計，並在Figma中定義系統元件與客製化元件的樣式屬性，互動時會有的狀態和操作流程等，詳細的定義有助於溝通產品細節，加速開發效率。
在撰寫UI Spec時，除了主畫面的說明，我們也會考慮各種系統狀況，包括錯誤與提示訊息等，確保在不同情境下，使用者都能有良好的使用體驗。
工具使用：Figma
