手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

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

2014-3-24    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.88yangsc.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里

網(wǎng)頁(yè)設(shè)計(jì)時(shí)總是有許多考慮,而不得不為圖片元素加上框線處理,例如考量使用者互動(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è)攝影圖片等,諸如以上種種狀況,都可能考慮到為圖片加上外框UI設(shè)計(jì)

商業(yè)攝影的圖片常常會(huì)有全白的背景出現(xiàn):

或是像這種大面積留白的插畫(huà)圖片,若是沒(méi)有框線,實(shí)在很難看到圖片的邊界在哪里,在網(wǎng)頁(yè)上與文字一起編排的時(shí)候容易造成困擾:


 

 

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

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

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


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


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


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


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


 

 


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


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

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

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔