[디자인 퀄리티를 즉시 UP 시켜줄 6가지 꿀 | 커리어리

[디자인 퀄리티를 즉시 UP 시켜줄 6가지 꿀팁!] 🏷Vivian's Curating 오늘은 디자인을 개선해줄 짤막한 팁 6가지에 대해 알려주는 아티클을 첨부했어요😎 ✍️요약 1. 디자인 요소들에 일관성을 유지하라 2. 여백을 아낌없이 활용하라 3. 첫번째 단락을 디자인해 사용자를 끌어들여라 4. 독자를 위해 짧은 문단으로 디자인하라 5. 색상 팔레트를 정해 디자인에 통일성을 부여하라 6. 8pt 그리드 시스템을 사용할 때 아이콘을 일관되게 배치하라 #디자인 #짤막팁 #디독

[디독] ⭐️ 디자인을 즉시 개선해 줄 짤막 팁 6가지

Stibee

2021년 5월 20일 오전 5:44

댓글 0

함께 보면 더 좋은

[모바일 UI 디자인 기본 요소 - 텍스트필드] 🏷Vivian's Curating 모바일에서 텍스트필드는 매우 중요한 요소이다. 정보를 얼마나 입력하기 쉽고 간편하게 디자인 하느냐에 따라서 더 나은 이용자 경험을 제공할 수 있다. 요약은 매우 간단한 구조와 기능 정도만 정리하였고, 자세한 내용은 링크된 아티클을 보기를 권장한다. ✍️요약 1. 레이블 기능을 하는 아이콘은 왼쪽 정렬을 권장한다. 2. 텍스트필드의 레이블은 이용자가 입력한 정보보다 더 크거나 강조되지 않아야 한다. 3. 한 유형의 정보를 요청하는 텍스트필드의 입력 필드를 나누지 않아야 한다. 4. 오류 메시지는 필드의 하단에 있어야 한다. ✅ 텍스트필드의 구조 1. 레이블 Label : 입력 필드에 입력할 정보가 무엇인지 사용자에게 설명한다, 2. 입력 필드 Input Field : 레이블 아래에 표시되는 텍스트를 입력할 위치. 3. 플레이스홀더 텍스트 Placeholder Text : 필드 내에 있는 부가적인 내용을 설명하는 짧은 텍스트. 4. 커서 Cursor : 필드 내의 현재 입력 위치를 나타냄. 5. 입력 텍스트 Input Text : 이용자가 입력한 텍스트. 플레이스홀더보다 어두운 색이어야 함. 6. 클리어 버튼 Clear Button : 필드에 입력한 정보를 한꺼번에 삭제할 수 있다. 7. 도움말 텍스트 Helper Text : 정보 입력 중 필드 하단에 입력 정보에 대한 검증 결과 노출. ✅ 필드의 상태 States 1. 디폴트 Default : 텍스트 필드 활성화 상태에서 이용자가 정보 입력하기 전 상태. 2. 호버 Hover : 이용자가 필드 위에 마우스나 손가락을 올렸을 때 상태 변화. 3. 포커스 Focus : 이용자가 입력을 위해 필드를 눌렀을 때의 상태. 4. 타입 Type : 이용자가 키보드를 통해 정보를 입력 중일 때의 상태. 5. 입력됨 Filled : 이용자가 요청한 정보를 입력 완료한 상태. 6. 오류 Error : 이용자가 입력한 정보가 요청한 형식이 아닐 때의 상태. 7. 비활성화 Disabled : 정보 입력을 할 수 없는 상태. 8.성공 Success : 입력한 정보가 요청한 형식에 맞을 때 입력이 성공적으로 완료된 것을 알리기 위한 상태. ✅ 입력 유형과 키보드 유형 1. 기본 키보드 : 문자 입력에 최적화된 형태. 2. 검색 키보드 : 기본 키보드에서 [엔터]키가 [검색]으로 변경. 3. 이메일 키보드 : 기본 키보드에서 [@]과 [.]이 추가되고 [음성입력]키가 빠짐. 4. URL 키보드 : 기본 키보드에서 [.] , [/] , [.com]이 추가되고 [스페이스]키가 빠짐. 5. 숫자 키보드 : 문자는 입력할 수 없고 왼쪽 특수문자 키보드를 통해 특수 문자 입력 가능. 통화 키패드는 여기서 제외됨. ✅ 입력 오류 방지 1. 선택 컨트롤 사용 : 데이트피커, 슬라이더 같은 입력 컨트롤을 사용해 부적절한 값을 입력할 가능성 차단. 2. 입력 거부 : 문자만 요청하는 필드의 경우 숫자 입력 시 입력이 되지 않게 한다. 3. 최적화된 키보드 제공 #UI #디자인 #UI요소 #텍스트필드 #Input

모바일 UI 디자인 기본 요소 - 텍스트 필드

brunch

추천 프로필

현직자에게 업계 주요 소식을 받아보세요.

현직자들의 '진짜 인사이트'가 담긴 업계 주요 소식을 받아보세요.

커리어리 | 일잘러들의 커리어 SNS