신생과 CSS

상당한 화제를 창출하는 설계 트렌드 인 Neumorphism은 미니멀하고 현실적인 UI를 제공합니다. 2019 년 UX 단체 게시물에서 만들어진이 회사는 미학, 유용성, 접근성 및 실용성에 관한 설계 및 개발 커뮤니티 내에서 진행중인 토론을 시작합니다. 그 영향은 부인할 수 없습니다.

이 기사는 CSS로 달성 할 수있는 Neumorphic Effects를 탐구하여 웹 인터페이스에서의 사용에 대한 논쟁을 검토하고 검토합니다.

사용자 인터페이스로서의 진영

Neumorphism은 고유하게 미니멀리즘과 비추관을 혼합합니다. Skeuomorphism의 초현실주의와 대조되는 소재 설계의 미니멀리스트 미학을 고려하십시오. 2000 년대 초부터 현재 미니멀리스트 접근에 이르기까지 애플의 디자인 진화를 생각하십시오. 유성은 중간 지점을 차지합니다.

Neumorphic UI 요소는 마치 압출 또는 삽입처럼 배경과 통합됩니다. 그들의 "소프트 UI"는 부드러운 그림자를 사용하여 정의됩니다.

카드 구성 요소를 사용하여 재료 설계와 비교하면 차이점이 강조됩니다. 설계 관점은 차이점을 명확하게합니다.

이것은 신생의 개념을 확립합니다. CSS 구현을 탐구합시다.

신생과 CSS

box-shadow 속성을 적용하는 것처럼 보이지만, 조혈 인터페이스를 만들어내는 것이 더 미묘합니다. 다양한 효과를 위해 여러 box-shadow 및 background-color 값이 포함됩니다.

Neumorphic Box 그림자

box-shadow Property Refresher :

 <code>box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];</code>

조정 가능한 옵션에는 수평 및 수직 오프셋, 블러 반경, 스프레드 반경 및 색상이 포함됩니다. inset 키워드는 내부 그림자를 만듭니다. 쉼표를 사용하여 여러 그림자가 적용됩니다.

 <code>box-shadow: 20px 20px 50px #00d2c6, -30px -30px 60px #00ffff;</code>

Neumorphic UI 요소는 "올린"효과를 위해 빛과 어두운 그림자를 사용합니다. "광원"을 변경하면 다른 조합이 생성됩니다. 그림자 배치를 조정하여 4 가지 조합이 가능합니다.

CSS 변수는 추상화를 향상시킵니다.

 <code>box-shadow: var(--h1) var(--v1) var(--blur1) var(--color-dark), var(--h2) var(--v2) var(--blur2) var(--color-light);</code>

inset 키워드는 압출 된 모양과 삽입 된 모양 사이의 토글입니다.

배경색

box-shadow 가장자리 모양에 영향을 미칩니다. background-color 투명하거나 기본 요소의 색상과 일치해야합니다. 솔리드 또는 그라디언트 배경이 가능합니다. 그라디언트는 그림자와의 정렬에 따라 볼록 또는 오목한 표면 변화를 만듭니다.

 <code>.element { background: linear-gradient(var(--bg-angle), var(--bg-start), var(--bg-end)); box-shadow: var(--h1) var(--v1) var(--color-dark),       var(--h2) var(--v2) var(--color-light); }</code>

실제로 신생아

간단한 버튼에 신생기를 적용하면 제한이 나타납니다. 배경색은 기본 요소와 일치해야하며 눈에 띄는 능력을 방해해야합니다. 텍스트 색상 조정, 경계 또는 아이콘은 가시성을 향상시킬 수 있지만, 견고한 배경은 종종 기울기보다 더 잘 수행됩니다. 활성 상태의 삽입 그림자는 "프레스"효과를 향상시킵니다.

실제 예제 (라우터 버튼 및 자동차 제어 패널)에서 영감을 얻은 개선 된 버튼 및 토글 설계가 제공됩니다. 그러나 표준 버튼은 일반적으로 우수한 UX를 제공합니다.

여러 상태 (호버, 활성, 초점, 방문, 오류, 성공, 경고, 비활성화)를 갖는 요소로 인해 Neumorphism의 한계가 명백 해집니다. 미묘한 변화는 명확한 상태 차이에 필요한 사용자 정의를 제한합니다. 클릭 가능한 요소는 시각적으로 모호해질 수 있습니다.

Neumorphic 요소는 그림자와 둥근 모서리로 인해 더 많은 공간이 필요하므로 작은 요소에는 적합하지 않습니다.

Michal Malewicz는 이미 기능이없는 요소에만 Neumorphism을 적용 할 것을 제안합니다.

접근성 및 UX

접근성은 주요 관심사입니다. 미묘한 대조는 신생아의 고유 한 대조는 색맹 또는 낮은 시력을 가진 사용자에게 도전을 만듭니다. 과용은 페이지 계층 구조를 방해하고 대화식 요소와 관련하여 혼란을 유발할 수 있습니다. 대비가 높고 배경색은 극단 (흰색과 검은 색)을 피해야합니다.

UX 관점에서, Neumorphism은 페이지를 지배해서는 안됩니다. 남용은 압도적 인 플라스틱 효과를 만들고 시각적 계층을 방해합니다.

Neumorphism은 재료 설계와 같은 다른 설계 시스템의 악센트로 드물게 사용됩니다.

결론

진심은 미적으로 유쾌하고 독특하지만 한계가 있습니다. 제한적인 색상 팔레트와 소프트 대비는 대화식 요소의 유용성과 접근성을 방해합니다. 카드 및 정적 컨테이너의 대안으로 기존 설계 시스템에 이상적으로 통합되는 것이 드물게 사용됩니다. 현재 설계 시스템을 대체하지는 않지만 특정 요소에 대한 새로운 접근 방식을 제공합니다.

참조

• 사용자 인터페이스의 Neumorphism
• 신생 - 좀비 트렌드
• 신생과 접근성에 대해 이야기합시다

위 내용은 신생과 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!