今天跟大家分享一下动物资料（动物资料卡片怎么写）,以下是这个问题的总结，希望对你有帮助，让我们看一看。

编辑导读：信息卡片是产品的基础功能之一，用户能通过信息卡片了解产品的基本信息，并且信息卡片的美观程度直接影响到用户对产品的印象。那么，如何设计一个好看又实用的信息卡片呢？本文将从四个方面展开分析，希望对你有帮助。

02 这里讲的信息卡片是什么？

让我们先看下各类App中，一些比较不错的信息卡片长什么样：

图片挑选需要注意如下：

高清无码主体突出且简洁配图与文字信息相关联多图片情况下，视线保持同一水平线或同一角度2. 图标

图标的出现有以下几类：品牌特定logo、特殊字段图形化（如性别、定位、点赞、VIP、关闭等等，将字段图形化后可以减少该组件内的文本信息，方便设计排版的同时提升整体阅读体验）、氛围点缀（主要在于丰富卡片，提升设计感来吸引用户注意）

图标设计需要注意如下：

清晰度：品牌图标避免过小，导致难以分辨。识别度：字段图形化后一定需要确保拥有足够的识别度，尽量在大众认知范围内。比如“ ”可以代表添加和关注、“x”代表关闭，“大拇指”和“爱心”代表点赞、“皇冠”代表VIP等等。风格一致：氛围点缀图标在配色上，需要保证与产品调性一致，或在色彩情绪上，与该模块传递的感受一致。还有一些细节，比如线性图标描边粗细，圆头还是方头端点，这类尽量保持一致（当然也可根据情况演变新的风格，但注意风格种类不宜过多）3. 文字

文字即对图片的描述信息，通常分为：标题、正文、辅助信息、优惠信息、数据信息（评分、价格、点赞评论数等）

标签处理需要注意如下：

视觉层级：一个卡片内可能出现不同类型的标签，比如同时有活动通知、优惠信息、产品关键词，这个时候就需要了解各类信息重要层级，正确选择标签形式（异型、色块、描边），帮助用户快速抓住产品重点。极限场景：标签内字段不宜过长，需要考虑最大宽度，进行合理布局。（牵扯到屏效比）呼吸感：合理定义标签内部文字与底板的上下左右间距，避免拥挤。设计感：标签多数是带有活动属性，在设计手法上可以尝试破型设计，还可以尝试加入一些小图标、纹理，一方面营造活动氛围，提升产品品质感。一方面图标具有一定语义，可辅助用户识别。（适合单个特殊标签添加，而不是一类标签，因为多个一样的标签配上图标同时展示太乱）对比度：在色块标签中需要重点注意，通常色块标签又分以下3类：有彩色底板 白色文字、带不透明度的有色彩底板 有彩色文字、消色底板 消色文字，在挑选颜色时需注意文字与底板对比足够清晰，减少阅读障碍。5. 按钮

按钮是卡片上最重要的元素之一（部分卡片也可能没有），作为一个行动点，Ta的作用在于吸引用户点击。按钮在表现形式上和标签一致，我们最常见的有彩色底板 白色文字、消色底板 消色文字、描边框 文字（有彩色描边或有彩色字）。

按钮和标签在处理上很相似，可参照标签。

6. 布局

布局指上述所有图片、图标、字段等信息，在卡片内的排布方式，常见布局方式：上下布局、左右布局、居中布局。

定义了目标用户后，将卡片内所有元素罗列出来，并借助四象限分析的方法，对各个元素的权重进行划分。

5. 同类信息分组

前面我们借助四象限，将信息重要程度进行了划分。接下来对元素之间亲密性和对比进行处理，设计用户浏览视线，在该过程中对案例中的元素进行如下处理：

图片：这里图片及比例保持不变图标：将原版会员图标 字段的方式更改为图标，原因有两个：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、将文字区域看做一块完整的矩形区域，稿3整体看起来更完整，而稿2像是右下缺了一个角。2、在信息阅读顺序设计上，稿3的处理是优先让用户看到优惠相关信息，更加迎合价格敏感性用户的需求。

Q3：你认为最终稿还有优化空间吗？

答：这个案例，是我截图与我司相关App的。我认为如果可以，还需要再了解目标用户画像，了解用户真正在意的信息是那些，这些都会对最终方案产生影响，也只有知道这些才能得出最合适的哪个方案。这里我定义的是对价格敏感的用户，基于这类用户来说，我认为最终方案是合适的

好了，以上就是这期分享的全部内容，很高兴各位能完整看完，如果对你有帮助的话就更好了。后续我将继续总结输出更多优质内容，敬请期待。

本文由 @幺零三 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议