一、背景
在我参与的一款资料查询 App 中，对 iPad 只支持竖屏以手机 UI 尺寸拉伸，每个季度都有用户反馈希望适配 iPad 横屏。经过询问用户发现，因为 iPad mini 尺寸刚好可以放在工作服口袋中，随时拿出来使用，而 iPad 屏幕远比手机大，浏览资料视野更大更舒服。
ipad设置横竖屏切换有以下两种方法：①用单指在屏幕最下方向上滑，弹出“控制中心”设置栏，点击中间最右侧图标（“锁定屏幕旋转”）即可锁定当前屏幕方向，再次点击即可取消。②点击“设置”→“通用”，将“侧边开关用于”中。
但另外一方面，后台数据显示当前 iPad 用户占比只有 1%，苹果平板竖屏改成横屏怎么改，用户呼声够不上星星之火，不足以燎原。先别谈说服团队做 iPad 横屏适配，连说服自己都难。本来以为这事就像水中投石，水波消散就没有下文了。直到有一天，同样是资深用户的高管自己拿着 iPad 装上我们的 App 用了几天，终于忍不了，开始推动 iPad 横屏适配。
二、参考
我们肯定不是第一个做 iPad 横屏适配的，但在网上搜了一圈，别说横屏适配，连 iPad 界面设计的文章都很少，下面 3 篇算不错的。这也是我决定写下本文的原因，为后来者提供经验，少踩坑。
《利用好 iPad 的大屏幕 —— 如何为 iPadOS 14 设计 app？》。
《iPad 交互设计探索系列：iPad 适用产品篇》。
《iPad 交互设计探索系列：iPad 导航设计篇》。
三、研究
1. 内容响应式
典型 App：iOS 应用商店
特征：标题栏和 Tabbar 通栏拉伸，内容区根据宽度向右响应式布局。
适用场景：全部场景。
评价：灵活性和用户体验都很好，但设计和开发成本很大。
2. 左右分栏
典型 App：iOS 设置、淘宝、微信、QQ
特征：左右分开显示，左边通常固定显示首页或者目录导航。右侧根据左侧选择显示对应的详情内容。
适用场景：频繁需要使用导航切换内容。
评价：用户体验适中，合理的利用横屏更大地展示更多的内容。设计成本小，需额外设计一个右侧默认为空的情况。开发成本要看是否改程序架构，相当于把手机两个手机界面合并成一个屏幕，可能有些程序架构很难这么修改。
3. 按竖屏宽度显示
典型 App：微信阅读
1、首先进入平板主界面之后，点击右侧的小白点，然后点击控制中心。2、接着点击屏幕锁定的标记，如下图所示。3、然后可以看到屏幕锁定已关闭的提示。4、最后将平板横着放就可以横屏，如果竖着放就是竖屏显示了。
特征：标题栏和 Tabbar 通栏拉伸，内容直接按竖屏的宽度显示。
适用场景：全部场景。
评价：用户体验适中，设计与开发成本小，大多数产品采用此模式，但是没有更好的展现横屏宽屏的优势。
1、在iPad Air2桌面上的空白区域，用手指进行上划，如下图所示：2、找到并点击选择选项框内的方向锁定选项，如下图所示：3、点击开启方向锁定，即可完成iPad Air2横屏竖屏锁定设置，如下图所示：
4. 全屏通栏拉伸
典型 App：豆瓣
特征：横屏为全屏通栏拉伸，所有元素与竖屏一致。
适用场景：全部场景。
评价：设计和开发成本最小，但是相当于没有适配。用户体验较差，横屏情况下内容集中，左侧右侧很空，或者被拉得很长，阅读体验较差。
5. 混合模式
当然也不是所有 App 都采用单一的模式。比如微信阅读，在其他页面是按竖屏宽度显示。但到了图书阅读界面，则是左右分栏充分利用 iPad 大屏幕展现内容。
以上竞品分析所有截图我们都保存在 Figma 中，有需要的读者可前往获取。
链接：
四、执行
非常遗憾的是虽然高管牵头做适配，但开发资源确实有限。不能为了设计师邀功拿业绩就从头把 iOS App 重构一遍，因此我们决定用最少的资源做最核心的优化。
操作方法：以iPad为例，从屏幕顶部向下轻扫，打开快捷功能页面，找到竖屏锁定按钮，关闭竖屏锁定，之后横屏放置ipad，iPad会自动变为横屏模式，转动屏幕，屏幕会一直跟随你的视角旋转。设备使用技巧：1、iPad可以使用手电筒功能。
适配计划分为 2 期。第 1 期将所有页面用按竖屏宽度显示进行横屏适配。第 2 期挑选核心页面用内容响应式或左右分栏进行优化。
1. 先开发再验收
在第 1 期我们就踩坑了，按照原来的工作流程，我们将所有的 iPad 横屏页面做好线框图、再输出所有视觉效果图。虽然都是线上页面不用重新设计，只需要拉伸画面或者调整间距，但所有线上页面也是一个不小的工作量。
就在进行过程中，iOS 工程师就皱着眉头来提议，由于代码架构和资源所限，设计师如果调整的视觉效果图未必能 100% 实现。不如反过来，让他先把所有页面强行横屏，再由设计师走查发现问题进行修改，这样节省时间效果也可控。
可见，不同的项目类型可以采取不同的工作流程。iPad 横屏适配项目流程和常规工作流程刚好相反，以往是先设计再开发，改成先开发再走查，节省设计师产出效果图时间，也保障最终实现效果。
2. 核心场景决定核心页面
在得到主管纠正后，我们转而开始为资料阅读页面提供左内容右目录的布局，便于用户方便地在长文中精确定位想读的内容。
五、总结
按照以往的项目总结，最后应该汇报项目数据结果。但由于 iPad 用户本身可怜的占比，即使我们官方公众号推文宣布适配 iPad 横屏后，也没有 iPad 用户站出来点赞，而是又引发出使用华为、小米等安卓 Pad 的用户，要求也适配。
虽然没有外部用户反馈，但公司内部同事和开发团队使用后确实感觉很棒。所以我觉得这次适配项目真正值得思考的是：如果一个需求用户反馈很少，也没有数据支撑，但对体验影响很大，如何推动团队进行优化呢？
题图来自 Unsplash，基于 CC0 协议
