MODULE 10 / LESSON 02

Android 与 Material:语义角色与适配

理解返回、导航容器、动态配色与大屏。

38 / 60 课适配不同平台

先理解这个概念

Material 为颜色、排版、形状、组件和运动提供系统化角色。Android 体验还包括系统返回、边到边布局和窗口适配。动态配色需要通过语义角色使用,避免把品牌色硬编码到每个控件。

Material 的价值在于语义角色、组件行为和适配模式,而不是复制一套固定颜色。Android 的窗口与输入组合多样,同一设备也可能改变窗口大小。先确定任务与内容层级,再选择导航和布局;不要把手机截图等比放大当成平板版。

用程序员的语言说

Material token 像标准接口,组件消费角色,不依赖某个固定十六进制值。

记住这三个原则

  1. 01

    遵循系统返回与任务层级,不用关闭按钮随意替代。

  2. 02

    根据窗口空间考虑底部导航、导航栏轨或抽屉。

  3. 03

    测试字体缩放、系统栏、键盘与折叠设备。

实际设计时,分三步做

  1. STEP 01

    用语义颜色与文字角色组织主题,组件尽量使用对应语义配对,例如表面上的文字与主要操作上的文字分别配置。

  2. STEP 02

    依据当前窗口空间安排导航和内容面板,不把设备型号作为唯一条件;系统返回行为与应用层级需要协调。

  3. STEP 03

    检查字体缩放、键盘、横屏、分屏和折叠变化,并记录内容状态应如何保留。

一个容易理解的例子

BEFORE / 常见问题

底部导航在平板上拉成超长一条,内容仍只有窄手机宽度。

AFTER / 可以这样改

在更宽窗口采用适合的导航与多面板布局,内容保持清晰层级。

平台能力提供了更适合大屏的结构,而不是强迫延用手机模式。

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

任务应用在紧凑窗口里展示列表,点开后显示详情;较宽窗口可并列两者。此时同一任务 ID 仍是选择来源,避免两套页面各自维护不同选中状态。主题色变化后,状态标签仍要有文字,不应仅依靠某种绿色表示完成。布局适配和颜色适配解决的是两个不同问题,应分别验收。

适用边界与取舍

遵循平台模式不要求放弃品牌。品牌可以通过内容、图像与有限的视觉角色表达,但不能以品牌为由破坏系统返回、可访问性和熟悉操作。

YOUR TURN

把这个原则用一次

先做一个小判断

记账 App 使用 Material 时,成功状态能直接等于品牌色吗?

再完成一份设计练习

为同一任务应用画窄窗口和宽窗口,列出三个共享状态及两个不同的呈现决定。

容易踩的坑

dp、sp 和 CSS px 不应被不加转换地混为同一种尺寸。

继续查阅

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

Android · Adaptive appsMaterial Design 3