今天通過(guò)圖像篇，帶大家了解在UI 界面設(shè)計(jì)中，我們?cè)撊绾巫⒁鈭D像的一些問(wèn)題。

五篇系列目前已經(jīng)到圖像篇幅了，今天帶來(lái)的圖像篇，它是一個(gè)強(qiáng)大的工具，可以幫助您溝通和區(qū)分您的產(chǎn)品。文字和圖像相比起來(lái)，人們更愿意去接受圖像帶來(lái)的信息傳遞，因?yàn)閳D像閱讀起來(lái)會(huì)比文字更加輕松有趣，有意圖像有助于吸引用戶目光。因此能合理運(yùn)用圖像在UI設(shè)計(jì)中，他能很好的幫助我們產(chǎn)品取得體驗(yàn)上的提升，綜合我個(gè)人一些經(jīng)驗(yàn)觀點(diǎn)，今天我就和大家分享下Google在圖像方面是如何運(yùn)用的。

圖像使用原則

Google其實(shí)很早之前的設(shè)計(jì)語(yǔ)言里面就已經(jīng)提到這塊并將其簡(jiǎn)單定義為三大關(guān)鍵點(diǎn)：

1. 相關(guān)性的?
2. 信息性的 ?
3. 令人愉快的

使用插圖和攝影提高產(chǎn)品使用體驗(yàn)時(shí)候，需要選擇與功能強(qiáng)相關(guān)的圖像。下面我們看下例子：

從左至右分別，與個(gè)人相關(guān)性的，功能信息表達(dá)，令人愉快的。

比如圖1，該界面就是電話詳情頁(yè)面，用一張真實(shí)自然的圖片，就能貼合目前場(chǎng)景所需要表達(dá)含義，同時(shí)界面也不那么枯燥。

第二張圖像傳達(dá)特定的信息（圖像與目的地含義一致，都是表達(dá)美國(guó)相關(guān)的），使理解變得容易。

圖3設(shè)計(jì)師在設(shè)計(jì)該界面時(shí)候，運(yùn)用與文案十分貼合的插圖，這樣目的是更能理解該功能所表達(dá)含義了，而不是去慢慢閱讀文字來(lái)理解，因?yàn)槿祟愌劬Ω矚g圖像的元素勝過(guò)于文字。

使用多種圖像

插畫(huà)和攝影圖像都可以存在于同一產(chǎn)品中。攝影圖像一般用于可以表達(dá)特定含義，且很清晰傳達(dá)功能含義，插圖用于表達(dá)無(wú)法通過(guò)攝影表達(dá)其他含義時(shí)候存在。

避免使用照片庫(kù)

圖像上一定要選擇真實(shí)易懂的，傳達(dá)故事性的，避免過(guò)于隨意，如果一直使用照片庫(kù)中的圖片，而不使用特定攝影照片，那樣設(shè)計(jì)的界面會(huì)大大降低產(chǎn)品的體驗(yàn)。

使用圖像或者插圖需要聚焦

為什么？清晰且聚焦的圖片能更直觀的表達(dá)功能，用戶也能輕易明白起含義，同時(shí)也不至于讓界面變得枯燥乏味，這就是我們?cè)谠O(shè)計(jì)中，為何有些界面一定要去視覺(jué)化處理，而不是單獨(dú)一個(gè)文字排版。

清晰的焦點(diǎn)一目了然地傳達(dá)了這一概念，且畫(huà)面干凈簡(jiǎn)約。右側(cè)圖像缺乏焦點(diǎn)使圖像毫無(wú)意義。

建立深刻故事性

創(chuàng)建一個(gè)和內(nèi)容相關(guān)且能讓你身臨其境的故事，這樣可以讓你的產(chǎn)品更加人性化。通過(guò)視覺(jué)敘事來(lái)定義情緒。

圖1 ：講述故事的圖像無(wú)限有趣且內(nèi)容豐富。 圖2：缺乏故事的圖像失去了傳達(dá)情緒，品牌和背景的機(jī)會(huì)。

確保圖像的清晰度

設(shè)計(jì)界面中，一定要注意圖像的清晰度，避免次像素和迷糊的照片，應(yīng)該在針對(duì)不同平臺(tái)定義不同適配尺寸，這樣能保證多端使用該功能時(shí)候，圖片是清晰可見(jiàn)。

注意使用圖像的大小位置

特定的區(qū)域和功能，我們可以適當(dāng)是該區(qū)域圖片放大或者留白處理，這樣的目的是保證重要的地方能優(yōu)先被用戶感知到。

文字保護(hù)

要使文字在圖像上清晰易讀，請(qǐng)以特定的形式應(yīng)用文本保護(hù)。比如常用的我們可以用黑色透明度疊加或者使用黑色漸變透明應(yīng)用于特定的區(qū)域。

在此圖像中，漸變?yōu)?0％黑色。
這是已應(yīng)用于左側(cè)圖像的漸變。

左側(cè)和右側(cè)相比起來(lái)，明顯右側(cè)更加適合，左側(cè)在使用黑色透明度蒙層時(shí)候，過(guò)于黑暗，從而影響了視覺(jué)，美觀度。

我們還可以使用顏色塊去呈現(xiàn)文字內(nèi)容如圖1 ? 那么圖2使用的是整體圖形取平均色，然后將該色值降低透明度來(lái)做蒙層。

頭像和縮略圖

頭像可以用來(lái)代表人。對(duì)于個(gè)人頭像，提供個(gè)性化選項(xiàng)。由于用戶可能選擇不個(gè)性化頭像，因此提供令人愉快的默認(rèn)頭像。當(dāng)與特定頭像一起使用時(shí)，頭像也可用于表示品牌。

縮略圖提供了更多信息 – 讓用戶窺視內(nèi)容 – 并協(xié)助導(dǎo)航?？s略圖可讓您在狹小空間中包含圖像 。

盡量使用黃金比例

為什么？圖像中使用比例能很好的在多端靈活適配，且設(shè)計(jì)師在合作時(shí)候，能保證統(tǒng)一，且目標(biāo)一致,常用的比例如下，根據(jù)自己產(chǎn)品特征去選擇合適的比例。

總結(jié)

從上面 我們可以了解到圖像使用細(xì)節(jié)上需要注意的點(diǎn)有很多，比如圖像的清晰度，圖像的功能含義表達(dá)是否準(zhǔn)確，圖像的視覺(jué)焦點(diǎn)，圖像的故事性，最后我們又提到了圖像上面使用文字時(shí)候需要注意細(xì)節(jié)。總之圖像在使用細(xì)節(jié)上我們需要注意更多。

相關(guān)閱讀

如何創(chuàng)建精致的UI界面（二）：圖形篇

如何創(chuàng)建精致的UI界面（一）：排版篇

視覺(jué)層次結(jié)構(gòu)的4大武器

#專欄作家#

Tony，微信公眾號(hào)：洞見(jiàn)設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng)，簡(jiǎn)歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見(jiàn)設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議