本文作者主要與我們分享一款Web 醫(yī)療應(yīng)用設(shè)計的細(xì)節(jié)。enjoy~

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

今天我們要介紹的，就是?Tubik Studio?的設(shè)計師 Eugene Cameel 所設(shè)計的Web端醫(yī)療應(yīng)用?HealthCare。醫(yī)療領(lǐng)域并且針對醫(yī)生所設(shè)計的數(shù)字產(chǎn)品，在屬性和功能有著獨有的特質(zhì)與需求，由于它和患者的生命息息相關(guān)，這款應(yīng)用應(yīng)該以快速、有效的交互為核心，來構(gòu)建整個解決方案。它應(yīng)該讓醫(yī)生和患者之間溝通變得更加輕松快捷，同時能夠主動組織和優(yōu)化數(shù)據(jù)，讓治療更加高效。

接下來，我們近距離地來看看這個Web 應(yīng)用設(shè)計的細(xì)節(jié)。

任務(wù)

完成針對醫(yī)生的應(yīng)用，包括其中的UI和UX

設(shè)計過程

線框圖

在真正開始考慮風(fēng)格和視覺設(shè)計之前，設(shè)計師通常需要借助線框圖來搭建整個布局框架，為后續(xù)的環(huán)節(jié)奠定基礎(chǔ)。設(shè)計師需要基于目標(biāo)受眾的定義和分析，以及未來產(chǎn)品要解決的問題，來構(gòu)建線框圖。HealthCare 這款Web 應(yīng)用的主要用戶是醫(yī)生，而主要功能是幫助醫(yī)生快速搜集和處理大量的數(shù)據(jù)。每個患者通過檢測所獲得的每一項數(shù)據(jù)都至關(guān)重要，因此設(shè)計師應(yīng)該專注于信息的組織和構(gòu)建易用而清晰的界面。為了讓這款覆蓋到大量不具備復(fù)雜交互經(jīng)驗的一線醫(yī)療人員，整個導(dǎo)航設(shè)計需要具備良好的直覺性。

基本上，這款工具為醫(yī)生提供了快速保存、整理、分析、調(diào)用患者相關(guān)數(shù)據(jù)的功能，在需要的時候快速打開，并提供治療的技術(shù)支持。醫(yī)生可以在內(nèi)置的日歷當(dāng)中，規(guī)劃并記錄病人預(yù)約看病的時間，并且監(jiān)督病人來體檢。這款應(yīng)用還可以提供病人病歷、處方記錄、個人數(shù)據(jù)和更為復(fù)雜的用藥計劃。它另外一個進(jìn)階功能，是提供不同層面、不同病癥和問題的統(tǒng)計和探索，這些統(tǒng)計包含了普通的數(shù)據(jù)統(tǒng)計和世界衛(wèi)生組織的統(tǒng)計和建議。

整個UX解決方案提供了三屏作為基本的界面，包括預(yù)約、日歷和統(tǒng)計。

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

特別的預(yù)約會在菜單頂部顯示，并且可以橫向滾動瀏覽，確保隨時可以看到。下方我們能看到不同的用戶的詳細(xì)信息按照標(biāo)簽被整理在一起，每個用戶一個標(biāo)簽，其中包含了用戶的姓名、性別、醫(yī)生、ID、地址和聯(lián)系人。同時，關(guān)鍵性的數(shù)據(jù)被整理為三個部分：醫(yī)療背景、化驗結(jié)果、保險和收費。

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

UI設(shè)計

在UI設(shè)計的環(huán)節(jié)，設(shè)計師需要讓數(shù)據(jù)更加便捷地視覺化呈現(xiàn)，在配色和排版上更加用心。設(shè)計師將深藍(lán)色作為背景的主要色調(diào)，和前景內(nèi)容的淺色構(gòu)成明顯的對比，這樣就將側(cè)邊欄和標(biāo)題和具體內(nèi)容的層次劃分了出來。在界面的主要區(qū)域采用了自然的白色，在設(shè)計過程中，設(shè)計師設(shè)定了幾個基本的目標(biāo)：

• 擁有良好的可讀性，并且讓用戶對于文本內(nèi)容可以快速感知，因為在緊急情況下，需要醫(yī)生能夠?qū)τ诨颊邤?shù)據(jù)足夠敏感。
• UI中關(guān)鍵的交互元素（諸如按鈕和圖標(biāo)）和周遭元素要有明顯的對比度。
• 要和傳統(tǒng)的紙質(zhì)文檔在視覺上保持高度的一致性，并且參考實際的文檔來設(shè)計交互和UI，這對于大量的傳統(tǒng)的醫(yī)療行業(yè)從業(yè)者更加直覺，這對于老一輩的醫(yī)生而言，更加直覺。
• 加入恰到好處的留白，不要讓信息堆積在一起形成壓迫感，這有利于醫(yī)生快速注意到特定的數(shù)據(jù)，也有利于創(chuàng)造相對輕松的閱讀體驗。

當(dāng)前的預(yù)約界面顯示了主要的數(shù)據(jù)：診斷、問題、藥物和復(fù)雜的用藥計劃。

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

數(shù)據(jù)統(tǒng)計界面由于涉及到數(shù)據(jù)可視化，設(shè)計師為了讓信息更加直觀，采用了相對簡約的設(shè)計和醒目的配色，加上高識別度的非襯線字體，確保優(yōu)雅的同時，還保證了信息的有效性。

由于整個Web應(yīng)用涉及到大量不同的內(nèi)容，設(shè)計師加入了動畫來幫用戶了解元素之間的關(guān)系和交互的結(jié)果。

結(jié)語

這個案例為Tubik Studio?向著醫(yī)療行業(yè)邁進(jìn)奠定了基礎(chǔ)，設(shè)計師在這個項目當(dāng)中對于醫(yī)療行業(yè)有了更多的了解，雖然有挑戰(zhàn)性，但是努力是值得的。

原文作者：Tubik Studio

原文地址：uxplanet

譯者：@陳子木

譯文地址：優(yōu)設(shè)網(wǎng)

本文由 @陳子木?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pixabay，基于 CC0 協(xié)議