目前我們很多產(chǎn)品設(shè)計(jì)場(chǎng)景中，很多地方都需要用到圖片，一張圖片有時(shí)候勝過(guò)千言萬(wàn)語(yǔ)，圖片可以捕捉用戶的注意力，同時(shí)能加強(qiáng)設(shè)計(jì)的整個(gè)設(shè)計(jì)氛圍，它不僅僅是裝飾，好的圖片能帶來(lái)好的設(shè)計(jì)體驗(yàn)。

　　圖片使用一定要能激發(fā)和吸引用戶的，但并不是所有圖片都可以都能改善體驗(yàn)，有些只是為了占位符號(hào)，或者用不好的情況下反而會(huì)起到相反效果。

　　原則1:傳遞的信息必須準(zhǔn)確

　　頁(yè)面中使用的圖片一定要和本身場(chǎng)景相關(guān)，有很強(qiáng)關(guān)系的圖片，確保和內(nèi)容互相呼應(yīng)，運(yùn)用的好，它可以使得用戶更好的理解界面功能表達(dá)。

　　▲ 飛行地理位置采用目的地圖片

　　▲ 電影詳情介紹背景氛圍運(yùn)用電影截圖

　　▲ 目錄選擇，用比較符合類目的圖片讓人更容易理解

　　原則2:必須友好

　　圖片除了在資訊，信息功能頁(yè)面展現(xiàn)，同時(shí)在頁(yè)面功能空白頁(yè)時(shí)也出現(xiàn)頻率很高，所以圖片的表達(dá)一定要友好，同時(shí)能去引導(dǎo)用戶下一步如何操作。

　　原則3:圖片不要過(guò)度

　　具有吸引力圖片當(dāng)然是可以提升整體視覺(jué)感受和體驗(yàn)，有時(shí)候還需要去強(qiáng)調(diào)和引導(dǎo)功能，所以在使用圖片時(shí)候，圖片不應(yīng)該有過(guò)多的視覺(jué)焦點(diǎn)去影響用戶，不能過(guò)度。

　　▲ 圖片背景氛圍太多，干擾元素太強(qiáng)，讓我們完全忽略了2個(gè)最主要的按鈕操作

　　原則4:只有一個(gè)焦點(diǎn)

　　使用圖像設(shè)計(jì)時(shí)候，一定要注意只有一個(gè)視覺(jué)焦點(diǎn)，清晰的一目了然傳遞信息和要表達(dá)的內(nèi)容，如果缺乏焦點(diǎn)的圖片是毫無(wú)意義。

　　原則5:高分辨率，無(wú)失真

　　確保圖片的高分辨率適應(yīng)不同的平臺(tái)，頭像不能出現(xiàn)壓縮和拉伸的情況。

　　原則6:圖片上放文字處理技巧

　　如果是疊加黑色透明度，黑色透明度值最深處控制在60%。

　　▲ 圖片太暗，影響了整體圖片質(zhì)量

　　1.黑色漸變蒙層

　　圖片上疊加70%-0%漸變，漸變高度根據(jù)內(nèi)容而定。

　　2.圖片上疊加顏色

　　圖片上疊加10%左右黑色，保證文字能識(shí)別清晰，同時(shí)不影響圖片質(zhì)量。

　　▲ 圖片上疊加黑色

　　3.文字加投影，圖片上留干凈區(qū)域

　　1.商品圖片需要留文字地方圖片設(shè)計(jì)比較干凈；2.文字運(yùn)用投影處理

　　▲ 對(duì)商品圖留出空白

　　▲ 文字加投影

　　4.漸變彩色趨勢(shì)

　　圖片上疊加彩色漸變蒙版，這樣設(shè)計(jì)商品更加時(shí)尚。

　　▲圖片上疊加彩色到透明漸變，凸顯文字同時(shí)傳遞個(gè)性化和品牌色

　　▲圖片上疊加層色漸變，運(yùn)用幾何圖形，能很好營(yíng)造產(chǎn)品設(shè)計(jì)個(gè)性化

　　▲運(yùn)用帶顏色的蒙版遮罩

　　在使用圖片作為頁(yè)面氛圍，背景時(shí)，一定要圍繞功能所表達(dá)的含義去選擇圖片或者圖形，使用它們時(shí)，可以去創(chuàng)造沉浸式的故事，上下文的感覺(jué)，并最終人性化的幫助用戶去閱讀體驗(yàn)，讓圖片幫助我們?cè)谠O(shè)計(jì)中達(dá)到最佳效果。

　　以上就是奇酷為大家分享的“UI設(shè)計(jì)中圖文處理全部技巧”謝謝大家觀看，如果對(duì)UI設(shè)計(jì)感興趣的話，想學(xué)UI設(shè)計(jì)培訓(xùn)的，也可以在線咨詢，我們將竭誠(chéng)為你解答。