恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
总监问我为什么要用卡片设计?好在哪,怎么做?
141.6°
自译外文 / 经验/观点 / / 原作者: 未知 / 举报
26032 352 314 2

2021-08-26

很多人对APP中的卡片设计习以为常,但对于卡片设计流行的原因,优点,以及如何做好卡片设计却可能不甚了解。关于这些问题,彩云之前也写过一篇非常受欢迎的卡片设计经验原创文章《想做好卡片设计,原来要注意这么多细节》,文章中讲了非常多的卡片设计实用技巧。今天这篇国外大佬写的文章,算是从为什么这样做的角度来分析卡片设计,一起来学习吧。 

从Instagram和Facebook这样的社交媒体应用到亚马逊这样的电商平台,卡片设计似乎是无处不在的,这些大厂广泛应用使得卡片设计很快流行了起来。

作为一个信息容器,卡片能承载包括文本、富媒体、按钮等所有UI元素?;谡庑┠谌?,卡片设计可以根据不同的设备和屏幕调整其大小,平衡界面视觉和用户体验。


什么是卡片设计?


卡片是一个UI组件,包含了某一个内容的信息和操作??ㄆ梢园髦衷?,但它们都应该属于同一个主题。

这样做的目的是为了避免冗长的文字,并呈现更多的内容。即使从设计的角度来看,用户可能不熟悉卡片的概念,但他们马上就知道如何使用它们,因为它们与实体卡片是一样的。(彩云注:这个就是用户心理学中隐喻的运用)


为什么它会如此流行?


卡片之所以流行,是因为它们能更好的把控内容。卡片是??榛?,所以不同的内容可以堆叠在一起,而不需要注意它们的差异。

卡片通过强制内容适应卡片边界和卡片布局上的限制来聚焦内容。设计师喜欢通过卡片混排大量内容,而无需担心设计会变得杂乱无章。

卡片可以将内容分解成易于理解的小块,以便用户与之互动。通过给内容一个容器,卡片向用户表明内容是真实和感性的。

卡片 UI 设计流行的原因还有很多:

  • 直观:卡片在界面中看起来与现实世界中的卡片相同,它们对用户来说似乎很常见。在卡片成为移动和网络应用中的流行元素之前,它们在现实生活中无处不在:名片、棒球卡、便签??ㄆ砹艘恢钟幸娴氖泳趵啾?,它允许我们的大脑直观地将卡片与其所代表的内容联系起来,就像在现实生活中一样。

  • 易于阅读:卡片不占用太多空间,并敦促设计师优先考虑其内容。不同的是,每张卡片都变成了易于阅读的内容??ㄆ糜没Ц菀渍业剿歉行巳さ哪谌?。

  • 有吸引力且对用户更友好:基于卡片的设计通常非常依赖视觉效果(尤其是图片);就信息架构而言,视觉层次会更加清晰。使用图片有助于使基于卡片的设计比不在卡片中排列的相同内容对用户更具吸引力。

  • 有利于响应式设计:卡片是矩形的,可以平滑地调整大小,以适应不同屏幕的水平和垂直正面,这意味着用户可以在所有设备上获得统一的体验。

  • 便于分享:卡片可以鼓励用户在社交媒体上分享内容,因为它允许用户只分享特定的内容,而不是整个页面。


什么时候应用卡片设计?


这通常是当你有:

  • 基于搜索的界面:  卡片能通过??榈哪谌菘焖傧允竞鲜实哪谌?,这使得用户可以深入了解自己的兴趣?;诳ㄆ纳杓剖且恢址浅J屎铣氏终饫嗄谌莸姆绞?。

  • 信息浏览:当用户浏览信息时,卡片的兼容性更好。

  • 任务管理:当可以将流程中的单个任务作为卡片进行说明时, 可以轻松组织卡片以获取任务列表。任务管理应用在使用卡片式界面为用户创建仪表板方面做得很好,其中每张卡片代表一个单独的任务。

  • 类似项目:卡片最适合于异构项目的集合(当并非所有内容都是相同的基本类型时)。

  • 可视化分析:  仪表板通常在同一页上同时显示各种内容样本。在这种情况下,卡片类比可以帮助在不同物品之间创造出更明显的差异,其中每张卡片可以适应不同的角色。


卡片解构


卡片的布局可以不同,以支持它们包含的内容类别。下面的组件通??梢栽诙嘀挚ㄆ街姓业?。

(1)富媒体:卡片可以包含缩略图,以显示图片,插图,头像,Logo,图标或图形。

(2) 标题:标题文本可以包含相册或文章的名称或标题。

(3) 描述:支持文本,如文章摘要或简短的描述。

(4) 行动按钮: 卡片可以包含用于操作的按钮。

(5) 副标题:副标题文本可以包含详细介绍,如文章的署名或标记的位置。

(6) 图标:卡片可以包含操作图标。


设计技巧


有一些小的技巧可以快速提高卡片设计细节。

1. 使用相关主题的图片

图片是卡片设计的主角,你需要一个高级的图片来吸引用户对每张卡片的注意。不仅是图像,卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体,但需要与内容主题相关。 

2. 增加视觉层次

卡片内的层次结构有助于引导用户对重要信息的阅读。将主要内容放在卡片的顶部,并使用排版来强化主要内容。使用空白和对比来分隔需要更多视觉分隔的内容区域。(彩云注:视觉层级对于信息表达至关重要?。?nbsp;


3. 限制内容长度

一张卡片应该只包含重要的信息,并提出一个相关的观点,以获取额外的细节,而不是完整的细节本身。当我们试图在一张卡片中放入太多内容时,卡片可能会变得很冗长,并失去与卡片类比的实际联系,因为它不再像一张卡片了。 


4. 避免嵌入链接

不要包含内联链接,卡片应该自己链接。嵌入文字链接会让用户误操作。 


5. 区分操作主次

包含不同操作的卡片应该在视觉上形成对比。在下面的例子中,我通过使用一种较轻的色调而不是主要的按钮风格来降低后续操作的视觉强度。 


6. 去掉分割线

对于新手设计师来说,用分割线来区分内容是一种常见的方式,以此定义不同的组。这些边框会造成不必要的视觉干扰,从而影响内容。


如何做到视觉上更美观?


APP中的卡片并不是纯粹的拟物概念,但通常情况下,使用一致的类比和物理原理能帮助用户理解界面并分析内容中的视觉层次。在卡片的情况下,你可以做几件事:

1. 使用圆角

在形态上与真实世界的卡片进行视觉对比。圆角更有效,因为它们让我们的眼睛容易跟随视觉动线,“因为它更适合头部和眼睛的自然运动”。 


2. 增加一个轻微的外边框或者投影

增加一条淡淡的描边框或者增加一个淡淡的投影都是很好的做法。阴影在界面中创造了一个层次,这有助于我们区分UI元素。

然而,在设计中添加阴影并不像听起来那么简单。有时候设计师会过分强化投影效果,让原本看起来不错的设计看起来很廉价。避免使用纯黑色的阴影。

3.注意字体和留白

重要的是要让每一张卡片都能被人看到、阅读和理解。在每个块周围添加大量的空白,让用户有时间处理并进行视觉重置,有精力看完一张卡再到下一张。

选择简单和基本的字体,因为基本的排版最大限度地提高了可读性,并有助于浏览。


一些优秀卡片设计的例子


让我们看看一些真实项目中的卡片设计案例:


信息流中的卡片设计

保持信息流卡片简单是很重要的。它们应该有一个一致的、重复的结构,但是使用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素,以使读卡片的人更容易理解它们。 

由Diseno Constructivo和Webpixels设计


他们突出特色图片和标题作为最突出的元素,这能帮助用户决定文章或发布的内容是否适合他们。


电商卡片设计

产品卡片是一个很重要的东西,它可以帮助你将访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意,激发人们获得产品的欲望,激励人们购买,并在搜索结果中得到高效推广。 

由Webpixels设计


产品的名称应该放在最显眼的地方,这样参观者就会立刻明白他来对地方了。一个好的配图能告诉顾客胜过千言万语,所以你需要一个高质量的产品配图来设计完美的产品卡片。


如果产品有特价,不仅要在价格栏中注明促销价格,还要注明常规价格,以及客户可以节省多少钱。


个人中心卡片设计

简介卡已经成为一个应用或网站中的功能模板。随着个人品牌变得比以往任何时候都重要,卡片设计在这里也能发挥重要作用。 

由Neelesh Chaudhary设计


就像每一张卡片一样,配置文件卡片也是一个UI组件,它包含了对它所代表的内容至关重要的信息。为了达到你的目标,你要向其他人推销你自己。

确保只包括必要的信息(例如,照片,名字,职业),让你的“关于”页面有剩余的细节来完善你的个人资料。


仪表盘卡片设计

仪表板的设计可以有很大的不同。但是所有的仪表盘都是用卡片做的。根据仪表板的类型,每张卡片可能包括概要信息、通知、快速链接或导航设计元素、关键数据、图表和数据表。确保你为每个元素使用了正确类型的卡片。 

由Simmmple设计


仪表盘卡设计允许用户决定他们想要关注哪些数据。易于理解的UI,允许用户精确地控制哪些数据需要在仪表板的前端做好。

只包括最相关的信息,为用户使用方便。当你的数据集在一起看更容易理解时,找到在一张卡片上显示它们的方法。但是要小心,不要让用户感到困惑。


日常计划卡片设计

看板任务卡似乎是一件非常简单的事情——拿一张便签,写下你需要做什么,然后把它贴在墙上。这些卡片必须包含需要行动的单位数量。它们还可能包含各种各样的其他信息,清楚地传达了必须做什么。 

由Neelesh Chaudhary设计


卡片上包含的信息包括任务的名称和重要的细节,如任务的类型和谁拥有它??窗蹇ǚ旁谧刺啾鹣?。最基本的状态类别是“计划要做”、“正在进行中”和“完成”,但是状态可能因项目而异。

卡片结构最适用于添加或删除任务这样的小改变,而不是改变像你的总体目标这样的大想法。


总结


有几种方法可以使卡片设计更加有效。通过最初定义和观察卡片,我们可以更好地了解跨行业的这种设计模式。这也让我们能够推测用户希望在这些卡片上采取什么行动??ㄆ谔峁┬矶嗖煌掷嗄谌菡幕肪持杏绕溆行?,而不是简单地作为内容列表的现代替代品。

彩云:文章中提到的卡片设计优势及流行原因,大家可以认真思考,用到平时的设计及面试中,都是很实用的。知其然,更要知其所以然,大家一起加油!


原文:https://uxdesign.cc/ui-ux-micro-tips-volume-three-d12709017d20

作者:Marc Andrew

译者:彩云Sky

本文翻译已获得作者的正式授权(授权截图如下)

Powered by Froala Editor

微信公众号:彩云译设计

收藏

352人已收藏

彩云Sky

腾讯ISUX高级视觉设计师

  • 156

    作品

  • 1.2w

    粉丝

  • 13

    关注

  • 国外大佬总结的这20条B端图表设计原则,简直太实用了!
  • UI设计细节系列——让设计细节更高级的24个实用小技巧
  • 被刷屏的微软全新3D表情,微软官方分享背后的设计思路
  • 如何用C4D做3D动态追踪,让模型跟你一起动,这也太好玩了!

猜你喜欢

    彩云Sky

    彩云Sky

    腾讯ISUX高级视觉设计师

    首页霸主2016年度最佳作品集TOP50得主身经百战人气明星助人为乐
    • 1.2w

      粉丝

    • 2887

      人气

    • 7.9w

      颜值

    作品

      最新推荐

      职业化设计师的自我修养(二)

      139 0 0

      相关佳作
      换一换

        彩云Sky

        点赞:314

        收藏:352

        评论:2

        总监问我为什么要用卡片设计?好在哪,怎么做?

        你确定要举报总监问我为什么要用卡片设计?好在哪,怎么做??

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年08月26日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录
        全网福利资源合集搜索处解压码