UI/UX의 경우 종이 위에 프린트되는 정적인 결과물과는 달리 시각적 계층구조와 동적인 요소로 이루어져 있으므로 정보성과 시지각에 대한 이해가 필요하게 된다. 이 과정을 통해서 스크린 디자인에 있어서 기본적인 정보관리와 시각적 계층구조를 효과적으로 설계하는 방법을 학습하도록 한다.
- 시각적 계층구조
- 페이지 프레임워크
- 웹 레이아웃 특성
- 사례연구
- 리소스 활용 방법
- 네이밍
아래의 2가지 항목에 관한 내용을 해결해 보자.
질문 1
지난 시간에 배운 레이아웃 내용을 복습해보고 내가 기획한 페이지에서 시각적 계층구조를 어떻게 만들것인지 생각해보고 계획을 세워보자.
- 메인페이지 :
그리드안에서(1순위) 가장 드러내야할 영역 어디인지
2순위 그다음으로 드러낼 영역이 어디인지
3순위 그 다음으로 드러낼 영역~ - 소개 메뉴 :
그리드안에서(1순위) 가장 드러내야할 영역 어디인지 - **메뉴 :
그리드안에서(1순위) 가장 드러내야할 영역 어디인지
최소 3페이지 이상입니다.
질문 2
내가 정한 개인 주제의 메인화면에서의 주요 사용자 과업을 파악하고 시각 계층구조를 설계해본다.
- 사용자 과업 파악, 분석
- 과업 그룹핑
- 시각계층 설정(visual path): 무엇을 시각계층에 1계층에 놓을지 결정한다.
- 시각계층 구현
- 그리드 만들기
- 컬럼 설정
- 배치
질문 1
– 1 메인페이지: 지출을 한눈에 볼 수 있는 대쉬 보드, 카드 및 계좌 정보, 이벤트 및 정립금
2 소개 메뉴: 이벤트 관리, 사용자 메뉴얼
3**메뉴: 추천 메뉴(가맹점 정보, 교통 정보, 통신, 문화 쇼핑 등)
질문 2
– 1: 사용자가 서비스를 이용하는대해 있어서의 행동의 초점을 말하는 것으로 간편 결제 서비스를 쉽고 직관적으로 사용 할수있는 메뉴 구성
2: 시각적인 프레임 워크: 페이지를 의미있는 부분을 나누기 위한 기각적 틀을 구성한다 (쇼핑몰 연동, 간편 결제, 유형별 지출내역 등 )
3: 사용자 반응은 전체적으로 앱 서비스에 대한 의견 부분이다 따라서 계층 구조에 따라 컨텐츠 설정이 가장 잘 전달될 수 있도록 우선 순위를 정한다
4: 글자(타이포 그래피)은 가독성과 판독성이 명확한 서체를 정하고 글자의 크기와 배경 색상 간격 등을 그리드에 맞추어 적절하게 배치한다
질문 1
1순위 – 사진을 한눈에 볼 수 있는 메인 (정 중앙)
2순위 – 노출값, 대비 ,구도 등 설정값
3순위 – 보정 후 연동되는 어플이나 프로그램
질문 2
보정을 사용하는 주 소비자는 여성. 심플하고 깔끔함을 추구
편집과 사진을 주구성하는 다양한 아이콘으로 구성
주목적성을 갖고 편집이라는 부분에 1순위를 설정.
미니멀리즘한 쉽게 알아볼 수 있는 아이콘으로 정보전달