相比一欄式的網(wǎng)頁布局，將全屏一分為二的設(shè)計常常會讓用戶覺得新穎有趣。網(wǎng)站首頁分為兩個垂直的信息塊是典型的分屏式設(shè)計。在網(wǎng)站中使用分屏式設(shè)計，不僅可以同時呈現(xiàn)兩項對等的內(nèi)容，給用戶提供充分的選擇權(quán)，還能夠以非常規(guī)式的布局引起用戶對于特定區(qū)域的注意力。另外，分屏式設(shè)計還可以與響應(yīng)式框架結(jié)合起來，同時適應(yīng)PC端和移動端。所以說，如果我們可以在網(wǎng)站中恰當?shù)氖褂眠@種設(shè)計趨勢，能夠給用戶展現(xiàn)奇妙的視覺效果，帶來良好的瀏覽體驗。
但是，如果我們的網(wǎng)站并不適合這種類型設(shè)計，或是網(wǎng)站的內(nèi)容安排不夠?qū)Φ?、沒有邏輯性，分屏式設(shè)計可能是一個冒險的決定，因為它會對網(wǎng)站產(chǎn)生負面的影響。怎樣才能做好分屏式設(shè)計?小飛今天就來分享一些分屏式設(shè)計的好栗子，順便探討一下分屏式設(shè)計的優(yōu)點，使用情景以及在使用過程中的注意事項?？靵硪黄鹂纯窗?
為什么使用分屏式設(shè)計?
分屏式設(shè)計其實是卡片式設(shè)計概念的一種延伸，一般情況下分屏式設(shè)計只有兩大信息塊(左右兩欄也可以往下細分)，可以用來呈現(xiàn)相同類型的元素，也能夠展示不同屬性的媒體內(nèi)容，比如圖片和文本。開篇小飛已經(jīng)介紹了不少分屏式設(shè)計的優(yōu)點，比如新鮮感，響應(yīng)式，良好的視覺效果等。除此以外，分屏設(shè)計還能與極簡主義網(wǎng)站組成"最佳拍檔"，這是因為極簡主義的負空間概念可以與垂直分割方式很好的結(jié)合在一起，能突出網(wǎng)站的亮點，給用戶留下深刻印象。
在網(wǎng)站中，分屏式設(shè)計尤其適合有兩個可選項的著陸頁，比如登錄和注冊頁面、付費訂閱和免費訂閱界面、顏色交替的兩種產(chǎn)品。事實上，分屏式設(shè)計的使用情景絕不僅限于這幾種，在不同的網(wǎng)站上它有著不同的應(yīng)用，因此它的優(yōu)勢也各有差異，主要還是取決于站長想要實現(xiàn)的目的。接下來就來看看下面這些分屏式設(shè)計的實例吧，看看這些網(wǎng)站是怎么成功發(fā)揮分屏式設(shè)計的最大效用。
分屏式設(shè)計的實例：
Cam Strobel
并不是所有網(wǎng)站都必須具備水平的導(dǎo)航菜單。Cam Strobel就是一個很好的栗子，將屏幕分成兩個垂直的信息欄，左邊一欄放置圖片、slogan和行為引導(dǎo)按鈕，右邊一欄使用迷你型的設(shè)計包含各種導(dǎo)航菜單。這樣的網(wǎng)站不僅足夠新穎，而且網(wǎng)站內(nèi)容都一目了然，用戶不需要進行任何頁面滾動就可以輕松找到想要的信息。是不是很方便?
Studio Meta
由于扁平化設(shè)計和Material design(Google推出的全新設(shè)計語言，旨在為各種設(shè)備提供更一致、更廣泛的外觀和感覺)在網(wǎng)站設(shè)計領(lǐng)域的風行，色彩和排版在當前設(shè)計中占據(jù)十分重要的位置。Studio Meta就很好的展現(xiàn)了這一點，有質(zhì)感的圖片滿足用戶視覺需求，有趣的排版讓文本可讀性更強，兩者的結(jié)合帶來了值得一看的設(shè)計。
雖然兩欄呈現(xiàn)截然不同的兩種元素(圖片和文本)，這兩個信息塊之間還是有著一定聯(lián)系的。在Studio Meta這個網(wǎng)站中，兩個信息塊之間的關(guān)聯(lián)是由色彩和文本一起實現(xiàn)的，共享"薄荷綠色"以及使用頂部的文本，讓兩個屏產(chǎn)生視覺流，保證網(wǎng)站整體的協(xié)調(diào)一致，讓用戶感到賞心悅目。通常，我們在做分屏式設(shè)計師可以只使用一個元素(色彩或文本)作為兩個區(qū)塊的連接點，如果色彩剛好是品牌的顏色，用來創(chuàng)造視覺聯(lián)系還有助于打響品牌的知名度。
Bose
分屏設(shè)計并不一定就是將屏幕五五分成兩欄，Bose將這種趨勢做到了極致。在Bose這個網(wǎng)站上，它使用不同的顏色展示不同產(chǎn)品的個性化特征，再加上獨特的對角線，實在太驚艷。不過這個網(wǎng)站有一個致命的缺點，那就是沒有考慮到響應(yīng)式的設(shè)計，這種設(shè)計在PC端很適合，但是如果在小屏幕設(shè)備上進行展示時，弊端就暴露出來了。不過除了這點以外，Bose在分屏式設(shè)計領(lǐng)域絕對獨樹一幟。
Fillet
Fillet也是不好好做分屏式設(shè)計的一個代表。與屏幕分為垂直的兩欄不同，F(xiàn)illet這個網(wǎng)站將全屏等分成3個信息區(qū)塊，每個區(qū)塊展現(xiàn)不同的藝術(shù)元素，簡單大方。不過與Bose網(wǎng)站相反的是，這3個垂直的信息卡片卻很適合移動設(shè)備，因為它在小屏幕上可以以上下堆疊的形式呈現(xiàn)出來。
Chekhov is Alive
在分屏式設(shè)計中我們不僅僅可以使用圖片和文字，還可以選擇使用動畫效果。動效在網(wǎng)站上的應(yīng)用越來越廣泛，Checkhov is Alive這個網(wǎng)站就是一個栗子，在網(wǎng)站上提供了不同的動畫特效的角色，以供用戶選擇。這不僅可以吸引用戶的注意力，還能夠在極大程度上鼓勵用戶與網(wǎng)站進行互動。
看完以上幾個栗子，如果你覺得分屏式設(shè)計很有趣，也想要在自己的網(wǎng)站上使用，下面這3個注意事項你可得看看。
分屏式設(shè)計的3個注意事項：
1.移動友好
分屏式設(shè)計確實存在一個明顯的缺點，那就是對移動設(shè)備不夠友好，特別是對于那些特立獨行、極具個性特點的網(wǎng)站，將屏幕分成大小不等的5個區(qū)塊的Bose就是一個栗子。但并不是所有創(chuàng)新性的分屏式設(shè)計都不能和響應(yīng)式很好的結(jié)合在一起，實例中的Fillet也是一個典型。因此，在進行分屏式設(shè)計時，考慮分屏設(shè)計是否適合小屏幕的設(shè)備，能否做到響應(yīng)式顯得尤為重要。這也意味著我們在做網(wǎng)站時需要多思考、多留心、掌握更多的編碼知識。
2.確認必要性
雖然分屏式設(shè)計是網(wǎng)站設(shè)計的流行趨勢，能讓網(wǎng)站看上去更加酷炫，但這并不能成為你使用它的原因。在做分屏式設(shè)計之前，我們應(yīng)該仔細分析自己的網(wǎng)站是否需要這種設(shè)計元素。問問自己：將分屏式設(shè)計優(yōu)化成響應(yīng)式是值得花功夫的嗎?用戶能夠敏銳欣賞的了這種設(shè)計風格嗎?網(wǎng)站上有足夠的空間用于分屏設(shè)計嗎?將用戶的注意力一分為二更適合你的網(wǎng)站嗎?如果你對這些的答案是否定的，最好還是不要采用這種設(shè)計。
3.充分利用負空間
還記得負空間嗎?在《2017年公司logo十大流行設(shè)計趨勢 》中，我們曾聊過負空間設(shè)計，負空間是物體之間的空間，在攝影中常用來表現(xiàn)孤立。而在分屏式設(shè)計中，從主視窗的角度來看，網(wǎng)站中的各項元素是偏于垂直的，元素之間是有距離的，這意味著我們可以結(jié)合負空間設(shè)計與垂直分欄方式，以更豐富的方式展現(xiàn)網(wǎng)站的內(nèi)容。趕緊充分發(fā)揮你的創(chuàng)造力吧!
分屏式設(shè)計十分有趣，而且功能很強大，不同運用方式可以讓分屏式設(shè)計發(fā)揮不同的作用。不過在緊跟網(wǎng)站設(shè)計潮流的同時，我們也不能盲目追隨，適合自己的才是最好的。而且，內(nèi)容為王，任何形式的應(yīng)用都要保證內(nèi)容的可讀性、移動性，在此基礎(chǔ)上在網(wǎng)站上發(fā)揮創(chuàng)意才是可取的。聽了這么多，還是快點行動嗎?來起飛頁自助建站平臺（）做一個響應(yīng)式網(wǎng)站，采用適合的設(shè)計趨勢，做出令人驚艷的效果吧!
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
