UCD設計趨勢：如何創建分割美學

將一個屏幕分為兩個部分的內容——這可能是現在出現的流行設計趨勢之一。越來越多的網站設計正在使用包括并排放置的兩個垂直或方形面板的設計模式。這同時是一個具有高標準審美的趨勢。外觀對于用戶來說是友好的，可以適應各種需求，并有助于引導用戶。在未來幾個月內，我們有可能會看到更多這樣的設計。

今天小骨頭帶大家來看看幾個分屏幕設計的例子，并提供迷你的案例研究，找出如何充分利用這一設計趨勢。

1、請分屏設計的3種

首先，我們先來“腦洞大開”一下，想想為什么你會想把你的設計分成兩半?如果你只是把問題提了出來，而沒有看到結果，我也可能會質疑。但是，嘗試分屏概念有一個很好的例子。對于響應式框架網頁設計來說，這是一個不錯選擇。因為在較大的屏幕上，設計是分裂的，但是當涉及較小的屏幕時，面板可以堆疊。在動畫和交互效果方面，它們可以輕松在上面工作，鼓勵用戶點擊。卡式設計模式的擴展幾乎是一個越來越受歡迎的趨勢。

2、大膽的顏色和排版

顏色和排版是所有趨勢的驅動因素，這得益于平面和材料設計的重視。結合兩者，你最終會有一個簡單的視覺審美，但是它并不缺少趣味性和吸引力。

Baesman的網頁設計已經通過分屏設計來做到了這一點。頁面首先通過兩個明亮，大膽的彩色面板直觀的展現給用戶。通過有趣的懸停狀態“擴展”每個面板上的消息，讓人感覺像是乞求用戶進一步點擊探索。字體的選擇很簡單，但是整體卻能讓你感覺到足夠舒適。

3、為信息的展示創建空間

一屏分割設計是創建內容和圖像一起使用的具有挑戰性的視覺主題的完美選擇，如果你想為呼吁行動的操作創建更大的焦點，也可以采用這一設計趨勢。做這項工作的竅門就是保證充足的空間，清晰的排版，并確保分割的風格(在這里的例子中，顏色疊加)可以補充圖像。

這些東西可以幫助吸引用戶來到位于屏幕左側的號召行動的版塊。這個設計的特好處在于，每個屏幕幾乎都有一個屬于自己感覺的主頁，所以可以讓用戶感覺每個不同的內容都是具有同等權重的，也是同樣重要的(不過，這種方式并不適用于每一個項目)。

4、專注于行動

分屏式的網站設計也可以讓人聯想到打印項目。這對于簡單的框架來說非常有效，包括針對用戶的明確的行動呼吁。在Tree That Gives這個網頁設計案例中，該網站的目標是通過右下方簡單的彩色按鈕來鼓勵用戶捐贈。

該圖像僅作為訪問頁面的用戶的“著陸點”，但所有重要的內容和信息都位于另一個面板中(這個網站的一半實際上可以獨立于內容，但不會像現在在視覺上表現得那么有趣)。

5、創建“卡”

一屏分割設計真的是從卡片式設計衍生的另一流行設計趨勢。這些網站中的許多網站包括屏幕一側的互動，或者是一個容器之后的一個點擊哲學，這是卡片式界面的特征。

可以考慮將分屏擴展為多個容器，以便從每個用戶獲得更多潛在的點擊。簡單的懸停效果提示用戶注意到這些元素中的每一個都是可點擊的，并且將導致另一個動作。設計干凈，組織良好，旨在讓用戶點擊，這個目的就變得很明確了。

6、改變它

雖然我們迄今為止所看到的許多設計都集中在一個明顯的左右分界線與元素之間的硬線上，但在實際的設計工作中并不總是如此。你也可以嘗試使用其他方式在視覺上分割屏幕。

Warsaw Rising的網站設計簡潔、美麗。滾動僅僅改變中間的文本，而不會影響屏幕中其他的元素。同時，黑白圖像和黃色的流行“樂符”使其脫穎而出。整體設計像是一場高難度的戲劇，但是卻不難導航和進入。

總結

一屏分割設計是我們將在未來幾個月看到的比較經常在網頁設計上使用的東西。這種模式是簡單的，可用的，適用于許多不同的網站類型。

使其工作的竅門(而不是陷入“過度使用”的設計)在于——添加觸動，使其成為你自己的。如果你在顏色的使用上需要大篇幅，那么你可以嘗試使用這個趨勢，考慮如何堆放元素或者只是想想如何使過渡的中心區別于其他的設計。但最重要的是——玩得開心!

哈爾濱IT培訓選甲骨文華育興業，目前Java開發培訓、大數據培訓、嵌入式培訓、UI設計培訓、游戲特效培訓等課程招生火熱進行中，有想報名進行免費試聽的同學可以點擊右側“在線咨詢”進行了解哦!