分享一篇Nick babich的2月25日的新文,原文點擊此處,翻譯不當之處請指出。
越來越多的網站使用的設計模式:將一個屏幕分成兩部分,包括并列放置兩個垂直面板。分割屏幕設計遵循了一些簡單規則:
一個屏幕,兩部分信息。
每個部分都以單獨包含的元素為特征,如照片、文本域或插圖。
分屏不僅僅是一個簡單的圖解趨勢,而是一個原始的方法向用戶提供了兩種不同的路徑來引導用戶進入您的網站。仔細一看,你會發現以下優點:
- 吸引用戶對特殊部分的關注。
- 顯示了強烈的對比。
- 提供了一種非常規的格式。
這也是一個很好的選擇響應框架。這種布局特別適合于大屏幕或平板電腦上的導航,也可以用于移動設備:當他變成較小的屏幕,面板可以堆疊。
分屏的好處在于,幾乎所有的設計組合都會成為可能。在這篇文章中,你會找到如何充分利用這種設計趨勢的方法。
分屏設計內容的最佳選擇
當你使用分屏布局作為你的設計方案,你可以給予這兩個元素同等的重要性,同時,允許用戶在他們之間迅速做出選擇。這意味著你可以輕松地傳達出其雙重重要性。更重要的是能讓用戶明白這兩個成對的元素之間的視覺連接。所以你應該將其視為一對“陰”“陽”概念來運用。
成對的充滿活力的顏色以及醒目的排版
得益于平面和材質設計的增強,顏色和字體是現在的大趨勢。充滿活力的色彩視覺刺激和醒目的排版提升了文本內容。結合這兩點,你最終可以落實于有趣的視覺設計。
吸引用戶注意到動作按鈕
分屏是設計一個視覺主題時是很好的選擇,可以創建一個更大的焦點來引發更多用戶行為。周圍的反襯空間(negative space)與醒目的垂直分割相結合,增強了對重點或關鍵元素的最大的注意力。
將屏幕視為卡片
分屏設計是來源于流行的卡片式設計的一種模式。遵循這一趨勢的網站基于卡片式設計的概念:屏幕基本上只是超大的卡片,每一屏就是一個容器,包含一組信息和一個用戶行為。
堆疊模式可能會有所不同。例如,在Stikwood的設計中,下圖例中就是以劃分為更小部分為特征的,這樣給更多用戶提供了進入的“點”。
提醒:(雖然堆疊可以用,但還是需要)保持你的屏幕簡單,因為復雜的分屏會使界面UI看起來凌亂。
在“屏幕”之間創建視覺流
雖然分屏設計模式可以給你留下明顯不同的元素,但內容之間必須有連接。建立連接的一種可能的方法是通過顏色。復制一個獨特的顏色,建立視覺流從一個“屏”到另一個。這被很好地運用于一個品牌的顏色或色調通過一系列的對比來進行強調:
另一種實現技術是在屏幕上分層單個元素(例如:文本樣式的復制)。這個元素可以提升額外的凝聚力:
還有,你可以使用一個彩色的疊加:
使用動畫,鼓勵用戶采取行動
優良的動畫和交互效果會鼓勵用戶點擊。看下圖中“Chekhow is Alive”網站的設計用。它會使你點擊,找到你的角色。
總結
分屏設計是一種有趣的、功能性強的和響應的方式來創建的引人入勝的設計。然而,當涉及到內容,拆分布局可能是艱難的。如果你正在考慮為你的網站分屏,我建議你問自己這幾個問題:
- 它適合你的內容嗎?會有足夠的反襯空間(negative space)使其布局嗎?
- 你的用戶會欣賞這一布局還是會混淆他們呢(你分開的內容是不是清晰的)?
- 你的劃分方式把用戶的注意力分成一半可以嗎?成功了嗎?
請記住,內容為王和分屏應該一種將你的信息傳遞給人們的簡單的方式(而不是讓用戶更難分別的)。
以上,感謝閱讀!與君共勉!