REALITY

화면 구조 분석카카오톡에서 5개의 메인 탭(친구, 채팅, 오픈채팅, 쇼핑, 더보기) 화면의 구조 나눠보기 디자인 원칙 기반 분석좋은 사례 2개와 나쁜 사례 2개, 총 4개의 사례를 찾아서 디자인 원칙에 근거해서 작성해보기 좋은 사례 아쉬운 사례 + 개선 방향

온보딩: 연습해보기_1 홈화면1번 카드 누르면 상세화면으로앱바는 고정태그는 가로 스크롤 가능하게세로 스크롤 가능하게햄버거 메뉴를 클릭하면 메뉴가 열리게상세화면이미지 하트를 누르면 하트가 fill값으로 변하게세로 스크롤 가능하게대표사진 슬라이드 형식으로 햄버거 메뉴를 클릭하면 메뉴가 열리게색상, 사이즈 아코디언이 열리게 ▶️ 못 봤었슨 추가할 예정 온보딩: 연습해보기_2 홈화면에서 스크롤 가능하게상단 앱바는 고정홈화면 햄버거 버튼 누르면 메뉴가 나오고 Apparel 선택시 상품 리스트가 나오게 ▶️ 뭔가 이상함 수정할 예정왼쪽 첫번째 상품 선택했을 때 상세페이지로 바로가게장바구니 담기 버튼 클릭시 장바구니로UXUI 디자인입문: ch4_피그마로 간단한 프로토타입 만들어보기

게슈탈트 심리학_사례 찾아보기 (3가지 pick) 유사성의 원리_네이버 TV형태, 크기, 텍스트 스타일 등이 유사할수록 같은 그룹으로 인식됨(카테고리, 칩 클라우드 탭, TOP100 영상) 페쇄성의 원리_메가박스형태 일부가 가려져 있지만, 익숙한 구조기에 슬라이드가 더 있을 거라는 예측을 함 ▶️ 자연스럽게 스와이프를 유도 연속성의 원리_Art & Culture콘텐츠 목록이 세로 방향으로 정렬되어 있음 간격, 정렬이 일관되게 구성하단 일부 콘텐츠가 스크롤 영역 아래로 살짝 보이게 처리하여 사용자를 유도함 공통성의 원리_티빙같은 방향으로 움직이는 요소들을 하나의 그룹(카테고리)으로 묶음 (비슷한 콘텐츠, 실시간 인기, 오늘의 TOP20, 카테고리, ...)UX 비주얼 디자인 원칙_사례 찾아보기 (3가..

칩 컴포넌트필터 칩 컴포넌트(selected, configuration, label)액션 칩 컴포넌트(selected, icon, label) 필터 칩/액션 칩 컴포넌트 사용해서 section 만들기(section/filter_chip, section/action_chip) 섹션 타이틀 컴포넌트 section_title 컴포넌트(more_button/label)▶️ 타이틀 label(버튼 말로 왼쪽에 위치한 label)은 fill로 설정한다. 보통 타이틀 몇 글자 정도로 할 지 미리 생각해놔야 한다고 함!! 캐러셀 네비게이션 홈 화면여백 없이 쌓기히어로 영역에 버튼은 왜 안 늘어나는 지 ?.?? 개인 과제 하다가 시간 남으면 다시 도전해봐야겠다서치 바 컴포넌트 리스트 컴포넌트 리스트 화면액션 메뉴..

버튼 컴포넌트버튼 컴포넌트(light, dark/filled, text icon)아이콘 버튼 컴포넌트(filled, standard) 카드 컴포넌트 vertical 컴포넌트(number/size/style/number2) horizontal 컴포넌트(size)item/card item 컴포넌트(size, layout) 디자인이든 코딩이든 네이밍 하는 게 기능이랑 역할을 동시에 담아야 하니까 어떻게 지어야 할 지 감이 오 지 않 는 다

분석할 서비스 네이버 TV 레이아웃과 그리드 분석 오토레이아웃 간격 설정해서 하면 더 깔끔하고 시간도 절약된다~..~작업할 때는 저숭라라갈 뻔 했었는데 막상 해놓은 걸 보니까 뿌듯하다

일관된 아이콘 세트 만들기 컬러, 타이포그래피, 아이콘 활용해서 다이얼로그 UI 디자인하기 이런식으로 하는 게 맞는 지는 모르겠음 ㅎ.ㅎ..ㅎ. 그래도 버튼 만드는 건 조금씩 익숙해지는 듯?.?

서비스 선정Nike Run Club 직관적인 디자인사용자 행동 유도정보를 시각적으로 표현대비 높은 색상 조합간단한 레이아웃 ▶️ 앱에 들어가자마자 바로 보이는 '시작' 버튼으로 사용자의 행동을 빠르게 유도했다. ▶️ 주황색과 검정색의 대비가 높은 컬러 조합으로 핵심 요소(버튼)를 강조했다. 일관된 디자인 다양한 디바이스 간의 일관성쉬운 사용성디자인 시스템▶️ 워치 연동이 가능하며, 스마트워치와 모바일 앱 간의 디자인 일관성이 유지된다. 핵심 기능의 버튼 위치, 컬러 등이 동일하게 구성되어 익숙하게 사용할 수 있다. ▶️ 기능별 버튼이 크고 명확하게 배치되어 있어 사용법을 따로 찾지 않아도 자연스럽게 사용 가능하다. 가독성을 고려한 디자인여백 활용콘텐츠 그룹화크기와 비율계층 구조▶️ 화면에 여백이 ..

5주차: 홈화면 만들기 새로운 page 추가아이폰13 mini 프레임 선택 ▶️ 홈 화면으로 이름 변경 히어로 영역: 프레임 생성 ▶️높이: 300정도 ▶️ Hero Section 으로 이름 변경컨스트레인트 ▶️ 좌 우로 설정5주차: 앱 바 만들기 텍스트 생성 ▶️ 타이틀, title 16px오토레이아웃 ▶️ App Bar 로 이름 변경 아이콘 가져와서 ▶️ 컴포넌트 생성(멀티플)abb bar 컴포넌트에 설정, 뒤로가기 아이콘 추가배경 색 추가 ▶️ 오토레이아웃 간격, 좌우, 상하 -> 16, 20, 16abb bar 길이 모바일 w에 맞게 늘려놓기타이틀 누르고 리사이징 값을 전체를 채우도록 ▶️ w를 fill로 변경, 텍스트 가운데 정렬abb bar 컴포넌트 변환 텍스트 프로퍼티 추가하기 ▶️ 속성에 ..

4주차: 버튼 컴포넌트 의사 상태 만들기 버튼 컴포넌트 ▶️ add property ▶️ + ▶️ variant이름 변경 ▶️ Priority버튼 2개 더 생성첫 번째 버튼의 Priority ▶️default를 Primary로 변경두 번째 버튼은 Secondary세 번째 버튼은 TertiarySecondary ▶️ 배경색은 primary 100 정도 ▶️ 폰트는 Primary 색상으로 변경Tertiary ▶️ 회색 컬러 사용하기, 배경은 gray 50, 폰트는 gray 500 4주차: 버튼 컴포넌트 의사 상태 만들기_사이즈 추가하기 버튼 컴포넌트 ▶️ add property ▶️ + ▶️ variantSize 입력 ▶️ default 값은 Large버튼 컴포넌트 안 버튼 세개 다 잡고 하단의 + 누..