如何為網(wǎng)站設(shè)計(jì)出色的橫幅 為網(wǎng)站設(shè)計(jì)出色橫幅的方法
發(fā)布時(shí)間:2012-06-17 09:42:48 作者:佚名
我要評(píng)論
網(wǎng)站的橫幅設(shè)計(jì)對(duì)于瀏覽者的第一體驗(yàn)相當(dāng)重要
橫幅是網(wǎng)站和訪問者之間的重要紐帶。
有鑒于此,本文從顏色,字體,圖片選用等幾個(gè)方面來闡述在網(wǎng)站中設(shè)計(jì)橫幅時(shí)應(yīng)注意的相關(guān)事項(xiàng)。
當(dāng)訪問者一打開你的網(wǎng)站,橫幅應(yīng)迅速吸引他們的視線。一個(gè)優(yōu)秀的橫幅不僅要抓住訪問者的心,還要激起他們繼續(xù)瀏覽的欲望。橫幅或頁眉在整個(gè)站點(diǎn)中起到橋梁的作用,除了向訪問者傳達(dá)網(wǎng)站內(nèi)容之外,更重要的是,幫助他們建立起對(duì)你企業(yè)的第一印象。因此,要想設(shè)計(jì)出優(yōu)秀,專業(yè)的橫幅,關(guān)鍵在于要賦予它獨(dú)特氣質(zhì)、富有沖擊力的視覺效果并能有效地吸引訪問者的注意。
顏色-橫幅的配色應(yīng)與網(wǎng)站整體色調(diào)保持一致。根據(jù)運(yùn)營(yíng)的網(wǎng)站類型,選取適當(dāng)?shù)牧辽稍黾訖M幅的吸引力,此外,賞心悅目的淺色投影可令橫幅的風(fēng)格更清新。首次設(shè)計(jì)網(wǎng)絡(luò)圖片最佳,隨后為網(wǎng)站構(gòu)思配色,并添加上圖片。通常,在顏色的選用上要達(dá)到反差效果,并且與背景和諧統(tǒng)一,這樣可使得網(wǎng)站的標(biāo)題和主題的顯示更突出。
字體-選用的字體應(yīng)是目標(biāo)用戶群喜聞樂見的,同時(shí)還要與網(wǎng)站內(nèi)容協(xié)調(diào)。橫幅上的字體應(yīng)清晰明了,方便閱讀。字體類型的選用上,推薦這三款字體:Helvetica black,Impact和Arial,看起來美觀又不失專業(yè)性。再者,橫幅上的文字不宜過多,即使文字很大,也有足夠的容納空間,這樣閱讀起來也更合理。
圖片-任何成功的頁眉設(shè)計(jì)都離不開簡(jiǎn)潔這一基本原則。訪問網(wǎng)站時(shí),圖片不僅要快速向訪問者傳達(dá)出網(wǎng)站的基本主題,還要反映出網(wǎng)站的行業(yè)屬性。此外,原創(chuàng)性在頁眉設(shè)計(jì)中也是必不可少的一環(huán)。因此,從某種意義上來講,選用的圖片要獨(dú)特,不要直接從其它網(wǎng)站復(fù)制。當(dāng)然,你也可根據(jù)網(wǎng)站的主題自行設(shè)計(jì)圖片。
HTML標(biāo)簽-H1標(biāo)簽是每個(gè)網(wǎng)站不可分割的部分,因?yàn)樗善鸬綇?qiáng)調(diào)網(wǎng)站標(biāo)題的作用。同時(shí),H1標(biāo)簽也是通過搜索引擎推動(dòng)網(wǎng)站指數(shù)(網(wǎng)站評(píng)估)的手段之一,在網(wǎng)站設(shè)計(jì)時(shí)應(yīng)注意這一點(diǎn)。另外,在對(duì)頁眉的文本進(jìn)行編碼時(shí)應(yīng)按照關(guān)聯(lián)性由高到低進(jìn)行排列。
頁眉應(yīng)靠近內(nèi)容區(qū)域-這是橫幅設(shè)計(jì)應(yīng)遵守的基本規(guī)則,這樣放置橫幅既能方便訪問者,又能為他們節(jié)省大量搜索相關(guān)信息時(shí)間。
合適的標(biāo)簽-如果你的網(wǎng)站頁眉設(shè)計(jì)得光彩奪目,通常在其下方的內(nèi)容中應(yīng)放上合適的標(biāo)簽。此舉不僅能消除訪問者的疑惑,還可防止出現(xiàn)敗興而歸的現(xiàn)象。
網(wǎng)站橫幅主要的職責(zé)是為來訪者留下良好的第一印象。一個(gè)設(shè)計(jì)精美,引人注意的橫幅勝過千言萬語??紤]到一般用戶在某一頁面的停留時(shí)間不會(huì)超過7秒鐘,因此橫幅應(yīng)具備足夠吸引力,為訪問者建立信心,以使他們留下并繼續(xù)瀏覽你的網(wǎng)站。編譯:李思明
有鑒于此,本文從顏色,字體,圖片選用等幾個(gè)方面來闡述在網(wǎng)站中設(shè)計(jì)橫幅時(shí)應(yīng)注意的相關(guān)事項(xiàng)。
當(dāng)訪問者一打開你的網(wǎng)站,橫幅應(yīng)迅速吸引他們的視線。一個(gè)優(yōu)秀的橫幅不僅要抓住訪問者的心,還要激起他們繼續(xù)瀏覽的欲望。橫幅或頁眉在整個(gè)站點(diǎn)中起到橋梁的作用,除了向訪問者傳達(dá)網(wǎng)站內(nèi)容之外,更重要的是,幫助他們建立起對(duì)你企業(yè)的第一印象。因此,要想設(shè)計(jì)出優(yōu)秀,專業(yè)的橫幅,關(guān)鍵在于要賦予它獨(dú)特氣質(zhì)、富有沖擊力的視覺效果并能有效地吸引訪問者的注意。
顏色-橫幅的配色應(yīng)與網(wǎng)站整體色調(diào)保持一致。根據(jù)運(yùn)營(yíng)的網(wǎng)站類型,選取適當(dāng)?shù)牧辽稍黾訖M幅的吸引力,此外,賞心悅目的淺色投影可令橫幅的風(fēng)格更清新。首次設(shè)計(jì)網(wǎng)絡(luò)圖片最佳,隨后為網(wǎng)站構(gòu)思配色,并添加上圖片。通常,在顏色的選用上要達(dá)到反差效果,并且與背景和諧統(tǒng)一,這樣可使得網(wǎng)站的標(biāo)題和主題的顯示更突出。
字體-選用的字體應(yīng)是目標(biāo)用戶群喜聞樂見的,同時(shí)還要與網(wǎng)站內(nèi)容協(xié)調(diào)。橫幅上的字體應(yīng)清晰明了,方便閱讀。字體類型的選用上,推薦這三款字體:Helvetica black,Impact和Arial,看起來美觀又不失專業(yè)性。再者,橫幅上的文字不宜過多,即使文字很大,也有足夠的容納空間,這樣閱讀起來也更合理。
圖片-任何成功的頁眉設(shè)計(jì)都離不開簡(jiǎn)潔這一基本原則。訪問網(wǎng)站時(shí),圖片不僅要快速向訪問者傳達(dá)出網(wǎng)站的基本主題,還要反映出網(wǎng)站的行業(yè)屬性。此外,原創(chuàng)性在頁眉設(shè)計(jì)中也是必不可少的一環(huán)。因此,從某種意義上來講,選用的圖片要獨(dú)特,不要直接從其它網(wǎng)站復(fù)制。當(dāng)然,你也可根據(jù)網(wǎng)站的主題自行設(shè)計(jì)圖片。
HTML標(biāo)簽-H1標(biāo)簽是每個(gè)網(wǎng)站不可分割的部分,因?yàn)樗善鸬綇?qiáng)調(diào)網(wǎng)站標(biāo)題的作用。同時(shí),H1標(biāo)簽也是通過搜索引擎推動(dòng)網(wǎng)站指數(shù)(網(wǎng)站評(píng)估)的手段之一,在網(wǎng)站設(shè)計(jì)時(shí)應(yīng)注意這一點(diǎn)。另外,在對(duì)頁眉的文本進(jìn)行編碼時(shí)應(yīng)按照關(guān)聯(lián)性由高到低進(jìn)行排列。
頁眉應(yīng)靠近內(nèi)容區(qū)域-這是橫幅設(shè)計(jì)應(yīng)遵守的基本規(guī)則,這樣放置橫幅既能方便訪問者,又能為他們節(jié)省大量搜索相關(guān)信息時(shí)間。
合適的標(biāo)簽-如果你的網(wǎng)站頁眉設(shè)計(jì)得光彩奪目,通常在其下方的內(nèi)容中應(yīng)放上合適的標(biāo)簽。此舉不僅能消除訪問者的疑惑,還可防止出現(xiàn)敗興而歸的現(xiàn)象。
網(wǎng)站橫幅主要的職責(zé)是為來訪者留下良好的第一印象。一個(gè)設(shè)計(jì)精美,引人注意的橫幅勝過千言萬語??紤]到一般用戶在某一頁面的停留時(shí)間不會(huì)超過7秒鐘,因此橫幅應(yīng)具備足夠吸引力,為訪問者建立信心,以使他們留下并繼續(xù)瀏覽你的網(wǎng)站。編譯:李思明
相關(guān)文章
這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2020-12-16新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn)
這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2020-11-30css hack之\9和\0就可能對(duì)hack IE11\IE9\IE8無效
每次設(shè)計(jì)一張網(wǎng)頁或一個(gè)表單,都被各種瀏覽器的兼容問題傷透腦筋,尤其是IE家族。在做兼容性設(shè)計(jì)時(shí),我們往往會(huì)使用各種瀏覽器能識(shí)別的獨(dú)特語法進(jìn)行hack,從而達(dá)到各種瀏覽2020-03-20css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下2020-03-20
這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2020-02-28
這篇文章主要介紹了常見的瀏覽器兼容性問題(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-02-20
這篇文章主要介紹了border-radius IE8兼容處理的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2020-02-12- 這篇文章主要介紹了淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問題,詳細(xì)的介紹了幾種我遇到的問題和解決方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-09-26
這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-14
對(duì)常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)
這篇文章主要介紹了對(duì)常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-20






