网页与移动端的差别
屏幕、导航、深度、操作、使用状态，五个硬差别，结构不能照搬。
信息架构可以是同一套，但呈现方式不能照搬。桌面的空间优势和手机的手势优势，各自决定了不同的做法。
你会遇到的现象：
- 桌面版做好之后直接压缩成手机版，全是横向滚动
- 手机上的表格要左右拖着看，还得放大才点得中
- 让 AI 加个响应式，它只是把布局堆成一列，导航没管
五个硬差别
| 维度 | 桌面 | 手机 |
|---|---|---|
| 同屏信息量 | 能并排放两三栏，列表和详情同屏 | 一次一栏，同样的内容要拆成两三页 |
| 导航位置 | 左侧或顶部常驻，随时可见 | 底部四五个标签，或收进汉堡菜单 |
| 能承受的深度 | 三到四层，有面包屑撑着 | 两到三层，再深用户就不回来了 |
| 操作方式 | 鼠标精确点击，有 hover 可以提示 | 手指有宽度，没有 hover，靠长按和滑动 |
| 使用状态 | 坐着，注意力集中，一次待很久 | 走着或排队，随时被打断，一次几十秒 |
最后一行影响最大也最容易忽略。手机上的任何流程都要假设用户会在中途被打断，所以必须能保存进度、随时接着做——这条判断会直接改变你的数据设计，因为你得有个地方存草稿。
「使用状态」这一行的含义比表面看起来深。桌面用户坐在电脑前，一个流程可以一口气走完；手机用户可能站在地铁口，一条消息进来就把流程打断。同一个表单，桌面版可以要求一次填完，手机版就必须能存草稿、能断点续传。同样的信息架构，落到两端时要回答的问题完全不同：桌面版问「怎么让信息更全」，手机版问「怎么让被打断的代价最小」。
导航去哪了
桌面上左侧能放十几个入口，手机底部最多放五个。多出来的那些要有去处。
- **一级导航前四项。**进底部标签栏，选最高频的四个，第五个位置留给「我的」。
- **其余一级项。**收进「我的」页面里，做成列表。
- **二级导航。**进入一级之后的顶部分段控件，或者下拉筛选。
- **面包屑。**换成左上角的返回箭头，标题写清当前位置。
- **批量操作。**长按进入多选模式，或者干脆不做，留给桌面端。
底部标签栏的四个位置是整个产品最贵的地方。放什么进去，等于公开声明你认为用户最常做的是哪几件事。
怎么落地
- **先想清楚在哪端为主。**两端都做「同样好」的结果通常是两端都别扭。先定主端，另一端做够用版本。
- **表格在手机上要变成卡片。**横向滚动的表格在手机上基本不可用，一行变成一张卡，只显示最关键的两三个字段。
- **点击区域按手指算，不按视觉算。**视觉上的小图标，可点区域要撑到 44px 左右。apple-hig
- **别依赖 hover 传递必要信息。**手机上没有 hover。要靠 hover 才知道按钮是干嘛的，那个按钮在手机上就是废的。
结构本身跟端无关，但落地方式跟端强相关。做之前先回答一个问题：这端是主端还是够用版？回答完，上面这些差别才有取舍的依据。主端把体验做满，够用版保住核心流程——两端「同样好」通常意味着两端都做不透。