LCCNET 聯成電腦

m_nav_line m_nav_line

聯成電腦網站設計好文分享:57個Split Screen絕佳的網站設計

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、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

 

 

 

 

客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策