个人主页顶部的内容卡
个人主页的设计往往会营造出一种沉浸式的氛围。 卡片式的设计可以概括关键信息，使原有的个体内容形成一个整体。
实际案例-美团外卖会员
规则讨论
相信大家在一些系统级设计指导规范中或多或少都能了解基本的卡片设计规则。 事实上，不同平台之间的规格差异并没有太多本质区别，更多的是处理技巧。 方法或者方法有差异，每个设计师对其的理解也会有一些差异。 在这里我想分享一下我对卡片式设计的一些基本想法。
1.打磨卡片的纹理
不同的人对同一张卡片的设计可能会有不同的感受。 表达卡片质感的主要关键点有：卡片形状、投影深度、卡片颜色对比。 我们需要了解这些基础知识点，然后再结合实际情况。 采用APP风格设计。
卡片形状
就像图标的图形设计一样，不同的形状也可以表达不同的气质，所以在设计的时候，我们需要根据整体风格来表达。 异形卡片的设计可以让原本的方形卡片表现出差异性，在形状上打破一些传统的处理方式，结合一些IP角色元素，更深入地表达特定的内容氛围。
投影深度
投影的视觉效果将直接影响卡片整体的质感。 凸出过深、过大，会使卡片整体显得过厚，而凸出过浅、过小，又会显得过于生硬。 因此，合理的数值比例可以使卡片看起来自然。 有质感。 我在项目中常用的一组数字规则是 1:2 或 1:3。 例如，Y轴偏移为10px，模糊设置为20或30px。 这样比例值的效果就会更加自然，如下图：
卡牌颜色对比
卡片与背景的颜色对比会影响卡片的整体质感。 设计时，我们需要把握卡片与背景颜色的对比。 不同的明暗对比会产生不同的纹理。 这里有两个建议：
1、卡片颜色与背景颜色不要太接近或使用相同的颜色，因为这会影响卡片的整体空间质感或降低卡片的边缘清晰度；
2、深色背景下，尽量让卡片和背景颜色保持同一色系或不同明度，避免过于突兀。
2. 边距的设置
在使用卡片式设计时游戏ui切图命名规范，我们经常会纠结边距的设置3D交通工具，宽还是窄？ 多少像素比较合适？ 我经常带着这样的疑问进行设计。
简单的基于内容的规则
卡片式设计作为一种设计表现形式，最终是为了承载内容，因此页边距的宽度也需要取决于实际内容的判断。 根据我在项目中的尝试，我想分享以下几点：
多窄多宽
如果卡片包含大量内容，请使用窄边距，以使卡片有足够的空间来显示内容。 如果卡片内容较少，可以考虑使用宽边距来营造整体的视觉空间感，如下图应用商店和淘宝的设计对比。 当然，这只是一个建议，具体问题还要具体分析。
再比如一些app的设计，有很多瀑布、网格、水平滑动模块。 当内容较多时，边距会被压缩到最小的合理间距。
内外成比例
以最外边缘为基本值向内设计，间距按固定比例缩小。 虽然不像删除网格那么标准，但也能让设计具有可追溯性。
根据案例
删除系统解决了一些基本的布局问题，有助于提高设计的标准化程度，让设计更具可追溯性。 设置卡片式边距时，可以适当应用网格系统，使边距与内容形成固定的关系。 这可以帮助整体卡片设计更加细致和规则。
4.卡片标题设置
标题的设置主要考虑以下几点： 1、是在卡内还是卡外？ 2. 标题的字体大小合适？ 3. 标题是否粗体？
卡内卡外对比
项目设计时困扰我的是：标题应该在卡片内还是卡片外？ 经过尝试一些案例，我总结出一个规则（需要根据内容的形式来设计）：当卡片内容是一个独立的模块或者模块中只有一个大标题时，可以在卡片中设置; 当卡片内容以组合或连续内容呈现时，设置在卡片外部，形成最外层的主标题。
标题字体大小设置
标题主要有两个作用： 1. 简要描述各模块的内容； 2.允许用户在长页面浏览时引导和定位自己。 通过一些实验，我们发现： 1、当内容较少时，不需要较大的字体来起到标题的作用； 2、当内容较多时，标题字号较小，容易陷入内容中，导致用户在浏览过程中难以找到，导致信息获取不足； 3、标题与正文的大小相差建议6-10px，这样可以更好的拉开差距，让标题更有标题感。
字体是否粗体
在传统思维下，我们都将标题加粗。 根据我的实践经验总结如下：
你需要看看不同厂家的手机系统或者型号。 我在项目一开始就把标题加粗了，但是当我后续恢复的时候，效果并不理想，尤其是在Android模型上，因为我们使用的是系统默认的字体，而Android系统中的很多字体都不是的。系统没有优化，而是使用了微软雅黑。 如果微软雅黑在Android系统上表现得更大胆一些，那么整个系统的外轮廓就会显得特别粗糙。 最终我们根据不同的车型做出了差异化的选择。
4. 圆角规则
圆角的设置其实没有太多原则问题，只要符合整体风格和基调即可。 当然，不同的圆角也能表达出不同的质感，大圆角表现柔和，小圆角表现硬朗。
圆角规则设置
以卡片的圆角为基本参考值，向内推算整体圆角使用规格。 卡牌和卡牌内的元素形成合理的比例规则，而不是根据“经验”随机设定。
圆角尺寸差异比较
尺寸的不同呈现出不同的视觉体验和风格差异。 在设计时，我们需要考虑我们设计的产品的风格或气质是否适合大圆角或小圆角游戏图片，而不是根据一些设计网站上的流行趋势。 因此，根据不同风格或实际内容场景来设置更为合理。
5、宽窄间距对比
与抽拉式设计相比，卡片式设计在设计时需要考虑透气性。 在正常规则下，调整内容边距和周围边距，让内容有更好的空间呼吸感，这样设计就能达到留白的效果。如下图对比案例，在基本网格不变的情况下，每个间距在原来的基础上扩大了12px（近1.33倍），让内容有更舒适的阅读宽度。
优势分析
选择某种设计方法的关键是我们了解这种方法的优点，并能够将这些优点融入到我们的设计中。 在项目设计中，我总结了卡片设计的几个优点。
优化模块化，增强内容区域感
模块化设计也是我们日常生活中应用的一种方法。 与卡片式设计相结合，可以使模块化规则更加简单，增加模块之间的复用性和扩展性。 当内容较多时，利用卡片式设计可以有效、直接形成区域分隔，在视觉上分隔内容，提高用户获取信息的效率。
提高内容独立性
在组合内容设计中，采用卡片式设计可以让每一小块内容呈现出相对独立的展示特性。 结合模块化的设计，在大块的相关内容中既可以统一又可以相对独立。
增强视觉空间感
卡片式的设计可以增强整体的设计层次感，通过投影和前后色彩的设置，营造出内容与背景之间的视觉空间感。
增强视觉表达
在设计中，我们可以将卡片设计成特殊的形状，以达到我们想要的风格表达。 当然，一页上尽量不要太多。 尽量使用页面的第一张卡片进行区分，这样整体表现就有点不同了。
增强可点击性
卡片式设计营造出的空间感游戏ui切图命名规范，让各个模块更加突出。 与扁平化的处理方式相比，卡片式的设计会在视觉上更加突出，更具点击性。
缺点及建议
任何设计方法都会有其优点和缺点。 最终，选择某种方法，只是目前最适合的方法。 在实验过程中我也总结了卡片式设计的一些缺点。 当然，这只是我个人的想法。
减少水平空间利用率
卡片式设计有左右边距，因此在有限的屏幕宽度内，内容的水平面积相对于上拉式设计有所减少。 当内容较多时，可以适当缩小卡片的左右边距。
避免太多层
整体来看，卡片式的设计本身就增加了基础背景的层次感表达。 它的视觉层次比拉穿式的更加丰富。 因此，不建议在卡上叠加块式设计，以免造成层次复杂性。 。 在项目中，我们也会遇到需要多层次表现的内容层次，我们总结了两种方法：
1、利用不拉过分割线的优势
2.使用浅色背景
不适合长文章或内容较多的表达方式
如果设计中采用了卡片式的设计风格，建议在一些呈现长文章的界面中去掉卡片式的设计。 长文章的页面强调阅读的沉浸感，用户需要更多地关注文本。 这时候，无边体验就更适合了。
把握好界面的分区，避免布局过于拥挤
卡片设计具有独特的视觉空间感，但卡片之间也有直接的分隔。 因此，设计时要对内容进行概括，避免小卡片过多，导致布局拥挤杂乱或内容展示宽度不足。 。
最后总结
无论是卡片式还是穿插式瓦片方式，其最终目的都是为了内容服务。 在设计过程中，我们只是选择一种适合我们内容的呈现方式。 根据具体内容条件提供合理/恰当的设计判断，是我们需要持续改进的关键点。 不要太正式而忽略了内容设计本身的重要性。
一念视觉官网：
UI进阶干货资料系列指南
更多优秀设计信息可参见一念视觉PC官网↓
