Godzilla. 2016-12-08
網(wǎng)站建設(shè)
優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)如何使用分屏布局？
拆分屏幕布局是分為兩個(gè)（或更多）相等垂直列的全屏Web組件。然而，盡管分屏布局是時(shí)尚，這是一個(gè)大膽的風(fēng)格決定，如果沒(méi)有一個(gè)合理的邏輯，可以傷害用戶(hù)體驗(yàn)。當(dāng)正確執(zhí)行它可以為用戶(hù)提供美妙的觀看體驗(yàn)。優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)如何使用分屏布局？
為什么要使用分屏布局？
分割屏幕組件在極簡(jiǎn)主義的網(wǎng)頁(yè)設(shè)計(jì)中效果最好，因?yàn)樨?fù)空間與粗體垂直分隔相結(jié)合，在重要區(qū)域增加了最高的重點(diǎn)。除了這些優(yōu)點(diǎn)之外，分屏布局的益處遠(yuǎn)遠(yuǎn)超出視覺(jué)美觀; 它們對(duì)于使用兩個(gè)并排可選選項(xiàng)來(lái)著陸網(wǎng)頁(yè)特別有效。
一些明顯的例子包括：
·登錄和注冊(cè)表單
·付費(fèi)和免費(fèi)訂閱
·交替顏色的產(chǎn)品
拆分屏幕組件的很好示例
首先，讓我們看看一些了不起的例子，并討論為什么他們的工作這么好的用例。 拆分屏幕布局可以以許多不同的方式使用，因此各個(gè)站點(diǎn)之間的優(yōu)勢(shì)各不相同，這取決于網(wǎng)站要實(shí)現(xiàn)的目標(biāo)。
Cam Strobel
并非每個(gè)網(wǎng)站設(shè)計(jì)都需要訪(fǎng)問(wèn)整個(gè)水平視口。 使用超小的設(shè)計(jì)，如Cam Strobel的網(wǎng)站，將屏幕分成兩個(gè)垂直列意味著所有的內(nèi)容可以在折疊，完全不需要用戶(hù)滾動(dòng)。
Studio meta
全寬“大標(biāo)題”設(shè)計(jì)仍然很常見(jiàn) - 這是一個(gè)巨大的趨勢(shì)，然而，很少有機(jī)會(huì)使用大膽的圖像，由于缺乏文本可讀性（我們通常需要模糊的圖像顏色疊加）。 拆分屏幕布局解決了這一點(diǎn)，Studio meta向我們展示這種效果。通過(guò)使圖像和內(nèi)容并排，我們可以使用更加豐富多彩，更勇敢，更深刻的意義的圖像，因?yàn)槲覀儾槐匾匀魏畏绞秸诒螆D像。
Bose
分割屏幕不必由兩個(gè)50個(gè)組件組成 - Bose使這一趨勢(shì)達(dá)到極限，該網(wǎng)站甚至沒(méi)有嘗試適應(yīng)較小的屏幕。 無(wú)論這個(gè)外觀多么漂亮，響應(yīng)式設(shè)計(jì)是你必須考慮的事情，可能很難適應(yīng)分屏布局到更小的設(shè)備。除此之外，這是我最喜歡的分屏示例，因?yàn)椴季衷试SBose通過(guò)使用不同的顏色顯示具有獨(dú)特個(gè)性。 結(jié)合前衛(wèi)的對(duì)角形狀，這個(gè)網(wǎng)站真的抓住了我的眼睛。
設(shè)計(jì)分屏布局時(shí)需要注意的事項(xiàng)
如果您正在考慮為您的網(wǎng)站使用分屏組件，那么在設(shè)計(jì)時(shí)應(yīng)當(dāng)牢記這三個(gè)提示。
·移動(dòng)友好
拆分屏幕組件確實(shí)有一個(gè)優(yōu)點(diǎn)：它們不太適合移動(dòng)設(shè)備。很難讓他們做出響應(yīng)并適應(yīng)更小的屏幕，你幾乎肯定不得不縮小到更溫和的東西，可能需要比平常更多的代碼，所以請(qǐng)確保你采取移動(dòng)優(yōu)先的方法。
·沒(méi)有好的原因，不分割屏幕
你應(yīng)該首先考慮你的網(wǎng)站是否需要一個(gè)分屏組件。當(dāng)然，它是'趨勢(shì)'，它看起來(lái)很酷，但單是沒(méi)有足夠的理由還是不要輕易嘗試它。
·是否值得額外的工作使組件響應(yīng)？
你的用戶(hù)有足夠的趨勢(shì)意識(shí)來(lái)欣賞布局，還是會(huì)混淆它們？是否有足夠的負(fù)空間使布局工作？你是否有可能將你的用戶(hù)的注意力分成兩半，更單一的焦點(diǎn)會(huì)是一個(gè)更好的結(jié)果嗎？如果任何這些答案是否定的，那么你應(yīng)該投票反對(duì)這個(gè)想法。
利用負(fù)空間
桌面網(wǎng)站水平顯示，但是當(dāng)使用分屏布局時(shí)，每個(gè)組件在主視口中成為一種垂直視口。因此，有更多的機(jī)會(huì)來(lái)探索顯示內(nèi)容的新方法。 這絕對(duì)是一個(gè)有創(chuàng)意的機(jī)會(huì)，所以堅(jiān)持你的創(chuàng)意上限！摩恩網(wǎng)絡(luò)，專(zhuān)業(yè)網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、logo設(shè)計(jì)、品牌設(shè)計(jì)、印刷、APP/微信開(kāi)發(fā)等產(chǎn)品服務(wù)，新上線(xiàn)企業(yè)VI設(shè)計(jì)套餐和網(wǎng)站營(yíng)銷(xiāo)推廣系統(tǒng)（強(qiáng)），歡迎新老顧客前來(lái)咨詢(xún)！
結(jié)論
分割屏幕布局是有吸引力的，正如我們從示例中看到的，趨勢(shì)的好處取決于網(wǎng)站的設(shè)置實(shí)現(xiàn); 它們可以用于為每個(gè)列定義不同的標(biāo)識(shí)，或者它們可以用于更簡(jiǎn)單的原因：將最小網(wǎng)站中的所有內(nèi)容保留在不需要視口的整個(gè)寬度的最小網(wǎng)站上。如果你以前沒(méi)有嘗試設(shè)計(jì)分屏布局，什么誘使你現(xiàn)在嘗試？ 它是視覺(jué)美學(xué)，還是試驗(yàn)新方法來(lái)顯示內(nèi)容的機(jī)會(huì)？歡迎評(píng)論！
文章標(biāo)簽：
分屏布局
Godzilla 簽
為了在編輯、圖象設(shè)計(jì)方面進(jìn)一步的提高，我想投身于網(wǎng)站行業(yè)中，一展所長(zhǎng)，為所在的公司和社會(huì)貢獻(xiàn)一分力量!
文章評(píng)論：