7-6. UI 디자인 제작과 인터랙션 종합 실습
[좌우 스크롤과 오버플로우 스크롤 차이]
좌우스크롤은 완전히 넘겨야 이미지가 넘어가지만
오버플로우 스크롤은 당기고 아무데나 멈추면 그 자리 그대로 멈춰있음
[실습할 것]
- 마우스 오버했을 때 어두워지는 기능
- 화면 아래로 스크롤 했을 때 위로 올려주는 버튼
- 맵 메뉴에 들어가서 지도를 자유롭게 마우스 이동할 수 있는 기능
- 플러그인 - Material Symbols 다운
상단에 순서대로 list 아이콘 / 텍스트 / share 아이콘 / more 아이콘을 삽입
7-5. 내비게이션 드로워 인터랙션에서 만들어 놓은 것을 수정해서 [Assets]에서 삽입하고
아래에 텍스트 넣고 리포터 이미지와 이름이 들어갈 도형과 텍스트를 만든다.
텍스트 색상은 777777, 도형과 텍스트 한 번에 선택해서 shift + A (오토 레이아웃) 그리고 옆으로 복제
alt 해서 복제한 후에 두 개 만들어진 걸 다시 shift A
그리고 방금 복제한 하나의 레이아웃을 다시 ctrl D 해서 복제
(이게 초반에 차이점 얘기할 때 말한 오버 플로우 스크롤 만드는 구역이다)
오버 플로우 스크롤 만들 때 프레임을 벗어나는 부분은 잘리도록 '이미지가 끊어져 보이게' 만들어야 한다.
그래야 '아 옆으로 넘기면 뭐가 더 있겠구나!' 하고 넘겨볼 수 있기 때문
사이 공간을 클릭하면 이렇게 뜨는데 좌우로 움직이면서 간격을 조절해주는 동시에
앞서 얘기했던 것처럼 이미지가 끊겨 보이게 만들어주었다.
이렇게 플러그인 - UI Faces를 통해서 이미지 삽입
그리고 잘려서 안 보이는 도형들은 프레임 선택 후 우측 패널에서 clip content 체크 해제
기사들이 들어갈 부분
- 156 x 212, radius: 8
- 맨 밑에 드롭 섀도우 사각형
- 위에 회색 배경의 글씨가 들어갈 높이 10의 사각형(나중에 흰색으로 바꿀 것)
- 위쪽 radius만 0으로 바꾸고 드롭 섀도우(첨 만든 사각형 복제했을시)도 삭제
- 그 위에 기사 사진이 들어갈 높이 146의 사각형
- 아래쪽 radius만 0으로 바꾸기
뉴스 타이틀. 뉴스 바디 shift A - 1
1, 흰색 높이 10 배경 shift A - 2
2, 사진 shift A - 3
3, 배경 사각형(드롭 섀도 있는) ctrl G
그리고 옆에 복제
탭 바 아이콘 삽입하고 각각 그룹으로 만들기
그리고 네 개 모두 그룹으로 만들기
프레임을 늘리고 아티클 복제해서 삽입
스크롤 해서 내릴 때 아티클들이 나올 때
유의해야 할 점은 아까 오버플로우 스크롤과 같이 옆에 잘려 보여야 옆으로 넘길 수 있듯이
여기도 탭바 위로 살짝 보여야 밑에도 있다는 걸 인지하고 내려볼 수 있다
하단에 On Top 버튼도 만들었다.
(on tap 아니고 on top....)
[마우스 오버 했을 때 까매지는 이미지 만들기]
똑같은 프레임 생성해서 도형에 맞는 까만 도형 똑같이 생성하고 검정색으로 채우고 불투명도 50
그리고 텍스트 삽입
[오버 플로우 스크롤]
적용할 부분 선택 후 [프로토타입] - Horizontal scrolling
이 안에서만 스크롤링 하겠다는 설정
우클릭 - frame selection - 바운딩 박스 조절
이때 두 개 프레임 동시에 다 설정해야 함
-
마우스 오버 했을 때 까매지는 설정
while hovering - dissolve
탭 메뉴 스크롤 했을 때 고정시키기
[Design] 패널에서 fix position when scrolling 체크
on top 버튼 눌렀을 때 맨 위로 가도록 more 아이콘이랑 이어줌
on tap - scroll to - (more 아이콘)
그런데 이 상태에서 미리보기 하면 끝까지 올라가지 않음
그렇기 때문에 밑에서부터 맨 위까지 얼마나 올라가야 하는지 수치를 재고
이렇게 오프셋 설정해주고 오른쪽에 복제한 프레임도 똑같이 적용!
[맵 메뉴 만들기]
맵 이미지 캡쳐한 거 새로 만든 프레임에 삽입
탭 바 다른 프레임에서 복붙
이렇게 만든 프레임 [프로토타입] 패널에서 horizontal and vertical scrolling으로 설정
-> 상하좌우 다 움직이게
그리고 [닫힘] 아이콘이랑 탭바의 [홈] 버튼 누르면 화면 이동할 수 있도록 [프로토타입]에서 설정
홈 화면에서 맵 버튼 눌렀을 때 맵 화면으로 이동하도록 만들어줌