網(wǎng)頁(yè)美工設計

網(wǎng)頁(yè)設計領(lǐng)域中的開(kāi)放式布局

編輯：時(shí)間：2018-01-29 14:28:34

　　開(kāi)放式布局其實(shí)是一種有趣且功能強大的視覺(jué)設計模式，可以幫助用戶(hù)更好地瀏覽網(wǎng)頁(yè)，還能合理的規避雜亂的信息。通過(guò)下面的10個(gè)網(wǎng)頁(yè)設計范例，來(lái)了解一下如何在網(wǎng)頁(yè)設計的時(shí)候使用開(kāi)放式布局吧!

　　關(guān)于“開(kāi)放式布局”

　　在室內裝修當中，開(kāi)放式布局通常指的是讓功能不同的空間彼此重疊在一起，達到空間最大化的利用。比如將廚房和生活空間重疊在一起，彼此打通共享。

　　“視覺(jué)流對于用戶(hù)而言應該是明顯而清晰的，這樣他們就能清晰的知道他們該做什么。”

　　在網(wǎng)頁(yè)設計當中，開(kāi)放式布局的概念是類(lèi)似的。開(kāi)放式布局下不同的元素以一種清晰而通透的方式，構成極佳的視覺(jué)流程。這樣的布局將最大限度地利用留白，使得元素和元素之間更加協(xié)調、平衡，創(chuàng )造出簡(jiǎn)單移動(dòng)的視覺(jué)信息流。

　　這個(gè)過(guò)程中所使用的色彩可以大膽，也可以簡(jiǎn)約，頁(yè)面可長(cháng)可短。

　　開(kāi)放式布局更加適合那些有著(zhù)詳細計劃、流程，并且最終以一個(gè)清晰的行為召喚收尾的頁(yè)面。試圖混合和匹配太多的元素和區塊，最終可能會(huì )讓整個(gè)頁(yè)面陷入混亂。使用開(kāi)放式布局的關(guān)鍵點(diǎn)在于，打破固有的概念，使用視覺(jué)信息流將用戶(hù)導向一個(gè)顯而易見(jiàn)并且能夠輕松處理的交互。

　　GrowX

　　GrowX 這個(gè)網(wǎng)站將網(wǎng)站常見(jiàn)的區塊的概念打破了，讓白色的背景、干凈的圖片和一個(gè)拱形的標題混合到一個(gè)共享的空間當中。當你向下滾動(dòng)的時(shí)候，頁(yè)面中的圖片會(huì )自然地左右流動(dòng)，這種效果可以很好地促進(jìn)用戶(hù)往下滾動(dòng)瀏覽，也能強化視覺(jué)信息流。

　　開(kāi)放式布局可能存在的問(wèn)題在于，用戶(hù)可能會(huì )迷失在頁(yè)面當中。不過(guò)想要解決這個(gè)問(wèn)題也不難，只需要合理地分層就行了。

　　NooFlow

　　值得注意的是，留白并不一定是白色的，比如Nooflow 這個(gè)網(wǎng)站，留白和背景就是紅色的，不過(guò)這同樣創(chuàng )造了令人驚嘆的視覺(jué)效果。

　　雖然色彩飽和度很高，單是整個(gè)配色方案并不復雜。開(kāi)放式的布局營(yíng)造出簡(jiǎn)約高效的視覺(jué)流程，鼓勵用戶(hù)滾動(dòng)瀏覽。

　　Open Wear

　　Open Wear 這個(gè)網(wǎng)站同樣采用了分屏式的布局，不過(guò)兩側內容的輕重屬性均不相同，這樣的不對稱(chēng)使得用戶(hù)會(huì )更自然地瀏覽右側的內容頁(yè)。

　　由于圖片素材的大量運用，整個(gè)設計顯得更加開(kāi)放。雖然頁(yè)面中元素并不少，但是整個(gè)布局設計顯得足夠通透開(kāi)放。

　　Brightscout

　　Brightscout 這個(gè)網(wǎng)站的首屏采用了微妙有趣的對角線(xiàn)式的布局。圖片和文字說(shuō)明錯落地分布在網(wǎng)站當中，這種錯落而整齊的布局給人的感覺(jué)也頗為開(kāi)放，滾動(dòng)的過(guò)程中，縮放式的動(dòng)效會(huì )讓人忍不住不停滾動(dòng)瀏覽下去。而頁(yè)面最終也確實(shí)導向到了一個(gè)CTA按鈕，功能顯而易見(jiàn)。

1/3 1 2 3 下一頁(yè) 尾頁(yè)

<< 上一篇：影響網(wǎng)頁(yè)設計的5個(gè)關(guān)鍵因素

>> 下一篇：網(wǎng)頁(yè)設計制作簡(jiǎn)化網(wǎng)頁(yè)設計的方法

推薦資訊