目錄

一、項目背景

二、項目分析

三、風格探索

四、設計原則

五、深色模式

六、設計規范

七、總結

一、項目背景

這家公司主要致力于研發醫療大數據和人工智能驅動的智慧醫療產品，其產品主要用于疾病的預測、篩查、診斷和治療的各個環節，主要聚焦于人工智能醫學影像領域。

產品定位

1、開發定位：web應用；

2、用戶群體：從事醫療行業的醫生；

3、功能定位：解決的是醫生閱片花費時間過長的問題，能夠輔助醫生智能診斷的工具型智能應用系統。

二、項目分析

從前面的產品定位，可以得到以下三個關鍵詞：web、醫療、應用，同時根據這三個關鍵詞可以延伸出一些問題，然后開始著手準備前期設計工作。

A、醫療設計注意事項

1、醫生的操作交互模式習慣于之前固有的Pacs閱片系統，設計時要尊重現有的交互模式；

2、因為多數影像科的使用環境都比較暗，所以界面整體風格采用深色模式。

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

4、和第3點類似，影像應用要求給影像顯示區域留有足夠的空間以，這就導致其它文字內容的空間又被壓縮了，其它文字內容的顯示又成了問題；

5、安全性，涉及到很多病患的信息，如何體現安全性很重要；

6、整體風格上趨于保守，因為是為醫院設計的，顏色使用上相對來說要克制。

B、web設計注意事項

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

2、pc端瀏覽器右上角帶有關閉瀏覽器。同時自帶后退、前進、關閉的按鈕，有點類似于安卓系統自帶返回鍵。這些功能影響著應用信息保存的交互問題；

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

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

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

6、什么時候新開標簽頁和什么時候在當前頁面跳轉問題。研究顯示，國內網頁多喜歡新開標簽頁，國外網頁喜歡在當前頁面跳轉，但是應用類型的網頁更多的還是在當前頁面跳轉；

C、中后臺系統應用設計注意事項

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

2、盡可能的優化操作流程，再精美的設計也不如優化一兩個流程效率來的快一些；

3、交互點到為止，盡量少用復雜的交互方式，比如拖拽，雙擊和右鍵都盡量少用；

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

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

三、風格探索

A、布局

我們采用左右布局的設計方案，將左側菜單欄固定，右側工作區域動態適配。菲茲定律表明：越遠難點擊，越近越容易點擊，靠近邊緣更容易點擊。因此菜單欄在左側時，當瀏覽器全屏時，點擊左側的菜單相當于是點擊邊緣的目標，這種操作路徑用戶所花的時間是最少的。而當菜單欄在上方時，因為上方有瀏覽器自帶的菜單欄，會影響用戶的操作，因此用戶點擊起來所花的時間更長，也容易操作失誤。

B、色彩

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

C、字體

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

D、圖標和圓角

為了更好的搭配深色模式，我們決定圖標采用面性圖標（后文會講解）。圖標和按鈕的圓角也采用了直角硬邊風格代替了常見的有圓角風格。硬朗的圖標有一種精確性、科技感，更符合產品調性。

四、設計原則

A、層次清晰

中后臺系統有信息繁多，這就需要設計來區分信息的層次，引導用戶去關注最重要的東西，“偷偷地”給用戶一種高效的體驗。這里根據《寫給大家看的設計書》當中的四大原則：對比、對齊、親密性、重復，來區分信息的層次。

①、對比

對比即為設計元素的對比，可以是顏色對比、字體對比、大小對比等等。恰當的對比能讓看起來更有層次，能給產品提供一種韻律美。通過對比可以引導用戶的視線，減少用戶的選擇時間，間接的提高了使用效率。

②、對齊

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

③、親密性

親密性能夠讓內容凝聚在一起，產生層次而不凌亂。信息的關聯性越高，它們之間的距離應該越近，反之就應該越遠。在本系統中頁面中的縱向間距采用小、中、大三種間距來區分層次，分別是8px、16px、32px，以此來體現頁面的組織性。另外，一些特殊情況，比如空間有限，最小間距可以是4px。其它不適應的情況統一采用8的整倍數定義間距。

④、重復

相同的元素在頁面間的重復運用，可以有效的降低用戶的學習成本。也能夠幫助用戶識別出這些元素的關聯性。重復的元素可以是某個顏色，某種樣式，某個布局。這里主要講重復在不同產品之間的應用，不同產品之間有相同的結構布局、相同的配色能夠讓用戶快速上手我們的產品，同時也是對品牌感的一種強調。例如：由于醫生以前習慣于使用醫院的pacs系統來閱片，所以在影像顯示頁面，我們延用之前pacs系統的布局，讓醫生找到一種熟悉感。

B、即時反饋

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

C、簡單有效

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

五、深色模式

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

A、顏色

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

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

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

B、圖標

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

六、設計規范

原子設計理念

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

1、原子

為UI設計構成的基本元素，文字、顏色、圖標、圖片、調色板、進度條、分割線、開關、單選框、復選框，也可以為抽象的概念，例如色調等。特點是不可再分割。

2、分子

由原子構成的簡單UI組件。按鈕、標簽、導航、輸入框、搜索框等。

3、組織

相對分子而言，較為復雜的構成物，由多個簡單的UI組件構成。彈窗、表單、列表、卡片、數據圖表等。

4、模板

以頁面為基礎的架構，將以上元素進行排版。例如消息模塊、列表模塊、項目模塊、表單填寫相關模塊。

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