陳金金

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

一、卡片式設(shè)計(jì)

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

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

(一)卡片式設(shè)計(jì)的優(yōu)點(diǎn)

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

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

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

(二)卡片式設(shè)計(jì)的缺點(diǎn)

卡片式設(shè)計(jì)更加適合應(yīng)用在信息匯總的頁(yè)面中，例如google搜索利用卡片式設(shè)計(jì)可以使信息內(nèi)容看起來(lái)簡(jiǎn)潔醒目，但是卻需要不斷的滾動(dòng)翻頁(yè)來(lái)查找自己所需，因?yàn)榭ㄆ皆O(shè)計(jì)在這種情境下提供的信息更少，所以會(huì)使得用戶變得低效和浪費(fèi)版面?？ㄆ皆O(shè)計(jì)要在適合的情況下使用而不是所有情景下都適用。

二、卡片式設(shè)計(jì)原理

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

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

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

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

(二)區(qū)分維度

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

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

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

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

圖1 圖2

四、總結(jié)

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