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

陳金金

(浙江傳媒學院，浙江 杭州 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

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

一、卡片式設計

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

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

(一)卡片式設計的優(yōu)點

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

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

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

(二)卡片式設計的缺點

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

二、卡片式設計原理

(一)優(yōu)化層級

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

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

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

(二)區(qū)分維度

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

三、在跨屏幕醫(yī)療影像系統(tǒng)中的應用

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

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

圖1 圖2

四、總結(jié)

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