2-2. 레이아웃과 그리드시스템1
360x640이 전 세계적으로 가장 많이 사용되는 해상도
Layout
사전적 의미로 '설계, 지면의배열, 배치'라는 뜻을 의미
잡지나 광고, 출판물 등을 디자인할 때 텍스트나 이미지 등의 요소를 보기좋게 배열하는 것
Grid System
디자인에서 화면을 구성하는 요소드을 일관된 시스템속에 배치하는 것
화면을 효과적으로 사용하기 위해 가상의 구역을 나누어 놓은 것
한정된 화면을 효율적으로 사용할 수 있고 전달하려는 콘텐츠를 쉽게 읽을 수 있도록 활용
2-3. 레이아웃과 그리드시스템2
4의배수 8의배수를 기준으로 디자인을 해야 함
머테리얼 디자인 기준 컬럼의 경우 휴대폰, 태블릿 각각 4컬럼, 8컬럼, 거터의 경우 휴대폰은 16dp, 태블릿은 24dp
2-4. 컬러시스템
디지털 프로덕트 디자인 기준 메인컬러(Primary), 보조컬러(Secondary), 그레이스케일로 구분
GNB영역에 메인컬러, FAB에 보조컬러 사용
1) 배경컬러
2) 서페이스 컬러
3) 에러컬러
대타이틀, 소타이틀, 본문, 비강조, 라인 등으로 나눠서 사용
포인트 컬러도 3가지까지 사용해도 괜찮음
2-5. 타이포그래피
바디 폰트를 잘 잡아야 부연설명, 타이틀, 서브타이틀 순으로 타이포그래피 시스템을 잡을 수 있음
실무에선 14~16를 기준으로 작업하고 있음
처음부터 정리하기보단 예상되는 페이지를 진행해보면서 정리해나감
2-6. 아이콘
작지만 일관성있게, 브랜드의 아이덴티티와 정성적인 감성까지 전달해야 함
앱 아이콘 / 시스템 아이콘
터치 영역을 고려한 권장 여백
아이콘 제작시 모서리 라운드 값, 여백 등이 모두 일관성이 있어야 함
퍼스펙티브보다 정면에서 본 모습으로 그리는 것을 권장
사용자가 빠르게 이해할 수 있는 최소한의 디자인
시각보정을 위해 꼭 가운데 정렬을 하지 않아도 됨
2-7. 인터랙션
Navigation Gestures (탐색 제스쳐)
사용자가 모바일을 이용하는 동안 쉽게 이동할 수 있도록 도와주는 제스쳐
버튼, 내비게이션 등 입력방법들을 도와주는 역할
탭, (상하 좌우)스크롤, 팬, 드래그, 스와이프(좌우 플리킹), 핀치
Action Gesture (액션 제스쳐)
동작을 수행하거나 동작 완료를 책션을 일으키는 위한 제스쳐
탭, 롱프레스, 스와이프
Transform Gesture (트랜스폼 제스쳐)
화면이 변환되는 방식에 대한 제스쳐
핀치, 더블탭, 컴파운드 제스쳐, 픽업앤 무브
2-8. 디자인벤치마킹
주니어땐 좋은 디자인과 나쁜 디자인을 구분하기가 어려움
메이저급 에이전시의 인스타그램, 홈페이지, 비핸스 등을 팔로우 하는 것이 중요
매일매일 조금씩 디자인 보는 습관 기르기
트리플 As-is 분석
메인화면
국내여행, 여행시작, 해외여행 3가지 페이지로 구성되어 있다
국내여행과 해외여행 페이지는 동일한 컨텐츠를 제공한다
'여행지 관련 매거진 또는 광고 영역', '항공권, 숙소 등 카테고리영역', '내 일정 추천상품 및 장소 영역'이다
여행시작 페이지에는 가장 상단에 "어디로 떠나시나요?"와 같이 목적지를 묻는 검색창과 카테고리가 함께 있다
하단에는 트리플 자체에서 발행한 매거진 리스트가 있다
> 마이리얼트립, 클룩, 트립닷컴 등 다른 여행 서비스가 메인화면부터 숙소, 항공, 티켓 등 여행상품을 노출했다면 트리플은 여행지 자체에 대한 정보를 제공하는 매거진과 사용자 맞춤 추천상품이 주 메인화면의 주 콘텐츠이다
> 국내여행과 해외여행은 레이아웃이 동일하고 카테고리를 눌러 나오는 화면도 동일한데 왜 페이지를 두 개로 나누었는지는 의문이다 차라리 전체를 한 페이지로 검색창과 중복되는 카테고리를 상단에 두면 어떨까 생각해보았다 근데 그러면 다른 서비스와 너무 비슷하게 되어 트리플의 정체성을 해칠 수도 있다는 생각이 들었다 그러나 지금의 상태는 하단의 플로팅버튼때문에 개인 맞춤 정보가 가려지게 되어 트리플의 정체성이 보이지 않는다 상단의 카드도 광고처럼 읽혀 눈길이 가지 않는다
> 여행을 갈 때만 찾는 어플이 아닌 기존의 사용자들에게 계속 여행에 대한 호기심과 관심을 불러일으키려면 메인화면에서 트리플의 매거진을 부각시킬 수 있도록 개선해야겠다는 생각이 든다
> 매거진과 카테고리, 하단의 플로팅 버튼의 여행 계획(+여행지 추천)을 별개의 페이지로 분리하면 어떨까?
> "어디로 떠나시나요?" 사용자에게 질문을 던지는 검색창에 서비스의 의도대로 도시를 검색하면 도시여행과 관련된 카테고리 하에 여러가지 정보를 탐색할 수 있도록 되어있다 그런데 추천 탭의 상단에 "여행 홈"의 라이팅이 직관적이지 못하다 서비스의 의도는 나트랑에서의 여행계획을 시작하는 액션을 일으키는 버튼으로 만들었겠지만 사용자 입장에선 나트랑에 관한 정보를 보여주는 상세페이지로 읽힐 것 같다
> 또한 상단 세부 카테고리별로 보여주는 정보가 지나치게 많은데 어떤 것을 선택해야 할지 기준이 잘 잡히지 않는다
> 맛집은 평점별로 보여줄 수 있지 않을까? 관광지는 위치를 보여줄 수 있지 않을까? 매거진은 주제별로 보여줄 수 있지 않을까?
> 무엇보다도 가장 불편했던 점은 도시 이름을 다 치기까지 검색행동에 아무런 도움을 받지 못했다 모든 단어를 치기 전에 하단에 뜨는 검색어는 아무것도 없었다 이것도 불편한 요소 중 하나로 작용할 것이라 생각한다
숙소 탐색화면
세 개의 메인페이지에서 숙소 카테고리를 들어가면 보이는 화면이다
> 숙소 카테고리를 누르고 어차피 다시 도시를 검색해야 한다
> '도쿄 숙소' 검색 결과와 '도쿄' 검색 결과가 같다 사용자에게 다시 도쿄 페이지에서 탐색을 요구한다
> 숙소 상세페이지의 경우, 필터 내의 모든 내용을 스크롤하며 선택하기보다 세부 영역(지역, 성급, 가격, 위치 등)을 밖으로 꺼내 세분화했다면 조금 더 편리하게 찾을 수 있지 않을까?
여행 홈
도시를 검색해서 들어가는 페이지이기도 하고, 사용자가 직접 여행 계획을 시작해서도 생성하게 되는 페이지이다
네이밍과 디자인이 같아서 내가 만든 페이지인지, 원래 페이지인지 구별하기 어렵다
중간에 가이드, 항공, 숙소, 관광, 맛집 등의 세부 카테고리 영역이 있다
페이지를 내리면 똑같이 가이드, 항공, 숙소에 관한 컨텐츠를 제공한다
상단 탭바에는 검색, 여행지 지도, 메뉴 아이콘이 있고 하단 바텀바에는 여행 홈, 일정, 여행 도구, 저장 메뉴가 있다
> 중간에 탭이 있는데, 이를 누르면 기존 페이지가 스와이프되는 게 아니고 기대와 다르게 아예 새로운 페이지가 뜬다
> 도시를 검색하는 경우 이전 페이지에서도 여행지의 가이드, 항공, 숙소, 관광 등에 관한 정보를 제공하는데 현재 여행 홈 페이지에서도 중복되는 콘텐츠가 제공된다 사용자 입장에선 뎁스가 길어지고 혼란을 줄 수 있기 때문에 한 개는 삭제해야 될 것 같다
> 한 개의 카테고리를 선택 후 이를 기준으로 다른 카테고리(숙소, 관광, 맛집 등)를 선택하기가 어렵다 상세페이지로 들어가 페이지 제일 하단에 있는 '근처의 추천 장소'를 통해서밖에 찾을 수 없는 것이다 지도에서 주변 장소의 리스트를 한꺼번에 볼 수없으니 이렇게밖에 탐색을 할 수 없는데, 이러한 방식의 탐색 과정이 굉장히 불편하다고 생각된다
> 내가 세우는 여행은 제목을 지어 나의 여행이라는 것을 인지할 수 있게 하는게 어떨까?
> 한 가지 카테고리를 선택하면 이와 관련된 다른 카테고리를 선택할 수 있는 다양한 선택지를 제공하는 것이 어떨까? (추천 장소 외에 거리순, 시간대, 인원 등의 기준으로)
> 나를 아는 여행앱이 아니라 다른 사람의 추천대로 할 수 있는 여행앱이라는 느낌이 들었다 내가 원하는대로 탐색할 수 있도록 돕는것이 가장 나를 잘 알 수 있는 과정이 아닐까?
일정
여행 홈 오른쪽에 있는 일정 페이지로 들어가면 보이는 화면이다
상단에는 여행지와 일정, 여행 스타일이 적혀있고
그 밑에 함께하는 일행정보, 추가할 수 있는 항공편과 숙소, 체크리스트, 가계부 버튼이 있다
중간은 여행지에 따라 시각화되는 지도 영역, 하단에는 여행계획 영역으로 구성되어있다
> 일정이 상하로 추가되어 모바일 환경에서 사용성이 낮아지는 듯했고, 장소 추가, 메모 추가 버튼이 전체 일정표를 보는 데 장애물이 되는 것 같았다
> 장소 추가를 하면 내가 저장한 장소중에서 선택하거나 추천된 장소 중에서 선택할 수 있게 되어있다 바로 지도나 거리를 보고 선택할 수 없다 장소를 고를 수 있는 여러가지 선택지를 제공하지 않는 한 다른 어플로 이탈하게 되는 요인이 된다
> 메모 기능이 중요해보였는데, 추가하고 수정하는 과정이 다소 번거롭다 중간에 메모를 추가하기 위해 스크롤을 다 내리고, 메모를 저장하고, 다시 옮겨야 한다
> 한정된 모바일 환경에서 상하스크롤보다 좌우 스크롤로 일정을 관리할 수 있게 하면 어떨까?
> 장소 추가, 메모 추가 버튼을 일정 최하단에 고정하지 않으면 더 편집하기 용이하지 않을까?
여행도구와 저장 메뉴
여행도구의 경우 번역하거나 환율 계산하는 뎁스가 길어서 과연 실제로 여행하는 중에 어플을 켜서 이 많은 화면을 거쳐 사용할까?라는 의문이 들었다 취지는 좋지만 다소 번거로워보였다
그리고 두 가지 이상의 도시를 여행하는 경우 장소를 따로 저장할 수 있게 되어있다
일행과 저장한 내용을 공유할 수 없는 한계를 가지고 있다
HMW
어떻게 하면 트리플의 정체성을 보여줄 수 있게 메인화면을 구성할 수 있을까?
> OO님 어디로 떠나시나요?(카테고리 페이지&여행기 리뷰 보여주기) OO님 이 장소는 어떠신가요?(추천 및 매거진) OO님의 여행입니다(나의 여행계획)
어떻게하면 사용자에게 혼란을 주지 않고 많은 여행상품을 보여줄 수 있을까?
어떻게 하면 한 가지 카테고리에서 다른 카테고리로 넘어갈 때 사용자에게 다양한 기준을 제시할 수 있을까?
어떻게 하면 모바일 환경에서 일정을 (혼자 또는 같이) 잘 정리할 수 있을까?
'Log_UIUX School' 카테고리의 다른 글
| UIUX 스터디 7주차 학습일지 01 : '무신사' 클론디자인 - 21 (0) | 2023.12.20 |
|---|---|
| UIUX 스터디 6주차 학습일지 05 : 프로토파이 실습, 카카오 UX 디자인 프로세스 - 20 (0) | 2023.12.14 |
| UIUX 스터디 6주차 학습일지 03 - 인터페이스 디자인 : 18 (0) | 2023.12.12 |
| UIUX 스터디 6주차 학습일지 02 : 디자인 기초 - 17 (0) | 2023.12.12 |
| UIUX 스터디 6주차 학습일지 01 : '트리플' 유저리서치 정리 - 16 (0) | 2023.12.11 |
