目錄

一、項目背景

二、項目分析

三、風(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ī)生閱片花費(fèi)時間過長的問題，能夠輔助醫(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、因為有很多專家都是比較年長的，考慮到這一特點(diǎn)，在制作設(shè)計稿時字號不能太小。但是信息內(nèi)容又多，字號大的話信息很難布局，這是一大問題；

4、和第3點(diǎn)類似，影像應(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)閉瀏覽器。同時自帶后退、前進(jìn)、關(guān)閉的按鈕，有點(diǎ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、交互點(diǎn)到為止，盡量少用復(fù)雜的交互方式，比如拖拽，雙擊和右鍵都盡量少用；

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

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

三、風(fēng)格探索

A、布局

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

B、色彩

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

C、字體

我們最開始設(shè)計demo時，常用文字使用的字體大小是12，而醫(yī)生試用后反饋?zhàn)煮w太小。原來有很大一部分醫(yī)生專家都是比較年長的，12對于他們來說字體小了點(diǎn)，因此我們決定采用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)該越遠(yuǎn)。在本系統(tǒng)中頁面中的縱向間距采用小、中、大三種間距來區(qū)分層次，分別是8px、16px、32px，以此來體現(xiàn)頁面的組織性。另外，一些特殊情況，比如空間有限，最小間距可以是4px。其它不適應(yīng)的情況統(tǒng)一采用8的整倍數(shù)定義間距。

④、重復(fù)

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

B、即時反饋

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

C、簡單有效

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

五、深色模式

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

A、顏色

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

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

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)注的是整體；而在深色模式下，線是白色的，白色具有擴(kuò)張感，白色的擴(kuò)展讓人眼的關(guān)注點(diǎn)變成了“線”，忽略了“留白”，所以人的觀察感覺是缺失的，而且在大面積深色的壓迫下，線性圖標(biāo)變得特別單薄。于是我們決定采用面性圖標(biāo)來代替之前的線性圖標(biāo)。

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

原子設(shè)計理念

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

1、原子

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

2、分子

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

3、組織

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

4、模板

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

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