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