圖像

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-style_philosophy_large_mdpi.png" alt="" />

在 material design 中，圖像（無(wú)論是繪畫(huà)還是攝影）都應(yīng)該是組建而成而并非人為策劃的，看起來(lái)神奇并且不顯得過(guò)度制作。這種風(fēng)格樂(lè)觀，愉悅，并且坦率。這種風(fēng)格比較強(qiáng)調(diào)場(chǎng)景的實(shí)質(zhì)性（Materiality），質(zhì)感，深度，讓人意想不到的色彩運(yùn)用， 以及對(duì)環(huán)境背景的關(guān)注。這些原則都旨在創(chuàng)建目的性強(qiáng)，美麗又有深度的用戶界面。

原則

當(dāng)使用繪畫(huà)和攝影提升用戶體驗(yàn)時(shí)，選擇能夠表達(dá)個(gè)人關(guān)聯(lián)、信息和令人喜悅的圖像。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-personal_20relevance_large_mdpi.png" alt="" />

個(gè)人關(guān)聯(lián)
使用能夠喚起回憶的影像來(lái)建立用戶與應(yīng)用程序的情感聯(lián)系。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-information_large_mdpi.png" alt="" />

信息
傳達(dá)特定的信息。以輔助理解的方式來(lái)創(chuàng)建智能的感官體驗(yàn)。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-delight_large_mdpi.png" alt="" />

閃光點(diǎn)
用相關(guān)圖像以一種意想不到的方式來(lái)取悅用戶，讓用戶覺(jué)得不可思議。

場(chǎng)景賞析

加入邏輯，確保圖像是動(dòng)感的，并且顯示出場(chǎng)景智能性和相關(guān)性。帶有預(yù)測(cè)性的視覺(jué)效果能夠彰顯出智能的水準(zhǔn)，從而能大大改善用戶體驗(yàn)。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-appreciaton_content_large_mdpi.png" alt="" />

身臨其境

要勇于運(yùn)用遮蓋的方法，或是對(duì)色彩和內(nèi)容的疊加來(lái)構(gòu)成對(duì)畫(huà)面主角的印象，抑或是構(gòu)成一幅縮略圖。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-immersive_20obscure_large_mdpi.png" alt="" />

最佳實(shí)踐

使用多種媒體

插畫(huà)和攝影可以運(yùn)用在同一個(gè)產(chǎn)品中。攝影自動(dòng)暗含了一定程度的特定性，從而應(yīng)該用來(lái)展示特定的物體和故事。繪畫(huà)則能有效的表現(xiàn)出概念和隱喻，而這一點(diǎn)是攝影所不具備的。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-multiple-mediums-a_large_mdpi.png" alt="" />

(上圖)可取

對(duì)于特定的實(shí)物，首先考慮用攝影來(lái)表現(xiàn)。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-multiple-mediums-b_large_mdpi.png" alt="" />

(上圖)可取

當(dāng)所表達(dá)的內(nèi)容并非具體實(shí)物（或者不能被具體實(shí)物所概括）時(shí)，繪畫(huà)則可以傳達(dá)出你的應(yīng)用程序的信息，并且允許用戶一目了然的理解內(nèi)容。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-watch_stock-do_large_mdpi.png" alt="" />

(上圖)可取

如果你使用攝影來(lái)傳達(dá)一種概念，你需要?jiǎng)?chuàng)建一些具有思考性的，甚至是隱含寓意的作品。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-watch-stock-dont_large_mdpi.png" alt="" />

(上圖)不可取

不要局限于圖片庫(kù)。

遠(yuǎn)離圖片庫(kù)(Stay away from stock)

利用圖像可以表達(dá)一種與眾不同的心聲，還可以展現(xiàn)出絕佳的創(chuàng)意。

對(duì)于特定的實(shí)體或品牌內(nèi)容，要用具體的圖像。對(duì)于較抽象的內(nèi)容，使其具有解釋性。然而庫(kù)存攝影(Photographic stock)和剪貼畫(huà)(clipart)既不具體，又不具解釋性。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-stock-do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-stock-dont_large_mdpi.png" alt="" />

(上圖)不可取

有焦點(diǎn)

你的圖像應(yīng)當(dāng)有一個(gè)標(biāo)志性的焦點(diǎn)。小到單一物體，大到整體布局，都可以成為焦點(diǎn)。確保能夠用一個(gè)讓人印象深刻的方法，傳遞給用戶一個(gè)清晰的概念。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-reminder-do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-reminder-dont_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-sf-do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-sf-dont_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-flight-do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-flight-dont_large_mdpi.png" alt="" />

(上圖)不可取

構(gòu)建敘事(Build narratives)

創(chuàng)建一個(gè)讓人感覺(jué)身臨其境的故事和上下文(context)場(chǎng)景。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-narrative-appointment-do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-narrative-appointment-dont_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-narrative-carseat-do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-narrative-carseat-dont_large_mdpi.png" alt="" />

(上圖)不可取

不要過(guò)度操作

保持圖像的原始完整性。不要過(guò)度使用高度濾鏡或高斯模糊，尤其是當(dāng)試圖去隱藏劣化(degradation)的時(shí)候。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-manipulate-flowers-do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-manipulate-flowers-dont_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-manipulate-lake-do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-manipulate-lake-dont_large_mdpi.png" alt="" />

(上圖)不可取

用戶界面集成(UI Integration)

分辨率

確保你的圖像大小適應(yīng)其邊框并且支持跨平臺(tái)。該結(jié)構(gòu)強(qiáng)調(diào)大幅圖像。理想情況下，素材應(yīng)該不會(huì)出現(xiàn)像素化。要為特定的比率和設(shè)備測(cè)試合適的分辨率大小。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-resolutiona_large_mdpi.png" alt="" />

(上圖)可取

尺寸得當(dāng)?shù)膱D像

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-resolutionb_large_mdpi.png" alt="" />

(上圖)不可取

劣化的圖像

調(diào)整大小(Introduce Scale)

利用不同的大小的圖像來(lái)創(chuàng)造視覺(jué)上的重要性。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-introduce_scalea_large_mdpi.png" alt="" />
在一個(gè)畫(huà)冊(cè)的背景中，引入各種尺寸的縮略圖來(lái)傳達(dá)內(nèi)容的層次結(jié)構(gòu)。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-introduce_scaleb_large_mdpi.png" alt="" />
鼓勵(lì)在同一個(gè)生態(tài)系統(tǒng)使用多個(gè)容器。

文字保護(hù)

添加文字保護(hù)紗(protection scrims)來(lái)使圖像上的文字顯示清晰易讀。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment1do_large_mdpi.png" alt="" />

(上圖)可取

暗紗(dark scrims)理想的透明度應(yīng)當(dāng)在 20％-40％ 之間,亮紗(light scrims)理想的透明度應(yīng)當(dāng)在 40％-60％ 之間，都要視具體內(nèi)容來(lái)定。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment1dont_large_mdpi.png" alt="" />

(上圖)不可取

不要過(guò)度用文字保護(hù)紗遮擋住圖像內(nèi)容。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment2do_large_mdpi.png" alt="" />

(上圖)可取

對(duì)于大一些的風(fēng)景圖，應(yīng)該在特定的區(qū)域內(nèi)加入文字保護(hù)紗， 不要覆蓋住整個(gè)圖像。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment2dont_large_mdpi.png" alt="" />

(上圖)不可取

不要過(guò)度覆蓋大圖像。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment3do_large_mdpi.png" alt="" />

(上圖)可取

顏色疊加不同于文字保護(hù)紗(text-protection scrims)，可以用來(lái)作為設(shè)計(jì)元素。當(dāng)創(chuàng)造互補(bǔ)的顏色疊加的時(shí)候，要從與其并列的內(nèi)容中取樣，這樣才能夠產(chǎn)生出和諧一致的色板，從而展現(xiàn)出良好的內(nèi)容意識(shí)。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment3dont_large_mdpi.png" alt="" />

(上圖)不可取

頭像和縮略圖

頭像和縮略圖代表實(shí)體或內(nèi)容，可以是攝影或者概念性的插畫(huà)。 通常來(lái)講，他們是橫置目標(biāo)（tap targets），可以讓人對(duì)事物和內(nèi)容有一個(gè)初步印象。

頭像可以用來(lái)表示個(gè)人。對(duì)于個(gè)人頭像，要提供個(gè)性化的選項(xiàng)。由于用戶也可能不個(gè)性化設(shè)定自己的頭像，不妨將默認(rèn)效果設(shè)置得令人愉悅一些。當(dāng)與一個(gè)特定的標(biāo)志(logo)一起使用時(shí)，頭像也可以用來(lái)表示品牌。

縮略圖暗示著更多的信息，讓用戶一窺其內(nèi)容，并協(xié)助導(dǎo)航。縮略圖讓你能把圖像放在狹小的空間里。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypeavatarsa_large_mdpi.png" alt="" />
頭像使應(yīng)用更具個(gè)性化而且占用的空間小。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypeavatarsb_large_mdpi.png" alt="" />
一個(gè)品牌頭像能夠讓人在一眼之內(nèi)傳達(dá)信息，縮略圖也如此。

主角圖像(Hero Images)

主角圖像通常被固定在很明顯的位置，大小比普通大小略大，比如屏幕頂部的橫幅。主角圖像能夠吸引用戶，提供了內(nèi)容相關(guān)的背景，或加強(qiáng)品牌。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypeheroa_large_mdpi.png" alt="" />

特征圖像
特征圖像是風(fēng)格醒目的主要視覺(jué)焦點(diǎn)，并且有著特異的設(shè)計(jì)布局。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypeherob_large_mdpi.png" alt="" />

合成的主角圖像(Integrated hero image)

合成的主角圖像通常在一個(gè)樣式中包含著混雜特異的部分。 這些部分并不能形成首要的視覺(jué)焦點(diǎn)。

圖集

圖集圖片（gallery images）通常風(fēng)格醒目，且他們的布局基本相同，比如網(wǎng)格（grid）布局，或是單一的圖像。

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypegallerya_large_mdpi.png" alt="" />
照片網(wǎng)格

http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypegalleryb_large_mdpi.png" alt="" />
圖集圖片

原文：Imagery 翻譯：lhyqy5 校對(duì)：chenyusi