zoom教室下載
文、G小編
當您面臨設計的網站有很多重點需要呈現時，分割畫面(Split Screen)的設計反而更能贏得更多的好感。
雖然視覺呈現可能比較新穎，但如果沒有正確執行分割畫面(Split Screen)設計，反而會降低使用者體驗。這種大膽的風格選擇需要經過深思熟慮的思考，才能為使用者提供更清楚明確，且使用更符合直覺的設計，否則可能會造成使用者有混亂的感覺。
分割畫面(Split Screen)設計的優點：
• 透過視覺引導和吸引使用者目光
• 使用大膽且對比的呈現方式，來提升個別的內容
• 提供了一個非常規的規格模式和網站使用體驗
分割畫面(Split Screen)還能幫助使用者用更少的點擊次數，更快地找到他們所尋找的方式、流程與目標。這樣的呈現在傳遞您的產品、服務或部分的網站內容都有很棒的雙重性。
分割畫面(Split Screen)的關鍵要素：
• 鮮豔的色彩和對比度的運用
• 清楚明確的排版設計
• 留白的運用
• 巧妙的轉場或互動元素
一起來看看這些令人驚艷的分割畫面(Split Screen)設計吧！
Captico
它看起來並不像Captico的登入頁面，但根據設計師Divan Raj的Dribbble Shots，它將成為一個令人驚艷的網站。在這裡，分割畫面(Split Screen)讓逗弄新產品發布和取得電子郵件變得合理。
Until We All Belong
透過出色的設計，三個步驟變得簡單：觀看1分鐘影片、訂購戒指，並分享您的認可。Airbnb在澳洲創建了這個網站以支持婚姻平權。
Danielle LaPorte
Dribbble網址
設計師MK Cook和她的團隊Telepathy透過切換的設計改善了最暢銷作家Danielle LaPorte的網站首頁。“我們重新設計她的網站，注重於她的寫作以及她不斷發展的商店，”Cook如此說明。
Engine Themes
Engine Themes的首頁運用一種搶眼、採雙色分割設計，為頁面內容更加清楚明確。在中心logo中使用巧妙的動畫，可以快速傳達他們的產品和服務的熱度。
Bose
Bose超越了兩種分割方式，採用包含5個產品區域。當您將滑鼠停留在產品上時，動態動畫是提供良好體驗的關鍵。良好的色彩運用將重點放在產品上並傳達他們的個性。
Adidas
Adidas的全球網站使用微妙的分割畫面(Split Screen)設計來區分產品或款式。這裡他們選擇的照片結構可以很棒的融合在他們的黑白品牌中，而不是高對比度的彩色背景。分割畫面(Split Screen)設計使得選擇自己的風格比操作上面的導覽選單更容易。
Kyle McConnell
設計師Kyle McConnell向我們展示了分割畫面(Split Screen)的簡歷網站是如何完成的，全螢幕圖像更增添了色彩和活力，而左側的內容文字有適當的留白，使得更容易閱讀。
Queen’s Wharf Project
您需要呈現大量的照片和數字，並傳達很多資訊嗎？Natalie Harper設計的這種分割畫面(Split Screen)滿足了這個需求。這個設計壓縮左欄選單，當您的滑鼠在滾動時為正文內容和圖像節省了空間。這裡有大量的資訊，但它並不會讓您感到壓迫。
接著，再繼續看看其他很棒的分割畫面(Split Screen)設計範例，喜歡的就存下來收藏吧！
Hello Monday
Studio Meta
F L P L N Y
Matthew Hall
Studio Meta
Ocean Resort Residences
Roman Kirichik
Huncwot
Angel Martínez
Fillet
Joris Delacroix
Benchmark
Madame de
Renate Rechner
Res.im
Lauren Wickware
O3
Cyclebycycle
Yufuku
La Grande Evasion
Marcin Dmoch Portfolio
Nicolas Bussière
Galvan Mobili
Oberon – WordPress Theme
Split fold Design for blog
Cocolabs
Duotone
Split Design
Hue Inhaler Website Concept
Endoestri
Watch preview
Task Manager Concept – Sign Up
Zero Video Transition
New Fifty & Fifty Site
Fellow – Watches Store
Split screen with Call to action
Fruityking
Pong — User Centered Design
Jon Carlson — Creative Portfolio
Back to Basics — Part 1
Mf Shop Item Page
Creative.Design
Product Page for Fashion Store
Adega Machado Restaurant Menu
Menu Steez
50 Shades Darker
Article Layout Experiment
Homepage
Agency Comp
看完這麼多精彩的設計作品，是不是有為你帶來許多靈感呢？下次不妨思考看看不同的網站呈現，是否能更突顯公司或是個的好。
文章來源：
DIVIDE AND CONQUER: EXAMPLES OF BEAUTIFUL SPLIT-SCREEN LAYOUTS
10 Beautifully Designed Examples of Split Screen Layouts in Web Design
20 Examples of Vertical Split-Screen Layout in Web Design
24 Examples Of Split-Screen Layout In Web Design
50 Interesting Split Screen UI Designs
