从竖屏设计思维转向横屏设计思维 ipad横屏竖屏切换在哪里( 二 )


从竖屏设计思维转向横屏设计思维 ipad横屏竖屏切换在哪里

文章插图
【从竖屏设计思维转向横屏设计思维 ipad横屏竖屏切换在哪里】某日历产品(手机端)
2. 横屏双页面设计模式双页面设计模式是将竖屏状态下原本两个具有关联关系的页面内容,组合到同一个页面下,以分屏的形式同时呈现出来,降低原本跨页面交互、不断来回切换的操作成本,创造出更高效率的用户体验 。
这种双页面的横屏设计模式通常适合于较大屏幕尺寸设备的横屏状态,小屏设备下会显得空间较拥挤 。根据两个组合页面的关联关系,可以分为父子组合、主次组合、并列组合三种 。
1)父子组合
这种双页面组合方式在pad端较为常见,通常左屏展示列表页,右屏展示列表中某项的详情页 。
用户可以点击左屏列表中任意项目,在右屏快速打开相应的详情内容,实现便捷切换,使得竖屏下原本需要“点击列表某项目→阅读详情→返回列表→点击列表另一项目→阅读详情”来回切换的繁琐流程体验,变得简单高效易用 。这种设计模式适用于邮件、新闻、笔记等内容消费型产品 。
从竖屏设计思维转向横屏设计思维 ipad横屏竖屏切换在哪里

文章插图
某邮箱产品(iPad端)
从竖屏设计思维转向横屏设计思维 ipad横屏竖屏切换在哪里

文章插图
某视频产品(iPad端)
2)主次组合
在主次组合中,左屏为主要内容,右屏为次要内容 。比如用户可以在左屏看文章详情、视频内容,在右屏进行评论的消费和互动;又比如用户可以在左屏看商品或应用详情,右屏看相关商品或应用评论,辅助购买和下载决策 。
这种设计模式下可以同时浏览主次内容,右屏内容依赖于左屏内容,并起到辅助左屏内容的作用 。
从竖屏设计思维转向横屏设计思维 ipad横屏竖屏切换在哪里

文章插图
某视频产品(iPad端)
3)并列组合
在某些情景下,用户需要对比两个同类型页面 。竖屏模式下跨页面对比步骤极为复杂且不直观,用户的记忆成本大,而横屏双页面模式下,用户可以同时浏览两个内容详情,适用于不同商品对比的场景,更加高效直观 。
从竖屏设计思维转向横屏设计思维 ipad横屏竖屏切换在哪里

文章插图
某购物产品(手机端折叠屏)
四、总结综上所述,横屏设计场景下有两大类横屏设计模式,包括横屏单页面设计模式(拉伸布局、分栏布局、差异布局)和横屏双页面设计模式(父子组合、主次组合、并列组合),不同类型及其适用场景和增益效果如下表所示:在实际运用中需要注意辨别横屏场景,具备横屏设计意识,从竖屏设计思维向横屏设计思维转变 。
横屏设计模式的使用步骤建议如下:
  1. 根据设备大小来找到合适的横屏设计模式大类,一般来说双页面模式比单页面模式更适合大屏设备,可以更好地发挥横屏优势;
  2. 根据不同大类下横屏设计模式的适用场景,思考采用哪种横屏设计模式,能够适合业务场景,解决当前产品的核心问题,达到体验增益的效果 。

从竖屏设计思维转向横屏设计思维 ipad横屏竖屏切换在哪里

文章插图
从竖屏设计思维转向横屏设计思维 ipad横屏竖屏切换在哪里

文章插图
作者:雷昕 vivo UED,公众号:VMIC UED
本文由 @VMIC UED 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自Unsplash,基于 CC0 协议