본문 바로가기
📝공부, 스크랩/디자인

[UIUX] 브런치북 - 디자인 독학하기 요약

by grow_s0 2022. 3. 11.
728x90

https://brunch.co.kr/brunchbook/share-design

 

[브런치북] 디자인 독학하기

'나는 당당하게 디자이너라고 말할 수 있는 디자이너인가?' 2019년 2월 21일부터 2021년 3월 28일까지 2년 1개월 동안의 시간은 저 자신을 디자이너라고 인정하기 위해 노력한 시간이었습니다. 브런

brunch.co.kr

위 브런치북을 다 읽고 인상 깊은 부분만 따로 정리해본다!

 

버튼의 최소 크기

터치 타깃의 최소 크기 : 44px*30px or 30px*44px

터차 티깃은 최소한 13px 간격을 둬야 함

두 터치 타깃이 서로 가까이 있으면 크기를 57px 이상으로

 

UX 원칙

한 화면에는 하나의 요청만

출처 : https://brunch.co.kr/@dalgudot/74

 

내용 전달이 잘 되지 않는 화면에서는 누르기 어려운 곳에 있는 X 버튼일지라도 많은 사용자가 누름

출처 : https://brunch.co.kr/@dalgudot/108

 

특별한 경우가 아니면 사용자가 UI를 쓰기 위해 학습해야 하는 일이 있어서는 안 됨

 

 

토스트를 써야할 곳에 팝업을 써서는 안 됨

사용자에게 완료된 사실을 가볍게 인지시키기만 하면 되는데 굳이 확인 버튼을 눌러야 하는 팝업을 보여줄 필요는 없음

팝업은 사용자가 반드시 확인해야 하는 정보를 전달할 때만

출처 : https://brunch.co.kr/@dalgudot/110

 

 

UX Writing

'필터 적용' 같은 딱딱한 문구가 아니라

버튼을 누른 뒤 나타나는 화면을 알 수 있도록 변경 (하의 ~개 보기)

출처 : https://brunch.co.kr/@dalgudot/94

 

사이즈 필터 : 회사 안에서는 쉽게 이해하는 용어 BUT 사용자는 모름 => 상의 찾기로 변경

* 대체할 쉬운 용어를 찾기가 어려워서 시각 이미지를 왼쪽에 추가

출처 : https://brunch.co.kr/@dalgudot/94

 

'이유'라고 물을 때는 사용자가 고민하고 적어야 할 것 같은 느낌

'고민'이라고 물으면 평소 하던 생각을 그대로 편하게 적을 수 있게 됨

출처 : https://brunch.co.kr/@dalgudot/101

이외 레퍼런스

밑줄이 있는 것이 더 텍스트 필드 같음

출처 : https://brunch.co.kr/@dalgudot/74

 

에어비앤비같은 감성적인 곳은 양옆 여백을 일치하지 않게 두는 거

출처 : https://brunch.co.kr/@dalgudot/98

 

모션 구체적인 가이드 예시

출처 : https://brunch.co.kr/@dalgudot/101

 

로딩을 보여주는 방식 예

사용자 행동에 반응한다는 걸 반드시 보여줘야 함!

빠르다는 인상을 주려면 도달 화면으로 먼저 이동 후 서버 통신을 하며 로딩을 보여줄 수도 있음

출처 : https://brunch.co.kr/@dalgudot/101

 

728x90