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)模塊。
藍藍設(shè)計的小編 http://m.820esy.cn