當(dāng)前位置：新聞中心網(wǎng)頁設(shè)計設(shè)計完美分屏首頁的4種方法

02-042010

觀點

網(wǎng)頁設(shè)計

設(shè)計完美分屏首頁的4種方法

2010-02-04 網(wǎng)頁設(shè)計

一屏分為兩屏。

分屏技術(shù)在電影界早已為人所知，最早的例子可以追溯到20世紀(jì)初的無聲電影，如今它仍然是電影和電視中的一種流行設(shè)備。

將全屏元素分為兩個或更多垂直部分時，將使用分屏布局。電影《斯科特朝圣者與世界》中的場景

但是，對于網(wǎng)頁設(shè)計行業(yè)來說，這是一種相對較新的技術(shù)。分屏技術(shù)直到2016年中才開始流行，現(xiàn)在我們越來越多的網(wǎng)站使用這種設(shè)計模式。這種設(shè)計模式如此受歡迎的原因有幾個：

它具有良好的美學(xué)品質(zhì)。正確執(zhí)行后，可以為用戶提供絕佳的觀看體驗。
對于響應(yīng)式框架而言，這是一個不錯的選擇。分屏設(shè)計可適用于各種屏幕，甚至很小的屏幕。對于較小的屏幕（例如移動顯示器），可以將面板堆疊在一起。
它有助于指導(dǎo)導(dǎo)航。使用簡單的設(shè)計技術(shù)，您可以將用戶的注意力吸引到屏幕的特定部分或鼓勵他們單擊。

分屏效果最佳時

當(dāng)您要宣傳兩件事時，分屏特別好。例如，當(dāng)一個站點提供兩個完全相反的變體時。這種方法使設(shè)計人員能夠同時突出這兩個方面，并允許用戶在它們之間快速選擇。

一屏，兩則消息在Dropbox指南中

什么時候應(yīng)該避免分屏

分屏設(shè)計不能隨著內(nèi)容的增長而很好地擴(kuò)展，因此不建議將其應(yīng)用于內(nèi)容豐富的布局。保持屏幕簡單很重要，因為復(fù)雜的拆分屏幕會使UI看起來信息過多。這就是為什么分屏布局非常適合簡約網(wǎng)站設(shè)計的原因。

如何確定分屏是否對您有利

如果您正在考慮為網(wǎng)站使用分屏技術(shù)，建議您問幾個問題：

是否適合您的內(nèi)容？
會有足夠的負(fù)空間來使布局正常工作嗎？
您的用戶會喜歡這種布局，還是會使他們感到困惑？
將用戶的注意力分成兩半可以嗎？

要記住的最重要的一點是，內(nèi)容為王，分屏應(yīng)該是將信息傳達(dá)給人們的一種簡單方法。

分屏設(shè)計技術(shù)

1.配對鮮艷的色彩和戲劇性的版式

得益于平面和材料設(shè)計，鮮艷的色彩和引人注目的版式成為當(dāng)今的大趨勢。鮮艷的色彩在視覺上令人興奮，而引人注目的印刷術(shù)則增強了文本內(nèi)容。只需將兩者結(jié)合即可，您將創(chuàng)建一個視覺上有趣的設(shè)計。Baesman熟練地做到了這一點。它們對這兩個元素給予同等的重視，同時允許用戶在它們之間快速選擇。

鮮艷的色彩和有趣的版式對可以增加興趣

2.吸引用戶注意CTA按鈕

將屏幕分為兩個不同的部分，不僅僅是簡單的圖形趨勢，它還提供了一種引導(dǎo)用戶瀏覽網(wǎng)站的原始方法。如果您想為號召性用語創(chuàng)建更大的焦點，這是一個不錯的選擇。在下面的示例中，您可以看到負(fù)空間如何創(chuàng)建垂直分隔線，以使兩個不同選項的權(quán)重相等。

縱向鴻溝允許重點放在兩個不同的CTA上，而不會偏向任何一個

3.在“屏幕”之間創(chuàng)建視覺流

當(dāng)分屏表示單個對象時，在內(nèi)容容器之間建立連接很重要。一種可行的方法是使用顏色。只需復(fù)制不同的顏色即可在兩個屏幕之間建立視覺流。這特別適用于具有很大對比度的品牌顏色或色相。使用顏色可以在兩個內(nèi)容之間傳達(dá)更牢固的聯(lián)系。

創(chuàng)建牢固連接的另一種可能方法是在單個元素上分層，例如跨屏幕的文本復(fù)制：

重疊的文字連接兩個屏幕

最后但并非最不重要的一點是，您可以為此使用彩色的覆蓋層：

考慮屏幕的左側(cè)

4.使用動畫鼓勵用戶行動

精美的動畫和互動效果鼓勵用戶點擊。在下面的“ Chekhov is Alive ”網(wǎng)站中查看設(shè)計。該設(shè)計要求您單擊以找到您的角色。

結(jié)論

高端網(wǎng)站設(shè)計大約需要三秒鐘來做出有關(guān)您的網(wǎng)站的決定。因此，如果您想降低跳出率，則您的布局應(yīng)始終易于訪問。分屏技術(shù)可以幫助您。分屏設(shè)計是一種有趣，實用且響應(yīng)迅速的方式，可以創(chuàng)建引人入勝的設(shè)計。

上一篇：網(wǎng)站設(shè)計用于會話UI的竅門返回觀點列表下一篇：設(shè)計 –在相互沖突的優(yōu)先順序之間做出最終決定

本文標(biāo)簽：

本文地址： http://www.bmwdream.cn/a/1023.html

相關(guān)專題

品牌官網(wǎng)設(shè)計
杭州派迪科技為高端客戶提供品牌官網(wǎng)咨詢策劃，品牌官網(wǎng)設(shè)計，品牌官網(wǎng)建設(shè)開發(fā)服務(wù)，以國際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端企業(yè)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情
大策略營銷門戶網(wǎng)站
杭州派迪科技有自己的營銷型網(wǎng)站CMS系統(tǒng)，適合白帽SEO網(wǎng)站。特別對大策略的營銷型門戶網(wǎng)站制作有一定的經(jīng)驗，曾經(jīng)為上海天擎外貿(mào)行業(yè)網(wǎng)站、浙江兆龍營銷型門戶、先臨三維門戶營銷網(wǎng)站提供全程的技術(shù)支持及SEO優(yōu)化指導(dǎo)
查看詳情
集團(tuán)/上市公司網(wǎng)站
杭州派迪科技為杭州本地集團(tuán)公司提供網(wǎng)頁設(shè)計、制作、開發(fā)服務(wù)，為集團(tuán)公司網(wǎng)站建設(shè)提供了響應(yīng)式、營銷型、品牌型、門戶型網(wǎng)站建設(shè)需求，歡迎廣大集團(tuán)公司客戶咨詢
查看詳情
外貿(mào)網(wǎng)站建設(shè)
杭州派迪科技為高端客戶提供外貿(mào)網(wǎng)站咨詢策劃，外貿(mào)官網(wǎng)設(shè)計，外貿(mào)官網(wǎng)建設(shè)開發(fā)服務(wù)，以谷歌搜索引起算法為基礎(chǔ)，為各行業(yè)外貿(mào)公司提供高端企業(yè)外貿(mào)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情
企業(yè)網(wǎng)站建設(shè)
高端專業(yè)、令人印象深刻的用戶界面、易于訪問——企業(yè)網(wǎng)站必須反映一切，因為派迪科技在這里提供幫助，憑借精湛的技術(shù)、豐富的經(jīng)驗、與客戶的持續(xù)溝通以及對每一個細(xì)節(jié)的關(guān)注，我們確保在快速的周期時間內(nèi)提供優(yōu)質(zhì)的服務(wù)。
查看詳情
半定制網(wǎng)站
杭州派迪科技模板網(wǎng)站建設(shè)專題_各行業(yè)方案專題欄目提供各行業(yè)產(chǎn)品適合的網(wǎng)站建設(shè)方案,幫助企業(yè)了解派迪科技建站效果等信息,您可以通過本站了解各行業(yè)網(wǎng)站建設(shè)方案,如需要獲取本行業(yè)定制網(wǎng)站建設(shè)方案,可以聯(lián)系在線客服或撥打電話咨詢
查看詳情

開始您的數(shù)字化品牌體驗！ 0571-85815193 期待您的來電！

[ 網(wǎng)站建設(shè)×品牌官網(wǎng)設(shè)計×大策略營銷門戶×微信小程序開發(fā)×微信公眾號開發(fā)]

即刻聯(lián)系電話咨詢

網(wǎng)站事業(yè)部產(chǎn)品經(jīng)理

免費獲取項目策劃

項目開發(fā)部產(chǎn)品經(jīng)理

免費獲取項目策劃

案例

網(wǎng)站建設(shè)

應(yīng)用開發(fā)

觀點

設(shè)計完美分屏首頁的4種方法

分屏效果最佳時

什么時候應(yīng)該避免分屏

如何確定分屏是否對您有利