網站背景圖片就像呼吸一樣, 它是我們日常生活的一部分,但除非出現嚴重問題,否則我們很少會注意到它們。它就像一次的呼吸頻率一樣,網站背景圖片對於一個網站的成功和“壽命”至關重要; 它們提高了其他組件的性能。
企業的網站背景圖片不僅僅是一張漂亮的圖片。它對整體用戶體驗有著重大的影響。它有可能成為一個偉大的講故事的工具,迫使您的觀眾和您在同一個頻率。因此,為網站選擇背景圖片非常重要,無論是基本的純色塊、實際圖像,甚至是影片。此文章是選擇網站背景的最佳實踐指南,可幫助您做出最佳決策。
文章綱要:
選擇網站背景圖片的建議
- 高分辨率是必須的
- 與您的品牌形象相輔相成
- 注意對比度
- 可訪問性優先
- 使用微妙無縫的紋理
- 考慮使用各種螢幕和設備
- 真實的人物圖片會更有特色
- 優化圖片
- 選擇合適的圖像文件格式
- 讓圖片說話
- 為您的網站添加背景圖片
- 選擇網站背景圖片的指南
- 內容小結
- 選擇網站背景圖片的建議
選擇好的網站背景圖片是一項艱鉅的任務。這是其中一個整體網站設計的重要方面,將您的品牌與特定圖像或設計相匹配可能很困難。話雖如此,以下指南應該可以幫助您選擇合適的網站背景圖片。
A. 高分辨率是必須的
一個絕對嚴重的錯誤是選擇低分辨率的網站背景圖片。在這種情況下,背景要么是顆粒狀的,要么是低分辨率的,要么就是看起來像老舊的 Win95 壁紙的樣式。
高分辨率圖像將使您的網站對任何訪問者都更具吸引力和專業性。如果您負擔得起,為攝影和設計付費是一個好主意,但好消息是網上有著許多現成的高分辨率照片。許多是免費的,而另一些則只需幾美元。
B. 與您的品牌形象相輔相成
圖片取自Strikingly用戶網站
許多企業面臨的一個問題是,他們喜歡某些背景圖片或佈局,然後試圖將其強加於他們的品牌。這並不總是一個好主意。選擇網站背景圖片然後圍繞它發展您的品牌從來都不是一個好主意。相反,您應該徹底了解您的品牌標識,以便選擇符合您要求的網站背景圖片。如果你還不會製作微妙的背景,打開這篇文章帶你瞭解
C. 注意對比度
圖片取自Strikingly用戶網站
您的網站背景圖片就如名字說的一樣,就只是一個背景照片,它不應該會覆蓋您的網站內容。請記住前景和背景之間的視覺對比。如果您的標題和副本混合在一起,則需要更改某些內容。
您網站上的內容應該是得是容易閱讀和理解的。這就是為什麼在選擇網站背景圖片時,考慮排版和配色方案是必需的。
D. 可訪問性優先
在選擇網站背景圖片時,首先要考慮的是它會如何影響文章的閱讀。您需要確保文本可讀並且文本和背景之間的對比度合適。如果您不確定上述可訪問性問題,但仍想使用圖像,您可以採取一些措施使其發揮作用。為了幫助使資訊更具可讀性,您可以使用圖片編輯工具甚至 CSS 來修改不透明度和對比度等內容或應用圖層蒙版。為材料選擇合適的字體和字體大小也很重要。
E. 使用微妙無縫的紋理
圖片取自Strikingly用戶網站
紋理可以為您網站的整體外觀和感覺增添一抹優雅。尋找無縫的紋理,這意味著它們可能會在螢幕上重複一個圖案,以給人一種巨大圖像的感覺,無論它們是用作頁面背景還是特定的內容區域。雖然有時可以使用全尺寸的帶紋理的網站背景圖像,但更詳細的圖像並不總是能在多個螢幕尺寸之間很好地過渡。此外,大文件大小的照片會減慢頁面加載時間。
除非您想要更有衝擊的背景外觀,否則微妙無縫的紋理也是個理想特徵。主要避免使用大圖案壓倒消費者。尋找具有柔和線條和顏色的圖像,以在材料中脫穎而出。
F. 考慮使用各種螢幕和設備
圖片取自Strikingly用戶網站
根據螢幕尺寸,背景的可見區域可能會發生很大變化。這在照片中非常明顯。在寬螢幕顯示器上看起來很棒的東西在智能手機上可能看起來很糟糕。圖像的重要元素可能會被剪掉,從而導致上下文丟失。
這裡的部分問題是照片上的選擇,一部分則是編碼上的問題。您可使用響應式網站,響應式網站是一種網站設計技術,也稱為 RWD,全名為 Responsive Web Design,可讓網站的內容適應各種設備上不同的螢幕和視窗大小。這樣一來,您的網站背景圖片也會符合指定縱橫比(橫向、縱向、方形)的。它們更有可能很好地安裝在較小的顯示器上。
G. 真實的人物圖片會更有特色
圖片取自Strikingly用戶網站
選擇有人物的網站背景圖片是潛在提高網站轉化率的極好方法。如果可能,請避免使用庫存照片,而是使用真實的人。您不希望您的網站背景圖片同時也出現在數百個其他網站上,如果您使用庫存照片,可能會發生這種情況。
H. 優化圖片
花時間優化您上傳的每一張圖片都是非常值得的,無論您擁有博客、線上服務,還是只是想要使用高品質照片進行改進的標準網站。
首先,確保照片像我們之前描述的那樣處於良好狀態。然後,通過確保正確命名圖像文件,您可以確保搜索引擎可以輕鬆地將它們編入索引。
您是否曾經保存過名稱為“Photo1.jpg”或“Screen Shot 2019-03-18 at 4.13.42 pm”的圖像?當涉及到您的網站背景圖片時,這是一個很大的禁忌。
您的照片名字應該是形容該照片的,而且也要避免使用標點符號或空格。最好在名稱中使用連字符而不是下劃線。
I. 選擇合適的圖像文件格式
您不確定要使用哪種類型的圖像文件?讓我們了解更多關於它們的資訊。
- JPG:
這些文件非常適合圖像,因為它們可以處理多種顏色,同時保持適度的文件大小。使用此圖像時,您不必擔心文件很大,這會加快加載時間。因此,選擇合適的檔案類型十分重要!
- PNG:
這種文件類型最適用於圖形,尤其是當有大量或平坦的顏色時。大多數設計、資訊圖表、文字較多的圖片和logo都屬於這一類。 PNG 還可以具有透明背景(這是logo的理想選擇)。如果可能,請將 PNG 保存為“24 位”格式以獲得更高的品質和更多樣化的顏色顯示。
J. 讓圖片說話
迷人的網站背景圖片將激起您網站訪問者的興趣。有時候使用傳達資訊的圖像會比使用大量的文字還管用。即使文章讀起來很愉快,也不是所有的客戶都會花時間去仔細閱讀。
- 為您的網站添加背景圖片
您可以選擇 Strikingly 庫中的圖片,自己上傳照片,或者使用您上傳後的庫存圖片作為背景圖片。您也可以將圖像、或影片添加到背景中。
要了解如何將背景照片添加到您的 Strikingly 網站,請按照以下步驟操作。
- 轉到您網站的編輯器並打開它。
- 選擇背景選項。您可以使用影片或圖像作為背景。
圖片取自 Strikingly 產品
- 點擊“更多”查看我們的圖片庫。
- 點擊“上傳圖片”添加您自己的背景圖片。請注意,我們只接受以下文件類型:gif、jpeg、png、BMP 和 ico。
圖片取自 Strikingly 產品
- 選擇網站背景圖片的指南
Strikingly 的網站背景圖片適合各種螢幕尺寸,從顯示器到平板電腦再到手機。我們建議您使用 1600 像素寬 x 900 像素高的尺寸,以使您的背景在所有螢幕上都顯示出出色的效果。請謹慎添加人物、品牌和其他資訊的非背景照片!要查看效果,請使用我們的“預覽”功能。
您有幾個選項可以調整和對齊背景:
**拉伸/覆蓋:**拉伸您的圖像以填充整個螢幕,包括高度和寬度。這通常是最好的選擇,因為圖像可以作為任何螢幕尺寸的背景。另一方面,如果您的圖像在側面(尤其是左右)上顯示內容,則可能無法在手機上查看。
**包含:**將顯示整個圖像,確保不會遺漏任何部分。但是,這可能會導致某些螢幕上出現一些空白。
**中心:**圖像將顯示在該部分的中心,如果您選擇中心,則不會縮放。另一方面,背景會顯示圖像邊緣周圍的空白太小。如果圖像太大,某些部分可能會被剪掉,尤其是在較小的螢幕上。
**平鋪:**將居中,然後重複圖像,這對於建立圖案很有用。
- 內容小結
看完這篇文章,您是否也覺得原來一個網站背景圖片後面居然具備了這麼多有趣技術上的影響,我們沒有在網站背景圖片上花太多精力是合乎邏輯的。然而,圖片確實也在講故事,和發揮了重要的作用幫助我們建立令人愉悅的界面方面。整頁背景有助於建立網站的基調;部分背景則為我們的內容提供了一些喘息的空間。
因此,當我們要選擇適合的網站背景照片時,我們得切記考慮尺寸、縱橫比和移動設備兼容性等等的因素。因為即使在後台,細節也很重要。
立即註冊 Strikingly 構建您的網站吧!作為一個用心為新手服務的架站平台,Strikingly 不僅在架設網站上十分出色,它的部落格也為大家提供了其他行銷方面的豐富知識,供大家學習!現在來 Strikingly 註冊成為會員,你不僅可以用上功能齊全的免費架站版本,還可以享受14天全部套餐的免費使用哦!想要改善自己的網路行銷、獲得更多收益的話,那就快來 Strikingly 管理自己的網站吧!
如果對內容有疑問,可以透過 support@strikingly.com 與我們聯絡。