醫(yī)療應(yīng)用系統(tǒng)的設(shè)計思維

2022-6-20    純純




目錄


一、項目背景

二、項目分析

三、風(fēng)格探索

四、設(shè)計原則

五、深色模式

六、設(shè)計規(guī)范

七、總結(jié)


一、項目背景


這家公司主要致力于研發(fā)醫(yī)療大數(shù)據(jù)和人工智能驅(qū)動的智慧醫(yī)療產(chǎn)品,其產(chǎn)品主要用于疾病的預(yù)測、篩查、診斷和治療的各個環(huán)節(jié),主要聚焦于人工智能醫(yī)學(xué)影像領(lǐng)域。


產(chǎn)品定位

1、開發(fā)定位:web應(yīng)用;

2、用戶群體:從事醫(yī)療行業(yè)的醫(yī)生;

3、功能定位:解決的是醫(yī)生閱片花費時間過長的問題,能夠輔助醫(yī)生智能診斷的工具型智能應(yīng)用系統(tǒng)。

二、項目分析


從前面的產(chǎn)品定位,可以得到以下三個關(guān)鍵詞:web、醫(yī)療、應(yīng)用,同時根據(jù)這三個關(guān)鍵詞可以延伸出一些問題,然后開始著手準(zhǔn)備前期設(shè)計工作。


A、醫(yī)療設(shè)計注意事項

1、醫(yī)生的操作交互模式習(xí)慣于之前固有的Pacs閱片系統(tǒng),設(shè)計時要尊重現(xiàn)有的交互模式;

2、因為多數(shù)影像科的使用環(huán)境都比較暗,所以界面整體風(fēng)格采用深色模式。

3、因為有很多專家都是比較年長的,考慮到這一特點,在制作設(shè)計稿時字號不能太小。但是信息內(nèi)容又多,字號大的話信息很難布局,這是一大問題;

4、和第3點類似,影像應(yīng)用要求給影像顯示區(qū)域留有足夠的空間以,這就導(dǎo)致其它文字內(nèi)容的空間又被壓縮了,其它文字內(nèi)容的顯示又成了問題;

5、安全性,涉及到很多病患的信息,如何體現(xiàn)安全性很重要;

6、整體風(fēng)格上趨于保守,因為是為醫(yī)院設(shè)計的,顏色使用上相對來說要克制。

B、web設(shè)計注意事項

1、最明顯的是用鼠標(biāo)操作系統(tǒng),鼠標(biāo)的交互方式多,有hover、click、滾輪、左右鍵等等。而鼠標(biāo)右鍵一般是瀏覽器自帶的功能,不方便定制。

2、pc端瀏覽器右上角帶有關(guān)閉瀏覽器。同時自帶后退、前進、關(guān)閉的按鈕,有點類似于安卓系統(tǒng)自帶返回鍵。這些功能影響著應(yīng)用信息保存的交互問題;

3、布局問題,瀏覽器可自由伸縮,會影響頁面的布局;

4、設(shè)計時不存在@2x、@3x這些問題,采用@1x設(shè)計就可以,可以給設(shè)計和開發(fā)帶來不少便利,有些切圖為適配高分辨率的屏幕需要切2倍3倍圖;

5、頭部瀏覽器自帶菜單欄,會影響縱向空間的布局;

6、什么時候新開標(biāo)簽頁和什么時候在當(dāng)前頁面跳轉(zhuǎn)問題。研究顯示,國內(nèi)網(wǎng)頁多喜歡新開標(biāo)簽頁,國外網(wǎng)頁喜歡在當(dāng)前頁面跳轉(zhuǎn),但是應(yīng)用類型的網(wǎng)頁更多的還是在當(dāng)前頁面跳轉(zhuǎn);

C、中后臺系統(tǒng)應(yīng)用設(shè)計注意事項

1、中后臺系統(tǒng)信息繁多,因此系統(tǒng)用起來體驗好不好、效率高不高尤為重要,在醫(yī)療行業(yè)更是如此。如何用設(shè)計區(qū)分信息的層次,并且在有限的空間展示盡可能多的信息是設(shè)計的首要任務(wù),為了展示正確的信息哪怕展示方式不對也比設(shè)計的好看而信息展示不全要好。

2、盡可能的優(yōu)化操作流程,再精美的設(shè)計也不如優(yōu)化一兩個流程效率來的快一些;

3、交互點到為止,盡量少用復(fù)雜的交互方式,比如拖拽,雙擊和右鍵都盡量少用;

4、對顏色和icon的運用要謹(jǐn)慎一些,以免造成多余的認(rèn)知障礙。由于文字能夠傳達清晰準(zhǔn)確的信息,無疑是更好的設(shè)計元素。

5、即時反饋是提高效率的有效手段。

三、風(fēng)格探索


A、布局

我們采用左右布局的設(shè)計方案,將左側(cè)菜單欄固定,右側(cè)工作區(qū)域動態(tài)適配。菲茲定律表明:越遠難點擊,越近越容易點擊,靠近邊緣更容易點擊。因此菜單欄在左側(cè)時,當(dāng)瀏覽器全屏?xí)r,點擊左側(cè)的菜單相當(dāng)于是點擊邊緣的目標(biāo),這種操作路徑用戶所花的時間是最少的。而當(dāng)菜單欄在上方時,因為上方有瀏覽器自帶的菜單欄,會影響用戶的操作,因此用戶點擊起來所花的時間更長,也容易操作失誤。

B、色彩

醫(yī)療產(chǎn)品多采用藍色作為主色調(diào),藍色具有安靜、信賴、科技的色彩象征,然后綠色是生命、醫(yī)療的象征,所以最后選擇了一個藍色偏青的色彩,比較符合現(xiàn)有的產(chǎn)品調(diào)性。另外因為影像科工作環(huán)境多為暗室,所以界面整體采用深色模式設(shè)計,字體顏色的選取注意WCAG規(guī)范,文本和背景的對比度至少要有4.5:1。

C、字體

我們最開始設(shè)計demo時,常用文字使用的字體大小是12,而醫(yī)生試用后反饋字體太小。原來有很大一部分醫(yī)生專家都是比較年長的,12對于他們來說字體小了點,因此我們決定采用14作為主要字號,12作為輔助說明文字。

D、圖標(biāo)和圓角

為了更好的搭配深色模式,我們決定圖標(biāo)采用面性圖標(biāo)(后文會講解)。圖標(biāo)和按鈕的圓角也采用了直角硬邊風(fēng)格代替了常見的有圓角風(fēng)格。硬朗的圖標(biāo)有一種精確性、科技感,更符合產(chǎn)品調(diào)性。


四、設(shè)計原則


A、層次清晰

中后臺系統(tǒng)有信息繁多,這就需要設(shè)計來區(qū)分信息的層次,引導(dǎo)用戶去關(guān)注最重要的東西,“偷偷地”給用戶一種高效的體驗。這里根據(jù)《寫給大家看的設(shè)計書》當(dāng)中的四大原則:對比、對齊、親密性、重復(fù),來區(qū)分信息的層次。

①、對比

對比即為設(shè)計元素的對比,可以是顏色對比、字體對比、大小對比等等。恰當(dāng)?shù)膶Ρ饶茏尶雌饋砀袑哟?,能給產(chǎn)品提供一種韻律美。通過對比可以引導(dǎo)用戶的視線,減少用戶的選擇時間,間接的提高了使用效率。

②、對齊

對齊作為設(shè)計的最基本原則,是建立秩序的一種最基本手段,合理的利用對齊方式能夠有效地提高用戶體驗。常見的對齊方式有左對齊、居中對齊、右對齊、兩邊對齊。在中后臺系統(tǒng)中常常出現(xiàn)標(biāo)題長度參差不齊,表單內(nèi)容長短不一的情況,這種情況不論是左對齊還是右對齊都會出現(xiàn)不整齊的問題。而這時,我們往往要考慮的已經(jīng)不是美的問題,而是哪種方式更能夠提高用戶的使用效率。

③、親密性

親密性能夠讓內(nèi)容凝聚在一起,產(chǎn)生層次而不凌亂。信息的關(guān)聯(lián)性越高,它們之間的距離應(yīng)該越近,反之就應(yīng)該越遠。在本系統(tǒng)中頁面中的縱向間距采用小、中、大三種間距來區(qū)分層次,分別是8px、16px、32px,以此來體現(xiàn)頁面的組織性。另外,一些特殊情況,比如空間有限,最小間距可以是4px。其它不適應(yīng)的情況統(tǒng)一采用8的整倍數(shù)定義間距。

④、重復(fù)

相同的元素在頁面間的重復(fù)運用,可以有效的降低用戶的學(xué)習(xí)成本。也能夠幫助用戶識別出這些元素的關(guān)聯(lián)性。重復(fù)的元素可以是某個顏色,某種樣式,某個布局。這里主要講重復(fù)在不同產(chǎn)品之間的應(yīng)用,不同產(chǎn)品之間有相同的結(jié)構(gòu)布局、相同的配色能夠讓用戶快速上手我們的產(chǎn)品,同時也是對品牌感的一種強調(diào)。例如:由于醫(yī)生以前習(xí)慣于使用醫(yī)院的pacs系統(tǒng)來閱片,所以在影像顯示頁面,我們延用之前pacs系統(tǒng)的布局,讓醫(yī)生找到一種熟悉感。

B、即時反饋

人機交互時,系統(tǒng)及時給出反饋非常重要,反饋能夠給用戶確定性和安全感。如果用戶操作了系統(tǒng),得不到相應(yīng)的反饋,用戶往往覺得系統(tǒng)是不是出錯了,就會給用戶造成一種負面使用體驗。常見的反饋形式有確認(rèn)反饋、警告反饋、錯誤反饋、狀態(tài)反饋。本系統(tǒng)中從患者拍片、系統(tǒng)智能分析、醫(yī)生審核、保存打印,各個步驟都應(yīng)該有確認(rèn)反饋、警告反饋、錯誤反饋、狀態(tài)反饋,只是反饋的形式可能是彈窗,可能是顏色的變化,可能是符號的提示等等。這里舉例最基本的按鈕一定要有normal、hover、click、disable,不然用戶不知道自己的操作是否起作用了,給用戶造成認(rèn)知障礙。

C、簡單有效

奧卡姆剃刀原理講究設(shè)計時避重趨輕、避繁逐簡、以簡御繁、避虛就實,因此在設(shè)計時,我們會和產(chǎn)品經(jīng)理商量有些功能是否真的有必要放上去,或者有些信息是不是可以隱藏。例如:搜索欄,按照醫(yī)生閱片流程來看,醫(yī)生是很少會使用到搜索功能的,即使用到了,搜索病人ID就足夠了,其它項目的搜索完全可以放到高級搜索里。再比如病人列表里,往往會因為列表項太多使整個表格看起來非常臃腫,于是我們篩選出了最重要的7項,其它不是那么重要的,我們就以自由定制化的形式放在右側(cè),醫(yī)生可以根據(jù)自己的需要進行定制。

五、深色模式


前文提到,根據(jù)醫(yī)療產(chǎn)品的特性以及用戶的使用環(huán)境,我們的系統(tǒng)采用深色模式。然而深色模式并不是簡單的背景色使用深色那么簡單,因為背景變成了深色,相應(yīng)的字體的顏色、圖標(biāo)的風(fēng)格、元素的布局等等都會產(chǎn)生微妙的變化,以下列出一些深色模式要注意的一些事項。


A、顏色

1、深色的選取盡量不要直接選用純灰色,可以往冷色系偏一些;

2、白色背景上不會用純黑文字,同樣的深色背景上不要直接使用白色,否則會產(chǎn)生強烈的刺眼感,但是一些按鈕還是要使用白色;

3、字體的中性顏色深淺建議使用白色的透明度變化來制作深淺,原因有兩個:一是透明度變化能夠讓字本身投射出背景色的色調(diào),做到自帶色調(diào)的效果,能夠讓頁面更自然協(xié)調(diào);二是利于設(shè)計和開發(fā)理解記憶,有一個量度去衡量。雖然通過透明度變化有時會碰到?jīng)]有背景色的問題,但是這種情況很少,而且也很好解決,增加一個背景就可以了;

B、圖標(biāo)

最開始我們就像以往一樣,圖標(biāo)的形式采用線性圖標(biāo)。但是我發(fā)現(xiàn)在深色模式下,線性圖標(biāo)變得單薄、空洞。我們分析是因為在白色背景下,線性圖標(biāo)是深色的,深色具有收縮感,讓人眼能夠關(guān)注到“線”和被線包圍的“留白”,人眼關(guān)注的是整體;而在深色模式下,線是白色的,白色具有擴張感,白色的擴展讓人眼的關(guān)注點變成了“線”,忽略了“留白”,所以人的觀察感覺是缺失的,而且在大面積深色的壓迫下,線性圖標(biāo)變得特別單薄。于是我們決定采用面性圖標(biāo)來代替之前的線性圖標(biāo)。

六、設(shè)計規(guī)范


原子設(shè)計理念

原子設(shè)計理論由設(shè)計師Brad Frost首先提出,我覺得這套理論能夠很好的組織構(gòu)建設(shè)計規(guī)范,也有利于團隊成員理解與協(xié)作,于是我把這套理論踐行于這套系統(tǒng)中。在原子設(shè)計理念中,一切設(shè)計都是由最小的原子組成,然后原子可以演變成分子,組織,模板,頁面。

1、原子

為UI設(shè)計構(gòu)成的基本元素,文字、顏色、圖標(biāo)、圖片、調(diào)色板、進度條、分割線、開關(guān)、單選框、復(fù)選框,也可以為抽象的概念,例如色調(diào)等。特點是不可再分割。


2、分子

由原子構(gòu)成的簡單UI組件。按鈕、標(biāo)簽、導(dǎo)航、輸入框、搜索框等。


3、組織

相對分子而言,較為復(fù)雜的構(gòu)成物,由多個簡單的UI組件構(gòu)成。彈窗、表單、列表、卡片、數(shù)據(jù)圖表等。


4、模板

以頁面為基礎(chǔ)的架構(gòu),將以上元素進行排版。例如消息模塊、列表模塊、項目模塊、表單填寫相關(guān)模塊。



作者:Watt海羅         來源:站酷
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司








分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.820esy.cn

存檔