2022-6-20 純純
目錄
一、項(xiàng)目背景
二、項(xiàng)目分析
三、風(fēng)格探索
四、設(shè)計(jì)原則
五、深色模式
六、設(shè)計(jì)規(guī)范
七、總結(jié)
一、項(xiàng)目背景
這家公司主要致力于研發(fā)醫(yī)療大數(shù)據(jù)和人工智能驅(qū)動(dòng)的智慧醫(yī)療產(chǎn)品，其產(chǎn)品主要用于疾病的預(yù)測(cè)、篩查、診斷和治療的各個(gè)環(huán)節(jié)，主要聚焦于人工智能醫(yī)學(xué)影像領(lǐng)域。
產(chǎn)品定位
1、開發(fā)定位：web應(yīng)用；
2、用戶群體：從事醫(yī)療行業(yè)的醫(yī)生；
3、功能定位：解決的是醫(yī)生閱片花費(fèi)時(shí)間過長的問題，能夠輔助醫(yī)生智能診斷的工具型智能應(yīng)用系統(tǒng)。
二、項(xiàng)目分析
從前面的產(chǎn)品定位，可以得到以下三個(gè)關(guān)鍵詞：web、醫(yī)療、應(yīng)用，同時(shí)根據(jù)這三個(gè)關(guān)鍵詞可以延伸出一些問題，然后開始著手準(zhǔn)備前期設(shè)計(jì)工作。
A、醫(yī)療設(shè)計(jì)注意事項(xiàng)
1、醫(yī)生的操作交互模式習(xí)慣于之前固有的Pacs閱片系統(tǒng)，設(shè)計(jì)時(shí)要尊重現(xiàn)有的交互模式；
2、因?yàn)槎鄶?shù)影像科的使用環(huán)境都比較暗，所以界面整體風(fēng)格采用深色模式。
3、因?yàn)橛泻芏鄬＜叶际潜容^年長的，考慮到這一特點(diǎn)，在制作設(shè)計(jì)稿時(shí)字號(hào)不能太小。但是信息內(nèi)容又多，字號(hào)大的話信息很難布局，這是一大問題；
4、和第3點(diǎn)類似，影像應(yīng)用要求給影像顯示區(qū)域留有足夠的空間以，這就導(dǎo)致其它文字內(nèi)容的空間又被壓縮了，其它文字內(nèi)容的顯示又成了問題；
5、安全性，涉及到很多病患的信息，如何體現(xiàn)安全性很重要；
6、整體風(fēng)格上趨于保守，因?yàn)槭菫獒t(yī)院設(shè)計(jì)的，顏色使用上相對(duì)來說要克制。
B、web設(shè)計(jì)注意事項(xiàng)
1、最明顯的是用鼠標(biāo)操作系統(tǒng)，鼠標(biāo)的交互方式多，有hover、click、滾輪、左右鍵等等。而鼠標(biāo)右鍵一般是瀏覽器自帶的功能，不方便定制。
2、pc端瀏覽器右上角帶有關(guān)閉瀏覽器。同時(shí)自帶后退、前進(jìn)、關(guān)閉的按鈕，有點(diǎn)類似于安卓系統(tǒng)自帶返回鍵。這些功能影響著應(yīng)用信息保存的交互問題；
3、布局問題，瀏覽器可自由伸縮，會(huì)影響頁面的布局；
4、設(shè)計(jì)時(shí)不存在@2x、@3x這些問題，采用@1x設(shè)計(jì)就可以，可以給設(shè)計(jì)和開發(fā)帶來不少便利，有些切圖為適配高分辨率的屏幕需要切2倍3倍圖；
5、頭部瀏覽器自帶菜單欄，會(huì)影響縱向空間的布局；
6、什么時(shí)候新開標(biāo)簽頁和什么時(shí)候在當(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ái)系統(tǒng)應(yīng)用設(shè)計(jì)注意事項(xiàng)
1、中后臺(tái)系統(tǒng)信息繁多，因此系統(tǒng)用起來體驗(yàn)好不好、效率高不高尤為重要，在醫(yī)療行業(yè)更是如此。如何用設(shè)計(jì)區(qū)分信息的層次，并且在有限的空間展示盡可能多的信息是設(shè)計(jì)的首要任務(wù)，為了展示正確的信息哪怕展示方式不對(duì)也比設(shè)計(jì)的好看而信息展示不全要好。
2、盡可能的優(yōu)化操作流程，再精美的設(shè)計(jì)也不如優(yōu)化一兩個(gè)流程效率來的快一些；
3、交互點(diǎn)到為止，盡量少用復(fù)雜的交互方式，比如拖拽，雙擊和右鍵都盡量少用；
4、對(duì)顏色和icon的運(yùn)用要謹(jǐn)慎一些，以免造成多余的認(rèn)知障礙。由于文字能夠傳達(dá)清晰準(zhǔn)確的信息，無疑是更好的設(shè)計(jì)元素。
5、即時(shí)反饋是提高效率的有效手段。
三、風(fēng)格探索
A、布局
我們采用左右布局的設(shè)計(jì)方案，將左側(cè)菜單欄固定，右側(cè)工作區(qū)域動(dòng)態(tài)適配。菲茲定律表明：越遠(yuǎn)難點(diǎn)擊，越近越容易點(diǎn)擊，靠近邊緣更容易點(diǎn)擊。因此菜單欄在左側(cè)時(shí)，當(dāng)瀏覽器全屏?xí)r，點(diǎn)擊左側(cè)的菜單相當(dāng)于是點(diǎn)擊邊緣的目標(biāo)，這種操作路徑用戶所花的時(shí)間是最少的。而當(dāng)菜單欄在上方時(shí)，因?yàn)樯戏接袨g覽器自帶的菜單欄，會(huì)影響用戶的操作，因此用戶點(diǎn)擊起來所花的時(shí)間更長，也容易操作失誤。
B、色彩
醫(yī)療產(chǎn)品多采用藍(lán)色作為主色調(diào)，藍(lán)色具有安靜、信賴、科技的色彩象征，然后綠色是生命、醫(yī)療的象征，所以最后選擇了一個(gè)藍(lán)色偏青的色彩，比較符合現(xiàn)有的產(chǎn)品調(diào)性。另外因?yàn)橛跋窨乒ぷ鳝h(huán)境多為暗室，所以界面整體采用深色模式設(shè)計(jì)，字體顏色的選取注意WCAG規(guī)范，文本和背景的對(duì)比度至少要有4.5:1。
C、字體
我們最開始設(shè)計(jì)demo時(shí)，常用文字使用的字體大小是12，而醫(yī)生試用后反饋?zhàn)煮w太小。原來有很大一部分醫(yī)生專家都是比較年長的，12對(duì)于他們來說字體小了點(diǎn)，因此我們決定采用14作為主要字號(hào)，12作為輔助說明文字。
D、圖標(biāo)和圓角
為了更好的搭配深色模式，我們決定圖標(biāo)采用面性圖標(biāo)（后文會(huì)講解）。圖標(biāo)和按鈕的圓角也采用了直角硬邊風(fēng)格代替了常見的有圓角風(fēng)格。硬朗的圖標(biāo)有一種精確性、科技感，更符合產(chǎn)品調(diào)性。
四、設(shè)計(jì)原則
A、層次清晰
中后臺(tái)系統(tǒng)有信息繁多，這就需要設(shè)計(jì)來區(qū)分信息的層次，引導(dǎo)用戶去關(guān)注最重要的東西，“偷偷地”給用戶一種高效的體驗(yàn)。這里根據(jù)《寫給大家看的設(shè)計(jì)書》當(dāng)中的四大原則：對(duì)比、對(duì)齊、親密性、重復(fù)，來區(qū)分信息的層次。
①、對(duì)比
對(duì)比即為設(shè)計(jì)元素的對(duì)比，可以是顏色對(duì)比、字體對(duì)比、大小對(duì)比等等。恰當(dāng)?shù)膶?duì)比能讓看起來更有層次，能給產(chǎn)品提供一種韻律美。通過對(duì)比可以引導(dǎo)用戶的視線，減少用戶的選擇時(shí)間，間接的提高了使用效率。
②、對(duì)齊
對(duì)齊作為設(shè)計(jì)的最基本原則，是建立秩序的一種最基本手段，合理的利用對(duì)齊方式能夠有效地提高用戶體驗(yàn)。常見的對(duì)齊方式有左對(duì)齊、居中對(duì)齊、右對(duì)齊、兩邊對(duì)齊。在中后臺(tái)系統(tǒng)中常常出現(xiàn)標(biāo)題長度參差不齊，表單內(nèi)容長短不一的情況，這種情況不論是左對(duì)齊還是右對(duì)齊都會(huì)出現(xiàn)不整齊的問題。而這時(shí)，我們往往要考慮的已經(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í)成本。也能夠幫助用戶識(shí)別出這些元素的關(guān)聯(lián)性。重復(fù)的元素可以是某個(gè)顏色，某種樣式，某個(gè)布局。這里主要講重復(fù)在不同產(chǎn)品之間的應(yīng)用，不同產(chǎn)品之間有相同的結(jié)構(gòu)布局、相同的配色能夠讓用戶快速上手我們的產(chǎn)品，同時(shí)也是對(duì)品牌感的一種強(qiáng)調(diào)。例如：由于醫(yī)生以前習(xí)慣于使用醫(yī)院的pacs系統(tǒng)來閱片，所以在影像顯示頁面，我們延用之前pacs系統(tǒng)的布局，讓醫(yī)生找到一種熟悉感。
B、即時(shí)反饋
人機(jī)交互時(shí)，系統(tǒng)及時(shí)給出反饋非常重要，反饋能夠給用戶確定性和安全感。如果用戶操作了系統(tǒng)，得不到相應(yīng)的反饋，用戶往往覺得系統(tǒng)是不是出錯(cuò)了，就會(huì)給用戶造成一種負(fù)面使用體驗(yàn)。常見的反饋形式有確認(rèn)反饋、警告反饋、錯(cuò)誤反饋、狀態(tài)反饋。本系統(tǒng)中從患者拍片、系統(tǒng)智能分析、醫(yī)生審核、保存打印，各個(gè)步驟都應(yīng)該有確認(rèn)反饋、警告反饋、錯(cuò)誤反饋、狀態(tài)反饋，只是反饋的形式可能是彈窗，可能是顏色的變化，可能是符號(hào)的提示等等。這里舉例最基本的按鈕一定要有normal、hover、click、disable，不然用戶不知道自己的操作是否起作用了，給用戶造成認(rèn)知障礙。
C、簡(jiǎn)單有效
奧卡姆剃刀原理講究設(shè)計(jì)時(shí)避重趨輕、避繁逐簡(jiǎn)、以簡(jiǎn)御繁、避虛就實(shí)，因此在設(shè)計(jì)時(shí)，我們會(huì)和產(chǎn)品經(jīng)理商量有些功能是否真的有必要放上去，或者有些信息是不是可以隱藏。例如：搜索欄，按照醫(yī)生閱片流程來看，醫(yī)生是很少會(huì)使用到搜索功能的，即使用到了，搜索病人ID就足夠了，其它項(xiàng)目的搜索完全可以放到高級(jí)搜索里。再比如病人列表里，往往會(huì)因?yàn)榱斜眄?xiàng)太多使整個(gè)表格看起來非常臃腫，于是我們篩選出了最重要的7項(xiàng)，其它不是那么重要的，我們就以自由定制化的形式放在右側(cè)，醫(yī)生可以根據(jù)自己的需要進(jìn)行定制。
五、深色模式
前文提到，根據(jù)醫(yī)療產(chǎn)品的特性以及用戶的使用環(huán)境，我們的系統(tǒng)采用深色模式。然而深色模式并不是簡(jiǎn)單的背景色使用深色那么簡(jiǎn)單，因?yàn)楸尘白兂闪松钌?，相?yīng)的字體的顏色、圖標(biāo)的風(fēng)格、元素的布局等等都會(huì)產(chǎn)生微妙的變化，以下列出一些深色模式要注意的一些事項(xiàng)。
A、顏色
1、深色的選取盡量不要直接選用純灰色，可以往冷色系偏一些；
2、白色背景上不會(huì)用純黑文字，同樣的深色背景上不要直接使用白色，否則會(huì)產(chǎn)生強(qiáng)烈的刺眼感，但是一些按鈕還是要使用白色；
3、字體的中性顏色深淺建議使用白色的透明度變化來制作深淺，原因有兩個(gè)：一是透明度變化能夠讓字本身投射出背景色的色調(diào)，做到自帶色調(diào)的效果，能夠讓頁面更自然協(xié)調(diào)；二是利于設(shè)計(jì)和開發(fā)理解記憶，有一個(gè)量度去衡量。雖然通過透明度變化有時(shí)會(huì)碰到?jīng)]有背景色的問題，但是這種情況很少，而且也很好解決，增加一個(gè)背景就可以了；
B、圖標(biāo)
最開始我們就像以往一樣，圖標(biāo)的形式采用線性圖標(biāo)。但是我發(fā)現(xiàn)在深色模式下，線性圖標(biāo)變得單薄、空洞。我們分析是因?yàn)樵诎咨尘跋?，線性圖標(biāo)是深色的，深色具有收縮感，讓人眼能夠關(guān)注到“線”和被線包圍的“留白”，人眼關(guān)注的是整體；而在深色模式下，線是白色的，白色具有擴(kuò)張感，白色的擴(kuò)展讓人眼的關(guān)注點(diǎn)變成了“線”，忽略了“留白”，所以人的觀察感覺是缺失的，而且在大面積深色的壓迫下，線性圖標(biāo)變得特別單薄。于是我們決定采用面性圖標(biāo)來代替之前的線性圖標(biāo)。
六、設(shè)計(jì)規(guī)范
原子設(shè)計(jì)理念
原子設(shè)計(jì)理論由設(shè)計(jì)師Brad Frost首先提出，我覺得這套理論能夠很好的組織構(gòu)建設(shè)計(jì)規(guī)范，也有利于團(tuán)隊(duì)成員理解與協(xié)作，于是我把這套理論踐行于這套系統(tǒng)中。在原子設(shè)計(jì)理念中，一切設(shè)計(jì)都是由最小的原子組成，然后原子可以演變成分子，組織，模板，頁面。
1、原子
為UI設(shè)計(jì)構(gòu)成的基本元素，文字、顏色、圖標(biāo)、圖片、調(diào)色板、進(jìn)度條、分割線、開關(guān)、單選框、復(fù)選框，也可以為抽象的概念，例如色調(diào)等。特點(diǎn)是不可再分割。
2、分子
由原子構(gòu)成的簡(jiǎn)單UI組件。按鈕、標(biāo)簽、導(dǎo)航、輸入框、搜索框等。
3、組織
相對(duì)分子而言，較為復(fù)雜的構(gòu)成物，由多個(gè)簡(jiǎn)單的UI組件構(gòu)成。彈窗、表單、列表、卡片、數(shù)據(jù)圖表等。
4、模板
以頁面為基礎(chǔ)的架構(gòu)，將以上元素進(jìn)行排版。例如消息模塊、列表模塊、項(xiàng)目模塊、表單填寫相關(guān)模塊。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com