三、影象(Imagery)
影象不僅是一種裝飾,它還是一種能夠幫助使用者理解以及區分你產品的強大工具。
大膽、形象、有意義的影象能夠幫助你吸引使用者。
無論氣氛是壓抑、柔和還是明亮、多彩,以下的設計準則以及實踐案例能夠幫助你使用影象把應用和生活結合起來。
準則
有關聯的
有意義的
令人感到愉快的
結合UI介面
使用合適的解析度
使用遮罩來凸顯文字
使用案例
頭像和縮圖
焦點影象
Galleries
準則
當你想使用插畫或攝影作品來增強使用者體驗時,要選擇與人有關聯的,包含資訊的,而且令人愉悅的影象。
場景賞析
確保影象是有動態的,且與背景相關聯。帶有預示的視覺效果能夠大大改善使用者體驗。
身臨其境
當必要的時候,可以通過色彩和內容疊加的方式來模糊或加強對畫面主角或一張縮圖的感知。
最佳案例
使用多種表現方式
插畫和攝影都可以運用在同一個產品中。攝影本身已經有一定的含義,所以應該用來展示特定的物體或故事。插畫則能夠表現出概念和隱喻,而這一點是攝影所不具備的。
遠離圖片庫
利用影象可以表達一種獨特的聲音,還可以展現出絕佳的創意。
對於特定的事物或品牌內容,要用特定的影象。而較為抽象的內容,則需要給它一個解釋。然而圖片庫裡的攝影作品和剪貼畫既不能具體表現特定事物,又不能給予解釋。
有焦點
你的影象應當有一個焦點。焦點的範圍可以小到單一物體,大到整體佈局。此外,你還需要確保概念(清晰的)能夠以一種令人難忘的方式傳達給使用者。
構建故事
建立一個基於敘事背景且能讓人身臨其境的故事。通過視覺敘事的方式來渲染氣氛。這種氣氛是讓人渴望的?還是憂鬱的?或是快樂的?
UI集合
解析度
確保你的影象大小能夠適應不同的螢幕。Material design著重大尺寸影象。理想情況下,素材應該不會模糊出現畫素。
利用大小
利用不同大小的影象來創造視覺層次。
文字保護
為了確保影象上的文字顯示清晰易讀,可以使用scrims的方式保護文字。Scrims是輕量且半透明的material層。
1.漸變的深色端:不透明度的值取決於背景
2.漸變的中心點:在3/10的位置(接近深色結尾)
3.漸變的結束點:不透明度為0
為了避免banding (鮮明的條紋形狀),漸變需要足夠的長度,3x於標準應用欄的高度,距離中心大約3/10的位置(朝向深色端)。這樣做會讓漸變自然衰減並且避免鋒利的邊緣。
漸變的不透明度設定應基於所處的環境。有些影象可以用較深的漸變,例如下面影象漸變(不透明度是60%)。
在某些情況下,漸變透明度可能低至10 - 20%。
深色scrims理想的不透明度應當在20%-40%之間,淺色scrims理想的不透明度應當在 40%-60%之間。當然,這些都要視具體內容來定。
頭像和縮圖
頭像和縮圖代表實體或內容,可以是攝影也可以是概念性的插畫。 一般來說,它們就是點選目標(tap targets)。
頭像可以用來表示個人。對於個人頭像,要提供個性化的選項。出於有些使用者不會自定義自己頭像的考慮,我們需要把預設的頭像效果做得討喜。當頭像與一個特定的logo一起使用時,頭像也可以用來表示品牌。
縮圖暗示使用者更多的資訊-讓使用者快速瞭解內容,並協助導航。縮圖把影象放在狹小的空間裡面。
焦點影象
焦點影象通常被固定在很明顯的位置,比如螢幕頂部的banner。焦點影象能夠吸引使用者注意,並提供內容相關的資訊,或強化品牌傳播。
相關
Extract prominent colors from an image
Gallery
Gallery影象是在同類佈局下由多個視覺焦點影象組合而成,比如宮格式佈局或作為單一影象。