UI設(shè)計中圖文處理全部技巧
來源：
奇酷教育 發(fā)表于：
奇酷教育-UI培訓(xùn)_UI培訓(xùn)班_UI設(shè)計_UI設(shè)計培訓(xùn)班
在
ui設(shè)計中，經(jīng)常需要用到圖片，如何選擇一個合適的圖片表達(dá)自己設(shè)計的主題相當(dāng)重要，希望這篇文章能給你一些啟示。
目前我們很多產(chǎn)品設(shè)計場景中，很多地方都需要用到圖片，一張圖片有時候勝過千言萬語，圖片可以捕捉用戶的注意力，同時能加強設(shè)計的整個設(shè)計氛圍，它不僅僅是裝飾，好的圖片能帶來好的設(shè)計體驗。
一、原則
圖片使用一定要能激發(fā)和吸引用戶的，但并不是所有圖片都可以都能改善體驗，有些只是為了占位符號，或者用不好的情況下反而會起到相反效果。
原則1:傳遞的信息必須準(zhǔn)確
頁面中使用的圖片一定要和本身場景相關(guān)，有很強關(guān)系的圖片，確保和內(nèi)容互相呼應(yīng)，運用的好，它可以使得用戶更好的理解界面功能表達(dá)。
▲ 飛行地理位置采用目的地圖片
▲ 電影詳情介紹背景氛圍運用電影截圖
▲ 目錄選擇，用比較符合類目的圖片讓人更容易理解
原則2:必須友好
圖片除了在資訊，信息功能頁面展現(xiàn)，同時在頁面功能空白頁時也出現(xiàn)頻率很高，所以圖片的表達(dá)一定要友好，同時能去引導(dǎo)用戶下一步如何操作。
原則3:圖片不要過度
具有吸引力圖片當(dāng)然是可以提升整體視覺感受和體驗，有時候還需要去強調(diào)和引導(dǎo)功能，所以在使用圖片時候，圖片不應(yīng)該有過多的視覺焦點去影響用戶，不能過度。
▲ 圖片背景氛圍太多，干擾元素太強，讓我們完全忽略了2個最主要的按鈕操作
原則4:只有一個焦點
使用圖像設(shè)計時候，一定要注意只有一個視覺焦點，清晰的一目了然傳遞信息和要表達(dá)的內(nèi)容，如果缺乏焦點的圖片是毫無意義。
原則5:高分辨率，無失真
確保圖片的高分辨率適應(yīng)不同的平臺，頭像不能出現(xiàn)壓縮和拉伸的情況。
原則6:圖片上放文字處理技巧
如果是疊加黑色透明度，黑色透明度值最深處控制在60%。
▲ 圖片太暗，影響了整體圖片質(zhì)量
二、關(guān)于圖文處理的技巧，目前比較常見的有以下這些，之前我們析歸納過，再來回顧下：
1.黑色漸變蒙層
圖片上疊加70%-0%漸變，漸變高度根據(jù)內(nèi)容而定。
2.圖片上疊加顏色
圖片上疊加10%左右黑色，保證文字能識別清晰，同時不影響圖片質(zhì)量。
▲ 圖片上疊加黑色
3.文字加投影，圖片上留干凈區(qū)域
1.商品圖片需要留文字地方圖片設(shè)計比較干凈；2.文字運用投影處理
▲ 對商品圖留出空白
▲ 文字加投影
4.漸變彩色趨勢
圖片上疊加彩色漸變蒙版，這樣設(shè)計商品更加時尚。
▲圖片上疊加彩色到透明漸變，凸顯文字同時傳遞個性化和品牌色
▲圖片上疊加層色漸變，運用幾何圖形，能很好營造產(chǎn)品設(shè)計個性化
▲運用帶顏色的蒙版遮罩
三、設(shè)計結(jié)論
在使用圖片作為頁面氛圍，背景時，一定要圍繞功能所表達(dá)的含義去選擇圖片或者圖形，使用它們時，可以去創(chuàng)造沉浸式的故事，上下文的感覺，并最終人性化的幫助用戶去閱讀體驗，讓圖片幫助我們在設(shè)計中達(dá)到最佳效果。
以上就是
奇酷為大家分享的“UI設(shè)計中圖文處理全部技巧”謝謝大家觀看，如果對UI設(shè)計感興趣的話，想學(xué)
UI設(shè)計培訓(xùn)的，也可以在線咨詢，我們將竭誠為你解答。
您現(xiàn)在所在的位置：首頁 >關(guān)于奇酷 > 行業(yè)動態(tài) > UI設(shè)計中圖文處理全部技巧
