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

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

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

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

 

 

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

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

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

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

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

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

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

 

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

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

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

 

延伸閱讀:

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

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

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

淺談網站的主要色調應用

 

Images via ghentooo, cc License

你一定有看過這種電視遙控器,開關、數字鍵、換台和音量按鍵放在顯而易見的地方,遙控器的下面還有一個蓋子,拉下蓋子之後可以看到更多不常用的按鍵:切換輸入頻道、修正顏...
RGB 與 CMYK 是大家很熟悉的色彩描述系統,在許多地方我們都可以發現使用這兩種方式標示色彩的色彩碼,雖然這兩種系統的組成原理不一樣,但是是可以透過轉換取得...
你有玩過寶石方塊或 Zookeeper 這類的遊戲嗎?這些遊戲都需要玩家們快速的在畫面上尋找相同的圖案,然後將相同的圖案放在一起得到分數。但是你有沒有想過,玩這...
時間一直是人類注重的一個話題, 從賽車、跑步到程式設計,速度都是許多人追求的重心。據說 Google 創辦人 Larry Page 可以感受到 200 毫秒(0...
我們一般都以為我們的眼睛是由下而上所驅動的,也就是先被某種東西吸引目光,然後才去觀察是什麼東西吸引我們的目光。我們可以先看看下面這個影片:你需要仔細的觀察裡面白...
「工欲善其事,必先利其器」為了開發出更好、更有創意又高質感的 iOS 應用程式,方便又大碗的輔助工具以及免費資源是絕對少不了的!這邊讓我們來介紹一些常用又簡單的...
© 2013 Desiring Clicks. All Rights Reserved.
Top