今天通過圖像篇，帶大家了解在UI 界面設計中，我們該如何注意圖像的一些問題。

五篇系列目前已經到圖像篇幅了，今天帶來的圖像篇，它是一個強大的工具，可以幫助您溝通和區分您的產品。文字和圖像相比起來，人們更愿意去接受圖像帶來的信息傳遞，因為圖像閱讀起來會比文字更加輕松有趣，有意圖像有助于吸引用戶目光。因此能合理運用圖像在UI設計中，他能很好的幫助我們產品取得體驗上的提升，綜合我個人一些經驗觀點，今天我就和大家分享下Google在圖像方面是如何運用的。

圖像使用原則

Google其實很早之前的設計語言里面就已經提到這塊并將其簡單定義為三大關鍵點：

1. 相關性的?
2. 信息性的 ?
3. 令人愉快的

使用插圖和攝影提高產品使用體驗時候，需要選擇與功能強相關的圖像。下面我們看下例子：

從左至右分別，與個人相關性的，功能信息表達，令人愉快的。

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

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

圖3設計師在設計該界面時候，運用與文案十分貼合的插圖，這樣目的是更能理解該功能所表達含義了，而不是去慢慢閱讀文字來理解，因為人類眼睛更喜歡圖像的元素勝過于文字。

使用多種圖像

插畫和攝影圖像都可以存在于同一產品中。攝影圖像一般用于可以表達特定含義，且很清晰傳達功能含義，插圖用于表達無法通過攝影表達其他含義時候存在。

避免使用照片庫

圖像上一定要選擇真實易懂的，傳達故事性的，避免過于隨意，如果一直使用照片庫中的圖片，而不使用特定攝影照片，那樣設計的界面會大大降低產品的體驗。

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

為什么？清晰且聚焦的圖片能更直觀的表達功能，用戶也能輕易明白起含義，同時也不至于讓界面變得枯燥乏味，這就是我們在設計中，為何有些界面一定要去視覺化處理，而不是單獨一個文字排版。

清晰的焦點一目了然地傳達了這一概念，且畫面干凈簡約。右側圖像缺乏焦點使圖像毫無意義。

建立深刻故事性

創建一個和內容相關且能讓你身臨其境的故事，這樣可以讓你的產品更加人性化。通過視覺敘事來定義情緒。

圖1 ：講述故事的圖像無限有趣且內容豐富。 圖2：缺乏故事的圖像失去了傳達情緒，品牌和背景的機會。

確保圖像的清晰度

設計界面中，一定要注意圖像的清晰度，避免次像素和迷糊的照片，應該在針對不同平臺定義不同適配尺寸，這樣能保證多端使用該功能時候，圖片是清晰可見。

注意使用圖像的大小位置

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

文字保護

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

在此圖像中，漸變為60％黑色。
這是已應用于左側圖像的漸變。

左側和右側相比起來，明顯右側更加適合，左側在使用黑色透明度蒙層時候，過于黑暗，從而影響了視覺，美觀度。

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

頭像和縮略圖

頭像可以用來代表人。對于個人頭像，提供個性化選項。由于用戶可能選擇不個性化頭像，因此提供令人愉快的默認頭像。當與特定頭像一起使用時，頭像也可用于表示品牌。

縮略圖提供了更多信息 – 讓用戶窺視內容 – 并協助導航?？s略圖可讓您在狹小空間中包含圖像 。

盡量使用黃金比例

為什么？圖像中使用比例能很好的在多端靈活適配，且設計師在合作時候，能保證統一，且目標一致,常用的比例如下，根據自己產品特征去選擇合適的比例。

總結

從上面 我們可以了解到圖像使用細節上需要注意的點有很多，比如圖像的清晰度，圖像的功能含義表達是否準確，圖像的視覺焦點，圖像的故事性，最后我們又提到了圖像上面使用文字時候需要注意細節?？傊畧D像在使用細節上我們需要注意更多。

相關閱讀

如何創建精致的UI界面（二）：圖形篇

如何創建精致的UI界面（一）：排版篇

視覺層次結構的4大武器

#專欄作家#

Tony，微信公眾號：洞見設計，人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長，簡歷指導，每周分享最有價值的設計經驗，擅長產品體驗設計，關注【洞見設計】后臺回復“彩蛋”領取設計資料。

本文原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議