跨屏幕的卡片式設計*
——未來醫療影像的交互體驗

陳金金

(浙江傳媒學院，浙江 杭州 310008)

Cross-screen Card-based Design-Interactive Experience of Future Medical Images

Chen jin jin

Communication University of Zhejiang Hangzhou 310008

Abstract:This paper introduces the currently popular card-based interactive interface design into three-dimensional visualization medical image system，and thus explores its background，as well as analyzes its advantages and disadvantages.Based on the understanding and interpretation of the card-based design，this paper evaluates the applications of cross-screen medical image system，and analyzes how to make use of card-based design to provide both medical experts and patients with intuitive，efficient and consistent user experience，as well as presents corresponding design guidelines that can be used as reference of interactive interface design for big data medical image system.

Key words:Card-based Design；Medical Images；Interactive Interface

數字時代的到來為人類的生活提供了各種便利，人們的生活開始離不開各式各樣的數字化產品，在當今數字生活的時代背景下，卡片式界面是我們日常生活最為常見的一種交互界面，人們通過數碼設備為我們呈現的界面來完成紛至沓來的各項生活和工作……在當代醫療背景下，人們已經開始通過應用各種不同屏幕尺寸、分辨率的數碼設備來完成掛號、就醫、結算、驗收檢查報告等醫療功能，數字交互設備極大地改變了我國的就醫環境，節省了醫療資源，提高醫療工作的流程時效。本文正是基于當今數字化醫療體系的研究背景，結合計算機醫學數據研究的部分成果，將醫院為醫生可查看的三維醫學影像檢查結果通過醫療影像軟件系統以卡片式界面設計的方式實現醫生與病患之間的資源共享。目前在我國普遍存在大城市、大醫院就醫人數眾多現象，許多患者拿著做好的核磁共振、CT影像等膠片，以膠片病歷的方式轉診展示給醫生，傳統的二維影像在病灶位置、大小、形狀等方面顯示存在不確定性，有些病人會需要重新檢查，膠片式的影像呈現加重醫療資源在成本和時效上的負擔，因此建立三維醫療影像系統，改變病人獲取醫療影像檢查報告的傳統方式，提高醫療時效、節省醫療花費、降低就醫診斷過程中的誤差是提高我國數字化醫療體系建設的指引方向，通過時下流行的卡片式界面設計在三維醫療影像系統中的應用研究，以期為醫生用戶和病患用戶提供更直觀、高效、一致性的交互體驗。

一、卡片式設計

夫哈德·曼約奧在《從無到有！谷歌的設計美學》里這樣提到：“卡片式設計是信息呈遞的優良設計解決方案。能夠以優雅、簡潔的方式呈遞大量信息，這樣用戶就不會感到信息過載。”[1]

卡片經常被當作是信息詳情的一個入口，而卡片式設計的界面就是包含了圖片和文字內容的小矩形，在我們日常應用時，它就像是一個為查看詳細內容而使用的書簽，作為詳情頁的入口來使用。因為這樣的情形跟我們現實生活中的卡片是一樣的，所以用卡片式設計來形容這樣一種界面設計的風格。比如我們現在看到google產品中對卡片式設計風格趨向簡潔風格的鐘愛，全新的windows10系統，還有國內的很多app界面風格，如新浪微博、唯品會、小紅書等。這種設計形式的風靡就如同我們把日常生活中繁雜的各類信息進行卡片分類，從而使我們能夠更加直觀、高效地了解具體內容。Donna·Spencer在《卡片分類：可用類別設計》一書中這樣寫道：“卡片分類是一種非常簡單的技術，只需在帶有編號的卡片上寫下一些內容，然后讓人們對這些卡片進行分組就可以了。”[2]

(一)卡片式設計的優點

1.塊狀結構，卡片式設計可以把信息組成塊狀結構，有利于信息內容的擴展，可以被輕易的應用在多種場景中，更適合跨屏幕的擴展應用。這種塊狀結構可以使用戶快速查找所需內容具有極強的連貫性。

2.跨屏幕適配，卡片式設計的塊狀結構特點可以實現無限擴展功能，根據設備的不同尺寸進行上下左右延展，不僅可以保障在多種尺寸上高度的視覺統一化，還可以極大地保持不同用戶間交互體驗的一致性。

3.提起興趣和易于接受，卡片式設計的視覺界面因為區塊化，依據格式塔心理學的作用，更容易吸引用戶，卡片內容的信息被有效的強化更能提起用戶的興趣，同時，這種快速易于溝通的方式不會造成用戶的閱讀困難更易于接受。

(二)卡片式設計的缺點

卡片式設計更加適合應用在信息匯總的頁面中，例如google搜索利用卡片式設計可以使信息內容看起來簡潔醒目，但是卻需要不斷的滾動翻頁來查找自己所需，因為卡片式設計在這種情境下提供的信息更少，所以會使得用戶變得低效和浪費版面。卡片式設計要在適合的情況下使用而不是所有情景下都適用。

二、卡片式設計原理

(一)優化層級

卡片式設計的關鍵是對信息內容的歸納、組織和分類，以保障用戶使用過程清晰明確，用戶不會出現理解缺失。優化層級的方法具體可分為以下：

1.組織信息。對信息組織歸納，可以利用四大原則，即對比、重復、對齊、親密。這里可以參照Robin P· Williams的《寫給大家看的設計書》提到的：“避免頁面元素過于相似；視覺要素要重復出現；任何東西都不可隨意安放；彼此相關的項應當靠近，歸納在一起。”[3]

2.連貫視覺流。根據閱讀習慣，視線的瀏覽順序是自上而下，由左到右的，我們通過眼動儀的測試發現人的視覺點是跳躍性掃描的，基本呈F型點到點的查看，所以依據視覺流線，應該把重要的信息層級放在左上部，其次是中上，最后是左下，依據視覺流劃分層級。

(二)區分維度

卡片的形式適用于承載不同的維度，卡片式設計的每個小卡片可以劃分為不同的維度，都是獨立的，根據層級劃分的不同應用不同維度的內容，例如，以時間軸為維度，將事件以時間維度歸類在大小不同的卡片里，既區分了信息賦予邏輯性又保持了高度的統一感。

三、在跨屏幕醫療影像系統中的應用

結合卡片式設計的優缺點和設計原理，將卡片式交互界面設計引入三維可視化醫療影像系統中應用是非常合適的，它能夠滿足在醫療環境中跨屏幕使用的需求，保證醫患之間用戶體驗的同步性，同時醫學影像操作的不同需求可以劃分不同維度，使用戶簡潔易懂易于操作。

計算機生成的醫療影像軟件界面，專業性強，交互體驗感不高，在患者用戶使用上存在缺失，如圖1。三維醫學影像系統，可以幫助醫生查看病灶部位，在醫生專業診斷時適用，但在醫患之間的直觀性不強，利用卡片式設計可以結合到該軟件的界面操作中，給醫患雙方帶來更直觀高效的交互體驗，如圖2。以往患者掃描的檢查膠片被存儲為電子圖片，掃描切片的圖片可以直接生成三維圖像，通過三維成像的效果可以放大縮小，利用卡片式設計的形式可以采用撥盤樣式自由調節器官組織的顏色，如腦CT三維成像的用戶可以自由設置腦灰白質為綠色，血管為紅色等，同時根據不同功能需求進行不同參數設定，區別于傳統影像軟件具有簡潔方便易于操作等特點，極大地方便了患者與醫生的溝通理解，提高醫生的診斷率和醫療時效。

圖1 圖2

四、總結

卡片式界面設計通過上述內容我們發現它可以匹配不同內容、適配不同設備，更能夠被應用于各種領域，它可以匹配來自不同內容的用戶體驗，為用戶帶來共享性和一致性。因此，卡片式設計的簡約和易用，為三維醫療影像應用程序也帶來了前所未有的便利，我們相信在數字化醫療體系的發展背景下，未來它將會在便民利民的更多應用程序中繼續發揮著重要作用。