网页与移动端的差别
信息架构可以是同一套，但呈现方式不能照搬。桌面的空间优势和手机的手势优势，各自决定了不同的做法。
你会遇到的现象
- 桌面版做好之后直接压缩成手机版，全是横向滚动
- 手机上的表格要左右拖着看，还得放大才点得中
- 让 AI 加个响应式，它只是把布局堆成一列，导航没管
五个硬差别
| 桌面 | 手机 | |
|---|---|---|
| 同屏信息量 | 能并排放两三栏，列表和详情同屏 | 一次一栏，同样的内容要拆成两三页 |
| 导航位置 | 左侧或顶部常驻，随时可见 | 底部四五个标签，或收进汉堡菜单 |
| 能承受的深度 | 三到四层，有面包屑撑着 | 两到三层，再深用户就不回来了 |
| 操作方式 | 鼠标精确点击，有 hover 可以提示 | 手指有宽度，没有 hover，靠长按和滑动 |
| 使用状态 | 坐着，注意力集中，一次待很久 | 走着或排队，随时被打断，一次几十秒 |
导航去哪了
桌面上左侧能放十几个入口，手机底部最多放五个。多出来的那些要有去处。
| 桌面上的 | 手机上放哪 |
|---|---|
| 一级导航前四项 | 底部标签栏。选最高频的四个，第五个位置留给「我的」 |
| 其余一级项 | 收进「我的」页面里，做成列表 |
| 二级导航 | 进入一级之后的顶部分段控件，或者下拉筛选 |
| 面包屑 | 换成左上角的返回箭头，标题写清当前位置 |
| 批量操作 | 长按进入多选模式，或者干脆不做，留给桌面端 |
怎么落地
- 先想清楚在哪端为主。两端都做「同样好」的结果通常是两端都别扭。先定主端，另一端做够用版本。
- 表格在手机上要变成卡片。横向滚动的表格在手机上基本不可用，一行变成一张卡，只显示最关键的两三个字段。
- 点击区域按手指算，不按视觉算。视觉上的小图标，可点区域要撑到 44px 左右。
- 别依赖 hover 传递必要信息。手机上没有 hover。要靠 hover 才知道按钮是干嘛的，那个按钮在手机上就是废的。