UI设计学习动态卡片设计思路

      动态卡片是一种输出信息的展示形式，为用户展示关注或感兴趣的信息，常用于带有社交功能的APP。经过整理动态卡片，主要从以下四个点做出总结:类型、图片数量、对齐方式、文字。

一. 类型

      动态卡片，根据功能和需求会有不同的展示方式，这里通过图片占比的不同作为动态卡片的分类依据。

1.  图片社交

      动态卡片中，图片内容占较大篇幅，通常占整个横向空间部分，常见图片社交类型，如Ins、Lofter、Nice等。

      在图片社交的卡片中，不一定以图片为主，但在有图的情况下会优先展示图片。

2. 内容社交

      卡片中视觉焦点在文字上，图片占较小篇幅，和文字共同横向排列，缩短卡片整体高度，单页展示动态数量更多，常见如知乎、豆瓣、简书等。

二. 图片的数量

      不同的卡片形式对一定空间内展示的图片数量有要求，图片的多少直接影响到图片所展示的信息内容。

1. 1张图片

      当卡片中仅展示一张图片时通常有两种形式，1.撑满整个卡片的宽度，2.与文字区域上下或左右对齐。

      当图片区域可操作时（如左右滑动），通过浏览进度的方法展示图片总数，如“2/3”,前者为当前浏览位置，后者为图片总数可产生对比，简化了图片排列。

2. 2张图片

      当卡片中仅展示两张图片时，采用等分的方法

3. 3张图片

       当卡片中最多展示3张图片时，有两种方法，一种是将指定区域等分成三分，另一种是采用一大两小的图片展示，通过大小对比带来视觉冲突。

4. 9张图片

      当卡片中最多可展示9张图片时，根据图片数量的不同，对于展示图片有不同的方案。

      展示一张图片时，由于图片长宽比不同，指定图片大小会影响图片浏览，为保证展示原图，避免拉伸，一张图片的展示会比较长宽来决定定宽或定高。当长＞宽，则定长展示图片；长＜宽，则定宽展示图片。

      展示4张图片时，采用四宫格的形式。

      其他数量的图片展示可按照九宫格的等分方式处理。

三. 对齐

      在卡片中的排版需要元素之间的对齐体现整体感，不同的对齐方式会带来不同的视觉体验，这是同种布局下的不同对齐。

四. 文字

1. 标题和简介

      标题的摆放有两种，1、占据卡片的整个横向空间，2、在图片占据较小篇幅的情况下与简介的文字区域同等宽度。

      一般来说，标题的行数不超过2行，简介的行数限制在2~4行。

2. 层级

      文字的层级使阅读会更轻松，减轻阅读负担，文字要体现文字的层级，可以从大小、字重、颜色来展现。

      浏览信息时，文字的大小最直观的表现了文字的层级。示例中4个字段就用了4个字号，标题(17pt)＞用户信息(16pt)＞正文(14pt)＞时间(12pt)，整体突出了标题。

      注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-19843.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注UI设计频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050