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

本文2694字，阅读时间约10分钟。

一、前言

进入移动互联网时代以来，由于竖屏是移动端主流的界面模式，设计师们已经很普遍把焦点放在竖屏设计上，而忽视了横屏设计的特点和机会。但其实，横屏状态下横向的空间变大，因此可以利用横向空间做加法，通过横屏设计模式达到体验上的增益。

本文是我在项目设计中总结的几种横屏设计模式，希望能为设计师伙伴们提供一些启发或帮助。

二、背景

问题源自vivo游戏联运项目，vivo游戏联运依附游戏存在，分为横屏游戏和竖屏游戏，并且对于游戏类产品，横屏模式占比更高，所以涉及到非常多手机端横屏设计的需求。

竖屏游戏联运收银台如左下图所示，如果按照常规的竖屏设计思维将收银台迁移到横屏，由于横屏纵向高度有限，重要的支付渠道并不能在首屏露出。是否有更好的方案？这引发了我一些思考，到底横屏下都有哪些设计模式？横屏设计是否有规律可循？

竖屏收银台和竖屏设计思维下的横屏收银台

三、分析

竖屏是移动端主流的界面模式，便于单手持握，竖向的屏幕有着更高的滚屏空间，可以方便用户更高效浏览长内容。

而横屏模式常见于pc端或pad端，以及一些特定的手机场景，比如游戏类、视频类等，横屏状态下横向的空间变大，因此可以利用横向空间做加法，通过横屏设计模式达到体验上的增益。

通过整合市面上的各类横屏设计，我归纳出两大类横屏设计模式。

注：范围涉及手机端和pad端；适用于同一应用的横竖屏适配或由手机端迁移至更适合横屏的pad端。