域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

相比一欄式的網(wǎng)頁(yè)布局，將全屏一分為二的設(shè)計(jì)常常會(huì)讓用戶(hù)覺(jué)得新穎有趣。網(wǎng)站首頁(yè)分為兩個(gè)垂直的信息塊是典型的分屏式設(shè)計(jì)。在網(wǎng)站中使用分屏式設(shè)計(jì)，不僅可以同時(shí)呈現(xiàn)兩項(xiàng)對(duì)等的內(nèi)容，給用戶(hù)提供充分的選擇權(quán)，還能夠以非常規(guī)式的布局引起用戶(hù)對(duì)于特定區(qū)域的注意力。另外，分屏式設(shè)計(jì)還可以與響應(yīng)式框架結(jié)合起來(lái)，同時(shí)適應(yīng)PC端和移動(dòng)端。所以說(shuō)，如果我們可以在網(wǎng)站中恰當(dāng)?shù)氖褂眠@種設(shè)計(jì)趨勢(shì)，能夠給用戶(hù)展現(xiàn)奇妙的視覺(jué)效果，帶來(lái)良好的瀏覽體驗(yàn)。

但是，如果我們的網(wǎng)站并不適合這種類(lèi)型設(shè)計(jì)，或是網(wǎng)站的內(nèi)容安排不夠?qū)Φ取](méi)有邏輯性，分屏式設(shè)計(jì)可能是一個(gè)冒險(xiǎn)的決定，因?yàn)樗鼤?huì)對(duì)網(wǎng)站產(chǎn)生負(fù)面的影響。怎樣才能做好分屏式設(shè)計(jì)?小飛今天就來(lái)分享一些分屏式設(shè)計(jì)的好栗子，順便探討一下分屏式設(shè)計(jì)的優(yōu)點(diǎn)，使用情景以及在使用過(guò)程中的注意事項(xiàng)?？靵?lái)一起看看吧!

為什么使用分屏式設(shè)計(jì)?

分屏式設(shè)計(jì)其實(shí)是卡片式設(shè)計(jì)概念的一種延伸，一般情況下分屏式設(shè)計(jì)只有兩大信息塊(左右兩欄也可以往下細(xì)分)，可以用來(lái)呈現(xiàn)相同類(lèi)型的元素，也能夠展示不同屬性的媒體內(nèi)容，比如圖片和文本。開(kāi)篇小飛已經(jīng)介紹了不少分屏式設(shè)計(jì)的優(yōu)點(diǎn)，比如新鮮感，響應(yīng)式，良好的視覺(jué)效果等。除此以外，分屏設(shè)計(jì)還能與極簡(jiǎn)主義網(wǎng)站組成"最佳拍檔"，這是因?yàn)闃O簡(jiǎn)主義的負(fù)空間概念可以與垂直分割方式很好的結(jié)合在一起，能突出網(wǎng)站的亮點(diǎn)，給用戶(hù)留下深刻印象。

在網(wǎng)站中，分屏式設(shè)計(jì)尤其適合有兩個(gè)可選項(xiàng)的著陸頁(yè)，比如登錄和注冊(cè)頁(yè)面、付費(fèi)訂閱和免費(fèi)訂閱界面、顏色交替的兩種產(chǎn)品。事實(shí)上，分屏式設(shè)計(jì)的使用情景絕不僅限于這幾種，在不同的網(wǎng)站上它有著不同的應(yīng)用，因此它的優(yōu)勢(shì)也各有差異，主要還是取決于站長(zhǎng)想要實(shí)現(xiàn)的目的。接下來(lái)就來(lái)看看下面這些分屏式設(shè)計(jì)的實(shí)例吧，看看這些網(wǎng)站是怎么成功發(fā)揮分屏式設(shè)計(jì)的最大效用。

分屏式設(shè)計(jì)的實(shí)例：

Cam Strobel

并不是所有網(wǎng)站都必須具備水平的導(dǎo)航菜單。Cam Strobel就是一個(gè)很好的栗子，將屏幕分成兩個(gè)垂直的信息欄，左邊一欄放置圖片、slogan和行為引導(dǎo)按鈕，右邊一欄使用迷你型的設(shè)計(jì)包含各種導(dǎo)航菜單。這樣的網(wǎng)站不僅足夠新穎，而且網(wǎng)站內(nèi)容都一目了然，用戶(hù)不需要進(jìn)行任何頁(yè)面滾動(dòng)就可以輕松找到想要的信息。是不是很方便?

Studio Meta

由于扁平化設(shè)計(jì)和Material design(Google推出的全新設(shè)計(jì)語(yǔ)言，旨在為各種設(shè)備提供更一致、更廣泛的外觀和感覺(jué))在網(wǎng)站設(shè)計(jì)領(lǐng)域的風(fēng)行，色彩和排版在當(dāng)前設(shè)計(jì)中占據(jù)十分重要的位置。Studio Meta就很好的展現(xiàn)了這一點(diǎn)，有質(zhì)感的圖片滿(mǎn)足用戶(hù)視覺(jué)需求，有趣的排版讓文本可讀性更強(qiáng)，兩者的結(jié)合帶來(lái)了值得一看的設(shè)計(jì)。

雖然兩欄呈現(xiàn)截然不同的兩種元素(圖片和文本)，這兩個(gè)信息塊之間還是有著一定聯(lián)系的。在Studio Meta這個(gè)網(wǎng)站中，兩個(gè)信息塊之間的關(guān)聯(lián)是由色彩和文本一起實(shí)現(xiàn)的，共享"薄荷綠色"以及使用頂部的文本，讓兩個(gè)屏產(chǎn)生視覺(jué)流，保證網(wǎng)站整體的協(xié)調(diào)一致，讓用戶(hù)感到賞心悅目。通常，我們?cè)谧龇制潦皆O(shè)計(jì)師可以只使用一個(gè)元素(色彩或文本)作為兩個(gè)區(qū)塊的連接點(diǎn)，如果色彩剛好是品牌的顏色，用來(lái)創(chuàng)造視覺(jué)聯(lián)系還有助于打響品牌的知名度。

Bose

分屏設(shè)計(jì)并不一定就是將屏幕五五分成兩欄，Bose將這種趨勢(shì)做到了極致。在Bose這個(gè)網(wǎng)站上，它使用不同的顏色展示不同產(chǎn)品的個(gè)性化特征，再加上獨(dú)特的對(duì)角線，實(shí)在太驚艷。不過(guò)這個(gè)網(wǎng)站有一個(gè)致命的缺點(diǎn)，那就是沒(méi)有考慮到響應(yīng)式的設(shè)計(jì)，這種設(shè)計(jì)在PC端很適合，但是如果在小屏幕設(shè)備上進(jìn)行展示時(shí)，弊端就暴露出來(lái)了。不過(guò)除了這點(diǎn)以外，Bose在分屏式設(shè)計(jì)領(lǐng)域絕對(duì)獨(dú)樹(shù)一幟。

Fillet

Fillet也是不好好做分屏式設(shè)計(jì)的一個(gè)代表。與屏幕分為垂直的兩欄不同，F(xiàn)illet這個(gè)網(wǎng)站將全屏等分成3個(gè)信息區(qū)塊，每個(gè)區(qū)塊展現(xiàn)不同的藝術(shù)元素，簡(jiǎn)單大方。不過(guò)與Bose網(wǎng)站相反的是，這3個(gè)垂直的信息卡片卻很適合移動(dòng)設(shè)備，因?yàn)樗谛∑聊簧峡梢砸陨舷露询B的形式呈現(xiàn)出來(lái)。

Chekhov is Alive

在分屏式設(shè)計(jì)中我們不僅僅可以使用圖片和文字，還可以選擇使用動(dòng)畫(huà)效果。動(dòng)效在網(wǎng)站上的應(yīng)用越來(lái)越廣泛，Checkhov is Alive這個(gè)網(wǎng)站就是一個(gè)栗子，在網(wǎng)站上提供了不同的動(dòng)畫(huà)特效的角色，以供用戶(hù)選擇。這不僅可以吸引用戶(hù)的注意力，還能夠在極大程度上鼓勵(lì)用戶(hù)與網(wǎng)站進(jìn)行互動(dòng)。

看完以上幾個(gè)栗子，如果你覺(jué)得分屏式設(shè)計(jì)很有趣，也想要在自己的網(wǎng)站上使用，下面這3個(gè)注意事項(xiàng)你可得看看。

分屏式設(shè)計(jì)的3個(gè)注意事項(xiàng)：

1.移動(dòng)友好

分屏式設(shè)計(jì)確實(shí)存在一個(gè)明顯的缺點(diǎn)，那就是對(duì)移動(dòng)設(shè)備不夠友好，特別是對(duì)于那些特立獨(dú)行、極具個(gè)性特點(diǎn)的網(wǎng)站，將屏幕分成大小不等的5個(gè)區(qū)塊的Bose就是一個(gè)栗子。但并不是所有創(chuàng)新性的分屏式設(shè)計(jì)都不能和響應(yīng)式很好的結(jié)合在一起，實(shí)例中的Fillet也是一個(gè)典型。因此，在進(jìn)行分屏式設(shè)計(jì)時(shí)，考慮分屏設(shè)計(jì)是否適合小屏幕的設(shè)備，能否做到響應(yīng)式顯得尤為重要。這也意味著我們?cè)谧鼍W(wǎng)站時(shí)需要多思考、多留心、掌握更多的編碼知識(shí)。

2.確認(rèn)必要性

雖然分屏式設(shè)計(jì)是網(wǎng)站設(shè)計(jì)的流行趨勢(shì)，能讓網(wǎng)站看上去更加酷炫，但這并不能成為你使用它的原因。在做分屏式設(shè)計(jì)之前，我們應(yīng)該仔細(xì)分析自己的網(wǎng)站是否需要這種設(shè)計(jì)元素。問(wèn)問(wèn)自己：將分屏式設(shè)計(jì)優(yōu)化成響應(yīng)式是值得花功夫的嗎?用戶(hù)能夠敏銳欣賞的了這種設(shè)計(jì)風(fēng)格嗎?網(wǎng)站上有足夠的空間用于分屏設(shè)計(jì)嗎?將用戶(hù)的注意力一分為二更適合你的網(wǎng)站嗎?如果你對(duì)這些的答案是否定的，最好還是不要采用這種設(shè)計(jì)。

3.充分利用負(fù)空間

還記得負(fù)空間嗎?在《2017年公司logo十大流行設(shè)計(jì)趨勢(shì) 》中，我們?cè)倪^(guò)負(fù)空間設(shè)計(jì)，負(fù)空間是物體之間的空間，在攝影中常用來(lái)表現(xiàn)孤立。而在分屏式設(shè)計(jì)中，從主視窗的角度來(lái)看，網(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ā)揮不同的作用。不過(guò)在緊跟網(wǎng)站設(shè)計(jì)潮流的同時(shí)，我們也不能盲目追隨，適合自己的才是最好的。而且，內(nèi)容為王，任何形式的應(yīng)用都要保證內(nèi)容的可讀性、移動(dòng)性，在此基礎(chǔ)上在網(wǎng)站上發(fā)揮創(chuàng)意才是可取的。聽(tīng)了這么多，還是快點(diǎn)行動(dòng)嗎?來(lái)起飛頁(yè)自助建站平臺(tái)（）做一個(gè)響應(yīng)式網(wǎng)站，采用適合的設(shè)計(jì)趨勢(shì)，做出令人驚艷的效果吧!

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！