外观
画板与平台规范
动手画之前，先回答一个更基础的问题：我们要在多大的画布上画？ 不同手机屏幕大小不一、清晰度不一，顶部有刘海、底部有小白条会把内容挡住。如果不管这些，直接在一个随意尺寸的画板上开画，后面所有元素都会对不齐、被遮挡、放大发虚。所以设计的第一步，是建一个"正确尺寸 + 正确平台规范"的画板。这一节学会三件事：画板开多大、像素密度怎么算、安全区域怎么避让。
为什么需要画板，以及微信的基准尺寸
设计 APP 时，每个元素的位置、间距、大小，都要放在一个固定的画板尺寸里。画板尺寸定错了，后面做得再好看，一到真机就全跑偏。不同机型屏幕尺寸不同，但设计师不可能给每个尺寸各画一套稿，所以业界取一个主流机型作基准画板，其他尺寸靠"自适应布局"（知识点 13 Auto Layout）铺满。微信是 iOS / Android 双平台、用户量巨大，业界通常取 iPhone 的 375 × 812 逻辑点作为基准画板——细小精悍、上下信息密度适中。本课全部界面都跟着微信走，用 375 × 812。
微信基准画板 = 375 × 812 逻辑点（大部分微信界面都在这块画板上重建）。
主流画板尺寸一览
不同机型有不同基准，但"主流尺寸"是有限的几档。记住这些，你就知道微信为什么选 375 × 812，以及大屏适配时该往哪个方向走。
| 平台 | 常见画板尺寸（逻辑点） | 代表机型 |
|---|---|---|
| iOS（iPhone） | 375 × 812 | iPhone X / 11 Pro / 12 mini / 13 mini、微信大多数用户 |
| iOS（更大屏） | 430 × 932 | Pro Max / Plus 系列 |
| Android | 360 × 800 | 小米 / 华为 / OPPO 主流 |
| Android（更大屏） | 393 × 851 | 部分新大屏机型 |
逻辑点 vs 物理像素：375 × 812 为什么不是"像素"
现实中 375 × 812 画板多为 @3x 出图：iPhone X / 11 Pro / 12 mini / 13 mini 的物理分辨率（如 1125×2436）恰好是 375 × 812 的 3 倍。给开发交付切图时按 @3x 出；@2x 只用来讲"逻辑 vs 像素"的对比，不是这套基准的实际交付密度。
手机屏幕参数明明写着"分辨率 1170 × 2532 像素"，画板却只有 375 × 812？因为设计用逻辑点 pt，屏幕发光的是物理像素 px，二者通过屏幕密度（缩放倍数）换算。密度只影响清晰度，不影响布局大小——同样 375 宽的逻辑画板，在 2x 手机上物理占 750 像素宽，在 3x 手机上占 1125 像素宽，但在屏幕上看起来大小一样。所以设计时永远用逻辑尺寸（pt）思考，实机按密度自动放大。
- 1x：1 逻辑点 = 1 物理像素（老设备、网页常见）
- 2x：1 逻辑点 = 2 × 2 = 4 物理像素（主流 iPhone）
- 3x：1 逻辑点 = 3 × 3 = 9 物理像素（高端 iPhone）
安全区域 Safe Area
顶部：状态栏常驻，微信标题栏紧贴其下；底部：微信 Tab 栏（微信/通讯录/发现/我）贴屏幕底部，但避开手势小白条区域、留出余量，否则会被手势条压住。
屏幕不是一整块可用的矩形。顶部有状态栏（时间、信号、电量）和刘海，底部有手势条 / Home 条（那根小白线）。这些系统元素会盖住边缘内容。安全区域 = 保证内容不被系统元素遮挡的可安全放置内容的最小区域。 规则：内容（文字、按钮、图片）尽量放在安全区域内，系统栏和手势条区域不做交互内容，或给足边距。
顶部状态栏约 44pt（iPhone 刘海机），底部手势条区域约 34pt。
平台规范差异：iOS vs Android
iOS 和 Android 有各自的导航与交互习惯。微信虽然双平台视觉统一（统一的绿、布局、Tab 栏，为了品牌一致），但交互细节按各平台微调——设计师要画出基准稿，同时心里清楚两端在交互上的差异。
| 维度 | iOS | Android |
|---|---|---|
| 底部导航 | Tab 栏居中、图标+文字，5 个以内 | 底部导航栏，Material 风格，也支持侧滑抽屉 |
| 返回方式 | 左上角返回 + 边缘右滑手势 | 顶部返回箭头 + 系统返回键 / 手势 |
| 设计风格 | 更圆润、更轻、毛玻璃 | Material Design：卡片阴影明显、更扁 |
| 系统字体 | SF Pro | Roboto |
深度
在 Penpot 里建微信的 375 × 812 画板
- 新建"Frame 画板"，边框宽度填 375、高度填 812（单位是逻辑点，Penpot 默认就是 pt）。
- 给画板命名，比如
微信首页 375×812。 - 顶部沿顶部留出约 44pt 状态栏区域（放时间/信号/电量占位），底部沿底部留出约 34pt 手势条区域。
- 页面主要内容（标题、列表、按钮）放在中间的安全区域内，不贴着最上和最下。
- 后续所有界面都复制这块画板，保证全局尺寸一致。
微信首页重建的落地顺序： 底部放 Tab 栏（微信/通讯录/发现/我），icon + 文字，下方避开手势条；顶部放"微信"标题栏，紧贴状态栏下方；中间是消息列表，所有列表项在对齐网格上排布（回到知识点 08 的 8pt 间距）。
边界与边界条件
- 别只依赖一种尺寸：基准画板是"主力"，但不要以为一款手机代表全世界。大屏适配靠 Auto Layout（知识点 13），不是靠拼命拉大画板。
- 别随意缩放设计稿：把 375 × 812 直接等比放大到 430 × 932 会失真（间距、字号比例被破坏）。要缩放就按规范重新布局，不是拉伸。
- 密度不是设计师手算的：375×812 这套基准按 @3x 出图，@2x 只是用来讲逻辑 vs 物理像素的对比，不是实际交付密度。设计师只需在逻辑尺寸里画，不用逐像素算。
- 安全区域有官方值，但别死记：不同机型状态栏高度不同（iPhone 刘海机约 44pt），设计时留出合理边距即可，精确值交给系统适配。
误区
| 误解 | 正解 |
|---|---|
| "一种尺寸走天下" | 错。iOS 和 Android 规范不同，主流尺寸也不止一个；选一个基准画板 + 自适应是正解。 |
| "设计稿随便缩放" | 错。等比拉伸会破坏间距和字号比例，大屏要按规范重新布局，不是拉伸。 |
| "375 × 812 就是像素" | 错。那是逻辑点；物理像素是它的 2x/3x 倍数。 |
| "内容铺满整个屏幕就行" | 错。顶部状态栏、底部手势条会遮挡，内容要放进安全区域。 |
| "密度要设计师手算" | 错。设计永远用逻辑尺寸（pt）思考，实机按密度放大；交付切图按 @3x 出。 |
练习
即时题
- Q1：微信的基准画板尺寸是多少？
答案
375 × 812（逻辑点）。 - Q2：375 × 812 是"逻辑点"还是"物理像素"？在 2x 屏幕上物理宽是几？
答案
逻辑点；2x 时物理宽 750。 - Q3：顶部和底部各有什么系统元素需要避让？
答案
顶部状态栏/刘海，底部手势条/Home 条。
模块题 微信"发现页"顶部有一个搜索框、底部有 Tab 栏。请说明：这块画板该用多大尺寸？顶部和底部各要留多少安全余量？如果要适配一款更大的 Android 大屏手机，你会怎么做？
参考思路
基准画板 375 × 812；顶部状态栏约 44pt、底部手势条约 34pt；大屏适配靠自适应布局（Auto Layout）而非拉伸。迷你案例：在 Penpot 里建一块"微信首页"画板骨架
- 新建 Frame，宽 375、高 812，命名
微信首页。 - 顶部画一条状态栏占位（高约 44pt，放时间/信号/电量文字）。
- 下方画标题栏"微信"。
- 底部画 Tab 栏（微信/通讯录/发现/我，4 个入口），底边避开手势条区域。
- 中间留出大块内容区。
做完你手里就有一块"尺寸正确、平台规范正确、安全区域留好"的画板——这就是后面所有界面重建的起点。
素材
- 👉 打开交互演示：画板与平台规范 — 认识 375 × 812 画板结构、对比逻辑点与物理像素、标出安全区与平台差异
- 苹果官方 Human Interface Guidelines（HIG）：安全区域、布局、导航规范。
- 谷歌官方 Material Design：Android 导航、布局、组件规范。
- Penpot 官方文档：Frame 画板、尺寸与坐标说明。
- 后续衔接：本知识点（画板与平台规范）→ 12 样式系统（把画板上的绿/灰/字号存为样式）→ 13 Auto Layout（大屏自适应布局）。