[내가 필요해서 정리한 모바일 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

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

2021년 5월 4일 오전 3:26

 • 

저장 500조회 10,548

댓글 12

주간 인기 TOP 10

지난주 커리어리에서 인기 있던 게시물이에요!