菜单 关闭

卡:UI组件定义

通过 页劳布海默11月6日,二千零一十六

总结:“卡”是一种用户界面设计模式,它将manbetx官方网站手机版相关信息分组到一个看起来像扑克牌的灵活大小的容器中。


近年来,我们已经看到很多人对创建模块化的UI模式很感兴趣,这些模式在各种屏幕和窗口大小上都能很好地工作。这样一个新的UI组件是卡片-一种类似快照的显示器,用于鼓励用户单击或点击以查看更多详细信息。

定义:卡片是几个短的容器,相关信息。它的大小和形状大致像一张扑克牌,作为一种联系,概念单位的简短表示。

卡片组件的线框图像
这个卡组件的线框示例具有几种不同类型的信息:图像,标题,一个简短的总结,时间戳,一个标签,以及用于社交媒体共享的第二个行动呼叫按钮。设计(带manbetx官方网站手机版可选圆角)在视觉上类似于一张扑克牌;卡有一个可见的边框,放在对比鲜明的背景上,并使用一个轻微的阴影作为一个标志,整个卡是可点击的。这张卡还包含两个次要的可点击元素(hashtag dayhikes和share按钮)。用横线与内容区分隔。(注意这一行不会破坏整个卡的可视分组。)

卡片通常与平面设计2manbetx官方网站手机版:它们保留了平面设计美学的某些方面,manbetx官方网站手机版但重新引入视觉深度作为能指可点击性。虽然基本概念较旧,在过去的几年里,在软件设计领域,卡片受到了广泛的关注。manbetx官方网站手机版拥有许多知名网站和公司(例如,谷歌的材料设计,manbetx官方网站手机版推特的卡片组件)拥抱他们。

卡片有4个主要属性:

1。卡片用于分组信息。

一卡通几个不同的(但相关的)信息组成一个可消化的单元——无论是新闻网站上的文章,电子商务网站上的产品,或者在社交应用程序上发布帖子。一张卡通常包括几种不同类型的介质,比如图像,标题,概要,共享图标,或者一个行动按钮的调用-所有的都与同一个概念相关。

2。卡片提供摘要并链接到其他详细信息。

信用卡通常很短,提供链接的 入口点欲了解更多详情,而不是全部细节本身。它的目的是作为高信息气味大纲用于诱使用户单击以获得包含在单独页面上的详细信息。

三。卡片类似于物理卡片。

卡片使用分组内容周围的边框,以及卡中与底层画布的背景色不同的背景色。这些视觉设计元素产生了一种manbetx官方网站手机版强烈的感觉,即边框中包含的不同信息位被组合在一起。

很多时候,卡片使用轻微的阴影来显示深度,这是一个可点击的能指。对于大多数实现,点击或轻敲在任何地方在卡片链接到详细信息页面(尽管有些卡片,就像前面例子中的那样,除了可用的主链接之外,还包括一些对操作按钮或链接的辅助调用)。这个更大的触摸区大大提高了触摸屏设备和基于鼠标的设备的可用性(由于费茨法则

4。卡片允许灵活的布局。

当一个布局中同时使用多张卡时,它们通常不具有相同类型的信息——一些卡片可能包含文本摘要,标签,或图像,而同一页上的其他卡片可能包含完全不同的细节。卡片允许不同高度以容纳不同数量或类型的内容,但通常宽度是固定的,从一张牌到下一张牌。

Pinterest使用基于卡的布局。
Pinterest对卡片的使用展示了卡片如何擅长将不同的项目组合在一起,如果每张卡的信息类型和数量不同,因此,占据不同的垂直空间。卡片包括富媒体(缩略图图像)。标题,次要行动要求(喜欢 分享 按钮,以及归属。每张卡片都使用视觉元素,如背景色、边框,和阴影,以区别于背景,清楚地将卡片元素分组,并指示可点击性。点击一张卡片,用户将进入该内容的详细屏幕。没有卡片的视觉风格,把每一个项目的成分清晰地分类在一起,将它们与页面上的其他项目分开,需要更多的负空间,并且会浪费宝贵的屏幕房地产在手机和平板电脑上。

用户界面卡VS超文本卡模型

经验丰富的用户体验万博官网manbetx下载专家可能会认识到卡概念与卡片(或卡片组)型号从超文本的诞生开始提供链接信息,在20世纪90年代。这种模式指的是将内容拆分成固定大小的离散页面,并且是垂直滚动的替代方法:浏览卡片内容类似于翻动书籍的页面,而不是展开一个长纸卷。这张卡片模型在iPad首次问世,当许多应用程序试图控制呈现给用户的每个页面的外观时。你可能已经熟悉了手机天气应用程序中的卡片模式——大多数应用程序使用它来显示不同城市的天气。

iOS天气应用程序使用卡片组概念模型
iOS天气应用程序在超文本卡片组样式(而不是本文主要主题的ui-card组件样式)中显示每个城市的天气预报。每个城市都是全屏的结点 ,其他城市的天气观测是通过向左或向右滑动以看到另一个全屏来完成的。结点 ,类似于在书中翻页的经历。

当代的卡片模式是基于同样的思想,将内容分组为离散的,具有受控信息布局和外观的完全可见的单元。然而,本文所关注的当代卡不是全屏项目(如旧卡模型中的内容)。但只占屏幕的一小部分,而当代的卡片通常在一个布局中使用,每个屏幕上有多张卡片。

这提醒了我们关于接口设计的两个关键问题:1)所有旧的东西都是新的,manbetx官方网站手机版意思是毕竟,新manbetx官方网站手机版的设计趋势并不是那么革命性。,可能会有轻微的变化,2)因为历史重演,可用性准则和交互设计原则是持久的manbetx官方网站手机版并长期保持相关性,即使在快速创新的用户体验设计领域。manbetx官方网站手机版

共同区域原则创造视觉群

卡片利用了认知心理学中的一个共同区域原则:在一个边界内包含在一起的多个项目更有可能被认为是分组的。这一原则可以取代强者格式塔邻近定律(如果放置在每个项目附近的项目被视为分组项目)允许对更远的项目进行更明确的可视化分组。公共区域原则使设计者不必使用manbetx官方网站手机版负空间在多个项目之间创建显式连接。

三角形表示接近定律
顶部:邻近定律在三角形2、3和4、5之间产生了强烈的视觉组合感,因为它们彼此靠近,与邻居1和6的距离更远。设计师必manbetx官方网站手机版须使用负空间(即,不相关元素之间的空白空间)以传递分组。
表示公共区域原理的三角形
底部:公共区域原则胜过邻近法则:通过使用边界和背景色(就像卡组件使用的一样)。同一组三角形的分组不同;一个强大的视觉信号被发送到三角形1和2,3和4,5和6分组,即使布局与上图中的布局相同。在不太可能的情况下,可用性测试表明需要更强大的分组,每张卡片的背景色可以不同。

当卡片有用时

  • 当用户浏览信息时,卡片比搜索时更适合。

经常使用多个卡布局,而不是列出内容视图.卡片是,然而,当人们出于三个主要原因搜索信息时,比列表更不合适,所有这些都与它们的可变大小有关:

1。卡布局通常不重视内容的排名。然而,尽管它们缺乏列表视图的强层次结构信号,多卡显示仍然遵循典型的页面层次结构规则:页面顶部和左侧的内容更容易被发现,并且被认为更重要。)

2。卡布局比列表的可扫描性差。标准垂直列表视图(其中每个项在布局中占据一个新行,可能仍然包含图像等混合媒体,标题,总结,等等)比卡片更容易扫描,因为单个元素的位置在大小上是固定的,对眼睛来说更容易预测。因此,当用户从列表中搜索特定项目或查找特定内容时,卡片不适用。

三。卡片需要更多的空间。因为卡片比一行文字大,任何给定的屏幕大小都不能在一个视图中显示尽可能多的卡片。在不滚动的情况下,可以看到的东西越多,对用户的需求越少短期记忆.

基于列表的布局旁边的基于卡片的布局
:扫描基于卡的列表中的产品很难快速找到价格等基本信息,由于布局安排不可预测,而且用户不容易预测到在页面上哪里可以找到这些信息。
赖特:垂直列表很容易支持从一个产品到下一个产品的价格扫描,因为这些信息被放置在列表中每个项目的可预测位置。

当用户需要时,卡片也是一个糟糕的选择。比较多个选项,因为卡片的结构往往不是以可预测的方式从一个项目到另一个项目;我们的眼睛跟踪研究显示,当用户对比物品时,他们会来回看几次,所以你应该通过对将要比较的项目进行一致的视觉处理.

在基于卡片的布局上,用户来回查看眼睛跟踪的凝视图
基于卡片的布局上的用户眼睛跟踪会话的注视图。用户被要求查找并阅读一个她感兴趣的故事。灵活的卡片布局并不能清楚地指示按顺序排列的故事层次,所以用户以半随机的模式来回查看,在决定点击哪个故事并阅读更多细节之前,请先查找任何有说服力的信息。请注意,用户在相同的故事之间来回查看,单击前比较选项。不规则的布局使得这种比较行为比垂直列表更困难,其中类似的信息将位于可预测的位置,每个项目的一致位置。
  • 卡片最适合收集异类物品。(即并非所有内容都是相同的基本类型)。

对于仪表盘应用程序以及在同一页面上同时显示各种内容类型的社交网站或聚合网站,卡片是一个很好的选择。在这种情况下,卡片隐喻有助于在物品之间产生更明显的差异,每张卡片可以容纳不同的配料,如果,例如,不是所有的卡片都需要一个标题,署名,或其他特定信息位。

Salesforce仪表板应用程序中使用的卡
Salesforce的仪表盘系统有效地使用卡片来显示异构内容和媒体。点击任何一张卡片都会产生一个完整的,该项目的详细报告。物品大小不同,彼此之间有明显的分隔。图像归属

当呈现非常同质的项目时(例如类似的博客帖子,产品,或者新闻报道,考虑使用项目的标准垂直列表(或,在某些情况下,项目是相似的,并且都属于狭义的类别,图像网格)而不是卡,以支持扫描性和项目之间的比较。

例如,不需要将所有照片放在单独的卡片上的在线相册中,因为它们都是相似的类型,显然是独立的,没有边界,背景,阴影你不明白额外的单击它时的详细信息(您只需获得同一图像的较大版本)。照片库是更好的内容类型由常规网格提供服务.

结论

卡片是一个有用的UI组件,用于将几个相关的信息组合在一起,以提供一个链接的入口点,以进一步了解该内容的详细信息。卡片在提供多种不同内容摘要的情况下尤其有效,而不是简单地用作内容列表的现代替代品。