Fluid UI Transforms, 프레임워크에 구애받지 않는 자연스러운 사용자 경험을 만드는 과학적인 접근 방식.

저는 3년 동안 다양한 프레임워크에서 모바일의 플러터와 웹의 반응에 이르기까지 UI를 만들어 왔으며 수년 동안 아름답고 자연스러운 경험을 만드는 원칙을 추상화하게 되었습니다. 추리.

대부분의 최신 UI 프레임워크는 선언적 이며 UI 요소의 구성을 허용하며 UI는 내부 상태 또는 서버의 상태인 상태 의 함수입니다 .

위의 두 방정식은 상태를 UI로 표현하는 UI 코드인 함수 F의 연속성과 미분성을 나타냅니다.

Fluid UI Transform은 가능한 모든 상태에서 UI를 연속적이고 미분 가능(더 좋은 것은 다중 차수가 미분 가능)하다고 표현하는 상태의 기능으로 설명하는 것입니다.

그러나 실질적으로 우리의 상태 변경은 연속적이지 않으므로 UI ​​F(상태)를 설명하는 함수는 사용자 작업이나 서버 이벤트로 인해 새로운 상태가 도착할 때 연속적이고 미분 가능해야 합니다.

프런트엔드 개발이나 사용자 경험 및 제품 개발과 관련이 없는 소리라는 것을 알고 있습니다. 설명할 수 있습니다.

예를 들어 아이템 목록이 변경되면 기본적으로 UI가 갑자기 바뀌는데, 목록 애니메이션을 적용하면 애니메이션으로 아이템이 추가되고 제거되는 유동적 상태 변환이 의미하는 바, 상태가 변경되면 UI가 지속적으로 변환되고, 이전 상태에서 새 상태로 원활하게.

추리

다음은 유체 변환이 더 나은 사용자 경험을 만드는 이유에 대한 설명입니다. 우리가 손가락과 상호 작용하는 대부분의 물리적 세계는 탄성 계수가 다른 강체이며, 탄성 계수가 높은 것은 손가락 끝으로 가해지는 압력으로 변형되지 않지만 고무, 폼, 실리콘과 같은 재료는 동작에 따라 변형되고 변형은 매우 유동적이며 유체 변형에 부착됩니다. 이것이 비유체 변형보다 우리에게 더 자연스럽게 느껴지는 이유라고 생각합니다.

뿐만 아니라 모든 물리적 현상은 불연속적으로 발생하지 않으므로 우리의 눈이 갑작스럽고 불연속적인 변화보다는 연속적인 과정을 따르는 것이 더 자연스럽습니다.

TLDR;

이전 상태에서 새 상태로 지속적으로 변환되도록 상태 변경을 보다 유동적으로 만듭니다.

영감

Folksable 제품을 작업하는 동안 좋은 사용자 경험을 구성하는 것이 무엇인지 이해해야 할 필요성을 느꼈고 일반적으로 모든 프레임워크에 적용할 수 있도록 세부 사항을 추상화하고 싶었습니다.

읽어 주셔서 감사합니다

나와 내 작업에 대해 더 알고 싶다면:

Twitter : 소프트웨어, 개발, 제품 개발 및 다양한 분야의 연결점에 대해 글을 씁니다.