MODULE 13 / LESSON 03
内容模型、媒体与空状态
内容结构先于漂亮模板。
先理解这个概念
内容模型定义对象有哪些字段、哪些必填、如何关联。文章、商品和任务虽然都能画成卡片,但信息结构不同。空状态要说明当前原因与下一步;媒体要考虑比例、加载、版权与替代说明。
内容模型决定哪些信息是必需、可选、可组合和可重复的。若把作者、标题和日期都塞在一段富文本里,列表、搜索与详情就难以一致呈现。空状态也依赖模型:没有创建记录、筛选无匹配、无权限和加载失败代表不同事实,不能共用一句“暂无数据”。
像先定义数据 schema,再设计它的表单和展示组件。
记住这三个原则
- 01
区分必需信息与可选增强信息。
- 02
为无图、无摘要与超长内容制定规则。
- 03
空状态依据真实原因提供下一步。
实际设计时,分三步做
- STEP 01
列出内容实体与字段,说明必填、可选、顺序和关系;不要从某张卡片的外观反推所有数据必须存在。
- STEP 02
为每个展示场景选择字段,定义缺图、缺摘要、长标题与未知值的处理,保持同一信息来源。
- STEP 03
按原因设计空状态,提供对应下一步:创建、清除条件、申请访问或重试,避免给所有空白都放新建按钮。
一个容易理解的例子
无封面的文章留下一个巨大的灰色空框,占据主要阅读空间。
无图时切换为文字布局,仍保留标题、摘要与元信息。
内容缺失不应该让模板失去意义。
展开看:从场景到设计决定
文章收藏包含标题、来源、正文、可选封面与个人备注。无封面时列表仍能通过标题和来源识别,不需要随机配一张装饰图。搜索无结果时应保留搜索词和清除筛选入口;尚未收藏文章时才说明如何添加。页面结构由内容字段与状态决定,而不是固定每条都要填满相同占位框。
适用边界与取舍
结构化越细,编辑成本也可能越高。把需要搜索、排序或多处复用的信息结构化,其余内容可保留灵活表达,不必把每个段落拆成独立字段。
把这个原则用一次
先做一个小判断
首次打开一个空账本应该显示什么?
再完成一份设计练习
为课程内容定义字段,并说明列表页、详情页和分享摘要分别使用哪些字段。
不要在加载错误时展示“还没有内容”,这会把系统问题误导成用户数据为空。
继续查阅
本课为原创教学解释。具体平台规则与标准可查阅官方资料。
Apple Human Interface GuidelinesMaterial Design 3