必須掌握這套陰影設計基礎知識(建議收藏)

1 評論 4674 瀏覽 14 收藏 9 分鐘

編輯導語:UI設計中有三寶——透明、陰影、加圓角,很多同學在做卡片時都會使用系統默認的方式加一個陰影。那么,陰影該怎么選擇,如何對不同場景下的陰影進行設置呢?一起來學習一下吧。

網傳UI設計有三寶:透明、陰影、加圓角。很多同學在做卡片的時候都會使用系統默認的方式加一個陰影,可能覺得加了之后,檔次立馬提升不少。但是陰影該怎么選擇,怎么對不同場景下的陰影進行設置卻并不是很清楚。今天我們來學習一下~

老話說“藝術來源于生活又高于生活”設計也不例外。例如我們界面中的陰影就是讓物體擁有來源于真實物理世界一樣的空間特性。

最早的界面元素都是盡可能地模擬真實的物體,以減少人們對互聯網產品的距離感。后來慢慢地為了適應效率高且迭代快的互聯網,很多都被減弱了,只保留了人們最關心的質感、層次與深度。其中我們今天的主題陰影就是深度最核心的元素。

界面中的物體通過不同的陰影讓元素很自然的呈現出錯落有致的感覺。因為它的大小讓我們對界面中的層級有著不同優先級的認知,降低了我們對界面理解的約束,以便用戶快速上手。

必須掌握這套陰影設計基礎知識(建議收藏)

一、陰影的定義

1. 為什么需要使用陰影

界面中因為操作,會使得一個物體與另外一個物體因為位置的改變而變得表面重疊。當表面之間的不透明度或者對比度不足時,很難區分不同表面之前的差距,也就是不知道哪一個表面在另一個表面的前面。

這時候我們可以通過明確表面的邊緣來避免“尷尬”的重疊。

必須掌握這套陰影設計基礎知識(建議收藏)

有三種處理方法:

  1. 陰影顯示表面邊緣、表面重疊和高度
  2. 不同的表面顏色顯示表面邊緣和重疊,但不顯示高度
  3. 不透明度顯示表面邊緣和重疊,但不顯示高度

通過對比我們發現陰影可以以最簡單的方式展示表面之間的高度。

2. 陰影的影響因素

陰影來源于現實生活反映物體與物體之間距離的物理現象。陰影受光源的方向以及物體與物體之間相對高度的影響。

在界面中,我們往往通過模擬元素的投影直截了當的來告訴用戶,元素的空間關系。

物體越低,優先級越低,其陰影小而銳利,反之物體越高,優先級越高,其陰影越大越柔和。在設計中常見的陰影影響因素有X軸、Y軸、模糊、擴展。

  • X軸:這是投影延水平面或者X軸位置的偏移,控制著頂部和底部的陰影
  • Y軸:這是投影延垂直面或者Y軸位置的偏移,控制著頂部和底部的陰影
  • 模糊:調整陰影顏色的模糊或者羽化
  • 擴展:控制著陰影的大小以及前景與后景之間的距離

必須掌握這套陰影設計基礎知識(建議收藏)

二、陰影的狀態

如果界面中的組件都沒有了陰影,在實際操作的時候視覺上沒有任何變化,這時候我們會對頁面內的層級產生懷疑,覺得內容的混亂,增加了對內容理解的困難程度。

用戶也渴望界面元素之間在空間上發生改變,常見的陰影狀態可以分為常規以及懸浮2種。

  1. 常規:不進行任何操作時界面的陰影樣式,一般用零級陰影狀態表示
  2. 懸?。?/strong>hover態等常規交互操作可以使用一級陰影,甚至有時候因為場景的特殊要求可能會用到二級或者三級的陰影狀態

陰影可以體現界面上元素的層級,不同的陰影高度代表了不同的層級,它的強度由兩者之間的距離決定。所以物體的高度直接影響物體的陰影,對象離地面越遠陰影越大,模糊值越高。

不同于美國網頁設計系統采用了6種不同的高度,antdesign中我們采用了代表四個不同高度級別的陰影來適配界面中的元素。這四個不同的陰影各自分布在不同的高度層級,屬性也有所不同。

必須掌握這套陰影設計基礎知識(建議收藏)

零級:物體緊貼地面,投影與物體完全重疊,在界面中不對此層定義陰影值。如:篩選框等;

必須掌握這套陰影設計基礎知識(建議收藏)

?????????????一級:物體位于低層級,此時物體被操作(懸停、點擊等)觸發為懸浮狀態,當操作完成或取消時,懸停狀態反饋也跟隨消失,物體回歸到原有的層級中。如:卡片 hover 等;

必須掌握這套陰影設計基礎知識(建議收藏)

二級:物體位于中層級,此時物體與基準面的關系是展開并跟隨,物體由地面上的元素展開產生,會跟隨元素所在層級的移動而移動。如:下拉面板等;

必須掌握這套陰影設計基礎知識(建議收藏)

三級:物體位于高層級,該物體的運動和其他層級沒有關聯。如:對話框等。

必須掌握這套陰影設計基礎知識(建議收藏)

三、陰影的應用

1. 真實的反饋

模擬真正狀態下的陰影,Ant Design中通過對其變化過程進行三層拆分,讓原本生硬的陰影變的更加柔和。

必須掌握這套陰影設計基礎知識(建議收藏)

上圖展示了不同級別陰影的從低到高不同層級變化過程。

2. 光源方向的一致性

陰影的偏移由組件的位置決定,確保同一套組件在光源方向的一致性。

必須掌握這套陰影設計基礎知識(建議收藏)

陰影在物體不同的位置代表的含義也不一樣,這里我們按照光源方向的不同總結了三個方位。

  1. 陰影向左:主要應用于右邊導航欄、抽屜組件或固定表格欄
  2. 陰影向右:主要應用于左邊導航欄、抽屜組件或固定表格欄
  3. 陰影向下:主要應用于組件內部或組件本身,是比較常規場景的用法

四、寫在最后

陰影的規范其實并不是所有的web組件都對其進行詳細描述,隨著業務場景的復雜化,我相信大家也會逐漸對其重視起來。

以上就是我對陰影的部分思考與總結,期待與你一起交流一起進步~

參考資料:

https://ant.design/docs/spec/shadow-cn

 

本文由 @江鳥的設計生活 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 學到了

    來自安徽 回復