ui设计信息卡片应该这样做

01讲什么？工作中我们经常会接到一些信息卡片的设计需求，在早期很长一段时间里都困扰着我。和大多数刚入门的小白一样，当接触到这类需求的时候，下意识就是打开自己的的Eagle，找合适的参考，去借鉴排版布局。但是其实最后只知道参考这样做好看，对于作者的设计思路并不清楚。后面我尝试去总结其中的规律，也得出了自己的一些设计思路。然后，刚好前段时间有位小伙伴问了我类似的问题。所以我决定写这篇文章，把我过去总结的，关于信息卡片设计的思路分享给大家，如果对你有启发，就是对我最大的鼓励。02这里讲的信息卡片是什么？让我们先看下各类App中，一些比较不错的信息卡片长什么样：03一个信息卡片包含什么内容？图片图标文字标签按钮布局1【图片】图片理解很简单，就是该卡片想表达的信息主体，可以是商品、风景、插画等，PGC内容图片通常由运营把控，UGC内容为用户自行上传。虽然上线后实际上传的图片，对于设计来说没有太多关系，但在设计稿中还是需要严格控制图片质量。（一定程度上也能提高过稿率）图片挑选需要注意如下：高清无码主体突出且简洁配图与文字信息相关联多图片情况下，视线保持同一水平线或同一角度2【图标】图标的出现有以下几类：品牌特定logo、特殊字段图形化（如性别、定位、点赞、VIP、关闭等等，将字段图形化后可以减少该组件内的文本信息，方便设计排版的同时提升整体阅读体验）、氛围点缀（主要在于丰富卡片，提升设计感来吸引用户注意）图标设计需要注意如下：清晰度：品牌图标避免过小，导致难以分辨。识别度：字段图形化后一定需要确保拥有足够的识别度，尽量在大众认知范围内。比如“+”可以代表添加和关注、“x”代表关闭，“大拇指”和“爱心”代表点赞、“皇冠”代表VIP等等。风格一致：氛围点缀图标在配色上，需要保证与产品调性一致，或在色彩情绪上，与该模块传递的感受一致。还有一些细节，比如线性图标描边粗细，圆头还是方头端点，这类尽量保持一致（当然也可根据情况演变新的风格，但注意风格种类不宜过多）3【文字】文字即对图片的描述信息，通常分为：标题、正文、辅助信息、优惠信息、数据信息（评分、价格、点赞评论数等）文字信息处理需要注意如下：对比：需明确页面信息权重，突出重点，便于有效传递信息。移动端常见对比方式：特殊字体对比、字号差对比、色彩对比、修饰元素（点线面）点缀对比。重点需要注意，避免在一个卡片中，采用过多不同大小字号和颜色去表现信息层级，尽量使层级精简与规范。对齐：保证卡片内信息之间存在某种视觉联系，信息结构清晰。对齐方式分类：左对齐（符合左到右的阅读习惯，阅读体验最佳）、右对齐（阅读类文本比较少见，一般是为了将分好组的信息填充卡片四角）、居中对齐（居中传递严肃、正式感，在移动端中较少见，适合信息较少的情况下使用）亲密性：将信息通过留白、分割线、色块等方式来成组划分，避免信息散乱。4【标签】标签指活动通知、产品卖点、重要时间、优惠信息等这类需要突出的内容，标签按视觉层级由高到底依次划分为：异型标签、色块型标签、描边型标签3大类。标签处理需要注意如下：视觉层级：一个卡片内可能出现不同类型的标签，比如同时有活动通知、优惠信息、产品关键词，这个时候就需要了解各类信息重要层级，正确选择标签形式（异型、色块、描边），帮助用户快速抓住产品重点。极限场景：标签内字段不宜过长，需要考虑最大宽度，进行合理布局。（牵扯到屏效比）呼吸感：合理定义标签内部文字与底板的上下左右间距，避免拥挤。设计感：标签多数是带有活动属性，在设计手法上可以尝试破型设计，还可以尝试加入一些小图标、纹理，一方面营造活动氛围，提升产品品质感。一方面图标具有一定语义，可辅助用户识别。（适合单个特殊标签添加，而不是一类标签，因为多个一样的标签配上图标同时展示太乱）对比度：在色块标签中需要重点注意，通常色块标签又分以下3类：有彩色底板+白色文字、带不透明度的有色彩底板+有彩色文字、消色底板+消色文字，在挑选颜色时需注意文字与底板对比足够清晰，减少阅读障碍。5【按钮】按钮是卡片上最重要的元素之一（部分卡片也可能没有），作为一个行动点，Ta的作用在于吸引用户点击。按钮在表现形式上和标签一致，我们最常见的有彩色底板+白色文字、消色底板+消色文字、描边框+文字（有彩色描边或有彩色字）。按钮和标签在处理上很相似，可参照标签。6【布局】布局指上述所有图片、图标、字段等信息，在卡片内的排布方式，常见布局方式：上下布局、左右布局、居中布局。信息布局需要注意如下：拓展性：卡片中字段的长短对布局的影响较大，字段较长且多的情况下需要的占用的空间更多，所以常见是上下布局。屏效比：上述拓展性与屏效比的关联紧密，在卡片中，为了保证一行文字最大显示，通常文字都是单独一行，避免左右存在元素占用文字横向空间。但单独一行就意味着增加了卡片高度，虽然单个卡片内文字显示多了，但整个一屏中展示内容变少。为了便于理解上面这段话，这里我们可以看到淘宝这个案例，淘宝的推荐卡片中信息很多，在遇到文案很长的情况下，为了平衡上面讲的这个问题，使用到了如下较少见的布局方式。合理性：在列表式左右布局中，是选择左文右图，还是左图右文。这需要看产品类型，在新闻资讯类产品中常见是左文右图，而在美食、电商类产品中是左图右文。再有在信息布局上也应符合人眼左到右，上到下的阅读习惯。04如何做好一个信息卡片？明确产品类型明确应用场景了解目标用户划分信息权重同类信息归组增强信息对比设计细节表现确定最终布局1【明确产品类型】产品类型不同主要对布局产生影响。以文字为主的产品，比如前面讲到的新闻资讯类，通常采用左文右图的布局。以图片为主的产品，比如美食、电商类，通常采用左图右文或上图下文。原因：新闻资讯类，吸引用户产生点击的并不是因为图片，而是具体的标题，通过标题用户才能了解更多关于该卡片的信息。而美食、电商类产品则相反，这类产品图片比文字更吸引人。2【明确应用场景】在我之前一号店改版中提到，信息卡片可以分为列表式和卡片式两大类，对应的优缺点如下：卡片式：在卡片式中图片是设计的重中之重。这是因为人是视觉动物，在卡片式设计中使用高质量的图片能瞬间抓住用户的眼球。卡片式设计实现了图文的完美结合，能给用户呈现良好的视觉效果。应用场景：图片为主，需要利用图片给用户带来良好的视觉冲击，提升浏览过程中的趣味性，从而吸引用户长时间浏览。适合随机推荐的内容，不适合进行查找。丰富内容展示，适合元素较多情况，可以让各种形式的元素保持井然有序。列表式：信息集合一般是简单的图文组合（小图+标题）或纯文本信息。由于列表垂直排列每一行内容，相对卡片式，在同样大的屏幕中可以展示更多内容，可供用户阅读信息更多，新闻类和数据类应用更青睞于这种设计。应用场景：信息直白，用户无需点击查看，即能尽可能了解内容信息，适合快速查找。文本重要程度高于图片，需要靠标题吸引用户点击。小屏幕应用场景。3【明确目标用户】目标受众的属性，对信息权重的划分影响很大，比如对价格敏感的用户，优惠信息的视觉层级就需要抬高。为了便于理解下面的案例，这里我定义的就是对价格敏感性用户。4【划分信息层级】定义了目标用户后，将卡片内所有元素罗列出来，并借助四象限分析的方法，对各个元素的权重进行划分。5【同类信息分组】将同类信息分组，便于后面确定元素之间的亲密性关系。6【增强信息对比】前面我们借助四象限，将信息重要程度进行了划分。接下来对元素之间亲密性和对比进行处理，设计用户浏览视线，在该过程中对案例中的元素进行如下处理：图片：这里图片及比例保持不变图标：将原版会员图标+字段的方式更改为图标，原因有两个：1、会员图标+字段的方式占用了较多的横向空间，导致标题字段信息展示减少，同时还导致用户在阅读完标题后，阅读下一行内容时视觉错行重（会员图标+字段过长导致）。2、由于会员图标代表会员内容，这是绝大对数产品对用户有过的教育，所以这里重设了会员图标并单独展示。字体：对标题字体进行加粗，（16pt，Medium），价格字体加大加粗（24pt，Medium），划线价加粗（12pt，Medium），按钮文字&活动标签文字（14pt，Medium）精简其他辅助信息层级（12pt，Regular）标签：优惠信息标签由0.5pt改为1pt，提升视觉层级。活动标签为色块降低不透明度+有彩色文字。按钮：由于标签为描边样式，为了拉开差异，突出按钮，所以将按钮改为实心色块。做完上面这些后，可能大部分人觉得到这就可以了，但其实我们还可以再增加设计细节，这也是你与其他设计师拉开差距的地方。7【设计细节表现】由于案例不同，增加细节的方式不同，所以需要具体案例具体分析。在本次案例中，我通过新增图标设计以达到丰富卡片细节的作用。在活动标签中新增小喇叭图标，来增强活动氛围、增强信息视觉上的互动性、增强代入感。在按钮中新增时钟图标，配合预约文案，让用户预知操作后可能的结果，并且提升按钮视觉层级、提升点击欲望。8【确定最终布局】在布局中主要考虑两个点：1、合理性&拓展性由于该卡片的应用场景为推荐列表，所以这里保持原有的上下布局，遵从人眼阅读习惯。2、屏效比将活动标签选择放置在图片与底板分割处，好处有：借助这个方式，使图文内容过渡顺畅，阅读体验更佳。尽可能减少了标签对产品图的遮挡。压缩卡片高度，最终达到提升屏效的目的。解决部分人可能存在的疑惑：Q1:3张设计稿中活动标签为什么进行修改？答：稿1到稿2，活动标签样式修改，位置调整，对应不同的用户，对于价格敏感性用户，显然稿2更能刺激他们点击。稿2到稿3，对标签样式再次进行加强。稿3到稿4，考虑该应用场景是在推荐列表中，为了避免出现多个同类型活动的卡片，导致过乱，所以修改了设计样式。Q2:在稿3到稿4中优惠标签这一排内容，和预约按钮这一排内容，上下调整的原因是什么？答：1、将文字区域看做一块完整的矩形区域，稿