特征:横屏为全屏通栏拉伸 , 所有元素与竖屏一致 。
适用场景:全部场景 。
评价:设计和开发成本最小,但是相当于没有适配 。用户体验较差 , 横屏情况下内容集中 , 左侧右侧很空,或者被拉得很长,阅读体验较差 。
文章插图
5. 混合模式当然也不是所有 App 都采用单一的模式 。比如微信阅读,在其他页面是按竖屏宽度显示 。但到了图书阅读界面,则是左右分栏充分利用 iPad 大屏幕展现内容 。
文章插图
以上竞品分析所有截图我们都保存在 Figma 中,有需要的读者可前往获取 。
链接:https://www.figma.com/community/file/1071850659054902697/iPad-横屏适配竞品分析
四、执行非常遗憾的是虽然高管牵头做适配,但开发资源确实有限 。不能为了设计师邀功拿业绩就从头把 iOS App 重构一遍 , 因此我们决定用最少的资源做最核心的优化 。
适配计划分为 2 期 。第 1 期将所有页面用按竖屏宽度显示进行横屏适配 。第 2 期挑选核心页面用内容响应式或左右分栏进行优化 。
1. 先开发再验收在第 1 期我们就踩坑了 , 按照原来的工作流程,我们将所有的 iPad 横屏页面做好线框图、再输出所有视觉效果图 。虽然都是线上页面不用重新设计,只需要拉伸画面或者调整间距,但所有线上页面也是一个不小的工作量 。
就在进行过程中,iOS 工程师就皱着眉头来提议,由于代码架构和资源所限,设计师如果调整的视觉效果图未必能 100% 实现 。不如反过来 , 让他先把所有页面强行横屏,再由设计师走查发现问题进行修改 , 这样节省时间效果也可控 。
可见,不同的项目类型可以采取不同的工作流程 。iPad 横屏适配项目流程和常规工作流程刚好相反,以往是先设计再开发,改成先开发再走查,节省设计师产出效果图时间,也保障最终实现效果 。
2. 核心场景决定核心页面在第 2 期挑选核心页面时,我也犯了错误 。最开始我觉得核心是脸面,因此挑选 Tabbar 导航的首页、个人中心等用户一打开 App 就看得到的页面进行优化 。但实际上用户真正的核心使用场景是在详情页查阅资料,这才是真正的核心页面 。
在得到主管纠正后 , 我们转而开始为资料阅读页面提供左内容右目录的布局,便于用户方便地在长文中精确定位想读的内容 。
文章插图
2 期计划并非适配的终结 , 随着 App 功能的迭代,此后老界面修改和新界面设计需要考虑到 iPad 横屏的适配问题,就成为了日常工作的内容了 。
五、总结按照以往的项目总结,最后应该汇报项目数据结果 。但由于 iPad 用户本身可怜的占比,即使我们官方公众号推文宣布适配 iPad 横屏后,也没有 iPad 用户站出来点赞,而是又引发出使用华为、小米等安卓 Pad 的用户,要求也适配 。
考虑到不同的安卓品牌适配方式不一样,而且安卓厂商自己又有平行世界等通用兼容方案 , 我们就没再继续参与了 。
虽然没有外部用户反馈,但公司内部同事和开发团队使用后确实感觉很棒 。所以我觉得这次适配项目真正值得思考的是:如果一个需求用户反馈很少 , 也没有数据支撑 , 但对体验影响很大,如何推动团队进行优化呢?
作者:龙爪槐守望者,微信公众号:龙爪槐守望者
本文由 @龙爪槐守望者 原创发布于人人都是产品经理 。未经许可,禁止转载 。
- 显示器如何选,怎么根据主机选显示器
- win7玩cf如何调全屏,win7玩穿越火线怎么全屏设置
- 眼部的脂肪粒怎么去除小窍门 眼睛脂肪粒如何去除
- 疑问解答iphone压弯了能找官方免费换新么,iphone压弯了如何解决
- 为什么色彩三原色是红黄蓝,红黄蓝三原色如何p图
- 苹果ipad桌面图标大小设置,ipad调大图标
- 蒲公英与荠菜如何区分 蒲公英就是荠菜吗
- 如何拒绝领导安排不属于自己工作 被领导安排了不想做的工作
- 角质层薄有红血丝如何修复
- 如何做糖姜片的制作方法窍门 糖姜片的制作方法