Elevation
Elevation (높이)
Elevation은 그림자와 빛을 이용해 사물과 그 뒤의 표면 사이의 인지되는 거리예요. 시각적 단서를 만들고, 스캔 가능성을 돕고, 중요도의 수준을 전달하기 위해 UI 요소를 띄워 올릴 수 있어요.
출처: 문서
본문
깊이, 그림자, 빛 (Depth, shadow, and light)
Fluent 인터페이스는 컴포넌트를 z축을 따라 서로 다른 elevation에 배치해 특정 UI 요소의 시각적 중요도를 높임으로써 3차원 공간을 모방해요. 이는 경험 안에서 명확한 위계와 초점의 감각을 만들어내죠.
Elevation은 그림자와 빛의 상호작용을 사용해 두 표면 사이의 거리를 암시하고, 사물이 뒤의 표면에서 얼마나 멀리 떨어져 보이는지를 보여줘요.
그림자 방향 (Shadow direction)
일관된 그림자 방향은 인지되는 광원을 전달해요.
그림자 크기 (Shadow size)
물리 세계처럼 날카롭고 또렷한 그림자는 표면에 가까움을 나타내고, 더 크고 부드러운 그림자는 더 큰 거리를 나타내요.
그림자 시스템 (Shadow system)
Fluent는 주어진 어떤 값에도 일관되고 응집력 있는 그림자를 생성하기 위해 일련의 방정식을 사용해요. 그림자 램프(ramp)는 증가하는 블러 값을 참조해 그림자 크기, 나아가 거리를 나타내요. 예를 들어 shadow 2는 2픽셀 블러, shadow 64는 64픽셀 블러를 가져요. 여섯 가지 그림자 타입, 토큰 값, 사용 사례는 다음 elevation 표에 나열돼 있어요.
Fluent 그림자는 요소의 가장자리를 정의하는 날카롭고 방향성이 있는 그림자(key)와 거리를 암시하는 부드럽고 확산된 그림자(ambient)를 결합해 만들어요.
플랫폼 차이 (Platform distinction)
Windows는 객체의 윤곽을 그릴 때 key 그림자 대신 스트로크를 사용해요.
낮은 elevation 램프 (Low elevation ramp)
Light
Shadow 1
- Blur = 1 * n
- X Axis = 0
- Y Axis = 0.5 * n
- Opacity = 14%
Shadow 2
- Blur = 1 * n
- X Axis = 0
- Y Axis = 0.5 * n
- Opacity = 14%
Dark
Shadow 1
- Blur = 1 * n
- X Axis = 0
- Y Axis = 0.5 * n
- Opacity = 28%
Shadow 2
- Blur = 1 * n
- X Axis = 0
- Y Axis = 0.5 * n
- Opacity = 14%
| 토큰 | 사용 사례 |
|---|---|
| Light Shadow 2 | 가장자리 없는 카드, 누를 때의 플로팅 액션 버튼 → $shadow2 |
| Dark Shadow 2 | 리본, 아이콘, 히어로 버튼 → $shadow2 |
| Light Shadow 4 | 가장자리 없는 카드 → $shadow4 |
| Dark Shadow 4 | 카드, 그리드 아이템, 리스트 아이템 → $shadow4 |
| Light Shadow 8 | 플로팅 액션 버튼, 올라온 카드, 올라온 앱 바 → $shadow8 |
| Dark Shadow 8 | 커맨드 바, 커맨드 드롭다운, 툴팁 → $shadow8 |
| Light Shadow 16 | 가장자리 없는 카드, 누를 때의 플로팅 액션 버튼 → $shadow16 |
| Dark Shadow 16 | 콜아웃과 호버 카드 → $shadow16 |
높은 elevation 램프 (High elevation ramp)
Light
Shadow 1
- Blur = 1 * n
- X Axis = 0
- Y Axis = 0.5 * n
- Opacity = 24%
Shadow 2
- Blur = 8
- X Axis = 0
- Y Axis = 0
- Opacity = 20%
Dark
Shadow 1
- Blur = 1 * n
- X Axis = 0
- Y Axis = 0.5 * n
- Opacity = 28%
Shadow 2
- Blur = 2
- X Axis = 0
- Y Axis = 0
- Opacity = 20%
| 토큰 | 사용 사례 |
|---|---|
| Light Shadow 28 | 바텀 시트, 사이드 내비게이션, 올라온 탭 바 → $shadow28 |
| Dark Shadow 28 | 바텀 시트, 사이드 내비게이션, 올라온 탭 바 → $shadow28 |
| Light Shadow 64 | 팝업 다이얼로그 → $shadow64 |
| Dark Shadow 64 | 패널과 팝업 다이얼로그 → $shadow64 |
Windows elevation 시스템
Windows가 elevation을 어떻게 적용하는지 알아보세요.
색상 표면 위의 그림자 (Shadows on color surfaces)
색상 표면에서 동일한 수준의 elevation을 전달하기 위해 우리는 명도(luminosity) 방정식으로 그림자를 조정해요. 인터페이스의 색에 그림자를 적용하려면 제공된 브랜드 그림자 토큰을 사용하세요.
명도 방정식 (Luminosity equation)
중성색과 비교할 때 브랜드 색의 동일한 그림자 값은 같은 elevation 수준을 암시하지 않을 수 있어요. 요소를 시각적으로 동일한 elevation 수준으로 가져오기 위해 우리는 색의 명도에 기반해 그림자 불투명도를 계산하는 명도 방정식을 사용해요.
인터페이스 전반에 일관된 그림자를 보장하려면 브랜드 그림자 토큰을 사용하세요.
Luminosity
0.2126 * R + 0.7152 * G + 0.0722 * B
Shadow 1 opacity
Round ( 42 - 0.116 * luminosity )
Shadow 2 opacity
Round ( 34 - 0.09 * luminosity )
표면 색의 명도에 따라 그림자 불투명도를 조정하세요. 메인 그림자 램프는 색상 표면에 사용하지 마세요.