在UI設計中，確保內容的可用性和實用性是非常重要的。

如果內容呈現混亂、毫無邏輯，繼而影響用戶獲取資訊的效率，這將直接導致網站跳出率增加，連帶着網站SEO成效也受到影響。

Inspirr網頁製作表示，如果你已經厭倦一欄式設計，同時又想試試新的UI設計方式，不如考慮分屏式設計，這或許會讓你和用戶都感到耳目一新之感覺。

▌ 什麼是分屏式設計?

從字面意思來說，分屏式設計就是在介面中並排的兩欄呈現不同的信息，這兩邊的信息可以包含相同類型的元素，也可以呈現不同屬性的媒體內容，比如一邊是圖片，一邊是文字。

分屏式設計可以很好地滿足響應式網頁設計的要求，讓設計師能夠兼顧PC端和移動端的用戶體驗。此外，由於內容在佈局上更加自由，可以選擇拆分、合併、堆疊等方式展示，因此用戶能夠自主控制交互，選擇自己喜歡的內容和方式來操作。

總體而言，與其他UI設計方式相比，分屏式設計具有以下明顯的優點：

▪ 引起用戶對於特定區域的注意力

▪ 創作對比

▪ 非常規式的佈局

▌ 使用分屏式設計時需注意哪些事項?

當你將介面劃分為兩份時，這意味着兩個區域的內容重要性是相等的，因此你可以在這個介面中傳遞雙重重要的概念。

以下是使用分屏式設計需注意的幾點：

1.將介面不同區域視為一個卡片

本質上說，分屏式設計是從卡片式設計中延伸出來，因此在使用分屏式設計時，建議將介面中的不同區域視為一個「卡片」，而每個卡片都承載着一個交互和一條信息。

分屏式設計的排版佈局是自由的，因此它不僅可以劃分為左右/上下兩大塊內容，而且可以繼續往下細分，比如Stikwood網站將右側部分劃分為更小的區塊，為用戶提供更多的信息入口。

2.構建視覺關聯

雖然使用分屏式設計可以在其中呈現截然不同的媒體元素，但是這兩個信息容器之間必須是有關係或關聯的。要創建信息關聯的方法有很多，色彩是其中最常用的一種構建聯繫方式。

通過「共享」最顯眼的色彩，有助於讓不同容器的信息產生聯繫。如果這個關聯色彩正好是品牌色，效果更加明顯。

此外，讓某個元素(比如文本)橫跨兩個區域，使其成為兩個區塊的連接點，同樣增加這兩個區塊之間的關聯性。

3.添加吸引用戶注意力的元素

分屏式設計在視覺上可以很有張力，這也意味着你可以透過合理地運用留白來創造視覺焦點，使用戶的視線投放到特定的元素上。

同時，你也可以合理使用動效設計來吸引用戶的注意力，鼓勵他們主動與介面互動或者採取下一步交互操作。

總體而言，分屏式設計雖然可以很好地呈現不同的信息，並且能夠針對不同尺寸的設備進行響應，但這並不代表所有UI設計都適合用這種方式展示，因此考慮使用分屏式設計之前，建議先分析以下問題再決定：

• 分屏式設計是否和你的網站內容相匹配?是否有足夠的佈局進行分屏式設計?

• 你的目標用戶是否喜歡這種UI設計方式?

• 這種UI設計方式是否會分散用戶的注意力?