具有分屏美學(xué)的網(wǎng)站設(shè)計(jì)是一種不斷發(fā)展和發(fā)展的趨勢(shì)。分屏設(shè)計(jì)可能有很多原因，包括移動(dòng)兼容性和用戶友好性。此外，許多這些設(shè)計(jì)看起來(lái)很棒！
趨勢(shì)的轉(zhuǎn)變表明，有許多不同的方法可以創(chuàng)建一個(gè)用戶喜歡的有效分屏設(shè)計(jì)?？紤]一下這是對(duì)新的和改進(jìn)時(shí)代的分屏設(shè)計(jì)的介紹！
分屏設(shè)計(jì)的好處
當(dāng)用戶需要立即看到兩個(gè)內(nèi)容時(shí)，它們運(yùn)行良好。
分屏設(shè)計(jì)越來(lái)越受歡迎，因?yàn)樗鼈兎浅Ｓ行?。?dāng)用戶需要立即看到兩個(gè)內(nèi)容時(shí)，它們運(yùn)行良好。同樣的想法適用于要求用戶做出選擇以繼續(xù)進(jìn)行的內(nèi)容，例如選擇內(nèi)容路徑。
設(shè)計(jì)師正在使用分屏設(shè)計(jì)，因?yàn)樗鼈兒苡行?。使用分屏設(shè)計(jì)的主要原因是：
鼓勵(lì)用戶做出選擇 - 選擇這個(gè)或那個(gè)
突出顯示垂直圖像
在桌面和移動(dòng)設(shè)備上創(chuàng)建共同體驗(yàn)
建立獨(dú)特的視覺(jué)流程
建立與其他設(shè)計(jì)技術(shù)和趨勢(shì)一致的設(shè)計(jì)模式
創(chuàng)建一個(gè)從眾多全屏英雄主頁(yè)中脫穎而出的視覺(jué)效果，或區(qū)分網(wǎng)站上的內(nèi)容類型
分屏設(shè)計(jì)的好處在于它們能夠很好地處理響應(yīng)式格式。您可以在移動(dòng)設(shè)備屏幕上獲得桌面和堆疊內(nèi)容的雙重內(nèi)容。無(wú)論設(shè)備如何，用戶都不會(huì)因?yàn)楦脑O(shè)備類型而錯(cuò)過(guò)任何設(shè)備。
“經(jīng)典”分屏設(shè)計(jì)
將分屏設(shè)計(jì)美學(xué)稱為“經(jīng)典”可能有點(diǎn)不久，但考慮到網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的移動(dòng)速度，這并非超出理由。
分屏設(shè)計(jì)是響應(yīng)式框架的理想選擇。在較大的屏幕上，設(shè)計(jì)是分開(kāi)的，但是當(dāng)涉及較小的屏幕時(shí)，面板可以堆疊。
在動(dòng)畫(huà)和效果方面很容易，可以根據(jù)提供的內(nèi)容鼓勵(lì)點(diǎn)擊。
兩個(gè)對(duì)稱的面板可以輕松地為整個(gè)站點(diǎn)設(shè)計(jì)創(chuàng)建模塊化輪廓，并組織塊內(nèi)的內(nèi)容。
不斷發(fā)展的分屏
有一種轉(zhuǎn)向更簡(jiǎn)約設(shè)計(jì)的分屏。
雖然第一個(gè)分屏設(shè)計(jì)相當(dāng)簡(jiǎn)單 - 而且是對(duì)稱的 - 但這不再是完整的故事了。設(shè)計(jì)人員仍在使用一些等權(quán)重分割，但也在不是屏幕中間的分割中工作。
一些具有更多的鋸齒形圖案，基于網(wǎng)格的分割（想想四分之三和四分之一的屏幕）并且分割具有不相等內(nèi)容權(quán)重的屏幕。還有一個(gè)轉(zhuǎn)向更少設(shè)計(jì)的分屏。
最初拆分屏幕往往有點(diǎn)重要，因?yàn)樗鼈冎荚谧層脩敉ㄟ^(guò)適當(dāng)?shù)膬?nèi)容頻道進(jìn)行旅程，內(nèi)容需要幫助他們到達(dá)目的地。現(xiàn)在，這種選擇正在精簡(jiǎn)甚至更多。（甚至有一些分屏設(shè)計(jì)使用視覺(jué)模式而沒(méi)有這個(gè)或那個(gè)選擇，例如上面的例子）。
具有多個(gè)點(diǎn)擊區(qū)域的分屏
分屏設(shè)計(jì)趨勢(shì)的最大變化之一是某些較新設(shè)計(jì)中存在多個(gè)點(diǎn)擊區(qū)域。最初分屏的每個(gè)屏幕有兩個(gè)CTA，這些分割通常包含其他信息 - 以及可點(diǎn)擊區(qū)域。
上面的示例顯示了具有強(qiáng)大圖像和消息傳遞與電子商務(wù)鏈接配對(duì)的分屏。它在桌面上看起來(lái)很棒 - 用大圖像吸引你，并在手機(jī)上疊加一個(gè)漂亮的，帶來(lái)更愉快的購(gòu)物體驗(yàn)。
不那么明顯的分屏
并非所有分屏設(shè)計(jì)都非常明顯。（考慮到這與用戶體驗(yàn)趨勢(shì)一樣多。）
在最小設(shè)計(jì)概要中，可以使用網(wǎng)格建立分屏，但沒(méi)有顏色或圖像，“屏幕”看起來(lái)像一個(gè)。上面的貓頭鷹工作室做得很好。在卷軸上方，它看起來(lái)像單屏幕設(shè)計(jì)，在滾動(dòng)下方和移動(dòng)設(shè)備上，分割變得更加明顯。
這種分屏設(shè)計(jì)非常漂亮，可在所有設(shè)備上使用。這正是您應(yīng)該嘗試通過(guò)此網(wǎng)站設(shè)計(jì)趨勢(shì)實(shí)現(xiàn)的目標(biāo)。
使用垂直分屏可以創(chuàng)建一些令人驚嘆的用戶體驗(yàn)，您應(yīng)該注意水平分割。這些可能會(huì)變得尷尬，并迅速變得有點(diǎn)亂！
大多數(shù)用戶希望所有設(shè)備都使用相同的網(wǎng)站。
上面的例子實(shí)際上是一個(gè)不錯(cuò)的網(wǎng)站，并使用分屏原則遠(yuǎn)低于滾動(dòng)，但前兩個(gè)“屏幕”不足。幾乎沒(méi)有太多的空白空間，也沒(méi)有足夠的信息來(lái)鼓勵(lì)滾動(dòng)，而且缺乏移動(dòng)用戶體驗(yàn)。這里的設(shè)計(jì)可以更好地使用垂直分屏，保持白色空間和CTA與旁邊的視頻。
水平分屏通常會(huì)使您的圖像具有不高的寬圖像區(qū)域。這是一種難以在移動(dòng)屏幕上工作的寬高比。雖然您可以使用可靠的計(jì)劃和不同的作物集合，但它可以帶來(lái)兩種不同的用戶體驗(yàn)。
大多數(shù)用戶希望所有設(shè)備都使用相同的網(wǎng)站。如果您計(jì)劃創(chuàng)建不同的體驗(yàn) - 即使只是圖像或文本 - 與您的團(tuán)隊(duì)進(jìn)行良好的對(duì)話，并確保這是項(xiàng)目的最佳設(shè)計(jì)選擇。
6我們喜歡的分屏設(shè)計(jì)
結(jié)論
你能看到需要用到的分屏設(shè)計(jì)嗎？如果內(nèi)容類型正確，這可能是一種非常有效的設(shè)計(jì)技術(shù)。并且有很多不同的方法可以使它發(fā)揮作用。祝你好運(yùn)！