SPARKFUL

Blog

Insights from the SPARKFUL x Fourdesire teams

為圖片加框:幾種常用的作法與選擇

Decill Changuser-interface-design
name

本文有大量圖檔遺失,我們正在努力恢復中了!

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

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

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

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

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

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

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

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

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

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

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

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

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


Reference:

  1. Photo by charlesdeluvio on Unsplash
Decill Chang
Decill Chang
Principal Designer
A しばいぬ lover.
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...Read more