UX/UI 필기

UX/UI 필기

(UX/ UI Design) Mobile +web

 
UI 디자인( user interface design) 사용자 위주
사용자가 어떤 프로그램을 접했을 때 헤매지 않도록 한다.

UX 디자인 ( user experience design ) 사용자 경험
사용자가 사용하면서 발생하는 모든 경우의 총합.

  • *사용 수준알고 접근하기 ( 개인에 따라 UI 사용수준이 다르다 )
    디자이너 자신의 눈높이로 디자인 하지 않을 것.
  • 버튼의 크기 ( UI 버튼의 크기는 손가락 평균 크기에 맞게 디자인
  • UI의 위치 ( ex 모바일 터치율이 가장 높은 스크린 위치는 우측하단 부터 좌측 상단, 심리적으로 코너보다는 중앙쪽이 안정적으로 보인다. )
    하지만 앱의 목적에 따라 UI 위치도 달라질수 있다.
  • UI 방향읽기 ( 엄지 터치 방향은 중앙 하단부터 우측 상단까지 시계 방향의 곡선형 흐름이 쉽다.)
    ( 방향성의 뚜렸한 경우 UI의 방향성이 통일 되거나 흐름이 이어지는 것이 좋다. )
  • 버튼이 많아도 문제 ( 핵심적인 기능만 제대로 표현하기 )
  • 앱 정체성 수립 ( 페이지마다 버튼 크기 / 그래픽스타일 / 컬러의 통일 )
  • 보편성과 독창성 ( 일반인의 시선에서 디자인이 이루어저야 한다. 사용자의 보편적인 툴을 벗어나지 않도록 디자인해야 한다. )

material 디자인 가이드 참고

UI 원칙

 
UI 원칙 1. 사용자에게 집중

  • 사용자의 연령대 파악하기 ( 나이, 기술수준, 문화 )
  • 필요한 것들이 잘 보이도록 사용자가 가장 많이 사용하는 기능은 앱을 실행 즉시 보이게하고 부가적인 기능은 메뉴버튼 속에 숨겨져 보이지 않게 한다.

UI 원칙 2. 터치결과 알게하기

  • 모든 UI 요소에 최소 4단계의 반응과정 부여
    (<selector> default, disabled, focused, pressed)
  • 사용자 행동의 결과는 명확하게 보여지도록 한다.
  • 다운로드 등의 임무에는 진행상황을 표시한다.

UI 원칙 3. 사용자의 행동, 상황, 반응을 예측

  • 사용자가 기대하는 바 (인터렉션, 관련정보, 반응 등)을 제공.
  • 터치 아이템은 한 눈에 보이도록 디자인 한다.

UI 원칙 4. 사용자가 오류를 만들지 않도록

  • 필요에 따라서는 사용자가 사용할 필요가 없는 부분은 disabled.
  • 돌이킬 수 없는 액션은 그 수를 제한적으로.
  • 확인창을 통해 undo 할 수 있도록 한다.

UX is not UI.

구성

 

앱바의 key lines
기본높이

  • 가로 모바일화면 48dp
  • 세로 모바일 화면 56dp (48 + 8)
  • 태블릿 / 데스크탑 64dp (56 + 8)

사이드 네비게이션
기본 너비

  • 세로 모바일화면 화면가로 너비 – 앱바의 높이
  • 가로 모바일화면 세로 모바일 화면과 동일
  • 태블릿 / 데스크탑 304dp

리스트

  • 리스트는 인일의 column 을 가진다.
  • 리스트는 row 들은 비슷한 크기의 높이를 가진다.
  • 리스트의 title 은 내용물을 표현하는 공간이다
  • 리스트에서 사용자의 시선은 위에서 아래로 흘러간다.

리스트의 목적

  • 3라인 이하로 구성된 내용들은 list 를 사용
  • 3라인 초과로 구성된 내용은 card 를 사용
  • 이미지로만 구성된 특별한 내용들은 grid를 사용

리스트 액션 배치
타일 공간의 대부분은 기본 작업에 적념, 또한 모든 타일에서 일관적으로 동작, 추가적인 작업에 대한 액션은 타일 우측에 배치 ( 텍스트, 아이콘 ) 등이 있다.

리스트 액션의 규칙

  • 일반적으로 액션들은 서브메뉴를 가지지 않는다
  • 액션들은 다음 순서 ( 카드 또는 호버카드 0 로 이어지게 할 수 있다.
  • 모든 타일에 별주기 (점수 ), 토글, 실행과 같은 의미 있는 액션들을 배치하여 시각적인 불편함을 주지 않도록 한다.

리스트 Key lines

  • 타일 높이 48dp
  • 텍스트 패딩 left 16dp
  • 텍스트 패딩 top 16dp
  • 텍스트 패딩 right 16dp
  • 텍스트 패딩 bottom 20dp
  • 텍스트 폰트 bottom 16dp
  • 리스트가 서브헤더 아래에 있는 경우 리스트 패딩 top에 8dp추가
  • 리스트가 서브헤더 에 있는 경우 리스트 패딩 bottom에 8dp추가
By | 2018-07-10T19:37:38+00:00 7월 10th, 2018|Graphics|0 Comments

About the Author:

DAN

Leave A Comment