編輯導讀:視頻豎屏和橫屏是一個很常見的交互操作,那你有想過這兩種設計有什麼區別嗎?當面試時候被問到這個問題,你會怎麼回答?本文作者從自身工作實踐出發,對這個問題進行了了梳理分析,並分享了他的幾點看法,希望對大家有所幫助。
最近在群裡看到一位同學提問,在面試的時候被問到視頻橫屏與豎屏的設計差異,討論還挺火熱。正好我之前做過一個從豎屏到橫屏轉型的短視頻App項目,有一些設計思考,我把它分享出來,跟大家一起探討學習。
視頻豎屏和橫屏是一個很常見的交互操作,那大家有沒有想過:為什麼會有橫豎屏的設計以及背後會有怎樣的邏輯呢?我想從以下幾點來分析:
橫豎屏設計的源頭橫豎屏設計的差異橫豎屏對內容生產的影響小結
01 橫屏豎屏設計的源頭
橫豎屏切換策略最早應用於QWERTY側滑全鍵盤按鍵設計的手機上(早期塞班S60與Windows Mobile等智能操作平臺),用戶在使用鍵盤輸入時須把手機轉90度來使用,因而屏幕內容也要隨之切換。
從這裡可以看出,早期的橫豎屏設計是為了適應硬體的變化。但如今隨著硬體的升級,外置鍵盤的設計早已不成為主流,現在的橫豎屏選擇更多的是為了服務於內容。
02 橫豎屏設計的差異
先給大家來一張我做的思維導圖,橫屏與豎屏的差異對比,
1. 橫屏的優勢
1)橫屏具有更強的沉浸感
大家平時用的電腦,電視,基本上都是橫屏的設計,為啥會設計成橫屏也是有原因的,因為人眼在生理上的視野範圍跟平時見到的橫屏設計的比例是比較相符的。所以,橫屏相較於豎屏來說,能有更好的沉浸感體驗,這就是為什麼一些長視頻應用,比如騰訊視頻,優酷之類的,一般會設計成橫屏的原因。
如果在這個視野範圍內都是屏幕,那麼就會給我們一種身臨其境的感覺。這就是為什麼角色扮演類遊戲需要做橫屏設計,電影的熒幕是21:9的原因。
2)橫屏閱讀效率更高
水平方向閱讀更符合人體生理,眼球橫向來回掃視比較方便,所用時間也較短。如果是豎屏的,可能會需要低頭才能掃視完整塊屏幕。從所用時間和角度來看,橫屏的閱讀效率相對較高。
3)橫屏更偏向於看內容
由於具有很強的沉浸感,也就意味著需要觀看者接受更高密度的信息量,使得橫屏下更適合深度看內容,更適合PGC內容形態。當時我們想要做的是知識型短視頻內容,橫屏狀態可以讓用戶有更高的專注度。
4)橫屏短視頻體驗新奇
想要獲得比較好的傳播,亮點很重要。目前市面上大多數短視頻應用都是基於豎屏來做的,橫屏短視頻設計相對較少,做成橫屏會比較有特點,能讓人產生記憶點。
5)保護視力
橫屏下的內容其實跟書本寬度比較接近,閱讀屏幕內容時眼珠子會橫向掃動,而在豎屏下眼球基本上不動。所以,還能起到一定的保護視力作用。
2. 豎屏的優勢
1)豎屏更偏看人及互動
因為豎屏的構圖關係,豎屏視頻相較於橫屏視頻畫面中容納的人數更少,所以它更容易給人帶來一對一的交流感,具有很強的互動性。在你來我往的互動過程中所帶來的信息密度一般相對較低,內容屬性更偏娛樂化,淺知識,所以可以看到在很多的直播設計中,都是採用的豎屏設計。
2)便於碎片化場景
豎屏下單手持握更加方便,同時因為沒有太強的沉浸感,目光容易發散,所以更適合碎片化場景。
3)豎屏能使得拍攝重點更為突出
由於尺寸和人眼視野的問題,豎屏會讓畫面重點更為聚焦。
這裡稍微介紹下理論依據:人眼視度即指人的肉眼可視角度的度數。人類通常是124度,當集中注意力時約為五分之一,即25度。人兩眼重合視域為124度,單眼舒適視域為60度。所以在小角度視野下,畫面的重點會更加突出。
03 橫豎屏對內容生產的影響
大家平時看的電影和電視一般都是16:9的寬屏設計,是因為這種寬幅的視覺比例有利於利用景深鏡頭打造畫面的空間感,有利於通過前後景的融合營造更多想像空間,從而使故事內容更富有深意。
而要理解這種深意,觀眾往往需要投入很多精力,也就更加獲得更好的沉浸感。
如今短視頻時代,人們的耐心變得非常稀缺,更希望看到的內容簡單直接,這就要求短視頻製作要儘量前置主體,使傳達的信息更加明確、直接。
相比擅長沉浸感更強,需要更多思考的橫屏內容,豎屏視頻內容更能迎合這一要求,它能更多聚焦在主體人物本身,從而更適合以人為主體的直播等內容。
總結
橫屏和豎屏是我們日常見到的最普遍的一種交互形式了,因為見慣了,所以我們很多時候對這些設計會覺得理所當然,卻忽視了背後的設計邏輯。
為什麼短視頻會以豎屏居多,為什麼長視頻大多數都是橫屏展現,為什麼電視和電影的設計比例是寬屏而非豎屏等等。很多優秀的設計背後都是有原因的,沒有無緣無故的成功。
多一點思考,再小的點也有大的學問。
以上內容,就是彩雲關於橫豎屏設計問題的思考,不一定都對,大家參考看看,有不同見解,歡迎溝通討論。
#專欄作家#
本文原創發布於人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基於CC0協議