2017 Material design 第三章第三節《影象》

D27發表於2017-08-01

三、影象(Imagery)


影象不僅是一種裝飾,它還是一種能夠幫助使用者理解以及區分你產品的強大工具。

大膽、形象、有意義的影象能夠幫助你吸引使用者。

無論氣氛是壓抑、柔和還是明亮、多彩,以下的設計準則以及實踐案例能夠幫助你使用影象把應用和生活結合起來。

準則
有關聯的
有意義的
令人感到愉快的

結合UI介面
使用合適的解析度
使用遮罩來凸顯文字

使用案例
頭像和縮圖
焦點影象
Galleries

準則

當你想使用插畫或攝影作品來增強使用者體驗時,要選擇與人有關聯的,包含資訊的,而且令人愉悅的影象。

與人有關聯的:影象與頁面下面的相關資訊(如使用者居住資訊)相關聯
與人有關聯的:影象與頁面下面的相關資訊(如使用者居住資訊)相關聯

包含資訊的:影象使資訊傳達得更加直接且易懂。
包含資訊的:影象使資訊傳達得更加直接且易懂。

令人愉悅的:在介面上使用漂亮的設計會使你的產品顯得獨特,同時會增加使用者對產品的喜愛度。
令人愉悅的:在介面上使用漂亮的設計會使你的產品顯得獨特,同時會增加使用者對產品的喜愛度。

場景賞析
確保影象是有動態的,且與背景相關聯。帶有預示的視覺效果能夠大大改善使用者體驗。

使用與背景有關聯的圖
使用與背景有關聯的圖

身臨其境
當必要的時候,可以通過色彩和內容疊加的方式來模糊或加強對畫面主角或一張縮圖的感知。

模糊的效果能夠讓背景圖片與前景結合得更加融洽
模糊的效果能夠讓背景圖片與前景結合得更加融洽

最佳案例

使用多種表現方式
插畫和攝影都可以運用在同一個產品中。攝影本身已經有一定的含義,所以應該用來展示特定的物體或故事。插畫則能夠表現出概念和隱喻,而這一點是攝影所不具備的。

對於特定的實物,首先考慮用攝影來表現。
對於特定的實物,首先考慮用攝影來表現。

可行

當所表達的內容並非具體實物(或者不能被具體實物所概括)時,則可以通過插畫以相近的方式來表現。
當所表達的內容並非具體實物(或者不能被具體實物所概括)時,則可以通過插畫以相近的方式來表現。

可行

遠離圖片庫
利用影象可以表達一種獨特的聲音,還可以展現出絕佳的創意。

對於特定的事物或品牌內容,要用特定的影象。而較為抽象的內容,則需要給它一個解釋。然而圖片庫裡的攝影作品和剪貼畫既不能具體表現特定事物,又不能給予解釋。

儘可能的讓圖片感覺到真實
儘可能的讓圖片感覺到真實

可行

圖片能感覺到不真實的
圖片能感覺到不真實的

不可行

對於特定的物件,使用特定的影象
對於特定的物件,使用特定的影象

可行

不要使用系統自帶的圖片庫裡面的圖片
不要使用系統自帶的圖片庫裡面的圖片

不可行

有焦點
你的影象應當有一個焦點。焦點的範圍可以小到單一物體,大到整體佈局。此外,你還需要確保概念(清晰的)能夠以一種令人難忘的方式傳達給使用者。

構圖、顏色的使用要能夠讓影象有個清晰的焦點
構圖、顏色的使用要能夠讓影象有個清晰的焦點

可行

避免讓使用者自己尋找影象的意義
避免讓使用者自己尋找影象的意義

不可行

包含有非常明顯元素的影象能夠最小程度的避免使用者誤解
包含有非常明顯元素的影象能夠最小程度的避免使用者誤解

可行

當關注焦點不明時,會丟失影象自身的意義。
當關注焦點不明時,會丟失影象自身的意義。

不可行

只需要一眼就能清晰的理解影象的含義
只需要一眼就能清晰的理解影象的含義

可行

沒有焦點讓影象變得沒有意義
沒有焦點讓影象變得沒有意義

不可行

構建故事
建立一個基於敘事背景且能讓人身臨其境的故事。通過視覺敘事的方式來渲染氣氛。這種氣氛是讓人渴望的?還是憂鬱的?或是快樂的?

影象能讓你講述的故事更有趣和有意義。
影象能讓你講述的故事更有趣和有意義。

可行

影象因為缺乏故事所以無法向使用者傳達情感。
影象因為缺乏故事所以無法向使用者傳達情感。

不可行

適當的語境能更有效的傳達你的品牌資訊。
適當的語境能更有效的傳達你的品牌資訊。

可行

單純一個實體存在且與周圍環境脫節會讓圖片失去意義。
單純一個實體存在且與周圍環境脫節會讓圖片失去意義。

不可行

UI集合

解析度
確保你的影象大小能夠適應不同的螢幕。Material design著重大尺寸影象。理想情況下,素材應該不會模糊出現畫素。

適當大小的影象
適當大小的影象

可行

影象模糊出現畫素
影象模糊出現畫素

不可行

利用大小
利用不同大小的影象來創造視覺層次。

在一個gellery中引入各種尺寸的縮圖來表示內容的層次結構。
在一個gellery中引入各種尺寸的縮圖來表示內容的層次結構。

支援一個列表裡面存在多個功能
支援一個列表裡面存在多個功能

文字保護
為了確保影象上的文字顯示清晰易讀,可以使用scrims的方式保護文字。Scrims是輕量且半透明的material層。


1.漸變的深色端:不透明度的值取決於背景
2.漸變的中心點:在3/10的位置(接近深色結尾)
3.漸變的結束點:不透明度為0

為了避免banding (鮮明的條紋形狀),漸變需要足夠的長度,3x於標準應用欄的高度,距離中心大約3/10的位置(朝向深色端)。這樣做會讓漸變自然衰減並且避免鋒利的邊緣。

漸變的不透明度設定應基於所處的環境。有些影象可以用較深的漸變,例如下面影象漸變(不透明度是60%)。

在某些情況下,漸變透明度可能低至10 - 20%。

在這幅影象中,漸變是60%透明度的黑色。
在這幅影象中,漸變是60%透明度的黑色。

這是被應用到上面影象裡的漸變。
這是被應用到上面影象裡的漸變。

可行

深色scrims理想的不透明度應當在20%-40%之間,淺色scrims理想的不透明度應當在 40%-60%之間。當然,這些都要視具體內容來定。


使用的scrim不能讓影象看不清。
使用的scrim不能讓影象看不清。

不可行

對於大一些的風景圖,應該在特定的區域內加入文字保護scrim,但不要覆蓋住整個影象。
對於大一些的風景圖,應該在特定的區域內加入文字保護scrim,但不要覆蓋住整個影象。

可行

影象不要被過度遮蓋了。
影象不要被過度遮蓋了。

不可行

顏色遮罩與文字保護scrims不同,前者可以被當做一個設計元素來使用。當你想要建立一個互補色遮罩時,可以基於內容並呼叫調色盤API去建立你想要的顏色。
顏色遮罩與文字保護scrims不同,前者可以被當做一個設計元素來使用。當你想要建立一個互補色遮罩時,可以基於內容並呼叫調色盤API去建立你想要的顏色。

可行

你可以用你的品牌色來優化影象。
你可以用你的品牌色來優化影象。

可行

頭像和縮圖
頭像和縮圖代表實體或內容,可以是攝影也可以是概念性的插畫。 一般來說,它們就是點選目標(tap targets)。

頭像可以用來表示個人。對於個人頭像,要提供個性化的選項。出於有些使用者不會自定義自己頭像的考慮,我們需要把預設的頭像效果做得討喜。當頭像與一個特定的logo一起使用時,頭像也可以用來表示品牌。

縮圖暗示使用者更多的資訊-讓使用者快速瞭解內容,並協助導航。縮圖把影象放在狹小的空間裡面。

頭像使應用更具個性化,且佔用的空間更小。
頭像使應用更具個性化,且佔用的空間更小。

一個品牌頭像能夠讓人看一眼就能完成資訊的傳達,縮圖也是如此。
一個品牌頭像能夠讓人看一眼就能完成資訊的傳達,縮圖也是如此。

焦點影象
焦點影象通常被固定在很明顯的位置,比如螢幕頂部的banner。焦點影象能夠吸引使用者注意,並提供內容相關的資訊,或強化品牌傳播。

相關
Extract prominent colors from an image

特徵影象:特徵影象是風格鮮明的影象,它一般會出現在非常規的佈局中。
特徵影象:特徵影象是風格鮮明的影象,它一般會出現在非常規的佈局中。

整合型焦點影象:整合型焦點影象是一個混雜了各種各樣內容的佈局方式。 整合型焦點影象並沒有一個主要的視覺焦點。
整合型焦點影象:整合型焦點影象是一個混雜了各種各樣內容的佈局方式。 整合型焦點影象並沒有一個主要的視覺焦點。

Gallery
Gallery影象是在同類佈局下由多個視覺焦點影象組合而成,比如宮格式佈局或作為單一影象。

圖片宮格
圖片宮格

Gallery圖片
Gallery圖片

相關文章