클론 디자인 팁 모음 (계속 수정)

클론

 

가변되는 값(gap)은 정수가 아니어도 상관없음 글씨크기 짝수일수록 좋고 가로는 홀수 상관 x 세로는 무조건 짝수

정해진 값은 최소한 정수이어야 함

 

간격값

안드로이드는 8 배수가 최고! 2,4,8 배수 

IOS는 홀수가 되기도 함

 

간격 - constraint 보단 alignment

 

오토레이아웃 쓰는게 개발자랑 소통할때도 좋음

 

2~4픽셀로 자간행간 조절

 

disabled 같은 거 상태 다른 똑같은 모양에 할거면 style로 color/icon/disabled이런식으로 저장해놓기 

OR 마스크 씌워서 컴포넌트 세트 만들고 nested instance 연결하기

 

뱃지같이 겹치는 요소는 gap을 -로 겹치게 할 수 있다 혹은 constraint로 위치 고정

 

Youtube Madia Designer [나만 모르고 있는 UI 디자인을 위한 10가지 원칙]

1. 텍스트 1배수 12폰트 이상 2배수 24폰트 이상
2. 적절한 버튼사이즈(터치시 오류가 발생하지 않도록)
3. 아이콘의 통일감 (및 컨셉 일정하게 유지)
4. 접근성 (폰트 컬러 4.5:1 이상 컬러 활용)
5. 스타일 통일감 주기
6. 계층 구조 구분짓기(버튼, 폰트 등)
7. 하단 네비게이션(텍스트의 무분별한 생략 X)
8. 컨텐츠간 여백(모바일의 경우 스크롤 길이 신경안써도됨)
9. 컨텐츠간 구분(라인,여백,면색,카드 ui등으로 구분)
10. 모바일 레이아웃은 화면이 좁으니 큼지막하게 짤것.

Youtube Madia Designer [나만 모르고 있는 UI 디자인 폰트 원칙 7가지 실무 Tip]

1. 화려함보단 심플하게

텍스트는 화려함 x 집중도 떨어짐

2. 읽기 편한 폰트 정렬

가운데보단 좌측정렬

3. 폰트 포인트 컬러 사용

매우 중요한 부분만 포인트 컬러

4. 폰트 계층구조

자연스럽게 시선이 흐르게끔

왼쪽보단 오른쪽에 시선이 더 마지막에 흐르기 때문에 좌는 이미지 우는 정보성 같이 구성해서 오른쪽에 중요한 내용을 두기

5. 일관된 폰트 스타일

다양한 폰트 X

6. 다양한 폰트 두께

많으면 3개, 기본 2개

7. 폰트는 잘 보이고 크게

모바일 디자인은 모바일로 최종 확인

 

Youtube Madia Designer [이젠 알아야죠? 실무 디자인 여백 사용 원칙 7가지 Tip]

1. 여백을 활용한 폰트그룹

(가독성과 그룹핑) 넓게 띄워서 점점 줄여나가기

2. 아코디언 테이블 여백

숨겨지는 부분의 여백은 위보다 아래가 넓어야 묶이는 느낌이 생긴다

3. 연관 검색어 여백 활용

버튼 여백은 넉넉하게 가로 세로 최소 44px

4. 카드 UI

상하좌우 여백 빡빡하지 않게, 모서리 라운드 조금씩(날카롭지 않아 보이게), 텍스트/오브젝트같은 경우 라운드 안쪽으로 살짝 들여쓰기

5. 상품 섬네일 여백

상품목록 단이 바뀔때 그룹핑이 잘 되어보이도록 충분한 간격을 주기. 스크롤 중에는 간격 여백이 더 안보임

6. 각 텍스트 타이틀 간 여백

바닥에 정보를 뿌리는 정보성 디자인일 경우 라인 혹은 여백으로 그룹핑(혹은 BG)

7. 타이틀 - 본문 - 버튼 여백 구조

타이틀을 보고 본문은 흘리듯 보고 버튼에 시선이 갈 것이기 때문에, 본문은 덜 강조 되면서 셋이 다른 그룹으로 여백에 의해서 그룹핑 되면 편안함

* 보여주고자 하는 컨텐츠를 보여주고, 불필요한 내용을 안보게 하고, 답답한 것들을 풀어주거나, 여백을 타이트하게 해서 뭉쳐주는 것이 모두 여백의 역할