網(wǎng)頁設計的分割布局秘密

2022-12-26 10:35:22 來源/作者: / 己有:7人學習過

“簡潔是終極的復雜.——萊昂納多·達·芬奇”

 

 

網(wǎng)頁設計的分割布局秘密

你能看到兩等分如何體現(xiàn)出一種良好的視覺層次。首先,頂部的“即將來臨”的紅色緞帶很引人注目。其次,標志也很鮮明?,F(xiàn)在,跟隨我之前提到的“之”字形,訪問者看到右半部分的圖片滑塊,最后,到達電子郵件提交表格。

現(xiàn)在讓我們來看一下,分割布局在一個網(wǎng)頁設計師的作品集頁面中能起到多大作用?設計作品集頁面的目的是為了向潛在顧客快速展示你作品的主體部分。隨著現(xiàn)在這個產(chǎn)業(yè)如此飽和,顧客的選擇有很多很多,為什么他們要付錢給你呢?因此,一個很棒的第一印象將會在你的事業(yè)方向中起到?jīng)Q定性作用。讓我們看看,我們可以做些什么?

網(wǎng)頁設計的分割布局秘密

上圖的布局被劃分為兩等分,但是并不遵循我之前提到的“之”字形原則。

雖然它看起來是個不錯的布局并且易于觀看,但是在看完前兩塊元素后就會讓人感到非常沉悶死板。打破這樣的視覺流向并且增添視覺趣味性將會讓之有所改變。不僅如此,當你試著去瀏覽上面這種布局時,你的眼睛會最先看到第一張圖片,然后跳轉(zhuǎn)到第二塊的文本上。然而你的訪問者并沒有打算在這個階段閱讀,因此,他們會跳轉(zhuǎn)到其它的點,或者徹底離開你的頁面!

但是如果你做了這樣一個簡單的調(diào)整呢?

 

 

網(wǎng)頁設計的分割布局秘密

變得更生動有趣了,對吧?簡單的互換每個項目里文本和圖片的位置來增加視覺上的生動性,這樣,這種一致性就不會讓你的用戶感覺到無聊了。同時,你還能在“之”字模型后放置一個行為召喚按鈕。

網(wǎng)頁設計的分割布局秘密

這個“聯(lián)系我”按鈕將會有更大的機會被注意到,并且被你更多的用戶點擊(為什么不進行一個A/B測試去再次驗證一下?)

“設計是一項計劃,它將所有元素以最好的方式組織起來去完成一個特定的目標。——查爾斯·埃姆斯”