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