網頁設計時總是有許多考慮,而不得不為圖片元素加上框線處理,例如考量使用者互動與圖片互動時:像是滑鼠滑上、滑鼠按下時的效果;或是網頁版面設計時,或許是為了保留必須與文字一起排版的彈性、或許是考慮到無法掌握圖片內容、可能會出現網頁相同色彩的圖片,像是商業攝影圖片等,諸如以上種種狀況,都可能考慮到為圖片加上外框設計:

商業攝影的圖片常常會有全白的背景出現:

或是像這種大面積留白的插畫圖片,若是沒有框線,實在很難看到圖片的邊界在哪裡,在網頁上與文字一起編排的時候容易造成困擾:

 

 

為圖片加上框線有幾種常見的作法,這邊先以白底網頁、配上淺色及深色的圖片作為範例討論:

1. 深色線條:最簡單的作法,不論圖片內容為何,都可以很快速的將圖片與白色背景分隔開來,但如果圖片背景為淺色時則因為對比過度強烈而得到反效果:

2. 淺色線條:為了不讓線框過度顯眼而搶去圖片主題,因此使用與白色接近的灰色線條作為框線,可以很適合的適應各種圖片。 Facebook 採用的即為此種作法,在圖片內部加上 1 像素、20% 透明度的黑色線條,因此線條本身還會帶有圖片本身的色彩。

3. 加上陰影:為圖片加上陰影可以快速的入圖片跳脫出來而讓平面的設計產生層次的立體感,但是在圖片沒有任何框線的時候加上陰影的效果並不是非常好。

4. 在圖片與線框之間加上間距:兼顧視覺效果與實用性的作法,可以很明確的將圖片與背景其他元素分別開來:

5. 在加上間距的線框外加上陰影:有點類似相紙的效果,仿真風格的設計常用的作法

相同的道理應用在黑色的網頁上的狀況如下:

 

當然,在黑色網頁上想要加上陰影是不切實際的作法,因此改為亮色的陰影、也就是光暈,這種較為強烈的視覺效果通常是用在滑鼠滑上等互動效果較為適合:

以上只是舉例幾種基本作法,當然像是框線還可以有各種色彩、粗細,間距也有不同寬度、切圓角等等的作法。

當然並不是每一種場合都必須為圖片加上框線,大多是必須與文字交互排版的情況下會比較需要。其他像是相簿網站、燈箱效果等就完全不需要為圖片加上線框(使用者也不希望如此)。就算是必須為圖片加上框,也會希望在保持版面一致性、不過度搶眼而造成反效果的前提下進行。

 

Desiring Clicks 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。歡迎你一起參與介面設計,讓這個世界變得更美好。

 

延伸閱讀:

明度搭配對於資訊顯示的影響

捕捉使用者注意力:適量的突現動態效果

封閉性:看不見卻很重要的虛擬曲線

淺談網站的主要色調應用

 

Images via ghentooo, cc License

誠摯邀請你成為好朋友-->
        

About The Author

Fourdesire Blog http://blog.fourdesire.com 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。我們相信任何設計、工程都必須由人的角度出發,更貼近人性與心靈!

Related Posts

留下你的看法: