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