UCD設(shè)計(jì)趨勢(shì)：如何創(chuàng)建分割美學(xué)

將一個(gè)屏幕分為兩個(gè)部分的內(nèi)容——這可能是現(xiàn)在出現(xiàn)的流行設(shè)計(jì)趨勢(shì)之一。越來(lái)越多的網(wǎng)站設(shè)計(jì)正在使用包括并排放置的兩個(gè)垂直或方形面板的設(shè)計(jì)模式。這同時(shí)是一個(gè)具有高標(biāo)準(zhǔn)審美的趨勢(shì)。外觀(guān)對(duì)于用戶(hù)來(lái)說(shuō)是友好的，可以適應(yīng)各種需求，并有助于引導(dǎo)用戶(hù)。在未來(lái)幾個(gè)月內(nèi)，我們有可能會(huì)看到更多這樣的設(shè)計(jì)。

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

1、請(qǐng)分屏設(shè)計(jì)的3種

首先，我們先來(lái)“腦洞大開(kāi)”一下，想想為什么你會(huì)想把你的設(shè)計(jì)分成兩半?如果你只是把問(wèn)題提了出來(lái)，而沒(méi)有看到結(jié)果，我也可能會(huì)質(zhì)疑。但是，嘗試分屏概念有一個(gè)很好的例子。對(duì)于響應(yīng)式框架網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，這是一個(gè)不錯(cuò)選擇。因?yàn)樵谳^大的屏幕上，設(shè)計(jì)是分裂的，但是當(dāng)涉及較小的屏幕時(shí)，面板可以堆疊。在動(dòng)畫(huà)和交互效果方面，它們可以輕松在上面工作，鼓勵(lì)用戶(hù)點(diǎn)擊。卡式設(shè)計(jì)模式的擴(kuò)展幾乎是一個(gè)越來(lái)越受歡迎的趨勢(shì)。

2、大膽的顏色和排版

顏色和排版是所有趨勢(shì)的驅(qū)動(dòng)因素，這得益于平面和材料設(shè)計(jì)的重視。結(jié)合兩者，你最終會(huì)有一個(gè)簡(jiǎn)單的視覺(jué)審美，但是它并不缺少趣味性和吸引力。

Baesman的網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)通過(guò)分屏設(shè)計(jì)來(lái)做到了這一點(diǎn)。頁(yè)面首先通過(guò)兩個(gè)明亮，大膽的彩色面板直觀(guān)的展現(xiàn)給用戶(hù)。通過(guò)有趣的懸停狀態(tài)“擴(kuò)展”每個(gè)面板上的消息，讓人感覺(jué)像是乞求用戶(hù)進(jìn)一步點(diǎn)擊探索。字體的選擇很簡(jiǎn)單，但是整體卻能讓你感覺(jué)到足夠舒適。

3、為信息的展示創(chuàng)建空間

一屏分割設(shè)計(jì)是創(chuàng)建內(nèi)容和圖像一起使用的具有挑戰(zhàn)性的視覺(jué)主題的完美選擇，如果你想為呼吁行動(dòng)的操作創(chuàng)建更大的焦點(diǎn)，也可以采用這一設(shè)計(jì)趨勢(shì)。做這項(xiàng)工作的竅門(mén)就是保證充足的空間，清晰的排版，并確保分割的風(fēng)格(在這里的例子中，顏色疊加)可以補(bǔ)充圖像。

這些東西可以幫助吸引用戶(hù)來(lái)到位于屏幕左側(cè)的號(hào)召行動(dòng)的版塊。這個(gè)設(shè)計(jì)的特好處在于，每個(gè)屏幕幾乎都有一個(gè)屬于自己感覺(jué)的主頁(yè)，所以可以讓用戶(hù)感覺(jué)每個(gè)不同的內(nèi)容都是具有同等權(quán)重的，也是同樣重要的(不過(guò)，這種方式并不適用于每一個(gè)項(xiàng)目)。

4、專(zhuān)注于行動(dòng)

分屏式的網(wǎng)站設(shè)計(jì)也可以讓人聯(lián)想到打印項(xiàng)目。這對(duì)于簡(jiǎn)單的框架來(lái)說(shuō)非常有效，包括針對(duì)用戶(hù)的明確的行動(dòng)呼吁。在Tree That Gives這個(gè)網(wǎng)頁(yè)設(shè)計(jì)案例中，該網(wǎng)站的目標(biāo)是通過(guò)右下方簡(jiǎn)單的彩色按鈕來(lái)鼓勵(lì)用戶(hù)捐贈(zèng)。

該圖像僅作為訪(fǎng)問(wèn)頁(yè)面的用戶(hù)的“著陸點(diǎn)”，但所有重要的內(nèi)容和信息都位于另一個(gè)面板中(這個(gè)網(wǎng)站的一半實(shí)際上可以獨(dú)立于內(nèi)容，但不會(huì)像現(xiàn)在在視覺(jué)上表現(xiàn)得那么有趣)。

5、創(chuàng)建“卡”

一屏分割設(shè)計(jì)真的是從卡片式設(shè)計(jì)衍生的另一流行設(shè)計(jì)趨勢(shì)。這些網(wǎng)站中的許多網(wǎng)站包括屏幕一側(cè)的互動(dòng)，或者是一個(gè)容器之后的一個(gè)點(diǎn)擊哲學(xué)，這是卡片式界面的特征。

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

6、改變它

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

Warsaw Rising的網(wǎng)站設(shè)計(jì)簡(jiǎn)潔、美麗。滾動(dòng)僅僅改變中間的文本，而不會(huì)影響屏幕中其他的元素。同時(shí)，黑白圖像和黃色的流行“樂(lè)符”使其脫穎而出。整體設(shè)計(jì)像是一場(chǎng)高難度的戲劇，但是卻不難導(dǎo)航和進(jìn)入。

總結(jié)

一屏分割設(shè)計(jì)是我們將在未來(lái)幾個(gè)月看到的比較經(jīng)常在網(wǎng)頁(yè)設(shè)計(jì)上使用的東西。這種模式是簡(jiǎn)單的，可用的，適用于許多不同的網(wǎng)站類(lèi)型。

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

哈爾濱IT培訓(xùn)選甲骨文華育興業(yè)，目前Java開(kāi)發(fā)培訓(xùn)、大數(shù)據(jù)培訓(xùn)、嵌入式培訓(xùn)、UI設(shè)計(jì)培訓(xùn)、游戲特效培訓(xùn)等課程招生火熱進(jìn)行中，有想報(bào)名進(jìn)行免費(fèi)試聽(tīng)的同學(xué)可以點(diǎn)擊右側(cè)“在線(xiàn)咨詢(xún)”進(jìn)行了解哦!