如何設(shè)計(jì)出高大上的頁面或者banner？

時(shí)間：2024-02-14 03:05:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2024-02-14 03:05:02 來源：網(wǎng)站運(yùn)營

如何設(shè)計(jì)出高大上的頁面或者banner？：任何的設(shè)計(jì)“細(xì)節(jié)決定成敗”。在網(wǎng)頁設(shè)計(jì)的Banner頁面中更是需求吸引視覺性，從而讓用戶關(guān)注網(wǎng)站相關(guān)內(nèi)容并認(rèn)可和應(yīng)用。

Banner頁面中的細(xì)節(jié)到位才能充分體現(xiàn)出頁面的品質(zhì)。優(yōu)秀作品在于細(xì)節(jié)的把控。所以今天我們就一起聊聊網(wǎng)頁設(shè)計(jì)Banner圖細(xì)節(jié)。

“依賴于對藝術(shù)單個的精神考察，這種元素分析師通向作品內(nèi)在律動的橋梁。”——瓦西里·康定斯基

根據(jù)企業(yè)網(wǎng)站的產(chǎn)品定位，企業(yè)的用戶群不同，字符是頁面中不可缺少的部分。網(wǎng)頁上80%的信息是以文字形式傳達(dá)的，任何網(wǎng)頁元素都無法替代文字的作用。在Banner中文字設(shè)計(jì)的好壞會直接影響到整個頁面的視覺傳達(dá)效果。

字體在Banner圖中排版，也會遵循點(diǎn)線面結(jié)合成的設(shè)計(jì)群體，高低錯落、疏密聚散，字體不同，大小不同構(gòu)成版式形式美的重要因素。26個英文字母，根據(jù)字體的粗細(xì)設(shè)定節(jié)點(diǎn)組合，每個單獨(dú)的字母就構(gòu)成了音符。

多行文字排版的縱向韻律，根據(jù)單行文字的長短和字體的粗細(xì)產(chǎn)生節(jié)奏和韻律。再通過顏色，提升視覺關(guān)注重點(diǎn)位置閱讀。

文字采用大寫，以單詞的間距為節(jié)奏，字號大小進(jìn)行對比形成韻律的強(qiáng)弱，文字排版理性而有秩序，由細(xì)微的韻律引導(dǎo)，突然變化成強(qiáng)烈的聲調(diào)，主題震撼，醒目突出。

一般網(wǎng)站Banner文字設(shè)計(jì)會更加中規(guī)中矩，平面化視覺排版效果，如果根據(jù)圖2的大膽設(shè)計(jì)，可增加傾斜變形效果，根據(jù)產(chǎn)品本身引導(dǎo)性排版，使文字具有動感和趣味，如文字的主題字體利用粗體產(chǎn)生厚重感，并且?guī)в袧u變樣式和投影效果，文字大小也具有主次關(guān)系，把畫面的層次關(guān)系拉開，多重奏的韻律感極強(qiáng)。

文字在發(fā)展的過程中，也在不斷經(jīng)歷著去繁為簡的過程。包豪斯影響了工業(yè)產(chǎn)品設(shè)計(jì)的思維模式，使人們在設(shè)計(jì)的過程中從以往崇尚自然，繁雜的工藝文化中分離出來，設(shè)計(jì)在慢慢萌芽，從工業(yè)產(chǎn)品到平面藝術(shù)，都有所體現(xiàn)。

畫面圖3中網(wǎng)站內(nèi)容是以男士服裝（正裝）為主要風(fēng)格，并且偏向時(shí)尚風(fēng)格，在企業(yè)的LOGO的色調(diào)中提取畫面中點(diǎn)亮的色調(diào)，同時(shí)背景以淡色調(diào)突出服裝的效果，圍繞著人物的本身，周邊散落著文字內(nèi)容排版，視覺感受顯的不呆板、不平淡、不缺乏趣味性的變化，故此，我們在版面中可安排一些交錯與重疊，打破版面呆板、平淡的格局。

會利用文字的首寫字母利用和圖片結(jié)合樣式，和人物做突出效果，介紹新品文字依然利用文字大小、字體不同、文字顏色不同，用視覺斜線式視覺對比效果，把文字巧妙的結(jié)合在產(chǎn)品當(dāng)中。

顏色的運(yùn)用對于整個文案的表達(dá)會產(chǎn)生很大的影響。使用不同顏色的文字可以使想要強(qiáng)調(diào)的部分更加引人注目。色彩可以使得文本不受位置的局限，加強(qiáng)或者減弱文本的表現(xiàn)強(qiáng)度，使頁面文本的瀏覽產(chǎn)生視覺導(dǎo)向。

兩幅Banner圖利用顏色對比是版面設(shè)計(jì)中常用的設(shè)計(jì)方法，無論字與形，無處不在，或者多種文字關(guān)系交融在一起。有主次關(guān)系，大小，長短，疏密，動靜，深淺，剛?cè)?，虛?shí)等方式，彼此參透，相互并存。

如圖4（兩幅圖）視覺的對比關(guān)系顏色和文字交織在一起，背景藍(lán)色、黃色和紅色的文字對比，黃色的圓形作為氣泡突出吸引力（免單），文字字體長短疏密的對比，產(chǎn)品和小元素的運(yùn)用手法對比，形成了很強(qiáng)的視覺沖擊力。

Banner圖中溶圖是比較難設(shè)計(jì)的其中一種，設(shè)計(jì)過程中通過模擬真實(shí)場景進(jìn)行虛構(gòu)視覺效果。同樣在設(shè)計(jì)過程中把握好企業(yè)的風(fēng)格和特點(diǎn)。

圖5中是一汽大眾的網(wǎng)站Banner設(shè)計(jì)，在晴朗的天空下展館外部展示不同款式車型效果，在色調(diào)上主色以淡藍(lán)色為主色，視覺感亮灰色范圍，提亮效果是紅色系車型，為了不讓視覺過于突出，所以在排版中在視覺偏后側(cè)并視覺右側(cè)。視覺更集中在畫面中間，光源引導(dǎo)我的方向。

色彩統(tǒng)一指的是網(wǎng)頁當(dāng)中色彩色系運(yùn)用的統(tǒng)一性，可以體現(xiàn)在網(wǎng)頁中的整體色系，也可以體現(xiàn)在網(wǎng)頁當(dāng)中所有區(qū)塊標(biāo)題的顏色，整個網(wǎng)頁界面顏色搭配。在光源的利用是比較強(qiáng)烈的效果。Banner中文字也是根據(jù)建筑中紅色和產(chǎn)品中的紅色做提取色，突出重點(diǎn)范圍。

剛展示圖5是以室外場景搭建效果，圖6主要是按照室內(nèi)的光影關(guān)系搭建場景，在平面化的場景中，可以模擬立方體的盒子，騰空產(chǎn)品具有視覺動感性，能夠讓產(chǎn)品更有靈動感，在設(shè)計(jì)當(dāng)中光影關(guān)系的細(xì)節(jié)打造，自然環(huán)境光的運(yùn)用突出產(chǎn)品質(zhì)感。搭配文字利用纖細(xì)、輕盈以產(chǎn)品為主要視覺。

構(gòu)圖的視覺美感正是虛實(shí)空間對比的作用，也就是所謂的留白。這就是最后一點(diǎn)在整個構(gòu)成關(guān)系中很重要的一部分，留白。

用好留白，任何網(wǎng)站的可讀性與易讀性都會得到改善。如果一個頁面上的文字過于擁擠，它就會妨礙舒適的閱讀體驗(yàn)，從而阻礙整體用戶體驗(yàn)。更多的留白使文字更易瀏覽，從而提升閱讀體驗(yàn)，也更易理解。

也許留白最直接，盡管也是最簡單的益處，就是突出網(wǎng)頁中的其他色彩，使它們更加鮮艷。這點(diǎn)對于吸引訪客目光大有幫助，因?yàn)轭伾顪\、飽和度甚至濃度都更加突出。

在現(xiàn)在信息爆炸的時(shí)代，白變成了一種更高尚的美，讓現(xiàn)代人能釋放壓力并享受這樣的美感。

正如上面圖7留白被用于突出品牌內(nèi)容、提升可讀性與易讀性、突顯極簡色彩時(shí)，展現(xiàn)出了強(qiáng)大的影響力。像紅色、黃色、紫色和黑色這種簡單的產(chǎn)品顏色，能夠創(chuàng)造出令人愉快同時(shí)吸引注意的外觀，極簡的用色方案，大面積的背景留白，使用戶贊賞有加。

作為設(shè)計(jì)師，應(yīng)該多花點(diǎn)心思在畫面細(xì)節(jié)上，讓頁面風(fēng)格符合企業(yè)，色調(diào)運(yùn)用具有吸引力，文字的搭配差級關(guān)系有對比性，適當(dāng)畫面留白保持視覺空間感，變化多樣的吸引用戶關(guān)注度和瀏覽度！

版權(quán)聲明 | 文章配圖僅供學(xué)習(xí)參考，引用圖片版權(quán)歸屬原作所有

如有問題，請及時(shí)與我們聯(lián)系，我們將第一時(shí)間做出處理