原文地址：https://mp.weixin.qq.com/s/NS4cOphJVJ6nyJfjEoNdeg

前言

进入移动互联网时代以来，由于竖屏是移动端主流的界面模式，设计师们已经很普遍把焦点放在竖屏设计上，而忽视了横屏设计的特点和机会。但其实，横屏状态下横向的空间变大，因此可以利用横向空间做加法，通过横屏设计模式达到体验上的增益。本文是我在项目设计中总结的几种横屏设计模式，希望能为设计师伙伴们提供一些启发或帮助。

背景

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

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

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

分析

竖屏是移动端主流的界面模式，便于单手持握，竖向的屏幕有着更高的滚屏空间，可以方便用户更高效浏览长内容。而横屏模式常见于pc端或pad端，以及一些特定的手机场景，比如游戏类、视频类等，横屏状态下横向的空间变大，因此可以利用横向空间做加法，通过横屏设计模式达到体验上的增益。

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

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

A. 横屏单页面设计模式

单页面设计模式主要通过页面布局的调整重排，使其更适合更宽的横向空间展示，包括拉伸布局、分栏布局、差异布局三种。

1. 拉伸布局

拉伸布局尽可能保留原本竖屏的页面布局，通过适当拉伸填满横向屏幕，手段有：

1.1 等比拉伸

页面中的元素大小随着横屏宽度变大而做等比拉伸，这种布局方式适合视频、图片、杂志等元素具有视觉冲击力的场景，等比放大后能够有更好的内容阅览体验。