網(wǎng)頁(yè)設(shè)計(jì)時(shí)總是有許多考慮，而不得不為圖片元素加上框線(xiàn)處理，例如考量使用者互動(dòng)與圖片互動(dòng)時(shí)：像是滑鼠滑上、滑鼠按下時(shí)的效果;或是網(wǎng)頁(yè)版面設(shè)計(jì)時(shí)，或許是為了保留必須與文字一起排版的彈性、或許是考慮到無(wú)法掌握?qǐng)D片內(nèi)容、可能會(huì)出現(xiàn)網(wǎng)頁(yè)相同色彩的圖片，像是商業(yè)攝影圖片等，諸如以上種種狀況，都可能考慮到為圖片加上外框設(shè)計(jì)。

為圖片加上框線(xiàn)有幾種常見(jiàn)的作法，這邊先以白底網(wǎng)頁(yè)、配上淺色及深色的圖片作為范例討論：

1. 深色線(xiàn)條：最簡(jiǎn)單的作法，不論圖片內(nèi)容為何，都可以很快速的將圖片與白色背景分隔開(kāi)來(lái)，但如果圖片背景為淺色時(shí)則因?yàn)閷?duì)比過(guò)度強(qiáng)烈而得到反效果：

2. 淺色線(xiàn)條：為了不讓線(xiàn)框過(guò)度顯眼而搶去圖片主題，因此使用與白色接近的灰色線(xiàn)條作為框線(xiàn)，可以很適合的適應(yīng)各種圖片。Facebook 采用的即為此種作法，在圖片內(nèi)部加上1 像素、20% 透明度的黑色線(xiàn)條，因此線(xiàn)條本身還會(huì)帶有圖片本身的色彩。

3. 加上陰影：為圖片加上陰影可以快速的入圖片跳脫出來(lái)而讓平面的設(shè)計(jì)產(chǎn)生層次的立體感，但是在圖片沒(méi)有任何框線(xiàn)的時(shí)候加上陰影的效果并不是非常好。

4. 在圖片與線(xiàn)框之間加上間距：兼顧視覺(jué)效果與實(shí)用性的作法，可以很明確的將圖片與背景其他元素分別開(kāi)來(lái)：

5. 在加上間距的線(xiàn)框外加上陰影：有點(diǎn)類(lèi)似相紙的效果，仿真風(fēng)格的設(shè)計(jì)常用的作法

相同的道理應(yīng)用在黑色的網(wǎng)頁(yè)上的狀況如下：

當(dāng)然，在黑色網(wǎng)頁(yè)上想要加上陰影是不切實(shí)際的作法，因此改為亮色的陰影、也就是光暈，這種較為強(qiáng)烈的視覺(jué)效果通常是用在滑鼠滑上等互動(dòng)效果較為適合：

以上只是舉例幾種基本作法，當(dāng)然像是框線(xiàn)還可以有各種色彩、粗細(xì)，間距也有不同寬度、切圓角等等的作法。

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

網(wǎng)站欄目：為圖片加框：幾種常用的作法與選擇
當(dāng)前路徑：http://m.2m8n56k.cn/news41/162791.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、用戶(hù)體驗(yàn)、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)