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

编辑导语：产品界面设计往往需要依据用户体验和业务特点选择某种界面模式，相比当下流行的竖屏界面模式，横屏界面也有其优势所在。本篇文章里，作者结合实际案例总结了几种横屏设计模式，让我们一起来看一下。

文章插图
本文2694字，阅读时间约10分钟。
一、前言进入移动互联网时代以来，由于竖屏是移动端主流的界面模式，设计师们已经很普遍把焦点放在竖屏设计上，而忽视了横屏设计的特点和机会。但其实，横屏状态下横向的空间变大，因此可以利用横向空间做加法，通过横屏设计模式达到体验上的增益。
本文是我在项目设计中总结的几种横屏设计模式，希望能为设计师伙伴们提供一些启发或帮助。
二、背景问题源自vivo游戏联运项目，vivo游戏联运依附游戏存在，分为横屏游戏和竖屏游戏，并且对于游戏类产品，横屏模式占比更高，所以涉及到非常多手机端横屏设计的需求。
竖屏游戏联运收银台如左下图所示，如果按照常规的竖屏设计思维将收银台迁移到横屏，由于横屏纵向高度有限，重要的支付渠道并不能在首屏露出。是否有更好的方案？这引发了我一些思考，到底横屏下都有哪些设计模式？横屏设计是否有规律可循？

文章插图
竖屏收银台和竖屏设计思维下的横屏收银台
三、分析竖屏是移动端主流的界面模式，便于单手持握，竖向的屏幕有着更高的滚屏空间，可以方便用户更高效浏览长内容。
而横屏模式常见于pc端或pad端，以及一些特定的手机场景，比如游戏类、视频类等，横屏状态下横向的空间变大，因此可以利用横向空间做加法，通过横屏设计模式达到体验上的增益。
通过整合市面上的各类横屏设计，我归纳出两大类横屏设计模式。
注：范围涉及手机端和pad端；适用于同一应用的横竖屏适配或由手机端迁移至更适合横屏的pad端。
1. 横屏单页面设计模式单页面设计模式主要通过页面布局的调整重排，使其更适合更宽的横向空间展示，包括拉伸布局、分栏布局、差异布局三种。
1）拉伸布局
拉伸布局尽可能保留原本竖屏的页面布局，通过适当拉伸填满横向屏幕，手段有：
① 等比拉伸
页面中的元素大小随着横屏宽度变大而做等比拉伸，这种布局方式适合视频、图片、杂志等元素具有视觉冲击力的场景，等比放大后能够有更好的内容阅览体验。

文章插图
某新闻产品（iPad端）
② 横向拉伸
页面中的元素大小不变，通过横向相对拉伸，增加元素的显示宽度或拉伸横向间距以达到填满横向空间的目的，适合阅读类场景，拉伸后单行可以显示更多文字。

文章插图
某笔记产品（iPad端）
③ 重复拉伸
保持页面元素大小和间距不变，利用屏幕的宽度优势，增加横向可显示元素数量，在横向空间上展示更多内容，适合元素重复的场景，比如金刚位icon、应用列表等。

文章插图
某系统应用商店（iPad端）
2）分栏布局
竖屏状态下纵向空间富裕，页面布局通常是上下结构，而横屏状态下纵向空间紧张，这就使得原本可以在首屏曝光的内容无法在首屏展示。这时候可以将上下结构变为更合适横屏的左右结构布局，左右分栏的宽度也可以随着不同内容的重要性而自定义。
分栏布局是横屏设计中比较常用的模式，适合众多场景，特别是底部内容优先级较高需在首屏展示的情况，在横屏设计下可优先考虑此模式。背景引例中竖屏游戏联运收银台迁移到横屏下就是使用了分栏布局。

文章插图
vivo游戏联运收银台（手机端）
3）差异布局
差异布局展示了和竖屏模式完全不同的布局方式，采用了较为特别、更适合横屏状态的布局结构，比如音乐产品的Cover Flow展示、金融产品的数据图表展示、游戏产品的横向卷轴关卡展示等等。
这种设计模式的门槛较高较少采用，适合只有横屏场景的产品或特定横屏场景（图表、日历等）为其特殊设计，需要考虑实际场景的适用性。