Web vs Mobile
The information architecture can be the same, but the presentation can't be copied across. The desktop's space advantage and the phone's gesture advantage each drive different approaches.
What you'll run into
- 桌面版做好之后直接压缩成手机版，全是横向滚动
- 手机上的表格要左右拖着看，还得放大才点得中
- 让 AI 加个响应式，它只是把布局堆成一列，导航没管
Five hard differences
| 桌面 | 手机 | |
|---|---|---|
| 同屏信息量 | 能并排放两三栏，列表和详情同屏 | 一次一栏，同样的内容要拆成两三页 |
| 导航位置 | 左侧或顶部常驻，随时可见 | 底部四五个标签，或收进汉堡菜单 |
| 能承受的深度 | 三到四层，有面包屑撑着 | 两到三层，再深用户就不回来了 |
| 操作方式 | 鼠标精确点击，有 hover 可以提示 | 手指有宽度，没有 hover，靠长按和滑动 |
| 使用状态 | 坐着，注意力集中，一次待很久 | 走着或排队，随时被打断，一次几十秒 |
Where did the nav go
On desktop, the left side can hold a dozen or more entries; on mobile, the bottom holds at most five. The extras need somewhere to go.
| 桌面上的 | 手机上放哪 |
|---|---|
| 一级导航前四项 | 底部标签栏。选最高频的四个，第五个位置留给「我的」 |
| 其余一级项 | 收进「我的」页面里，做成列表 |
| 二级导航 | 进入一级之后的顶部分段控件，或者下拉筛选 |
| 面包屑 | 换成左上角的返回箭头，标题写清当前位置 |
| 批量操作 | 长按进入多选模式，或者干脆不做，留给桌面端 |
How to land it
- First decide which end is primary. Aiming for "equally good" on both usually means equally awkward. Pick a primary end first; make the other a good-enough version.
- Tables should turn into cards on mobile. A horizontally scrolling table is basically unusable on mobile — turn each row into a card showing only the two or three key fields.
- Size the tap target by finger, not by what's visible. A small visual icon should have a tappable area stretched to around 44px.
- Don't rely on hover to deliver essential information. There's no hover on mobile. If you need hover to know what a button does, that button is dead on mobile.