UX UI - 회원가입 페이지 만들기

모바일 UI 영역별 명칭

1. Indicator 영역

: Status bar 
ex. 통신사, LTE, 시간, 배터리 표시 상단바

2. Title 영역

: Navigation bar 
ex. 상단 메뉴들. 햄버거메뉴 버튼, 로고, 마이페이지, 홈, 메뉴소개, 매장안내, 회사소개 등..

[ Navigation ]

- 텍스트 기반

- 일관성, 직관성 중요

- 사용자가 웹사이트의 어느 페이지에 있는가를 알려줘야함(아래 세가지를 항상 유념할 것)
1) 내가 지금 어디에 있나 Where am I (ex. 회원가입의 약관동의 페이지)
2) 내가 어디에 간 적이 있나 Where have I been(ex. 링크 색상 변화)
3) 내가 어디로 갈 수 있나 Where can I go 

- 점검사항
1) 가장 먼저 로딩되는가
2) 간결한가
3) 사이트 구조를 한눈에 알 수 있는가
4) 입력된 텍스트가 선명하게 보이는 가
5) 일관성이 있는가
6) 현재 나의 위치를 알 수 있도록 설계되어 있는가
7) 너무 많은 길을 내어 산만하지 않은가 

- 종류
1) 바 형태
2) 폴다운 메뉴(요즘은 거의 이렇게 쓰임) 

- 용어
1) 1 Depth, 2 Depth, 3 Depth
: 1누르면 2, 2누르면 3.. 이런 형태. 요즘은 폴다운메뉴를 주로 쓰기 때문에 1 Depth만 있는 편

3. Contents 영역

: Contents area (컨텐츠01, 컨텐츠02... 안에 들어가는 모든 정보의 영역)

4. Ticker bar 영역 / Footer 영역

: 앱에만 존재(모바일 웹에는 없음)

회원가입 페이지 

1. 기본 개념

----- SET 1 -----

1 인트로: 5초 내 자동 사라짐 (브랜드 로고 in)

2 스플래쉬 화면: 5(Free)장의 페이지를 넘겨 페이징

----- SET 2 -----

(동일 가이드라인 안쪽으로 작업)

1 로그인

2 회원가입

> 약관동의

> 정보입력

> 완료: 가입완료 페이지는 상대적으로 자유로움

(약관 상세내용을 보는 버튼을 v로 하기보다는 아래 삼각형이나 '보기' 를 쓰는 것이 좋음. 왼쪽에 위치하는 v체크와 겹치기 때문)

----- SET 3 -----

(동일 가이드라인 안쪽으로 작업)

1 메인

2 햄버거(내비게이션 메뉴)

2. 새 파일 열기 

750 * 1334 Resolution 72, Background 로 열기

3. 상태바 40 px 가이드라인

[ 폰트 사이즈 ]

타이틀: 34px이 주로 쓰임

기본: 24px

강조: 28px (ex 안내문구)

최소: 22px

[ UI 디자인 팁 ]

1. 라인: 폰트보다 여린색으로

2. 사각도형

: 양쪽으로 사각형 정도 크기의 여백을 두는 것이 안정적

3. 클릭 최소범위는 88px

(디자인에 라인 포함되어있을 경우 포함하여 88인지 제외할 것인지 결정)

[ 모바일 기기별 제작을 위한 팁 ]  - 픽셀 깨지지 않도록

1. 이미지

: 오브젝트 형태로 불러 마스크를 씌울 것(중요!!!)

-> 이렇게 해야 크기를 조절해도 깨지지 않음

2. 라인/도형

: Shape으로 그릴 것 

3. Background

: Layer 형태로!
 (오브젝트 shape X!! - 그 위의 도형들이 안 잡혀) 

4. 텍스트

: 반드시 도형보다 위에 위치

[ 오늘 배운 일러스트 단축키 ]

1. Ctrl + Alt + C
: 이미지 사이즈 변경