|
網(wǎng)頁設(shè)計時總是有許多考慮,，而不得不為圖片元素加上框線處理，例如考量使用者互動與圖片互動時：像是滑鼠滑上,、滑鼠按下時的效果,；或是網(wǎng)頁版面設(shè)計時，或許是為了保留必須與文字一起排版的彈性,、或許是考慮到無法掌握圖片內(nèi)容,、可能會出現(xiàn)網(wǎng)頁相同色彩的圖片，像是商業(yè)攝影圖片等,，諸如以上種種狀況,，都可能考慮到為圖片加上外框設(shè)計： 商業(yè)攝影的圖片常常會有全白的背景出現(xiàn)： 
或是像這種大面積留白的插畫圖片，若是沒有框線,，實在很難看到圖片的邊界在哪里,，在網(wǎng)頁上與文字一起編排的時候容易造成困擾： 
為圖片加上框線有幾種常見的作法，這邊先以白底網(wǎng)頁,、配上淺色及深色的圖片作為范例討論： 1. 深色線條：最簡單的作法,，不論圖片內(nèi)容為何，都可以很快速的將圖片與白色背景分隔開來,，但如果圖片背景為淺色時則因為對比過度強烈而得到反效果： 
2. 淺色線條：為了不讓線框過度顯眼而搶去圖片主題,，因此使用與白色接近的灰色線條作為框線，可以很適合的適應(yīng)各種圖片,。Facebook 采用的即為此種作法,，在圖片內(nèi)部加上1 像素、20％ 透明度的黑色線條,，因此線條本身還會帶有圖片本身的色彩,。 
3. 加上陰影：為圖片加上陰影可以快速的入圖片跳脫出來而讓平面的設(shè)計產(chǎn)生層次的立體感,，但是在圖片沒有任何框線的時候加上陰影的效果并不是非常好。 
4. 在圖片與線框之間加上間距：兼顧視覺效果與實用性的作法,，可以很明確的將圖片與背景其他元素分別開來： 
5. 在加上間距的線框外加上陰影：有點類似相紙的效果,，仿真風(fēng)格的設(shè)計常用的作法 
相同的道理應(yīng)用在黑色的網(wǎng)頁上的狀況如下：  
當然，在黑色網(wǎng)頁上想要加上陰影是不切實際的作法,，因此改為亮色的陰影,、也就是光暈，這種較為強烈的視覺效果通常是用在滑鼠滑上等互動效果較為適合： 
以上只是舉例幾種基本作法,，當然像是框線還可以有各種色彩,、粗細，間距也有不同寬度,、切圓角等等的作法,。 當然并不是每一種場合都必須為圖片加上框線，大多是必須與文字交互排版的情況下會比較需要,。其他像是相簿網(wǎng)站,、燈箱效果等就完全不需要為圖片加上線框（使用者也不希望如此）。就算是必須為圖片加上框,，也會希望在保持版面一致性,、不過度搶眼而造成反效果的前提下進行。 |
|
|
