跨平台兼容设计

基本原则

1. 保证功能一致性
2. 保证信息一致性
3. 布局基本同构
4. 交互符合用户习惯

导航设计

PC导航一般采用左侧导航栏+分级导航的设计，整体逻辑结构是：左->右依次深入；
移动端导航一般采用底部导航 且 只做单级导航，低频功能可以收起做子页面；

多级兼容

隐藏分级

最简单的方式是类似飞书的设计，分级导航是一个切换逻辑，本身不是必选项。也就是说，完全可以将分级导航隐藏起来（飞书的分级是Filter），如此一来，分级就可以在移动端通过触发侧边栏来进行操作。

不做分级

企业微信的做法更直接，两端都不做分级。
但是这会带来一个问题，那就是PC的侧边导航信息过少（如果只有移动端的底部导航）。企业微信提供的解决办法：

1. 移动端除了底部导航之外，还有顶部快捷方式，这个也放到PC的侧边导航里去
2. PC侧边导航可以有独有的快捷入口
   这种设计更多，类似todesk、tim都是类似的设计。

主交互区设计

一个基本差异在于移动端是上下垂直式的信息排列；而PC需要更多的水平排列；
常见思路：

1. 完全同构
   1. 由PC向移动端水平压缩
   2. 由移动端向PC水平拉伸
   3. PC调整可交互区域尺寸，转化为移动端布局
2. 部分同构
   1. PC上同时水平放置移动端两个页面（或tab）的功能，将垂直转化为水平：例如企业微信、QQ、飞书、钉钉
   2. 移动端将PC上水平分布的信息重新排布，水平转化为垂直：瀑布流信息、sspanel
3. 完全异构：相同功能重新布局信息，比如todesk

布局兼容

列表

PC列表页展示信息较多，注重对信息的概览；而移动端更注重交互，所以这里的兼容设计重点在保留关键信息（如ID、名称等）的基础上对非必要信息做隐藏，以保证布局的正常。

弹框

一般问题不大，可以全屏化类似子页面，保证弹框的PC初始宽度不要太宽即可。如果真的有太宽的也可以直接在弹框内左响应式布局。

交互兼容

搜索

PC搜索多采用顶部搜索，移动端可以直接复用，参考搜索引擎；
如果搜索起始页较长（如列表页），可以采用固定搜索按钮+点击唤起搜索弹框的方式，参考手机微信。

右键菜单

较少的右键菜单可以转化为点击后下方展示的按钮、左滑后右侧的按钮、长按后的快捷方式，或者直接点击后弹出抽屉；
较多的右键菜单有以下思路：

1. 隐藏部分低频或不必要菜单
2. 分级，即点击展示部分按钮，然后保留一个更多按钮，点击更多再通过类似弹出框或抽屉的方式附加一些操作
3. 直接通过抽屉

Trouble Shooting

导航层级太多

可以模仿企业微信、飞书等，部分功能抽离出来单独的子应用，然后做应用内导航。