우아한 UI 상호 작용을 만드는 7 가지 간단한 규칙

정교한 UI 상호 작용 디자인 : 과시하기보다는 우아함으로 승리

키 포인트

UI 상호 작용 설계의 우아함은 멋진 산만 요소보다는 사용자 운영을 지원하기 위해 매끄럽고 사용자 친화적 인 전환을 보장하는 것입니다.

드롭 다운 메뉴 또는 제품 세부 정보 표시와 같은 미세 개입은 유용성을 향상시키고 사용자의 긍정적 인 정서적 반응을 유발하도록 신중하게 설계되어야합니다.
• 우아한 UI 상호 작용을위한 주요 규칙은 즉시 점프를 피하기 위해 트리거를 사용하는 것; 일련의 작업에서의 작동;
UI 상호 작용이 현실 세계의 물리 법칙에 더 부합할수록 자연스럽고 우아한 느낌이 듭니다. 이러한 상호 작용을 테스트하고 조정하여 직관적이고 일관성 있고 효율적이며 사용자에게 적절한 피드백을 제공하는 것이 중요합니다.
새로운 용어"Interactive Design "은 UX 설계 프로세스와 밀접한 관련이 있습니다. 2015 년 이후, 두 정적 상태 사이의 인터페이스 요소간에 즉시 전환하는 것만으로는 더 이상 충분하지 않습니다. 오늘날“슬라이드”,“바운스”및“바운스 백”과 같은 단어는 사용자 인터페이스가 어떻게 작동하는지에 대한 토론의 일부가되었습니다.
• 그러나 비싼 시계와 같은 상호 작용 분야에서“매력적인”것이 반드시“우아함”을 의미하는 것은 아닙니다. 우리는 아래 의이 멋진 시계 (그림)의 복잡성에 대해 궁금 할 수도 있지만, 우리 중 몇 사람이 실제로 그것을 입고 싶어 할 것 같아요. 우리의 인터페이스 디자인에서 자연 우아함은 거의 항상 장식보다 중요합니다.
• 당신이 나만큼 창의적이라면, 웹 사이트가 더 현대적이고 매력적이라고 ​​느끼기 위해 멋진 상호 작용을 만드는 데 쉽게 끌리는 것이 쉽습니다. 물론, 우리는이 접근법이 전체 사용자 경험을 방해하는 가장 신뢰할 수있는 방법 중 하나 일 수 있음을 마음 속에 알고 있습니다.
그래서, 나는 우리의 사용자가 눈치 채지 못하는 매끄럽고 즐거운 애니메이션에 집중하는 것이 매우 중요하다는 것을 알았습니다. 당시 우리 애니메이션은 스포트라이트에서 벗어나 사용자가 수행하려는 내용을 지원합니다.

왜 이것이 중요한가요?

애플이 왜 포장에 너무 많은 시간과 돈을 소비하는 경우가 종종 종종 재활용 쓰레기통에 매우 빨리 던져 지는가? 럭셔리 자동차 회사가 왜 문을 닫는 소리를 조정합니까?

이것은 우리가 미묘하고 중요하지 않은 세부 사항이 좋은 디자인에 불균형 한 영향을 미칠 수 있고 UX를 "좋은"것에서 "우수한"것으로 높일 수 있다는 것을 알기 때문입니다.

는 아름답게 설계된 "마이크로 인터랙션"으로 웹 사이트를 풍부하게하여 사용하기 쉽고 사용자들 사이에서 긍정적 인 감정을 유발할 수 있습니다 (Apple Box 열기와 마찬가지로). 이 감정을 경험한다는 것은 더 많은 도파민을 소비하는 것을 의미하며, 이는 실제로 웹 사이트/앱에 중독되는 데 도움이됩니다.

그렇다면 "micro-interaction"이란 무엇입니까?

사용자가 입력하면 (예 : 클릭, 드래그, 컨텐츠 유형) 웹 사이트가 반응합니다. 이는 상호 작용입니다. 이것은 사용자가 귀하의 웹 사이트와 의사 소통하는 방법이므로 대화의 일부입니다. 웹 사이트에서 사용자의 동작 흐름을 설계 할 때는 항상 여러 가지 다른 유형의 상호 작용을 사용할 수 있습니다.

탐색 상호 작용 : 사용자가 마침내 새로운 페이지/상태를 입력 할 때.

모달 상호 작용 : 웹 사이트의 현재 상태가 동결되고 일부 임시 상태가 그 위에 표시 될 때 (예 : "Lightbox"갤러리 또는 확인 대화 상자).

microinterction : 페이지 내의 개별 요소 만 사용자 입력에 반응하기를 원할 때-예를 들어 드롭 다운 메뉴를 표시하거나 제품의 자세한 내용을 표시하십시오.

1. 우리는 어떻게 이러한 마이크로 개입을 더 우아하게 만들까요?
웹 사이트는 대화식 인터페이스 요소의 콘서트처럼 느껴져서 함께 노력하여 당신에게 감동을 주어야합니다. 우아함은이 인상을주는 핵심 기준입니다. 순전히 기술적 인 용어로 우아함을 정의하는 것은 어렵지만, 우리는 우아한 상호 작용을 만드는 데 도움이되는 몇 가지 논리적 트릭을 사용할 수 있습니다.
2. 키 규칙 #1 - 인스턴트 점프 없음
아이디어는 간단합니다. 페이지에서 요소를 변경할 때 항상 전환을 사용하십시오. 이것은 GUI에 빠른 컷이 없어야한다는 것을 의미합니다. 나타나거나 사라지거나 변환되는 각 요소는 완화 또는/및 애니메이션을 사용하여 구현해야합니다.
3. 이것은 사용자가 원하는 영역에 집중하는 데 도움이됩니다. 물론 이것은 또한 우아하고 일관된 흐름의 감각을 만듭니다.
### 규칙#2 : 토글 스위치는 버튼보다 낫습니다 집에서는 일반적으로 동일한 스위치를 사용하여 조명을 켜고 끕니다. 웹 사이트의 토글 컨트롤에 동일한 개념이 적용됩니다. 토글 컨트롤이 주어진 요소의 새로운 상태를 트리거하는 경우, 동일한

의 제어는 해당 상태를 롤백해야합니다.

또한 피츠의 법칙에 따르면 그러한 통제는 상태와 끄기를 신속하게 전환하기 위해 거의 노력하지 않아야합니다.

### 규칙#3 : 트리거가 근처에 있어야합니다 전환에는 항상 일종의 트리거가 필요합니다. 상호 작용할 때 사용자는 일반적 으로이 트리거 요소에 중점을 둡니다. 이는 전환이

에서 시작하거나 트리거에 매우 가깝게 시작해야 함을 의미합니다. 트리거 요소에서 너무 멀리 전환을 시작하면 사용자가 쉽게 놓칠 수 있으며 프로세스가 중단됩니다. 또한, 전환은 일반적으로 트리거에서 사용자의 관심을 집중하려는 위치로 전파해야합니다. 트릭은 간단합니다. 사용자의 눈을 방아쇠에서 다음 단계로가는 곳으로 안내합니다. 이런 식으로, 사용자는 집중력을 잃지 않으며 원하는 곳으로 곧장 갈 것입니다.

### 규칙#4 : 자연 전환 시간을 사용

전환 시간은 애니메이션의 지속 시간을 재생합니다. 시간의 주요 문제는 이것을 할 수있는 지팡이가 없다는 것입니다. 전환이 너무 오래되면 동일한 상호 작용을 자주 또는 빠르게 반복하는 사용자에게는 고통이 발생합니다. 반면에 너무 짧으면 부자연스럽지 않거나 사용자가 완전히 놓칠 수 있습니다. 불행히도, 당신이 할 수있는 일은 점화 눈과 직관을 사용하여 전환을 평가하는 것입니다. 내가 찾은 최선의 조언은 모든 전환이 같은 시간에 있도록하는 것이 아닙니다. 우연히 시도하고 올바른 균형 지점을 찾으십시오. 또한 0.05 초의 차이조차도 중요합니다.

### 규칙#5 : 전환 롤백은 사용자의 제어 감각을 파괴해서는 안됩니다 때때로, 사용자는 전환 과정에서 마음을 빠르게 바꿉니다. 이 경우 과도기적 응답 성이 중요합니다. 사용자가 마지막 상호 작용을 취소 한 경우 (예 : 트리거 버튼에서 2 번의 클릭) 전환 애니메이션을 즉시 반전시켜야합니다. 그렇지 않은 경우 사용자는 즉시 제어를 잃게됩니다. 또한 사용자가 자신이 잘못하고 있다고 생각하게 할 것입니다.

### 규칙#6 : 일련의 작업에서 다음 작업에 항상 자동으로 집중 이 기술은 일련의 작업을 수행하는 사용자의 상호 작용을 목표로합니다. 이러한 시퀀스를 설계 할 때는 항상 불필요한 상호 작용을 피하고 항상 다음 시퀀스에서 다음 제어에 중점을 두어야합니다. 이 상호 작용의 가장 기본적인 예는

[edit]

버튼으로, 양식을 열고 첫 번째 필드에 마술 적으로 초점을 맞추므로 사용자가 수동으로 클릭 할 필요가 없습니다.

### 규칙#7 : 항상 사용자에게 완료시기를 알려주십시오

사용자는 상호 작용이 완료 될 때 항상 식별 할 수 있어야합니다. 상호 작용이 완료 될 때 명백한 방식으로 변경되지 않으면 항상 "이봐, 끝났어!"에게 알려주는 일종의 시각적 피드백을 구현하는 것을 고려해야합니다. 이것을 건너 뛰면 사용자는 동일한 동작을 여러 번 반복하여 실수를 저지르고 가치있는 것을 파괴하는 경향이 있습니다.

이 팁을 적용하십시오 요컨대,이 팁을 웹 사이트에서 미세 인터레이션을위한 치트 시트로 사용할 수 있습니다. 마이크로 상호 작용을 구현하기 전에 상호 작용의 세부 사항을 설계하는 데 도움이됩니다.

그러나 처음에는 완벽을 달성 할 수 없을 가능성이 높습니다. 이 경우 자신의 상황에 맞게 조정해야하므로 조금 줄 준비가되어 있어야합니다.

그리고 ... 마지막으로, 당신을위한 또 다른 제안이 있습니다. 일반적으로, 당신의 상호 작용은 실제 물리학의 법칙에 더 많이 순종할수록 더 자연스럽고 우아합니다. 행복한 애니메이션 제작을 기원합니다! 우아한 UI 상호 작용 생성에 대한 자주 묻는 질문

UI 상호 작용을 설계 할 때 어떤 주요 원칙을 고려해야합니까?

UI 상호 작용을 설계 할 때는 사용자를 염두에 두어야합니다. 상호 작용은 직관적이고 이해하기 쉬워야합니다. 일관성도 핵심입니다. 사용자는 인터페이스와 상호 작용하는 방법을 추측해서는 안됩니다. 상호 작용은 또한 사용자에게 피드백을 제공하여 작업이 식별되고 처리되고 있음을 알려야합니다. 마지막으로, 상호 작용은 효율적이어야하며, 목표를 달성하기 위해 사용자가 취해야 할 단계를 최소화해야합니다.

내 UI 상호 작용을 더 매력적으로 만드는 방법은 무엇입니까?

UI 상호 작용을 더 매력적으로 만들려면 애니메이션 추가를 고려하십시오. 애니메이션은 상호 작용을보다 활력을 느끼게하고 사용자에게 귀중한 피드백을 제공 할 수 있습니다. 그러나주의해서 애니메이션을 사용하고 주요 작업에서 산만 해지지 않도록하십시오. 또한, 상호 작용을 향상시키기 위해 사운드 또는 햅틱 피드백을 사용하는 것으로 간주 될 수 있습니다.

UI 상호 작용을 설계 할 때 어떤 일반적인 실수를 피해야합니까?

UI 상호 작용을 설계 할 때 피해야 할 몇 가지 일반적인 실수에는 상호 작용을 너무 복잡하게 만드는 것이 포함됩니다. 사용자에게 충분한 피드백을 제공하지 않고 불일치가 포함됩니다. 너무 복잡한 상호 작용으로 인해 사용자를 혼란스럽게하고 인터페이스를 사용하기가 어렵습니다. 피드백 부족으로 인해 사용자가 자신의 행동이 확인되었는지 확실하지 않을 수 있습니다. 불일치로 인해 인터페이스가 예측할 수없고 실망 스러울 수 있습니다.

UI 상호 작용의 효과를 테스트하는 방법은 무엇입니까?

사용자 테스트를 통해 UI 상호 작용의 효과를 테스트 할 수 있습니다. 여기에는 사용자의 인터페이스와의 상호 작용을 관찰하고 피드백을 수집하는 것이 포함됩니다. 또한 분석 도구를 사용하여 사용자가 인터페이스와 상호 작용하는 방식을 추적하고 어렵거나 혼란스러운 영역을 식별 할 수 있습니다.

UI 상호 작용의 접근성을 향상시키는 방법은 무엇입니까?

UI 상호 작용의 접근성을 향상시키기 위해 기능이 다른 사용자가 인터페이스와 상호 작용하는 방법을 고려하십시오. 예를 들어, 상호 작용이 마우스를 사용할 수없는 사용자도 사용할 수 있도록 키보드를 사용할 수 있는지 확인하십시오. 또한 상호 작용이 스크린 리더 및 기타 보조 기술과 호환되는지 확인하십시오.

스토리 텔링을 내 UI 상호 작용에 통합하는 방법은 무엇입니까?

스토리 텔링은 사용자 여행에 관한 이야기를 만들어 UI 상호 작용에 통합 할 수 있습니다. 이는 애니메이션, 사운드 및 시각적 신호를 사용하여 상호 작용을 통해 사용자를 안내함으로써 달성 할 수 있습니다.

UI 상호 작용에 대해 더 많이 배울 수있는 리소스는 무엇입니까?

UI 상호 작용에 대해 자세히 알아볼 수있는 많은 리소스가 있습니다. 일부 인기있는 리소스에는 온라인 코스, 블로그 및 주제에 관한 책이 포함됩니다. 인기있는 응용 프로그램 및 웹 사이트의 UI 상호 작용을 연구하여 많은 것을 배울 수 있습니다.

UI 상호 작용의 속도는 얼마나 중요합니까?

속도는 UI 상호 작용에서 매우 중요합니다. 사용자는 상호 작용이 반응적이고 빠르기를 기대합니다. 모든 지연은 좌절로 이어질 수 있으며 사용자가 작업을 포기하게 할 수 있습니다.

UI 상호 작용을 향상시키기 위해 색상을 사용하는 방법은 무엇입니까?

색상은 중요한 요소에주의를 끌고 상태를 나타내고 피드백을 제공함으로써 UI 상호 작용을 향상시키는 데 사용될 수 있습니다. 그러나 색상을 신중하고 지속적으로 사용하고 디자인의 색맹을 고려하는 것이 중요합니다.

UI 상호 작용의 추세를 따라 잡는 방법은 무엇입니까?

UI 상호 작용의 추세에 따라 업계 블로그를 따르고, 디자인 회의에 참석하며, UI 디자이너의 온라인 커뮤니티에 가입하는 것이 가장 좋습니다. 또한 새로운 앱과 웹 사이트 간의 UI 상호 작용을 연구하여 많은 것을 배울 수 있습니다.

위 내용은 우아한 UI 상호 작용을 만드는 7 가지 간단한 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!