如何創(chuàng)建精致的UI界面(四):圖像篇

2 評(píng)論 7455 瀏覽 34 收藏 9 分鐘

今天通過(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 同學(xué),你這個(gè)YSE是什么意思?

    來(lái)自廣東 回復(fù)
    1. 就是確認(rèn)ok的意思

      回復(fù)