大厂出品！超详细的横屏设计模式分析总结

前言

入移动互联网时以，由于竖屏移动端主流的界面模式，设师们已很普遍把焦点竖屏设，忽视了横屏设计特和会。其实，屏状态下空变大，此可以利用空做加法，过横屏设计模式达体验上的增益。本文是在项目计中总结的种横屏设计模式，希望能为设计师伙伴们提供一启或帮助。

背景

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

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

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

分析

竖屏是移端流的界面模式，于单手持握，竖向的屏幕有着更的滚屏空间，可方户更效浏览长容。而横屏模式见于 pc 端或 pad 端，及一些特定的手机场景，如游戏类、视频类等，横屏状态横向的空间变大，因此可利横向空间做法，通过横屏设计模式达到体验上的增益。

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

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

1. 横屏单页面设计模式

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

拉伸布局

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

?等比伸

页面中的元素小随横屏宽度变比拉伸，这种布局方式合视频、图片、杂志元素具视觉冲击力的场景，比后能够好的内阅览体验。

⇧ 某新闻品（iPad端）

?伸

页面中的元素小不变，通过横向相对拉伸，增加元素的显示宽度或拉伸横向间距以达到填满横向空间的目的，合阅读类场景，拉伸后单行可以显示多文字。

⇧ 某笔记品（iPad端）

?复伸

保持页面元素小间距不变，利用屏幕的宽度优势，增加横向可显示元素数，横向空间展示多内，合元素重复的场景，比如金刚 icon、应用列表。

⇧  某系统应用商店（iPad端）

栏布局

竖屏状下纵向空间裕，页面布局通常是上下结构，而横屏状下纵向空间紧张，这就使得本可以在首屏曝光的内容无法在首屏展示，这候可以将上下结构变为更适横屏的左右结构布局，左右栏的宽度也可以随着不同内容的重要性而定义。栏布局是横屏计中比较常用的模式，适众多景，别是底部内容优先较高需在首屏展示的情况，在横屏计下可优先考虑此模式。背景引例中竖屏游戏运收银迁移横屏下就是使用了栏布局。

⇧  vivo游戏联运收银台（手机端）

差异布

差异布展示了和竖屏模式全同的布方式，采了较为特别、更适合横屏状态的布结构，如音乐产的 Cover Flow 展示、金融产的数据图表展示、游戏产的横向卷轴卡展示等等。这种设计模式的门槛较较采，适合只有横屏场景的产或特定横屏场景（图表、日历等）为特殊设计，需要考虑实际场景的适性。

⇧ 某日历产品（手机端）

2. 横屏双页面设计模式

双页设计模是将竖屏状态下原本两个具有关联关系页内容，组合到个页下，以分屏形时呈现出来，降低原本跨页交互、不断来回切换操作成本，创造出更高效率用户体验。这双页屏设计模常适合于较大屏幕尺寸设备屏状态，小屏设备下会显空较拥挤。根据两个组合页关联关系，可以分为父子组合、主组合、并列组合三。

父子组合

这双页组合在 pad 端较为常见，常左屏展示列表页，右屏展示列表某项详情页。用户可以击左屏列表任意项目，在右屏快速打开相应详情内容，实现便捷切换，使竖屏下原本需要“击列表某项目->阅读详情->返回列表->击列表另项目->阅读详情”来回切换繁琐流程体验，变简单高效易用。这设计模适用于邮件、新闻、笔记等内容消费型品。

⇧ 某邮箱产品（iPad端）

⇧ 某视频产（iPad端）

 主次组合

主次组合中，左屏主内，右屏次内。比如用户可以左屏看文章详、视频内，右屏行论的消费互动；又比如用户可以左屏看商品或应用详，右屏看相关商品或应用论，辅购买下载决策。这种设模式下可以同时浏览主次内，右屏内依赖于左屏内，并起到辅左屏内的作用。

⇧ 某视频品（iPad端）

并列组

在某些情景下，用户需要对比个同类型页面，竖屏模式下跨页面对比步骤极为复杂且不直观，用户的记忆成本大，而横屏双页面模式下，用户可以同浏览个内容详情，适用于不同商品对比的景，更加高效直观。

⇧ 某购物产品（手机端折叠屏）

总结

综上述，横屏设计场景有两大类横屏设计模式，包括横屏单页面设计模式（拉伸布、分栏布、差异布）和横屏双页面设计模式（父子组合、次组合、并列组合），同类及适场景和增益效果如表示：

在实际中需要注意辨别横屏场景，具备横屏设计意识，从竖屏设计思维向横屏设计思维转变。横屏设计模式的使步骤建议如：

• 根据设备小找到合的横屏设模式类，一般页面模式比单页面模式合屏设备，可以好发挥横屏优势；
• 根据同大类横屏设计模式的适场景，思考采哪种横屏设计模式，够适合务场景，解决当前产的核心问题，达到体验增益的效果。

欢迎关注作者微信公众：「VMIC UED」