每日文章

HMI车载设计人机交互系统课
4月29日打卡@郝小七的HMI设计圈
移动端卡片式设计全攻略
1、卡片式设计诞生背景
拟物化→Metro风格→扁平化→卡片式
①拟物化 ：拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等效果对实物进行再现。 加强计算机界面和现实物品的联系，降低用户使用的学习成本。
②Metro风格：强调的是信息本身，而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。
③扁平化： 注重视觉的极简主义，抛弃了渐变、阴影、纹理、高光等拟真视觉效果， 直接了当地向用户传递信息，让用户更加专注于当前的信息。
④卡片式：矩形 信息，卡片就是交互信息的承载体 ，区分和整合信息、提升用户的可操作性、增加界面空间的利用 。

2、如何设计卡片
01卡片框架：
卡片形态（常规-矩形框/异型-优惠券，斜切）
圆角（大圆角-柔和/小圆角-硬朗）
投影深度（将卡片与环境进行区分）
背景（保证对比度和协调性）
手势（滑动-卡片为单位移动、选取并拖动-拖动的卡片应在所有元素的前面，不干扰到其他元素、滚动-卡片滚动，但卡片内部无法滚动）
02内容元素:
分割线（用来分割卡片中各内容区域）
字号和字重（帮助划分信息层级，引导科学阅读和理解）
行动点（补充操作-图标、文本、控件/溢出菜单-大于两个行动点时）-卡片作为更详细信息的入口，行动点数量应控制
03卡片间关系
信息组织方式（通栏式-仅在框架层面将信息分层/非通栏式-常规意义上说的卡片式设计）
栅格（基准网格是8dp，卡片间隙和边距可以调整）
间距和留白（内容多-边距变窄/内容少-边距变宽）
布局-符合视觉浏览模型（固定容器布局-卡片大小固定/适配内容布局-根据具体内容适配卡片高度/不规则排列布局-突显每张卡片的个性化，使用不对称的网格）

3、为何要用卡片式设计
01设计效率的提升
设计一致性（最小成本替换内容，易于迭代）
适应不同尺寸设备（简化排布，方便处理多端设备界面的一致性问题）
灵活布局（自适应图片比例，减少设计开发成本）
02信息呈现的优化
更适合图文混排（将不同大小、媒介的内容进行统一呈现）
聚焦关键信息（每张卡片是独立单元）
提升阅读效率（作为入口，引导点击获取更多详细内容）
提升空间利用率（纵向空间上使其折叠-卡片展开收起/利用横向空间增加区域-banner）
03人性化设计
降低认知负荷（用户具备卡片的阅读和使用习惯-银行卡）
提升可交互性（卡片可以被堆叠、覆盖、移动和划去，符合用户的操作预期，增强了设计体验感知）
方便共享（天然具有社交属性，如名片）

4、何时使用卡片式设计

01内容布局形式

Feed流（承载用户主动订阅或系统推荐内容的容器，便于用户长时间浏览时更专注地阅读与筛选有效信息）

瀑布流（承载连续性内容的容器，卡片上下左右灵活组合）

左右结构布局（具有很强的动态可操作性，纵向、横向空间上均可延伸，帮助用户快速阅读）

02功能类型

提醒与引导（区分内容层级，强调信息权重，展示位置也更加灵活）

集合型功能入口（承载多入口的容器，入口样式差异较大，通过卡片组合打包作区分，使页面更有秩序感）

03情景模拟

模拟物理行为（映射现实世界中切换、分发、选择等动作）

模拟物件（映射现实世界的方形物件-优惠券、会员卡）

5、何时不使用卡片式设计

01长文咨询类页

资讯类应用，用户多以浏览为主，不会过多操作。列表展示能让用户浏览时，视觉动线始终聚焦标题等核心信息，不会被过多的留白所中断。

02消息联系人等页

消息列表页、联系人页更适合用列表，这类界面每个模块的信息布局相对统一，无需划分区域。使用卡片不仅浪费空间，而且降低查找效率。

03图片陈列页

典型的图片陈列页如相册，因图片自带卡片属性，区块感强，无需再刻意设计成卡片样式。

04简单入口引导页

类似设置页，聚合了不同功能入口，在信息权重和样式上无很强的优先级区分，建议采用列表。