实验10-3：界面布局与视觉设计

为成都一家文创店设计手机、平板、电脑三种尺寸的首页：调布局方式、栅格列数、配色、间距、圆角和字号层级，用对比度、每行字数、层级比等指标检验设计是否合格

布局方式（商品区）

网格布局 Grid按栅格列数整齐排列，行列都对齐
弹性布局 Flex一行放不下自动换行，最后一行会被拉伸
浮动布局 Float早期做法，需要手动清除浮动、算外边距

配色方案

蜀锦红
熊猫黑
青城绿
川剧金
天府蓝
芙蓉粉

间距、圆角与字号

设计原则

对齐：元素落在同一套栅格上，视线才有路径。

对比：按钮文字与底色对比度至少 4.5:1（WCAG AA）。

重复：同类元素用同样的间距、圆角和颜色。

亲密性：相关的放近，不相关的用留白隔开。

可读性：中文正文每行 25～40 个字最舒服，太长换行时容易看串行。

蓉城文创 · 熊猫小馆
熊猫文创主视觉（AI生成）

把成都装进口袋

从宽窄巷子的盖碗茶到太阳神鸟的金色纹样，我们和本地非遗匠人一起，把成都的日常做成可以带走的小物件。每一件都附有工艺故事卡，扫码就能看到匠人的制作过程。

逛逛新品

本季推荐

盖碗茶礼盒（AI生成）

盖碗茶礼盒

蒙顶甘露 · 青花盖碗

¥168
熊猫 IP 公仔（AI生成）

熊猫 IP 公仔

和花同款 · 可换装

¥89
祥云纹丝巾（AI生成）

祥云纹丝巾

蜀锦工艺 · 桑蚕丝

¥239
国潮帆布袋（AI生成）

国潮帆布袋

川剧脸谱印花

¥59
—按钮文字对比度
—正文每行字数
—标题 / 正文字号
—当前商品列数

设计检查