背景介紹現(xiàn)在的APP界面中,經(jīng)常圖象或者視頻上疊加文字和按鈕的情況,比如常見的Banner、查看大圖、視頻播放器、專題等等。
而這也是新人容易出錯的地方:文字直接放在圖片上,當(dāng)背景色和字色過于接近時,會影響文字的讀取閱讀。比如下面這樣:
為了解決這個問題,通常的解決辦法是在圖片和文字中間疊加一個中間層(蒙層),如圖:
這樣一來,即便背景色和字色過于接近,由于中間層的存在,也不會影響文字閱讀。
中間層(即 常說的圖片蒙層)的形式大概可分為“全蒙層”和“局部蒙層”兩種:
由于全覆蓋的蒙層對內(nèi)容品質(zhì)的影響很大,所以設(shè)計師大多采用局部蒙層的設(shè)計方案。另外,我們見到絕大多數(shù)的局部蒙層方案,已經(jīng)都采用漸變色。如下圖:
而今天這個被普遍采用的方案,其實也給產(chǎn)品在視覺上造成了不小的瑕疵,下面的文中我將闡述問題形成的原因和解決辦法。
漸變的問題先提一個問題,如果漸變蒙層的參數(shù)是 黑色70%不透明度~黑色0%不透明度(#000000, 70% ~ #000000,0% ),參數(shù)如下圖所示:
你覺得下面兩張圖,哪張是蒙層效果圖?