這款給醫生的專業APP，設計上有著怎樣不同的要求？

醫療保健在任何一個國家都是非常重要的組成部分，它關乎每一個人的生命健康。 而隨著時代的發展，醫療技術本身逐步提升，而服務方式也隨之逐步演變，各種數字設備的普及和溝通方式的快速褪變，使得服務本身的潛力並沒有完全呈現出來。醫療、科技領域的專業人事和利益相關者，越來越關心現代醫療服務的提升的可能性，並且力圖探究更好的服務模式和解決方案，一方面讓醫生更好地挽救生命，另一方面，也讓用戶更好地接受治療。越來越多的APP和網站隨之誕生，而在測試和應用過程中，設計師的重要性逐漸凸顯。

今天我們要介紹的，就是 Tubik Studio 的設計師 Eugene Cameel 所設計的Web端醫療應用 HealthCare。醫療領域並且針對醫生所設計的數字產品，在屬性和功能有著獨有的特質與需求，由於它和患者的生命息息相關，這款應用應該以快速、有效的交互為核心，來構建整個解決方案。它應該讓醫生和患者之間溝通變得更加輕鬆快捷，同時能夠主動組織和優化數據，讓治療更加高效。

接下來，我們近距離地來看看這個Web 應用設計的細節。

任務

完成針對醫生的應用，包括其中的UI和UX

設計過程

線框圖

在真正開始考慮風格和視覺設計之前，設計師通常需要藉助線框圖來搭建整個布局框架，為後續的環節奠定基礎。設計師需要基於目標受眾的定義和分析，以及未來產品要解決的問題，來構建線框圖。HealthCare 這款Web 應用的主要用戶是醫生，而主要功能是幫助醫生快速搜集和處理大量的數據。每個患者通過檢測所獲得的每一項數據都至關重要，因此設計師應該專註於信息的組織和構建易用而清晰的界面。為了讓這款覆蓋到大量不具備複雜交互經驗的一線醫療人員，整個導航設計需要具備良好的直覺性。

基本上，這款工具為醫生提供了快速保存、整理、分析、調用患者相關數據的功能，在需要的時候快速打開，並提供治療的技術支持。醫生可以在內置的日曆當中，規劃並記錄病人預約看病的時間，並且監督病人來體檢。這款應用還可以提供病人病歷、處方記錄、個人數據和更為複雜的用藥計劃。它另外一個進階功能，是提供不同層面、不同病症和問題的統計和探索，這些統計包含了普通的數據統計和世界衛生組織的統計和建議。

整個UX解決方案提供了三屏作為基本的界面，包括預約、日曆和統計。

這款應用在左側邊欄上有5個選項卡，每個選項卡會承載不同的內容，並且搭配相應的文本欄位予以說明，整個視圖並不複雜，數據可以通過這樣的分類被整理得井井有條，而醫生有也可以通過分類快速定位到要尋找的數據。而日曆界面當中，用戶可以通過頂部快速切換月視圖、周視圖和每天的日程，這部分還能針對特定的日期進行單獨顯示。所有的數據都是以卡片的形式組織起來，左側的時間線可以供用戶快速跳轉和篩選。用戶可以通過標籤頁切換快速預覽所有的預約和計劃，也可以點擊特定的時間來添加新的待辦事項。在不同的預覽視圖當中，患者的名字、時間和預約的性質（急診、後續治療等）都會顯示出來。

特別的預約會在菜單頂部顯示，並且可以橫向滾動瀏覽，確保隨時可以看到。下方我們能看到不同的用戶的詳細信息按照標籤被整理在一起，每個用戶一個標籤，其中包含了用戶的姓名、性別、醫生、ID、地址和聯繫人。同時，關鍵性的數據被整理為三個部分：醫療背景、化驗結果、保險和收費。

第三屏則主要顯示了各種統計數據，這些數據對於醫生探索和研究特定的病例或者尋求更好的診斷方式是非常有用的。標題下的標籤頁可以讓醫生快速切換不同的數據，也可以根據月或者年份來篩選數據。

UI設計

在UI設計的環節，設計師需要讓數據更加便捷地視覺化呈現，在配色和排版上更加用心。設計師將深藍色作為背景的主要色調，和前景內容的淺色構成明顯的對比，這樣就將側邊欄和標題和具體內容的層次劃分了出來。在界面的主要區域採用了自然的白色，在設計過程中，設計師設定了幾個基本的目標：

擁有良好的可讀性，並且讓用戶對於文本內容可以快速感知，因為在緊急情況下，需要醫生能夠對於患者數據足夠敏感。

UI中關鍵的交互元素（諸如按鈕和圖標）和周遭元素要有明顯的對比度。

要和傳統的紙質文檔在視覺上保持高度的一致性，並且參考實際的文檔來設計交互和UI，這對於大量的傳統的醫療行業從業者更加直覺，這對於老一輩的醫生而言，更加直覺。

加入恰到好處的留白，不要讓信息堆積在一起形成壓迫感，這有利於醫生快速注意到特定的數據，也有利於創造相對輕鬆的閱讀體驗。

當前的預約界面顯示了主要的數據：診斷、問題、藥物和複雜的用藥計劃。

日曆界面採用了色彩柔和的彩色卡片，這種設計和日常記錄日程時利用便簽紙和白板的體驗類似。和物理世界相似的設計可以讓使用者更容易上手。

數據統計界面由於涉及到數據可視化，設計師為了讓信息更加直觀，採用了相對簡約的設計和醒目的配色，加上高識別度的非襯線字體，確保優雅的同時，還保證了信息的有效性。

GIF/1245K

由於整個Web應用涉及到大量不同的內容，設計師加入了動畫來幫用戶了解元素之間的關係和交互的結果。

結語

這個案例為Tubik Studio 向著醫療行業邁進奠定了基礎，設計師在這個項目當中對於醫療行業有了更多的了解，雖然有挑戰性，但是努力是值得的。

原文地址：uxplanet

原文作者：Tubik Studio

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！