前言

進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代以來(lái)，由于豎屏是移動(dòng)端主流的界面模式，設(shè)計(jì)師們已經(jīng)很普遍把焦點(diǎn)放在豎屏設(shè)計(jì)上，而忽視了橫屏設(shè)計(jì)的特點(diǎn)和機(jī)會(huì)。但其實(shí)，橫屏狀態(tài)下橫向的空間變大，因此可以利用橫向空間做加法，通過(guò)橫屏設(shè)計(jì)模式達(dá)到體驗(yàn)上的增益。本文是我在項(xiàng)目設(shè)計(jì)中總結(jié)的幾種橫屏設(shè)計(jì)模式，希望能為設(shè)計(jì)師伙伴們提供一些啟發(fā)或幫助。

背景

問(wèn)題源自 vivo 游戲聯(lián)運(yùn)項(xiàng)目，vivo 游戲聯(lián)運(yùn)依附游戲存在，分為橫屏游戲和豎屏游戲，并且對(duì)于游戲類產(chǎn)品，橫屏模式占比更高，所以涉及到非常多手機(jī)端橫屏設(shè)計(jì)的需求。

豎屏游戲聯(lián)運(yùn)收銀臺(tái)如左下圖所示，如果按照常規(guī)的豎屏設(shè)計(jì)思維將收銀臺(tái)遷移到橫屏，由于橫屏縱向高度有限，重要的支付渠道并不能在首屏露出。是否有更好的方案？這引發(fā)了我一些思考，到底橫屏下都有哪些設(shè)計(jì)模式？橫屏設(shè)計(jì)是否有規(guī)律可循？

? 豎屏收銀臺(tái)和豎屏設(shè)計(jì)思維下的橫屏收銀臺(tái)

分析

豎屏是移動(dòng)端主流的界面模式，便于單手持握，豎向的屏幕有著更高的滾屏空間，可以方便用戶更高效瀏覽長(zhǎng)內(nèi)容。而橫屏模式常見(jiàn)于 pc 端或 pad 端，以及一些特定的手機(jī)場(chǎng)景，比如游戲類、視頻類等，橫屏狀態(tài)下橫向的空間變大，因此可以利用橫向空間做加法，通過(guò)橫屏設(shè)計(jì)模式達(dá)到體驗(yàn)上的增益。

通過(guò)整合市面上的各類橫屏設(shè)計(jì)，我歸納出兩大類橫屏設(shè)計(jì)模式。

注：范圍涉及手機(jī)端和 pad 端；適用于同一應(yīng)用的橫豎屏適配或由手機(jī)端遷移至更適合橫屏的 pad 端。

1. 橫屏單頁(yè)面設(shè)計(jì)模式

單頁(yè)面設(shè)計(jì)模式主要通過(guò)頁(yè)面布局的調(diào)整重排，使其更適合更寬的橫向空間展示，包括拉伸布局、分欄布局、差異布局三種。

拉伸布局

拉伸布局盡可能保留原本豎屏的頁(yè)面布局，通過(guò)適當(dāng)拉伸填滿橫向屏幕，手段有：

??等比拉伸

頁(yè)面中的元素大小隨著橫屏寬度變大而做等比拉伸，這種布局方式適合視頻、圖片、雜志等元素具有視覺(jué)沖擊力的場(chǎng)景，等比放大后能夠有更好的內(nèi)容閱覽體驗(yàn)。

??某新聞產(chǎn)品（iPad端）

??橫向拉伸

頁(yè)面中的元素大小不變，通過(guò)橫向相對(duì)拉伸，增加元素的顯示寬度或拉伸橫向間距以達(dá)到填滿橫向空間的目的，適合閱讀類場(chǎng)景，拉伸后單行可以顯示更多文字。

??某筆記產(chǎn)品（iPad端）

??重復(fù)拉伸

保持頁(yè)面元素大小和間距不變，利用屏幕的寬度優(yōu)勢(shì)，增加橫向可顯示元素?cái)?shù)量，在橫向空間上展示更多內(nèi)容，適合元素重復(fù)的場(chǎng)景，比如金剛位 icon、應(yīng)用列表等。

???某系統(tǒng)應(yīng)用商店（iPad端）

分欄布局

豎屏狀態(tài)下縱向空間富裕，頁(yè)面布局通常是上下結(jié)構(gòu)，而橫屏狀態(tài)下縱向空間緊張，這就使得原本可以在首屏曝光的內(nèi)容無(wú)法在首屏展示，這時(shí)候可以將上下結(jié)構(gòu)變?yōu)楦线m橫屏的左右結(jié)構(gòu)布局，左右分欄的寬度也可以隨著不同內(nèi)容的重要性而自定義。分欄布局是橫屏設(shè)計(jì)中比較常用的模式，適合眾多場(chǎng)景，特別是底部?jī)?nèi)容優(yōu)先級(jí)較高需在首屏展示的情況，在橫屏設(shè)計(jì)下可優(yōu)先考慮此模式。背景引例中豎屏游戲聯(lián)運(yùn)收銀臺(tái)遷移到橫屏下就是使用了分欄布局。

???vivo游戲聯(lián)運(yùn)收銀臺(tái)（手機(jī)端）

差異布局

差異布局展示了和豎屏模式完全不同的布局方式，采用了較為特別、更適合橫屏狀態(tài)的布局結(jié)構(gòu)，比如音樂(lè)產(chǎn)品的 Cover Flow 展示、金融產(chǎn)品的數(shù)據(jù)圖表展示、游戲產(chǎn)品的橫向卷軸關(guān)卡展示等等。這種設(shè)計(jì)模式的門檻較高較少采用，適合只有橫屏場(chǎng)景的產(chǎn)品或特定橫屏場(chǎng)景（圖表、日歷等）為其特殊設(shè)計(jì)，需要考慮實(shí)際場(chǎng)景的適用性。

??某日歷產(chǎn)品（手機(jī)端）

2. 橫屏雙頁(yè)面設(shè)計(jì)模式

雙頁(yè)面設(shè)計(jì)模式是將豎屏狀態(tài)下原本兩個(gè)具有關(guān)聯(lián)關(guān)系的頁(yè)面內(nèi)容，組合到同一個(gè)頁(yè)面下，以分屏的形式同時(shí)呈現(xiàn)出來(lái)，降低原本跨頁(yè)面交互、不斷來(lái)回切換的操作成本，創(chuàng)造出更高效率的用戶體驗(yàn)。這種雙頁(yè)面的橫屏設(shè)計(jì)模式通常適合于較大屏幕尺寸設(shè)備的橫屏狀態(tài)，小屏設(shè)備下會(huì)顯得空間較擁擠。根據(jù)兩個(gè)組合頁(yè)面的關(guān)聯(lián)關(guān)系，可以分為父子組合、主次組合、并列組合三種。

父子組合

這種雙頁(yè)面組合方式在 pad 端較為常見(jiàn)，通常左屏展示列表頁(yè)，右屏展示列表中某項(xiàng)的詳情頁(yè)。用戶可以點(diǎn)擊左屏列表中任意項(xiàng)目，在右屏快速打開(kāi)相應(yīng)的詳情內(nèi)容，實(shí)現(xiàn)便捷切換，使得豎屏下原本需要“點(diǎn)擊列表某項(xiàng)目->閱讀詳情->返回列表->點(diǎn)擊列表另一項(xiàng)目->閱讀詳情”來(lái)回切換的繁瑣流程體驗(yàn)，變得簡(jiǎn)單高效易用。這種設(shè)計(jì)模式適用于郵件、新聞、筆記等內(nèi)容消費(fèi)型產(chǎn)品。

??某郵箱產(chǎn)品（iPad端）

??某視頻產(chǎn)品（iPad端）

?主次組合

在主次組合中，左屏為主要內(nèi)容，右屏為次要內(nèi)容。比如用戶可以在左屏看文章詳情、視頻內(nèi)容，在右屏進(jìn)行評(píng)論的消費(fèi)和互動(dòng)；又比如用戶可以在左屏看商品或應(yīng)用詳情，右屏看相關(guān)商品或應(yīng)用評(píng)論，輔助購(gòu)買和下載決策。這種設(shè)計(jì)模式下可以同時(shí)瀏覽主次內(nèi)容，右屏內(nèi)容依賴于左屏內(nèi)容，并起到輔助左屏內(nèi)容的作用。

??某視頻產(chǎn)品（iPad端）

并列組合

在某些情景下，用戶需要對(duì)比兩個(gè)同類型頁(yè)面，豎屏模式下跨頁(yè)面對(duì)比步驟極為復(fù)雜且不直觀，用戶的記憶成本大，而橫屏雙頁(yè)面模式下，用戶可以同時(shí)瀏覽兩個(gè)內(nèi)容詳情，適用于不同商品對(duì)比的場(chǎng)景，更加高效直觀。

??某購(gòu)物產(chǎn)品（手機(jī)端折疊屏）

總結(jié)

綜上所述，橫屏設(shè)計(jì)場(chǎng)景下有兩大類橫屏設(shè)計(jì)模式，包括橫屏單頁(yè)面設(shè)計(jì)模式（拉伸布局、分欄布局、差異布局）和橫屏雙頁(yè)面設(shè)計(jì)模式（父子組合、主次組合、并列組合），不同類型及其適用場(chǎng)景和增益效果如下表所示：

在實(shí)際運(yùn)用中需要注意辨別橫屏場(chǎng)景，具備橫屏設(shè)計(jì)意識(shí)，從豎屏設(shè)計(jì)思維向橫屏設(shè)計(jì)思維轉(zhuǎn)變。橫屏設(shè)計(jì)模式的使用步驟建議如下：

• 根據(jù)設(shè)備大小來(lái)找到合適的橫屏設(shè)計(jì)模式大類，一般來(lái)說(shuō)雙頁(yè)面模式比單頁(yè)面模式更適合大屏設(shè)備，可以更好地發(fā)揮橫屏優(yōu)勢(shì)；
• 根據(jù)不同大類下橫屏設(shè)計(jì)模式的適用場(chǎng)景，思考采用哪種橫屏設(shè)計(jì)模式，能夠適合業(yè)務(wù)場(chǎng)景，解決當(dāng)前產(chǎn)品的核心問(wèn)題，達(dá)到體驗(yàn)增益的效果。

歡迎關(guān)注作者微信公眾號(hào)：「VMIC UED」