Material Design之圖像Imagery
在material design中,圖像(無論是繪畫還是攝影)都應(yīng)該是組建而成而并非人為策劃的,看起來神奇并且不顯得過度制作。這種風(fēng)格樂觀,愉悅,并且坦率。這種風(fēng)格 比較強(qiáng)調(diào)場景的實(shí)質(zhì)性(Materiality),質(zhì)感,深度,讓人意想不到的色彩運(yùn)用, 以及對環(huán)境背景的關(guān)注。這些原則都旨在創(chuàng)建目的性強(qiáng),美麗又有深度的用戶界面。
原則
當(dāng)使用繪畫和攝影提升用戶體驗(yàn)時(shí),選擇能夠表達(dá)個(gè)人關(guān)聯(lián)、信息和令人喜悅的圖像。
個(gè)人關(guān)聯(lián)
使用能夠喚起回憶的影像來建立用戶與應(yīng)用程序的情感聯(lián)系。
信息
傳達(dá)特定的信息。以輔助理解的方式來創(chuàng)建智能的感官體驗(yàn)。
閃光點(diǎn)
用相關(guān)圖像以一種意想不到的方式來取悅用戶,讓用戶覺得不可思議。
場景賞析
加入邏輯,確保圖像是動(dòng)感的,并且顯示出場景智能性和相關(guān)性。帶有預(yù)測性的視覺效果能夠彰顯出智能的水準(zhǔn),從而能大大改善用戶體驗(yàn)。
身臨其境
要勇于運(yùn)用遮蓋的方法,或是對色彩和內(nèi)容的疊加來構(gòu)成對畫面主角的印象,抑或是構(gòu)成一幅縮略圖。
***實(shí)踐
使用多種媒體
插畫和攝影可以運(yùn)用在同一個(gè)產(chǎn)品中。攝影自動(dòng)暗含了一定程度的特定性,從而應(yīng)該用來展示特定的物體和故事。繪畫則能有效的表現(xiàn)出概念和隱喻,而這一點(diǎn)是攝影所不具備的。
對于特定的實(shí)物,首先考慮用攝影來表現(xiàn)。
要
當(dāng)所表達(dá)的內(nèi)容并非具體實(shí)物(或者不能被具體實(shí)物所概括)時(shí),繪畫則可以傳達(dá)出你的應(yīng)用程序的信息,并且允許用戶一目了然的理解內(nèi)容。
要
如果你使用攝影來傳達(dá)一種概念,你需要?jiǎng)?chuàng)建一些具有思考性的,甚至是隱含寓意的作品。
不要
不要局限于圖片庫。
遠(yuǎn)離圖片庫(Stay away from stock)
利用圖像可以表達(dá)一種與眾不同的心聲,還可以展現(xiàn)出***的創(chuàng)意。
對于特定的實(shí)體或品牌內(nèi)容,要用具體的圖像。對于較抽象的內(nèi)容,使其具有解釋性。然而庫存攝影(Photographic stock)和剪貼畫(clipart)既不具體,又不具解釋性。
要
不要
有焦點(diǎn)
你的圖像應(yīng)當(dāng)有一個(gè)標(biāo)志性的焦點(diǎn)。小到單一物體,大到整體布局,都可以成為焦點(diǎn)。確保能夠用一個(gè)讓人印象深刻的方法,傳遞給用戶一個(gè)清晰的概念。
要
不要
要
不要
要
不要
構(gòu)建敘事(Build narratives)
創(chuàng)建一個(gè)讓人感覺身臨其境的故事和上下文(context)場景。
要
不要
要
不要
不要過度操作
保持圖像的原始完整性。不要過度使用高度濾鏡或高斯模糊,尤其是當(dāng)試圖去隱藏劣化(degradation)的時(shí)候。
要
不要
要
不要
用戶界面集成(UI Integration)
分辨率
確保你的圖像大小適應(yīng)其邊框并且支持跨平臺。該結(jié)構(gòu)強(qiáng)調(diào)大幅圖像。理想情況下,素材應(yīng)該不會出現(xiàn)像素化。要為特定的比率和設(shè)備測試合適的分辨率大小。
要
尺寸得當(dāng)?shù)膱D像
不要
劣化的圖像
調(diào)整大小(Introduce Scale)
利用不同的大小的圖像來創(chuàng)造視覺上的重要性。
在一個(gè)畫冊的背景中,引入各種尺寸的縮略圖來傳達(dá)內(nèi)容的層次結(jié)構(gòu)。
鼓勵(lì)在同一個(gè)生態(tài)系統(tǒng)使用多個(gè)容器。
文字保護(hù)
添加文字保護(hù)紗(protection scrims)來使圖像上的文字顯示清晰易讀。
要
暗紗(dark scrims)理想的透明度應(yīng)當(dāng)在20%-40%之間,亮紗(light scrims)理想的透明度應(yīng)當(dāng)在40%-60%之間,都要視具體內(nèi)容來定。
不要
不要過度用文字保護(hù)紗遮擋住圖像內(nèi)容。
要
對于大一些的風(fēng)景圖,應(yīng)該在特定的區(qū)域內(nèi)加入文字保護(hù)紗, 不要覆蓋住整個(gè)圖像。
不要
不要過度覆蓋大圖像。
要
顏色疊加不同于文字保護(hù)紗(text-protection scrims),可以用來作為設(shè)計(jì)元素。當(dāng)創(chuàng)造互補(bǔ)的顏色疊加的時(shí)候,要從與其并列的內(nèi)容中取樣,這樣才能夠產(chǎn)生出和諧一致的色板,從而展現(xiàn)出良好的內(nèi)容意識。
不要
頭像和縮略圖
頭像和縮略圖代表實(shí)體或內(nèi)容,可以是攝影或者概念性的插畫。 通常來講,他們是橫置目標(biāo)(tap targets),可以讓人對事物和內(nèi)容有一個(gè)初步印象。
頭像可以用來表示個(gè)人。對于個(gè)人頭像,要提供個(gè)性化的選項(xiàng)。由于用戶也可能不個(gè)性化設(shè)定自己的頭像,不妨將默認(rèn)效果設(shè)置得令人愉悅一些。當(dāng)與一個(gè)特定的標(biāo)志(logo)一起使用時(shí),頭像也可以用來表示品牌。
縮略圖暗示著更多的信息,讓用戶一窺其內(nèi)容,并協(xié)助導(dǎo)航??s略圖讓你能把圖像放在狹小的空間里。
頭像使應(yīng)用更具個(gè)性化而且占用的空間小。
一個(gè)品牌頭像能夠讓人在一眼之內(nèi)傳達(dá)信息,縮略圖也如此。
主角圖像(Hero Images)
主角圖像通常被固定在很明顯的位置,大小比普通大小略大,比如屏幕頂部的橫幅。主角圖像能夠吸引用戶,提供了內(nèi)容相關(guān)的背景,或加強(qiáng)品牌。
特征圖像
特征圖像是風(fēng)格醒目的主要視覺焦點(diǎn),并且有著特異的設(shè)計(jì)布局。
合成的主角圖像(Integrated hero image)
合成的主角圖像通常在一個(gè)樣式中包含著混雜特異的部分。 這些部分并不能形成首要的視覺焦點(diǎn)。
圖集
圖集圖片(gallery images)通常風(fēng)格醒目,且他們的布局基本相同,比如網(wǎng)格(grid)布局,或是單一的圖像。
照片網(wǎng)格
圖集圖片