[UI 디자인 기초] UI 구조의 이해
ㅣ플러스 엑스 UI 강의 후기 01ㅣ
UI 구조 짜기
해상도의 특성을 고려하여 구조를 설계하고, 구조별 특성을 알려줄게.
UI의 구조를 파악해야한다. 각 구성요성 요소 분석하여 이해하는것이 필요하다.
ex. 웹 해상도를 모바일 해상도로 변환할 때 UI 구조 지식이 필요함.
이유.
1. 구조별로 레이어 위계를 (폴더별) 정리하기 위해 디자인 요소를 묶어주는 UI 구조에 대해 알아야 함.
2. UI 구성요소의 특성을 바탕으로 올바른 화면을 구성하여 사용성 높은 인터페이스를 만들기 위해
UI 구성요소의 명칭과 기능에 대해 알아야 한다.
3. UX 설계를 읽고 의도에 맞게 인터페이스를 구축하기 위해
'UI 구조의 이해'
축적된 사용성 데이터 → 사용자 본능적인 사용 → (디자이너)→ 기본적인 구조 이해 → 구조 응용 및 구축
- 화면 구조시 영역별로 오브젝트와 기능 정의 (푸터: Copyright,Social Link, Family Site...)후 어떤 방식(ex. Scroll, Hover, Click, Slide...)으로 보여주면 좋을지 고민
구조를 그릴때 가장 많이 고려 해야 하는것은? 조직성과 일관성
[조직성]
사용자에게 적절하게 그룹핑된 개념적 화면 구조 제공
[일관성]
사용자가 예측할 수 있는 UI반영하여 용이성을 향상시킴
웹과 앱은 사용성에 따라 구조가 다르나 기본적인 명칭은 같음
[Header or Top] 개발용어 'head'
- 상단 영역. 화면에서 가장 눈에 뜀.
- 기본적인 서비스 정보 제공.
- UX 설계나 서비스 성격에 따라 헤더 구성 다르게 함. (사용성을 기준으로 디자인)
- 웹 헤더를 기준으로 모바일 헤더에 축약형으로 구축하여 일관성 유지.
- 대표로고 / 언어 변경 버튼 / 서비스 특징 버튼 / 사용자 행동유도 베너 / 네비게이션
- 웹의 경우 헤더가 고정되기 때문에 전체적인 웹 페이지와 어울리는지 체크
- 모바일 경우, 스크롤에 따라 헤더가 사라질지 고정될지 설정하는 것 필요. -> 헤더 가이드 작성
[Contents or Main] 개발용어 'body'
콘텐츠 영역 서비스가 보여주고자 하는 내용이 배치되는 공간. 주된 정보, 기능이 배치 되는 영역. 다양한 요소 포함
- 그리드 시스템에 기반한 콘텐츠 배치
- 콘텐츠 간의 여백, 간격에 규칙 정하기
- 중요한 정보 / 주요 기능 / 강조필요 콘텐츠의 우선순위를 고려 → 콘텐츠 영역과 오브젝트 크기 설정
- 콘텐츠 배치시 시각적 흐름을 고려 하여 중요도에 따른 적절한 배치. (위→ 아래 / 좌 → 우)
[Footer]
하단 영역. 서비스 관련 정보를 한 눈에 볼 수있는 공간.
- 한눈에 보는 정보 제공 : 로고/ 사이트맵 /연락처 정보/ 서비스 안내 / 저작권 관련 고지 / 패밀리 사이트 / 소셜미디어 등..
- 사이트 성격에 따라 보여줄 정보 기준 세우기
- 디자인 스타일, 일관성 유지.
- 콘텐츠 영역과 구분되도록 상반된 컬러, 레이아웃을 다르게 활
- 해상도 환경에 따라 내용 축략, 크기 조절. 반응형 웹일 경우 각각의 해상도별로 보이는 법을 따로 만들어 줘야함.
- * 필요한 정보를 잘 담아 낼 수 있도록 구축
- 다음 행동을 추가적으로 유도하는 방법으로 디자인. (서비스 성격/ 사용자의 행동 에 따라 푸터 보여줘야함)
[웹 구조]
Header → Contens → Footer
[모바일 구조] 보편적 구조
Header → Contens →Navigation Bar(고정) → Footer
- 출처: https://plusxsharex.fastcampus.co.kr/courses/213930/clips/
[🌰인사이트]
●해상도 특색에 따른 설계
- 기준 해상도를 정하고 해상도별 구조를 설계
- 반응형일 경우 가변형 지점 기준으로 알맞은 구조 설계.
● 콘텐츠영역 그리드 시스템에 기반한 배치
- 그리드 시스템에 기반한 버튼, 베너, 콘텐트.. 배치로 일관되고 정립되 보이게 디자인.
[🥜 추가조사]
그리드 꼭 지켜야 할까?
모바일 디자인할 때 그리드 시스템 꼭 사용해야 할까?
author - rustyat, br│UI 디자이너 | 자료를 찾기 위해 비핸스나 드리블을 둘러보다 보면 모바일에서도 그리드 시스템을 잘 적용하여 디자인한 레퍼런스를 종종 볼 수 있다. 그렇다면 모바일에서 그
brunch.co.kr
UI 요소간 간격 설정 하기 → 8포인트 그리드
UI 요소 간격 어떻게 맞춰요?(8point Grid)
『버려지는 디자인 통과되는 디자인』요약 정리 - 그리드2 | 들어가는 말. 최근 컴포넌트와 페이지를 따라 만들어보고 있다. 강의를 들으면서 따라 만들고 있긴 한데... 왜 이런 그리드를 썼을까?
brunch.co.kr
사용성을 높이는 UI 여백 디자인
UI 디자인에 여백을 활용하는 8가지 팁 | 요즘IT
훌륭한 UI 디자인이라는 것은 수많은 디자인 요소들부터 페이지 전체에 이르기까지, 그리고 아주 작은 부분에서부터 커다란 부분에 이르기까지 인터페이스의 모든 부분에서 여백을 신중하게 잘
yozm.wishket.com
[🌞 목표]
▶ 해상도 변경에 용이한 UI 요소간 간격을 설정하고 설계 할 수 있다.
▶ 기획시 구조를 먼저 설정하고 각 구조안에 들어갈 요소를 자연스러운 시각 흐름를 고려하여 배치할 수 있다
▶ 브랜드 전략 기획에 맞는 그리드를 설계한다. 꼭 그리드에 맞지 않더라고 브랜드 특색이 반영되고 사용성이 높다면 괜찮다.