더 많은 것
UI 패턴에 대해 들어 본 적이 없다면 여기에 간단한 설명이 있습니다. 대부분의 경우, 특히 소프트웨어 개발 중에는 인식 가능한 패턴을 형성하기 때문에 대규모 요소 집합을 함께 그룹화 할 수 있습니다. 소프트웨어의 예는 특정 프로그래밍 언어와 관련된 아키텍처 패턴 또는 패턴의 정의입니다.
그러나 UI를 디자인 할 때 일반적인 패턴도 있습니다. 이 문서를 읽고있는 기기의 일부 앱을 간단히 살펴보면 다음과 같은 특정 사항이 결국 반복됩니다.
- 저장, 취소 및 / 또는 삭제 조치가있는 모달보기
- 텍스트를 포함하는 요소의 섹션 (예 : 각 목록 항목에 대해 스 와이프 동작이있는 목록)
한 단계 더 나아가 UI를 디자인 할 때 활용할 수있는 리소스가 있습니까? 다른 디자이너가 이미 인식하고 공식화 한 패턴 모음일까요? 글쎄요, 제가 이미 답을 얻지 못했다면이 질문을하지 않을 것입니다! 2 장을위한 시간입니다!
제 2 장 (발표 된 것)
공식적인 정의를 찾고있는 IBM의 Carbon Design 팀은 훌륭한 정의를 가지고 있습니다. 패턴은 사용자가 목표를 달성하는 방법에 대한 모범 사례 솔루션입니다. 시퀀스 및 흐름을 통해 일반적인 사용자 목표를 해결하는 구성 요소 및 템플릿의 재사용 가능한 조합을 보여줍니다.
몇 가지 예를 살펴 보겠습니다. 다음 항목은 IBM의 Carbon Design 사이트와 Google의 Material UI 패턴 페이지에서 가져온 것입니다. Microsoft의 Fluent Design 사이트를 찾을 수 없었지만 부록에서 시작 페이지를 연결했습니다.
검색
콘텐츠 검색은 대부분의 앱에서 필수 구성 요소이므로 UI 패턴을 정의하는 데 완벽한 선택입니다. 최종 사용 (전체 검색 또는 콘텐츠 페이지의 특정 검색)과는 별도로 검색 UI는
- 텍스트 입력
- 아직 입력 할 수없는 경우 텍스트 자리 표시 자
- 예를 들어 돋보기를 사용하고 새 검색을위한 트리거 역할을하는 등 텍스트 입력의 목적을 명확하게 나타내는 아이콘
특정 경우에 힌트 레이블은 서로 다른 콘텐츠 유형을 구별하는 데 도움이되거나 잘못된 입력에 대한 도움말을 제공 할 수 있습니다. 검색이 처리해야하는 조건이 많을수록 명시 적 필터 메뉴를 추가하여 검색이이 요구 사항에 더 잘 적응할 수 있습니다.
대화
매우 눈에 띄는 UI 패턴 중 하나입니다. 대화 상자를 사용하면 앱이 사이트의 전체 컨텍스트를 잃지 않고 정보를 표시 할 수 있습니다. 이것은 전체 창을 덮지 않고 더 작은 부분 만 덮으면 수행됩니다. 대화 상자는 사용자의 현재 워크 플로를 중단하므로 워크 플로의 중지가 실제로 유효한 경우에만 필요한 것으로 간주되어야합니다. 그들은 작은 작업만을 처리하고 무엇을 성취해야하는지에 대한 명확한 초점을 가져야합니다. 예를 들어 저장되지 않은 변경 사항을 되돌 리거나 중요한 작업을 수행합니다.
빈 상태
처음에는 이상하게 들릴 수 있지만 빈 상태는 앱에서 매우 일반적입니다. 사용 가능한 데이터가 없음을 사용자에게 알리고 그 이유를 이상적으로 설명하는 것이 중요합니다. 상황에 따라 빈 상태를 해결하는 방법에 대한 힌트는 좋은 UX를 만드는 데 많은 도움이 될 수 있습니다. 예를 들어 사용자가 무언가를 검색했지만 아무것도 찾을 수 없습니다. 다른 검색 쿼리를 제안하면 사용자가 작업을 수행하는 데 도움이 될 수있는 사용 사례 일 수 있습니다. 모든 경우에 비어있는 상태를 나타내는 모든보기는 상황에 맞아야합니다. 부정적인 예는 "작동하지 않았습니다. 나중에 다시 시도하십시오”.
UI 디자인 프로세스에서 빈 상태를 사후 고려 사항으로 취급하지 마십시오. 올바르게 구현되면 사용자가 워크 플로를 원활하게 진행할 수 있습니다. 전체 워크 플로를 중단하는 빈 상태는 실제로 앱 충돌을 제외하고는 최악의 시나리오입니다.
시작일뿐
이것은 IBM의 Carbon Design과 Material UI의 패턴 페이지에서 선택한 일부 UI 패턴을 간략히 살펴본 것입니다. 앱에 UI 패턴을 적용하면 작업을 수행하기 위해 사용자의 워크 플로와 사용자 인터페이스 간의 마찰을 크게 줄일 수 있습니다. UI를 디자인하는 것은 상당히 어려울 수 있으므로 기존 UX 연구에서 배움으로써 거인의 어깨에 서서 앱 동작에 대한 사용자의 인식을 개선하는 데 많은 도움이됩니다.
