[내가 필요해서 정리한 모바일 UX/UI 디자 | 커리어리

[내가 필요해서 정리한 모바일 UX/UI 디자인 가이드라인 1] 🏷Vivian's Curating 웹디자인만 하다가 모바일디자인을 하려니 막막한 부분들이 있었는데 오늘 링크 걸어둔 아티클이 많은 도움이 됐다. 학원에서는 제대로 가르쳐주지 않았던 모바일 UX/UI 가이드라인. 처음 디자이너로 입사한 회사에는 제대로 된 사수도 없어서 혼자 해결해나가야 했다. 나처럼 디자인을 시작한지 얼마 되지 않아 막막한 디자이너들에게 필요한 참고서가 되지 않을까하여 공유한다😊 ✍️요약 1. 모바일에서는 모달 상태의 경고창 alert 상단 우측 'X' 버튼은 노출하지 않는다. → 모바일에서의 창 닫기 버튼은 우측 상단보다 하단이 사용성이 좋다. 한 손으로 사용하는 경우 엄지 손가락 터치가 쉽다. 2. 풀프레임 대화창 Dialog에 'X' 버튼 (닫기 버튼)은 왼쪽 상단 권장한다. → 풀프레임은 주로 사용자의 특정 정보의 입력을 요할 때 사용된다. 'X' 버튼은 좌측에 완료(저장) 버튼은 우측에 놓는 것을 권장하는 이유는 입력을 완료하고 키보드를 내리고 완료 버튼을 탭하는 단계를 축소하기 위함이다. 3. 긍정적인 액션 버튼은 우측에 배치한다. → 실세계의 오른쪽 개념을 가상의 모바일 환경에 메타포로 적용했다. 이용자의 자연스러운 행동을 유발시키기 위해서는 긍정적이고 진행의 의미가 있는 확인 버튼을 오른쪽에 위치하는 것으로 한다. 4. 입력을 완료하지 않은 상태에서 완료 버튼(보내기/로그인)은 오류 방지를 위해 비활성화를 권장한다. → 이용자의 오류 가능성을 최소화하기 위해 모든 필수 필드를 입력할 때까지 비활성화 한다. 5. 입력 내용에 맞는 키보드를 제공해야 한다. → 상황에 맞는 키보드를 앱/웹 전반에 걸쳐 일관되게 제공해야 한다. ex. 전화번호 숫자 입력 필드 - 숫자 키보드 제공 ex. 검색 필드 - 검색 버튼 키보드 제공 ex. 이메일 입력 필드 - '@' 이메일 키보드 제공 6. 검색 필드 우측에 검색 버튼은 사용하지 않는다. → 검색어 입력 후 키보드의 검색 버튼을 탭하는 것이 사용성이 더 높다. 7. 스크롤을 고려하여 콘텐츠의 그리드를 화면 하단에 정확하게 정렬하지 않는다. → 스크롤하면 더 많은 컨텐츠가 있음을 예상할 수 있는 시각적인 단서를 제공해야 한다. 8. 탭은 중첩되지 않아야 한다. → 탭은 2단으로 중첩되게 하기 보단 항목을 줄이거나 (최대 5개) 좌우스크롤을 권장한다. 9. 버튼 스타일은 중요도에 맞게 사용한다. → 한 화면에서 다른 기능을 가진 버튼을 동일하게 디자인하지 않아야 한다. 터치 가능한 버튼과 링크에 사용된 컬러를 다른 정보에도 사용하지 않아야 한다. 10. 시각적 노이즈는 최소화해야 한다. → 이용자가 콘텐츠에 집중할 수 있도록 디자인해야 한다. 색상의 수는 제한하고 이용자의 행동을 유도하는 요소 외에는 색상을 적용하지 않아야 한다. 작은 화면 안에 기능과 콘텐츠를 촘촘하게 채우기 보다는 모바일 사용 환경을 고려하여 충분한 여백을 주는 것이 좋다. → 콘텐츠가 많다면 시각적인 계층 구조를 명확히 하고 연관 정보는 그루핑을 통해 화면의 복잡함을 줄인다. → 콘텐츠 내 보더라인은 최소화해야 한다. 격자형 보더라인은 가급적 사용하지 않는다. 11. 네비게이션바(앱바)에서 아이콘과 텍스트 레이블을 함께 사용하지 않는다. → 사용성이 문제라면 텍스트 레이블만 사용해야 한다. 가급적 아이콘만 사용할 것을 권장한다. → 탭바는 아이콘+레이블 사용이 기본이다. 아이콘만 사용할 경우 iOS에서는 Tool bar로 정의한다. 12. 키보드를 통해 많은 정보를 입력해야 하는 대화창에서 [완료]를 의미하는 버튼은 상단 네비게이션바 우측을 권장한다. → 풀프레임 대화창에서 키보드가 노출될 경우 하단의 버튼은 키보드에 가려지게 된다. 키보드를 고려하여 네비게이션바 우측에 [완료] 버튼을 위치시키는 것을 권장한다. #UXUI디자인 #앱디자인 #모바일디자인 #디자인가이드

모바일 UI·UX 디자인시 고려해야 할 가이드라인 1

brunch

2021년 5월 4일 오전 3:26

댓글 11

함께 보면 더 좋은

[모바일 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