進(jìn)行網(wǎng)站設計時(shí),我們通常會(huì )被網(wǎng)頁(yè)排版難住,網(wǎng)站怎么樣才可以跳出固定思維的排版方式,大膽創(chuàng )新,今天奕云就來(lái)和大家聊一聊,網(wǎng)站設計中,我們應該如何選擇合適的排版方式。
在設計網(wǎng)站之前,我們首先需要知道網(wǎng)站是怎么構成的,做網(wǎng)站一定離不開(kāi)網(wǎng)頁(yè)設計,而網(wǎng)頁(yè)的布局則是整個(gè)網(wǎng)站設計中的重中之重,網(wǎng)站選擇什么樣的布局直接影響到訪(fǎng)客在瀏覽器上看到的整體頁(yè)面,網(wǎng)頁(yè)設計的好與不好也會(huì )直接影響到訪(fǎng)客在網(wǎng)站的停留時(shí)間長(cháng)短。
設計時(shí)在進(jìn)行網(wǎng)頁(yè)設計布局前期,都會(huì )對客戶(hù)的需求進(jìn)行整合和分布,達到良好的視覺(jué)效果,企業(yè)類(lèi)型的網(wǎng)站一般可以分為三大類(lèi):功能型網(wǎng)站、形象型網(wǎng)站、信息型網(wǎng)站等,客戶(hù)需求不同采用不同的網(wǎng)頁(yè)設計方案,我們在進(jìn)行網(wǎng)頁(yè)排版時(shí),可以使用哪些技巧呢?
左文右圖,強調產(chǎn)品展示
將文本和交互元素集中放在左側,將文本為主的信息整合到一起。圖片則放在右側,上下貼近邊緣營(yíng)造出通透感,整體布局簡(jiǎn)約,圖文元素涇渭分明,整齊而清晰。
跨區域文本,錯落的照片
元素不再拘泥于特定的區域,而是互相交叉疊加排布,是當今的一個(gè)排版設計趨勢,文本和圖片交叉疊加能夠營(yíng)造出獨特的錯落感,不過(guò)在網(wǎng)頁(yè)設計中,我們需要注意畫(huà)面的平衡感。
圖片為主,分屏布局,跨區域文本
圖片占據較大的空間,背景色和前景的圖文錯開(kāi),強化視覺(jué)層次,標題連接圖片和文本兩個(gè)區域,將兩者關(guān)聯(lián)統一起來(lái)。
側邊欄列表,圖文疊加做主體
對于大量并列的信息,側邊列表是非常有用的,可以快速篩選、選擇訪(fǎng)客需要的信息,內容可以統一采用圖文疊加的排版,加入按鈕、說(shuō)明等其他輔助性元素,看起來(lái)豐富又不失功能性,唯一需要注意的是控制好對比度,確保網(wǎng)頁(yè)的可讀性。
適當留白,統一用色
和我們看到的第一點(diǎn)布局十分相似,結合恰到好處的留白,使用統一用色,就會(huì )給人一種網(wǎng)站簡(jiǎn)約大方的感覺(jué),主體與元素相互呼應,十分協(xié)調。
圖文排布整齊,強調CTA按鈕
當網(wǎng)頁(yè)設計需要按部就班,無(wú)法創(chuàng )造出新意,整個(gè)畫(huà)面都非常統一對齊時(shí),我們可以使用行為召喚按鈕,打破整體的規則,進(jìn)入一種全新的布局,讓訪(fǎng)客的視線(xiàn)快速聚焦,引導訪(fǎng)客點(diǎn)擊。
統一配色,使用幾何圖形打破邊界
簡(jiǎn)約布局與明亮色彩是一對經(jīng)典組合,簡(jiǎn)約的界面設計風(fēng)格能夠讓鮮亮的色彩更加奪目,如果我們可以結合一個(gè)打破邊界的圖形元素,整個(gè)設計就更加容易脫穎而出。
高清背景大圖,搭配對比度高的排版
背景采用高清大圖,前景放置標題及輔助信息,突出整個(gè)文本,這需要我們適當地調暗背景圖片,而前景中的文本元素則需要采用較高亮色彩,確保閱讀的體驗更好。
用字體、配色和布局來(lái)營(yíng)造整體氣氛
網(wǎng)頁(yè)界面中,出現的每一個(gè)視覺(jué)元素都是有性格的,低飽和度高明度的圖片和字體都有著(zhù)不同的搭配方式,也影響著(zhù)網(wǎng)頁(yè)傳達給訪(fǎng)客的整體印象。