三星平板怎么横竖屏切换 平板怎么横竖屏切换

编辑导语:虽然国内软件的iPad用户占比不大,但依然存在着横屏适配的需求 。本文作者讲述了自己做iPad横屏适配的背景,并对竞品的适配方式进行了分析研究,用自己的亲身经历提供了参考,推荐对ipad横屏适配感兴趣的童鞋阅读 。

三星平板怎么横竖屏切换 平板怎么横竖屏切换

文章插图
一、背景在我参与的一款资料查询 App 中,对 iPad 只支持竖屏以手机 UI 尺寸拉伸,每个季度都有用户反馈希望适配 iPad 横屏 。经过询问用户发现 , 因为 iPad mini 尺寸刚好可以放在工作服口袋中,随时拿出来使用 , 而 iPad 屏幕远比手机大 , 浏览资料视野更大更舒服 。
三星平板怎么横竖屏切换 平板怎么横竖屏切换

文章插图
但另外一方面,后台数据显示当前 iPad 用户占比只有 1%,用户呼声够不上星星之火,不足以燎原 。先别谈说服团队做 iPad 横屏适配,连说服自己都难 。本来以为这事就像水中投石,水波消散就没有下文了 。直到有一天,同样是资深用户的高管自己拿着 iPad 装上我们的 App 用了几天,终于忍不了 , 开始推动 iPad 横屏适配 。
二、参考我们肯定不是第一个做 iPad 横屏适配的,但在网上搜了一圈 , 别说横屏适配,连 iPad 界面设计的文章都很少,下面 3 篇算不错的 。这也是我决定写下本文的原因,为后来者提供经验 , 少踩坑 。
  1. 《利用好 iPad 的大屏幕 —— 如何为 iPadOS 14 设计 app?》,https://steppark.net/15942969497015.html
  2. 《iPad 交互设计探索系列:iPad 适用产品篇》,https://www.jianshu.com/p/65211fddefb9
  3. 《iPad 交互设计探索系列:iPad 导航设计篇》,https://www.jianshu.com/p/0c8e315d39d4
三、研究没得经验参考就只能先从竞品分析开始了 。经过对 iOS 系统应用、微信、QQ、微信阅读、得到、豆瓣、淘宝和有道词典的分析 , 我和同事总结成 5 种横屏适配模式 。
1. 内容响应式典型 App:iOS 应用商店
特征:标题栏和 Tabbar 通栏拉伸,内容区根据宽度向右响应式布局 。
适用场景:全部场景 。
评价:灵活性和用户体验都很好,但设计和开发成本很大 。
三星平板怎么横竖屏切换 平板怎么横竖屏切换

文章插图
三星平板怎么横竖屏切换 平板怎么横竖屏切换

文章插图
2. 左右分栏典型 App:iOS 设置、淘宝、微信、QQ
特征:左右分开显示,左边通常固定显示首页或者目录导航 。右侧根据左侧选择显示对应的详情内容 。
适用场景:频繁需要使用导航切换内容 。
评价:用户体验适中,合理的利用横屏更大地展示更多的内容 。设计成本小,需额外设计一个右侧默认为空的情况 。开发成本要看是否改程序架构 , 相当于把手机两个手机界面合并成一个屏幕,可能有些程序架构很难这么修改 。
三星平板怎么横竖屏切换 平板怎么横竖屏切换

文章插图
三星平板怎么横竖屏切换 平板怎么横竖屏切换

文章插图
三星平板怎么横竖屏切换 平板怎么横竖屏切换

文章插图
3. 按竖屏宽度显示典型 App:微信阅读
特征:标题栏和 Tabbar 通栏拉伸,内容直接按竖屏的宽度显示 。
适用场景:全部场景 。
评价:用户体验适中,设计与开发成本小 , 大多数产品采用此模式,但是没有更好的展现横屏宽屏的优势 。
三星平板怎么横竖屏切换 平板怎么横竖屏切换

推荐阅读