입력

입력 구성 요소를 사용하여 문자열, 다양한 컨텍스트에 맞는 숫자, 날짜, 이메일 및 비밀번호와 같은 기타 값과 같은 사용자 데이터를 수집합니다. 여러 입력을 결합하여 사용하기 쉽고 미적인 형태를 만들 수 있습니다. 입력은 Ignite UI for Angular와 시각적으로 동일합니다.

Input Demo

Types

Sketch 및 Adobe XD에서 입력을 사용하면 단순, 도우미 텍스트와 함께 제공되는 힌트, 검색 창의 세 가지 옵션 중에서 사전 설정을 선택할 수 있습니다. Figma 에서는 힌트(부울 속성)가 있거나 없는 간단한 입력과 검색창 중에서 선택할 수 있습니다.

'간단하다'

'힌트'

'검색창'

Sketch 및 Adobe XD의 힌트와 간단한 사전 설정은 보다 경쾌한 느낌을 주는 선 스타일, 단색 배경에 대한 보다 구조화된 인식을 위한 테두리 스타일, 입력을 배치할 때 가장 적합한 박스형 스타일 등 세 가지 유형 중에서 선택할 수 있습니다. 내용의 가독성을 높이기 위해 생생한 이미지를 상단에 배치합니다. 선 스타일을 더 이상 사용하지 않기 때문에 Figma 에서는 테두리와 상자 유형만 사용할 수 있습니다.

'경계'

'상자'

Interaction State

Sketch 및 Adobe XD에서는 이러한 각 사전 설정을 활성화됨 또는 비활성화됨 상태로 삽입할 수 있습니다. Figma에서 입력은 기본적으로 활성화 상태이며 오른쪽 속성 패널에서 비활성화 상태로 전환할 수 있습니다.

'활성화'

'장애인'

State

입력 구성 요소는 사용자가 상호 작용할 때 다양한 상태를 거칩니다. 콘텐츠 위치에 자리 표시자를 표시하는 Idle; Hover- 사용자가 입력 위로 마우스를 가져가면 입력이 활성화됨을 나타냅니다. Filled- 사용자가 콘텐츠를 입력하고 입력에서 다음 단계로 이동한 후에 나타납니다. Focused는 사용자가 입력 내용을 적극적으로 입력하고 있다는 시각적 신호를 제공합니다.

'유휴'

'호버'

'채워졌다'

'집중'

숙련된 모든 디자이너는 제약 조건을 현명하게 사용하여 사용자 입력을 제한하고 유효하지 않은 상태를 방지하므로 유효성 검사 스타일을 사용할 수 있습니다. 사용 가능한 유효성 검사 스타일을 통해 입력은 성공, 경고 및 오류 시각적 개체를 표시하는 정교한 디자인을 갖추고 있습니다.

'성공'

'경고하다'

'오류'

Sketch 에서는 상태 및 유효성 검사 상태가 Symbol Overrides 통해 달성되는 반면, Figma 에서는 오른쪽 속성 패널의 "State" 속성을 사용하여 두 상태 사이를 전환할 수 있습니다. Adobe XD에서는 Component States 패러다임을 사용하여 쉽게 전환할 수 있습니다.

Layout

입력은 경우에 따라 사용자의 입력 노력을 줄일 수 있는 텍스트와 아이콘의 조합을 통해 접두사 및 접미사에 대한 풍부한 지원을 제공합니다. 예를 들어 @email.com 접미사는 더 적은 키 입력과 예상되는 콘텐츠의 더 명확성을 의미합니다. Figma 에서는 속성 패널에서 접두사 또는 접미사를 켜거나 꺼서 제거할 수 있습니다. Sketch에서 접두사 또는 접미사를 제거하려면 해당 재정의를 ~No Symbol로 설정하면 스마트 레이아웃 규칙이 그에 따라 입력을 조정합니다. Adobe XD에서는 불필요한 접두사 또는 접미사 레이어를 삭제하여 동일한 결과를 얻을 수 있으며 스택은 이에 따라 레이아웃을 조정합니다.

Content Type

각 입력 구성 요소에는 텍스트, 이메일, 비밀번호, 전화번호, 날짜 등 삽입되는 정보 유형을 지정하는 Content Type 레이어가 포함되어 있습니다. 입력 필드에 데이터를 입력한 후 디자인이 App Builder로 올바르게 구문 분석되도록 Content Type 적절하게 설정하는 것이 중요합니다.

스타일링

입력에는 배경색과 테두리/맨 아래 줄의 색상은 물론 아이콘 색상과 접두사, 접미사 및 콘텐츠의 기본 영역의 텍스트 스타일을 통해 스타일 유연성이 제공됩니다. 유효성 검사 스타일을 변경하려면 Indigo.Design 라이브러리에서 해당 색상 변수를 업데이트하는 것이 좋습니다.

Usage

가독성을 높이기 위해 이미지 위에 양식을 배치할 때 입력 상자 유형을 사용하십시오. 디자인에서 경고 또는 오류 상태의 입력을 사용할 때 도우미 텍스트가 있는 사전 설정을 선택하고 사용자에게 지침을 제공할 수 있는 기회를 활용하십시오.

하다	하지 않다

입력