MODULE 13 / LESSON 03

内容模型、媒体与空状态

内容结构先于漂亮模板。

51 / 60 课走向真实交付

先理解这个概念

内容模型定义对象有哪些字段、哪些必填、如何关联。文章、商品和任务虽然都能画成卡片,但信息结构不同。空状态要说明当前原因与下一步;媒体要考虑比例、加载、版权与替代说明。

内容模型决定哪些信息是必需、可选、可组合和可重复的。若把作者、标题和日期都塞在一段富文本里,列表、搜索与详情就难以一致呈现。空状态也依赖模型:没有创建记录、筛选无匹配、无权限和加载失败代表不同事实,不能共用一句“暂无数据”。

用程序员的语言说

像先定义数据 schema,再设计它的表单和展示组件。

记住这三个原则

  1. 01

    区分必需信息与可选增强信息。

  2. 02

    为无图、无摘要与超长内容制定规则。

  3. 03

    空状态依据真实原因提供下一步。

实际设计时,分三步做

  1. STEP 01

    列出内容实体与字段,说明必填、可选、顺序和关系;不要从某张卡片的外观反推所有数据必须存在。

  2. STEP 02

    为每个展示场景选择字段,定义缺图、缺摘要、长标题与未知值的处理,保持同一信息来源。

  3. STEP 03

    按原因设计空状态,提供对应下一步:创建、清除条件、申请访问或重试,避免给所有空白都放新建按钮。

一个容易理解的例子

BEFORE / 常见问题

无封面的文章留下一个巨大的灰色空框,占据主要阅读空间。

AFTER / 可以这样改

无图时切换为文字布局,仍保留标题、摘要与元信息。

内容缺失不应该让模板失去意义。

展开看:从场景到设计决定

文章收藏包含标题、来源、正文、可选封面与个人备注。无封面时列表仍能通过标题和来源识别,不需要随机配一张装饰图。搜索无结果时应保留搜索词和清除筛选入口;尚未收藏文章时才说明如何添加。页面结构由内容字段与状态决定,而不是固定每条都要填满相同占位框。

适用边界与取舍

结构化越细,编辑成本也可能越高。把需要搜索、排序或多处复用的信息结构化,其余内容可保留灵活表达,不必把每个段落拆成独立字段。

YOUR TURN

把这个原则用一次

先做一个小判断

首次打开一个空账本应该显示什么?

再完成一份设计练习

为课程内容定义字段,并说明列表页、详情页和分享摘要分别使用哪些字段。

容易踩的坑

不要在加载错误时展示“还没有内容”,这会把系统问题误导成用户数据为空。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

Apple Human Interface GuidelinesMaterial Design 3