https://uxdesign.cc/can-user-interface-aesthetics-sync-with-the-natural-environment-f556088d9587
Designing user interface aesthetics that sync with the natural environment
Studies have shown that lights have functions beyond just illuminating our environment; they also have a direct impact on our health and…
uxdesign.cc
* 이 글은 해당 아티클을 번역 및 번역자의 생각을 추가한 글입니다.
자연 환경과 동기화되는 사용자 인터페이스 미학 설계
연구에 따르면 빛은 단순히 환경을 비추는 것 이상의 기능을 가지고 있습니다. 빛은 또한 우리의 건강과 웰빙에 직접적인 영향을 미칩니다. 빛은 우리의 수면,인지, 생체리듬에 생물학적 영향을 미치고 기분, 우울증 및 반응 시간 및 활성화와 같은인지 능력에 심리적 영향을 미칩니다 (Kaplan and Kaplan, 1988).
디지털 인터페이스 디자인에서 이러한 효과를 실현할 수있는 방법의 뉘앙스를 이해하면 잠재적으로 우리의 건강과 웰빙을 향상시키는 인터페이스 미학을 디자인 할 수 있습니다.
A speculative exploration
모양, 강도, 대비 및 그림자와 같은 빛의 시각 효과는 종종 디지털 인터페이스 디자인에서 표현되고 탐구되지만 사용자의 환경과는 동떨어져있습니다. 이 가설의 전제는 사용자 환경의 빛과 동기화되는 미학을 촉진하는 사용자 인터페이스의 개념적 모델을 만드는 것입니다.
빛과 그림자에 대한 이론적 이해를 바탕으로 이 가설은 자연 환경의 이러한 물리적 현상이 사용자 인터페이스에 다이나믹하게 영향을 미치고 환경이 디지털 프로젝트의 미학의 일부가 될 수있는 방법을 다시 생각할 수 있는 법을 살펴 봅니다. 목표는 그러한 상호 작용에 대한 담론을 생성하고 근본적인 건강상의 이점에 대한 이해를 향상시키는 것입니다.
1. 자연 환경의 빛과 그림자 이해
물체와 빛의 상호 작용은 반사와 그림자를 만듭니다. 태양 바로 아래에 배치된 물체는 더 강한 반사와 더 거친 그림자를 만듭니다. 햇빛이 구름을 통해 확산되거나 건축 환경 내부에서 반사 될 때 발생하는 자연 주변 빛에서의 반사와 물체의 그림자도 어디에나 있습니다.
머티리얼 디자인 가이드라인에서 Google은 디지털 기기의 사용자 인터페이스를 비추기 위해 가상 빛의 필요성을 강조합니다. 이러한 가상 빛은 키 그림자라고 하는 더 선명한 방향성 그림자를 만드는 키 조명과 모든 각도에서 나타나 주변 그림자라고 하는 확산되고 부드러운 그림자를 만드는 주변 조명의 형태입니다.
머티리얼 디자인은 환경의 빛과 무관하게 정적 그림자를 추구하는 반면, 다음 탐색에서는 환경 데이터가 포함된 머티리얼의 빛과 그림자의 상호 작용을 촉진하여 사용자에게 보다 역동적인 경험을 제공하는 디지털 인터페이스 미학을 만드는 방법을 살펴봅니다.
2. 가상 빛과 환경 데이터를 중첩
머티리얼 디자인 환경의 가상 빛은 한 지점에 고정되어 하루 종일 동일한 그림자를 드리웁니다. 가상 조명의보다 역동적인 구현은 가상 빛이 햇빛과 동기화되어 하루의 흐름을 강조하는 추상적 인 시각적 미학을 만드는 것일 수 있습니다.
2.1. 다이내믹 리플렉션
고체 물체에 대한 빛의 일반적으로 관찰되는 효과는 흡수, 반사 및 그림자 생성입니다. 아래 탐색에서는 하루의 흐름이 사용자 인터페이스의 색상에 어떤 영향을 미칠 수 있는지 알 수 있습니다. 환경의 물체는 특정 파장의 빛만 반사하고 나머지는 흡수합니다. 광원 색상의 변화는 물체에서 반사되는 색상에도 영향을 미칩니다.
낮 동안 환경 색조에 역동적 인 변화가 있기 때문에 이러한 색상 변화는 디지털 인터페이스에 영향을 미쳐 환경의 물리적 경험과 디지털 경험 사이의 연결을 만들 수 있습니다.
일부 기기는 디스플레이가 하루 중 시간에 맞게 조정되어 더 따뜻하거나 차가운 톤을 만드는 기본 제공 접근 방식(iOS의 야간 모드)을 제공하지만 이러한 접근 방식은 UI 요소에 대한 색조의 일반화를 만들고 브랜드 일관성을 주기 어렵게 만든다 (텍스트, 이미지, 버튼 및 브랜드 요소에 일관적 적용이 어렵기 때문)
환경 색상을 브랜드 색상과 일치시키고 UI 구성 요소 상태에 미묘한 반응을 도입하면 더 풍부한 사용자 환경을 제공할 수 있습니다.
이러한 조명의 동적 상호 작용은 일년 내내 관찰되는 색조의 미묘한 변화를 표현하기 위해 확장 될 수도 있습니다. 계절이 바뀌면 가을의 따뜻한 색조에서 겨울의 시원한 색조로, 활기찬 봄에서 어두운 초록 (monsoon)으로 색조가 바뀔 수 있습니다.
Apple은 iOS 날씨 앱에서 하루 중 시간과 날씨를 표현하는 자연의 사실적인 이미지를 만들었습니다.
그러나 날씨 앱의 이러한 상세한 표현은 사용자의 관심을 응용 프로그램의 기본 작업 / 목적에서 멀어지게 할 수 있으므로 제안 된 인터페이스는 이러한 표현에서 미묘함을 권장합니다.
2.2. 다이나믹 섀도우
색조 변경과 마찬가지로 물체는 광원을 차단했을 때도 그림자를 만듭니다. 이것은 태양을 가상 광원으로 가정하고 낮 동안 태양의 움직임과 동기화되도록 물체 그림자의 확산 및 방향을 움직이게 만듦으로써 사용자 인터페이스 설계에서 표현 될 수 있습니다.
방향 센서는 그림자의 방향을 안내 할 수 있습니다. 또한 빛에 대한 민감도에 따라 카메라는 그림자의 거칠거나 부드러움을 안내 할 수 있습니다. 따라서 사용자와 환경 사이에 연결감을 만들 수 있습니다.
2.3 주변 반사
인터페이스 미학에 주변 반사를 도입하면 UI 구성 요소의 재질 사실성을 더욱 향상시킬 수 있습니다. 모든 재질은 빛을 반사합니다 (검은 물체가 아닌 경우). 자연적으로 발생하는 모든 시각적 구성은 다양한 소스의 주변 반사의 조합입니다.
인터페이스의 주변 반사는 UI 요소가 지배적인 색조를 주변 요소에 반사할 때 발생할 수 있습니다. 이러한 반사는 인터페이스에서 색상의 동적 상호 작용을 만들 수 있습니다. 이를 다이나믹 섀도우에 대한 확장으로 결합하면 UI 요소의 중요성이 더욱 향상되고 인터페이스에 대한 사실적 상태를 만들 수 있습니다.
3. 동적 인터페이스의 미래
다양한 환경 요인의 상호 작용과 사용자 인터페이스에 미치는 영향에서 바람직하고 탐구해야 할 것이 많습니다. 환경에 따라 달라지는 터치의 효과를 상상해보십시오 - 비오는 날의 플로팅 터치와 바람이 부는 날의 깃털 같은 흔들리는 터치; 연관된 물체의 중량을 갖는 인터페이스 요소, 그 가중치는 다양한 환경 조건에서 다르게 동작합니다.
Google 머티리얼 디자인 3 가이드라인에서는 동적 색상을 도입하여 사용자가 앱의 맞춤설정을 더 세부적으로 제어할 수 있도록 합니다. 인터페이스는 이제 사용자가 Android 기기에서 설정 한 범용 색상 테마에 맞게 조정할 수 있습니다.
이러한 색상의 개인화는 즐거운 사용자 경험의 방향으로 절실히 필요한 개발이었으며 디지털 인터페이스에 환경 영향을 미칠 수있는 공간을 열었습니다.
마무리 생각
우리의 감소하고있는 주의집중 시간을 캐치하기 위한 많은 서비스가 있는 가운데, 자연환경과 일상에 대한 기본적인 연결은 고려되지 않고 있습니다.여기서 제시한 추측적 개념은 사용자의 환경과 관련되고 동기화되는 의도적인 시각적 패턴을 탐구하고 사용자에게 주변 환경을 경험할 수있을뿐만 아니라 주변 환경과의 연결을 강화할 수있는 기회를 제공 할 수 있습니다. 디지털 매체의 빛과 색이 건강과 웰빙을 향상시킬 수있는 방법에 대한 이해를 높이기위한 연구가 진행 중이지만,이 공간에서보다 speculative한 구현은 그러한 이해를 높이는 데 도움이 될 수 있습니다.
번역자의 생각
어플 과잉시대에 기업의 디자인 시스템을 오픈소스로 쉽게 접근할 수 있는 지금, 대부분의 어플이 차별성없이 비슷한 톤앤무드와 관성적으로 시스템을 적용하고 있다는 점이 많이 아쉬웠습니다. 사용자의 멘탈모델에 맞는 시스템이나 서비스 전반에 일관성있는 브랜드 무드를 제공하는 것도 물론 중요하지만, 유저의 일상과 환경에 맞닿은 어느 지점을 건들여주는 색다른 경험을 제공하는 것도 서비스를 매력적으로 만들어줄 것이라고 생각합니다. 이 아티클은 그런 면에서 새로운 인터페이스 시스템을 위한 한가지 방법론을 제공해줬다는 면에서 의미있게 느껴집니다.
특히 어떤 상황에서도 일상적으로 휴대폰을 사용하는 유저들에게 환경과 인터페이스의 연결을 통해 현실 환경을 의식하고 환기시켜보는 역할을 해줄수도 있을 것이며, 개개인의 상황에 딱 맞춘 개인화에 열광하는 유저들에게 본인에게 맞춰준다는 만족감을 줄 수 있습니다.
다만 앞서 아티클에서 언급했듯이 인터페이스에 다이나믹하게 컬러를 적용했을 시 브랜드 일관성과 유저의 멘탈모델 형성에 영향을 줄 수 있으니 과하지 않고 섬세한 적용이 필요할 것입니다.
'UX article' 카테고리의 다른 글
| 삼성의 OneUI 이야기 (0) | 2023.05.29 |
|---|---|
| Midjourney를 사용한 UI 디자인 (0) | 2023.04.16 |
