CH 3. 디자인 숙련 개인과제 피드백 정리

뒤늦게 개인과제에 대한 피드백을 정리해둔다~~!!

과제 제출!(TIL 22일) <-이때 제출한 과제고 전체 과제 제출 화면은 아래 사진처럼 생겼다.

중고거래 mvp 화면구성 과제

 

잡다한 피드백..

1. 현재 컴포넌트 사이의 간격이 17픽셀과 같이 홀수 설정X -> 가급적 8배수 짝수
2. 리스트 사이에 여백 주기X -> 디바이스 환경에 맞춰 디바이더 활용 (프레임으로 디바이더 만들기)
3. 말풍선이나 버튼 같은 요소- > 레임 자체에 코너 라운드 값 넣기
4. 채팅창의 말풍선을 설계할 때는 메시지의 순서에 따라 처음, 중간, 마지막 모양이 달라질 수 있으니 이를 각각 컴포넌트로 만들어 관리 (이때, 피그마의 속성 노출 기능을 활용하면 중첩된 컴포넌트 내부의 속성을 더블 클릭 없이도 바로 수정 ㄱㄴ. 중첩 인스턴스는 이럴 때 사용하는 것이다!!!!)
5. 버튼과 인풋 필드는 기본 상태 외에도 마우스 호버, 선택, 비활성화 등 최소 세 가지 이상의 상태 값을 세트로 구성해두자

아이콘의 경우..

1. 아이콘 레이어 내부에 불필요한 그룹이 있다면 모두 제외
2. 요소 레이어는 유니온->플래튼으로 만들어서 하나로 깔끔 정리
3. 24x24 픽셀의 기본 규격을 유지
4. 원형이나 정사각형 가이드 그리드에 맞춰 비율이 깨지지 않도록 조정 (그리드에 대고 내가 조정해줘야됨. 눈대중 XX)
5. 아이콘 자체는 24픽셀이더라도 외부 프레임을 40픽셀 정도로 설정 (프레임으로 한번 더 감싸서 터치영역 만들어주기)

프로토타입 제작의 경우..

1. 실무 디자인 작업본을 그대로 쓰기보다 복사본을 만들어 별도의 프레임에서 작업하는 것이 효율적
2. 화면 전환이나 인터랙션을 연결할 때 뒤로 가기 버튼이나 다음 단계로 넘어가는 액션이 잘 이어지는 지 확인

 

 

아래 내용은 팀원분 피드백을 보고 나도 참고하면 좋겠다 싶어서 내용을 몇 개 정리해둔다!

 

ia 구조도

어플과 웹의 다른 점 생각하기

모든 과정이 연결되게 만들자

 

화면

홈 화면의 지역은 우선순위가 되어야함

상세페이지 내 검색창 X

화면 안 끊기는 지 주의(페이지나 모달로 페이지를 이어야한다)

아이폰 스테이스바 높이= 44

하단 네비게이션 + 인디케이터 포함 높이= 80~90

검색창에서 드롭다운형은 pc에서 사용하고 모바일에서는 사용 X

버튼의 높이 허그로