用戶體驗設計:分屏設計的最佳實踐

分享一篇Nick babich的2月25日的新文,原文點擊此處,翻譯不當之處請指出。


分屏設計

越來越多的網站使用的設計模式:將一個屏幕分成兩部分,包括并列放置兩個垂直面板。分割屏幕設計遵循了一些簡單規則:

一個屏幕,兩部分信息。

每個部分都以單獨包含的元素為特征,如照片、文本域或插圖。

當你有兩件事要跟進,分屏尤其好用。這種方法可以讓你突出兩者的區別,并使用戶快速從他們之間做出選擇。

分屏不僅僅是一個簡單的圖解趨勢,而是一個原始的方法向用戶提供了兩種不同的路徑來引導用戶進入您的網站。仔細一看,你會發現以下優點:

  • 吸引用戶對特殊部分的關注。
  • 顯示了強烈的對比。
  • 提供了一種非常規的格式。

這也是一個很好的選擇響應框架。這種布局特別適合于大屏幕或平板電腦上的導航,也可以用于移動設備:當他變成較小的屏幕,面板可以堆疊。

分屏的好處在于,幾乎所有的設計組合都會成為可能。在這篇文章中,你會找到如何充分利用這種設計趨勢的方法。

分屏設計內容的最佳選擇

當你使用分屏布局作為你的設計方案,你可以給予這兩個元素同等的重要性,同時,允許用戶在他們之間迅速做出選擇。這意味著你可以輕松地傳達出其雙重重要性。更重要的是能讓用戶明白這兩個成對的元素之間的視覺連接。所以你應該將其視為一對“陰”“陽”概念來運用。

成對的充滿活力的顏色以及醒目的排版

得益于平面和材質設計的增強,顏色和字體是現在的大趨勢。充滿活力的色彩視覺刺激和醒目的排版提升了文本內容。結合這兩點,你最終可以落實于有趣的視覺設計。

明亮的顏色和有趣的排版對可以增加趣味性。圖片引用來自Baesman
一個強大的彩色圖像和內容并排的組合。

吸引用戶注意到動作按鈕

分屏是設計一個視覺主題時是很好的選擇,可以創建一個更大的焦點來引發更多用戶行為。周圍的反襯空間(negative space)與醒目的垂直分割相結合,增強了對重點或關鍵元素的最大的注意力。

設計有助于吸引用戶對于左屏的注意力。

將屏幕視為卡片

分屏設計是來源于流行的卡片式設計的一種模式。遵循這一趨勢的網站基于卡片式設計的概念:屏幕基本上只是超大的卡片,每一屏就是一個容器,包含一組信息和一個用戶行為。

在Si Le solei的設計中,左邊的面板就是一張“卡片”在右面板包含一對“卡片”。

堆疊模式可能會有所不同。例如,在Stikwood的設計中,下圖例中就是以劃分為更小部分為特征的,這樣給更多用戶提供了進入的“點”。

可以考慮使用馬賽克或磚塊這樣的堆疊元素模式。

提醒:(雖然堆疊可以用,但還是需要)保持你的屏幕簡單,因為復雜的分屏會使界面UI看起來凌亂。

在“屏幕”之間創建視覺流

雖然分屏設計模式可以給你留下明顯不同的元素,但內容之間必須有連接。建立連接的一種可能的方法是通過顏色。復制一個獨特的顏色,建立視覺流從一個“屏”到另一個。這被很好地運用于一個品牌的顏色或色調通過一系列的對比來進行強調:


bump復制了品牌的一個顏色,建立一個視覺流從產品左到預購右屏。
Marka復制了一個高對比度的顏色,建立了從一個屏幕到另一個屏幕的視覺流程。

另一種實現技術是在屏幕上分層單個元素(例如:文本樣式的復制)。這個元素可以提升額外的凝聚力:

分屏元素同樣可以重疊。圖像引用來自Sewage Free Seas

還有,你可以使用一個彩色的疊加:


在Nathan Riley網站中,右屏被設計為左屏的延續。

使用動畫,鼓勵用戶采取行動

優良的動畫和交互效果會鼓勵用戶點擊。看下圖中“Chekhow is Alive”網站的設計用。它會使你點擊,找到你的角色。


圖像引用來自Google

總結

分屏設計是一種有趣的、功能性強的和響應的方式來創建的引人入勝的設計。然而,當涉及到內容,拆分布局可能是艱難的。如果你正在考慮為你的網站分屏,我建議你問自己這幾個問題:

  1. 它適合你的內容嗎?會有足夠的反襯空間(negative space)使其布局嗎?
  2. 你的用戶會欣賞這一布局還是會混淆他們呢(你分開的內容是不是清晰的)?
  3. 你的劃分方式把用戶的注意力分成一半可以嗎?成功了嗎?

請記住,內容為王和分屏應該一種將你的信息傳遞給人們的簡單的方式(而不是讓用戶更難分別的)。

以上,感謝閱讀!與君共勉!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,283評論 25 708
  • 圖文|十二匕千八頁 柞水游記 鳳凰,亦作“鳳皇”,古代傳說中的百鳥之王。雄的叫“鳳”,雌的叫“凰”。此篇之所以凰在...
    十二匕千八頁閱讀 528評論 3 6
  • 聽說咪蒙又把實習生搞哭了,又聽說各大自媒體人又開始輪番上陣去罵咪蒙,但這些都不是我寫這篇文章的目的,畢竟我總是懶得...
    每天都有新實習閱讀 1,164評論 1 0