跨屏幕的卡片式设计*——未来医疗影像的交互体验

陈金金

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

四、总结

卡片式界面设计通过上述内容我们发现它可以匹配不同内容、适配不同设备，更能够被应用于各种领域，它可以匹配来自不同内容的用户体验，为用户带来共享性和一致性。因此，卡片式设计的简约和易用，为三维医疗影像应用程序也带来了前所未有的便利，我们相信在数字化医疗体系的发展背景下，未来它将会在便民利民的更多应用程序中继续发挥着重要作用。