關注度UP！一次掌握這種大熱的網(wǎng)頁設計趨勢！

時間：2022-08-22 12:15:02 | 來源：網(wǎng)站運營

時間：2022-08-22 12:15:02 來源：網(wǎng)站運營

Split-screen Design，一個屏幕對半分，分隔開的每一邊都能各自獨立包含不同的元素，例如文本框，照片，插畫，按鈕，等等。這種網(wǎng)頁設計風格你一定見過了。

越來越多的網(wǎng)頁開始追逐這種熱潮，也許你也在考慮嘗試。

這篇文章幫你梳理，好的Split-screen Design應該怎么做。


為什么要分割屏幕？

• 更有效地將用戶的注意力集中到網(wǎng)頁的某一具體部分
  
  
• 設計師可以更大膽地嘗試撞色、對比元素
  
  
• 提供一種新鮮的瀏覽體驗的同時，能讓用戶更快地、自行作出選擇
  
  

分割屏幕不是簡單地制造一種視覺效果，它其實是一種基本的、引導用戶進入和使用網(wǎng)站的方式。


分屏設計的最基本目的是：


一個 屏 幕 ，傳 達 兩條 信 息


要注意的是，即使我們有意區(qū)分展示兩條不同的信息，但人眼會不由自主地在視線范圍內(nèi)的兩塊相鄰區(qū)域尋找視覺上的聯(lián)系，因此設計的時候也不要忽略這種視覺習慣。


既有大膽鮮明的沖撞，又不乏細微之處的呼應和聯(lián)結，會讓你的用戶感到新奇又愉快。




除此之外，還有這些重要的Tips：


1.


鮮 亮 的 顏 色 & 特 別 的 字 體

讓 它 們 在 一 起 ～


一對鮮亮的顏色總是很提神～而有趣大膽的字體能強調(diào)突出內(nèi)容，如果能把它們?nèi)谇⒌剡\用在一起，就能營造出簡單而又充滿吸引力的視覺畫面。


對配色不太自信？沒關系，Seeseed每日一粒Vol.09推薦過的ColorHunt里全是新鮮清亮的配色，剛好能用上 ?|?'-'?) ?


? http://www.colorhunt.co/



2.

Call To Action 的 絕 好 時 機 ！

用 設 計 抓 住 它！



分割屏幕的方式給了我們設計一個更大的CTA按鈕的自由。


將垂直分明的隔斷與留白的結合放入你的設計中，就能制造一個吸引關注的強烈聚焦區(qū)域！



3.

把 屏 幕 看 作 是 卡 片

牢記 'One Card，One Concept'



這種垂直分割屏幕的設計其實正是來源于“卡片式”設計風格，卡片式設計讓我們能夠更好地劃分內(nèi)容，讓多重的信息更規(guī)整清晰地呈現(xiàn)，重點就在于它遵循“一張卡片只包含一個主題”的原則。


優(yōu)秀的分屏設計同樣需要遵循這一點。你可以在劃分出來的區(qū)塊里放置多種元素（圖片，標題，文本，按鈕等），但這些元素最好都指向同一個主題。



基本的分屏設計用一個屏幕呈現(xiàn)兩條同等重要的信息，但分屏設計并非只能一分為二。在上面這個例子中，整個屏幕就被分成了三張“卡片”，獨立傳達不同的信息，同時在視覺上統(tǒng)一為一體，層次感清楚，簡潔又優(yōu)雅。



4.

用 你 的 設 計 為 視 線 “ 搭 橋 ”

讓 目 光 順 暢 地 流 動 起 來～



之前已經(jīng)提到過，我們的眼睛習慣在相鄰的區(qū)塊上尋找視覺聯(lián)系，順暢的瀏覽會讓我們感到舒服。為兩塊分割開的界面建立聯(lián)系，一方面能提升視覺體驗，更主要的是，更好地突出頁面信息的重點。



要做到這點，需要設計師用心于細節(jié)之處，不著痕跡地留下某種可以被視線所捕捉的路線，引導它最終落到整個頁面上最重要的那一點。?


比如，用顏色。




在上面這個頁面中，產(chǎn)品的紅色就是負責引導視線的“橋”。它讓我們的視線首先被左邊的大幅產(chǎn)品照片所吸引，之后就能自然地落在右邊的“預定”按鈕上。干凈利落?。


利用鮮明的撞色，引導視線從一半頁面轉向另一半。



除了顏色，也可以使用橫跨左右區(qū)域的元素，比如文字：



或者通過改變顏色透明度，進行覆蓋疊加，將左右兩個屏幕聯(lián)系起來：





5.

好 的 動 畫 總 能 增 添 魅 力

記 得 保 持 幽 默 和 克 制



有趣的動畫能提高用戶點擊的興趣，這一點同樣適用于分屏設計中。結合你的產(chǎn)品調(diào)性做一些簡單有意思的小動畫，讓人從第一眼就感到輕松愉快，Call to action才能水到渠成。



6.

最 后

你 的 網(wǎng) 站 真 的 適 合 用 分 屏 設 計 嗎 ...



不可否認，分屏設計是一種具有強烈的視覺效果和功能性的風格，運用得當?shù)脑?，它能讓你的網(wǎng)站非常出彩。


但它并非適用于所有網(wǎng)頁內(nèi)容。在決定對你的網(wǎng)頁進行分屏設計之前，最好先考慮：

• 我的內(nèi)容適合用分屏設計嗎，我的頁面能有足夠多的留白來體現(xiàn)分屏設計的價值嗎
  
  
• 我的目標用戶能夠理解和欣賞這種對比強烈的風格嗎，會不會讓他們摸不著頭腦？
  
  
• 我真的需要將用戶的注意力一分為二嗎？
  
  
  

最后的最后，內(nèi)容永遠是最重要的部分，分屏設計只是幫助我們傳達網(wǎng)頁內(nèi)容的一種方式。如果你相信它就是你的網(wǎng)頁所需要的，那就不要猶豫，大膽嘗試吧！