網(wǎng)頁設(shè)計(jì)中：八個(gè)用途錯(cuò)誤及解決方案介紹

　　大圖像，圖片集和視覺“重”的圖像一直是網(wǎng)頁設(shè)計(jì)的一大趨勢(shì)。為了充分利用這種美感，你一定希望能夠確保你的網(wǎng)站上的每個(gè)圖像都能夠跟各種不同分辨率以及大小的顯示屏適配，并希望通過圖片的使用能夠更深入的展示以及推廣你的品牌。

　　不過，很多時(shí)候我們的設(shè)計(jì)師不管是從設(shè)計(jì)技術(shù)層面還是在圖像質(zhì)量層面都存在很多大大小小的認(rèn)識(shí)錯(cuò)誤。當(dāng)你在你的網(wǎng)頁設(shè)計(jì)中使用圖像時(shí)，你不必陷入這些陷阱之一，在這里，我們將看看有哪些具體的圖像使用錯(cuò)誤，以及如何糾正或者完全避免它們。

　　1、上傳大格式文件

　　在打印項(xiàng)目中，全尺寸、大格式的圖像可以保證打印結(jié)果的保持清晰以及美觀(這是必要的)，但是當(dāng)涉及到網(wǎng)頁設(shè)計(jì)時(shí)就會(huì)出現(xiàn)問題。大格式的圖像載入緩慢，而緩慢的加載時(shí)間可能會(huì)導(dǎo)致用戶放棄繼續(xù)瀏覽你的網(wǎng)站。

　　不幸的是，雖然這是一個(gè)很常見的問題，但是還是有很多設(shè)計(jì)師陷入這種麻煩之中。許多的后臺(tái)程序允許上傳大格式的圖像，除非你已經(jīng)很關(guān)注這個(gè)問題，否則你可能甚至不知道自己上傳圖像的大小是多么的不可思議。當(dāng)然，不同用途的不同圖像可能需要不同的規(guī)格，你大可參閱你的品牌或網(wǎng)站指南，以了解在你的網(wǎng)站上常見圖像尺寸。

　　當(dāng)你考慮到圖像問題時(shí)時(shí)，文件類型也很重要。請(qǐng)不要在你的網(wǎng)頁設(shè)計(jì)中使用tiff格式的圖片。最常見的和可用的文件格式是PNG，JPG或GIF。

　　解決方案：對(duì)于上述問題，最簡(jiǎn)單的解決方案是將圖像尺寸縮放到框架需要的尺寸大小，并以適當(dāng)?shù)木W(wǎng)頁分辨率顯示。但還有一點(diǎn)，要盡量考慮到適合的圖像尺寸，以便能最佳地利用你的網(wǎng)站和社交分享(例如，Pinterest圖像的寬度為600像素，如果要使圖像達(dá)到最佳的共享效果，則應(yīng)為該尺寸。)

　　2、忘記裁剪

　　使用大格式的文件很可能會(huì)使一個(gè)網(wǎng)站不管是在加載的速度上還是訪客的用戶體驗(yàn)上都“拖你后腿”，因此你可以試著使用全幀圖像隱藏在屏幕上。通過裁剪，有助于展示你希望用戶看到的視覺效果，方法是創(chuàng)建一個(gè)焦點(diǎn)而不必使用全畫幅的圖像。

　　通過圖像裁剪也可以創(chuàng)建一個(gè)動(dòng)態(tài)不一致的視覺效果堆疊，它們都具有相同的形狀和縱橫比。使用多種不同的裁剪尺寸和有趣的形狀可以為網(wǎng)站設(shè)計(jì)增添視覺刺激。

　　解決方案：在上傳圖像之前將裁剪為適當(dāng)?shù)拇笮』虺叽?，以便每個(gè)圖像根據(jù)需要呈現(xiàn)。

　　3、忘記縮略圖

　　有許多方法來處理縮略圖大小以及調(diào)整圖像的大小(其中許多方法取決于你的后臺(tái)功能，所以我們不會(huì)爭(zhēng)論每個(gè)的優(yōu)點(diǎn))，但是，你需要記住更新并注意在你的網(wǎng)站設(shè)計(jì)中最小的圖像尺寸。

　　設(shè)計(jì)師很經(jīng)常忘記更具網(wǎng)站的不同內(nèi)容需要更新縮略圖，圖片預(yù)覽和圖標(biāo)的大小。

　　另一個(gè)重大錯(cuò)誤是，使用質(zhì)量很差的縮略圖，如果圖像質(zhì)量不好，請(qǐng)不要使用，沒有什么比形象更重要的了。

　　解決方案：確保在圖像更改時(shí)刪除舊的縮略圖或預(yù)覽，并且確保你使用的圖標(biāo)是最新的。

　　4、不可搜索的名稱和元素

　　數(shù)碼相機(jī)可以在那些不能轉(zhuǎn)換為網(wǎng)站格式的各種元字段中保存大量的圖片信息。從圖像中剝離這些信息，并替換為可用數(shù)據(jù)。因?yàn)樗阉饕鏌o法讀取在你的網(wǎng)頁設(shè)計(jì)中的那些圖像的內(nèi)容，所以要使其變?yōu)榭杀凰阉鞯膱D像，就必須包含標(biāo)題，alt標(biāo)簽和周圍內(nèi)容中的描述性詞。

　　解決方案：對(duì)所有網(wǎng)站圖像和配對(duì)圖像使用正確的命名方式并與每個(gè)視覺相關(guān)的內(nèi)容匹配。圖像名稱應(yīng)包括用連字符分隔的描述性詞。

　　5、不正確的縮放或伸展

　　沒有什么比一個(gè)拉長(zhǎng)的臉或縮放比例不正確的圖像看起來更奇怪的了。圖像的拉伸或非比例縮放在當(dāng)主題或后端更改發(fā)生時(shí)，這可能特別常見。當(dāng)你縮放圖像的時(shí)候，應(yīng)該確保圖像在每個(gè)維度上都能等比例縮放。任何其他的錯(cuò)誤操作都會(huì)損害照片的完整性。

　　解決方案：仔細(xì)觀察所有的縮放比例，并定期檢查你的網(wǎng)站。

　　6、未規(guī)劃不同終端設(shè)備不同大小

　　響應(yīng)式設(shè)計(jì)框架對(duì)圖像的要求有一些影響。形狀或尺寸在不同終端設(shè)備上或者通過方向的變化如何是的圖像能夠繼續(xù)保持正確已經(jīng)完整的呈現(xiàn)形式呢?

　　最常見的做法之一是使用媒體查詢來觀察網(wǎng)頁設(shè)計(jì)在不同設(shè)備上的不同變化。CSS允許將特定樣式應(yīng)用于基于屏幕尺寸的圖像上，并在不破壞設(shè)計(jì)的情況下幫助渲染圖像。

　　解決方案：將媒體查詢用于響應(yīng)框架，并在多個(gè)設(shè)備上測(cè)試圖像呈現(xiàn)的效果。

　　7、忽視視網(wǎng)膜屏幕

　　不久以前，網(wǎng)站設(shè)計(jì)要求的圖片標(biāo)準(zhǔn)為600像素寬，72ppi的參數(shù)。但隨著科技以及顯示設(shè)別的發(fā)展，這些標(biāo)準(zhǔn)參數(shù)需要做重新的調(diào)整和定義。

　　根據(jù)你的網(wǎng)站設(shè)計(jì)的框架，每個(gè)圖像實(shí)際上可以包括為不同屏幕尺寸和分辨率的多個(gè)圖像，包括視網(wǎng)膜顯示所需要的圖像(視網(wǎng)膜顯示器的分辨率可能因設(shè)備而異，但顯著高于標(biāo)準(zhǔn)顯示器)。

　　解決方案：包括專門用于視網(wǎng)膜顯示的文件和媒體查詢。

　　8、過度使用或通用藝術(shù)

　　商業(yè)攝影集(網(wǎng)站)可以是一個(gè)很好的快速找圖的工具，但可能會(huì)導(dǎo)致一些意想不到的后果。在太多網(wǎng)站上使用的照片，在視覺效果上不會(huì)在用戶之間產(chǎn)生太多的交集或者吸引力(你不想讓你的網(wǎng)站設(shè)計(jì)看起來像其他同行的一樣)。

　　如果你打算使用商業(yè)攝影，請(qǐng)考慮通過以有趣的方式編輯或使用的這些圖像，避免圖像看起來像在其他地方看到的東西(查看所有競(jìng)爭(zhēng)對(duì)手或類似網(wǎng)站的圖像)。

　　解決方案：考慮聘請(qǐng)攝影師創(chuàng)建一個(gè)專屬于你的網(wǎng)站的攝影作品。包括與你的公司或品牌相關(guān)的視覺效果，并以正確的方式反映在你的網(wǎng)站設(shè)計(jì)上。