이 아티클은 Nick Babich가 2019년에 작성한 아티클입니다.
_현재 변경된 부분이 많아 내용 중 일부를 변경 및 추가했어요 :)
👇노션에서 보기
30 Things We Often Forget When Designing Mobile Apps
이 아티클은 Nick Babich가 2019년에 작성한 아티클입니다. _현재 변경된 부분이 많아 내용 중 일부를 변경 및 추가했어요 :)
kimmynotion.notion.site
III. 일상 경험
9. 아이콘 세트
동일한 스타일의 아이콘을 사용하여 UI를 시각적으로 일관성 있게 만들 수 있습니다.
다음은 디자인에서 아이콘을 사용하기 위한 간단한 체크리스트입니다.
Checklist for Using Icons In UI
Icons are one of the most frequently used elements in graphical user interfaces. What makes a good icon?
uxplanet.org
UI에서 아이콘 사용을 위한 체크리스트
아이콘은 그래픽 유저 인터페이스에서 가장 자주 사용되는 요소 중 하나입니다. 좋은 아이콘이란 무엇일까요?
이 아티클에서는 사용하는 아이콘이 유저를 위해 작동하는지 확인하기 위해 사용할 수 있는 간단한 체크리스트를 공유하고자 합니다.
1. 인식하기 쉬운 것
명확함은 훌륭한 인터페이스의 가장 중요한 특성입니다. 불행히도 아이콘의 명확함이 깨지는 경우가 많습니다.
아이콘은 다른 무엇보다도 의미를 전달해야 합니다. 아이콘이 명확하지 않으면, 즉시 의미를 잃으며 시각적 노이즈에 불과합니다.
💡 아이콘을 훌륭하게 만드는 것은 레이블을 읽지 않고도 이해할 수 있다는 사실입니다.
몇 가지 간단한 규칙은 당신에게 도움이 될 것 입니다. 의미없는 아이콘을 사용하지 않는 것에 말이죠!
유저에게 친숙한 아이콘을 사용하세요
아이콘에 대한 유저의 이해는 이전 경험을 기반으로 합니다. 그렇기 때문에 독특한 아이콘보다는 친숙한 아이콘을 사용하는 것이 좋습니다.
- 유니버설 아이콘에 의존하세요!
home, print, play, search와 같은 아이콘은 너무 일반적이어서 설명이 필요하지 않아요.
- 조사하세요!
경쟁사가 사용하는 아이콘을 확인하세요.
의미가 상충되는 아이콘을 사용하지 마세요
여러 가지 의미를 나타낼 수 있는 아이콘은 피해야 합니다. 예를 들어, '하트'와 '별' 아이콘은 둘 다 아이템을 좋아하거나 즐겨찾기에 추가하는 것을 의미할 수 있습니다. 이들을 함께 사용하면 유저를 혼란스럽게 할 수 있습니다.
아이콘을 테스트하세요
다음과 같은 말은 듣지 마세요. "사람들은 우리 앱을 매일 사용할 것입니다; 그들은 우리 아이콘의 의미를 배울 것입니다." 당신의 아이콘을 테스트해보세요!
5초 규칙은 아이콘을 테스트하는 효과적인 방법입니다. 사람들에게 아이콘이 무엇을 의미할 것으로 예상하는지 물어보세요.
💡 적절한 아이콘을 생각하는 데 5초 이상 걸린다면 아이콘이 의미를 효과적으로 전달할 가능성은 거의 없습니다.
확장성을 테스트하세요
15 x 15픽셀과 같은 작은 크기에서도 아이콘이 인식될 수 있는지 테스트합니다.
익숙하지 않은 아이콘과 텍스트 레이블 함께 쓰기
만약 당신이 독특한 아이콘을 사용한다면, 텍스트 레이블을 함께 사용하는 것이 좋습니다.
아이콘의 의미를 재정의하지 마세요
아이콘의 의미를 변경하여 유저를 혼란스럽게 하는 것은 상당히 쉽습니다. 아이콘의 기능이 예상과 다를 경우 유저를 혼란스럽게 합니다.
바퀴를 재발명하지 마세요!
약간의 의미 차이도 유저가 아이콘을 이해하는 데 방해가 됩니다.
오랫동안 Google Docs는 거의 햄버거처럼 보이는 아이콘을 사용했습니다. 대부분의 인터페이스는 메인 내비게이션 메뉴를 나타내기 위해 유사한 아이콘을 사용합니다. 하지만 Google은 그 의미를 재정의하고 그것을 'Back' 액션으로 사용했습니다. 유저가 이 아이콘을 클릭하면 Google Docs 홈페이지로 리디렉션됩니다.
2. 시각적으로 즐거운 것
일러스트, 컬러, 아이콘을 통해 브랜드 개성을 전달할 수 있습니다. 제대로 하면 아이콘은 확실히 디자인의 미적 매력을 높일 수 있습니다.
그래픽 디테일 줄이기
KISS 원칙은 아이콘을 포함한 UI의 모든 요소에 적용됩니다. 아이콘을 가능한 한 단순하게 유지하고 다음 두 가지 규칙에 따라 불필요한 복잡성을 피하세요.
- 사용되는 색상의 수를 제한하십시오. 디자인을 깨끗하게 유지하려면 3~4가지 이상의 색상을 사용하지 마세요.
- 오브젝트의 기본 특성에 중점을 두고 그래픽 디테일의 양을 줄이세요.
애니메이션 효과를 추가해 즐거움 만드세요
애니메이션은 명확한 기능적 목적을 가질 수 있고 유저를 즐겁게 할 수 있습니다. 상태 변경과 같은 경우 애니메이션을 사용하여 보다 동적인 경험을 만들 수 있습니다.
3. 적절한 크기
아이콘은 유저에게 좋은 대상이어야 합니다. 모바일에서 아이콘을 위한 공간을 너무 적게 남겨두는 것은 디자이너들이 흔히 하는 실수 중 하나입니다. 터치용으로 디자인할 때 아이콘의 크기는 손가락으로 쉽게 터치할 수 있을 만큼 충분히 커야 합니다. 터치스크린 오브젝트의 권장 대상 크기는 7–10mm 입니다. 또한 잘못된 탭을 방지하기 위해 대상 사이에 패딩을 추가해야 합니다.
4. 일관성
일관성은 디자인의 핵심 원칙입니다.
💡 일관된 디자인은 이해하기 쉬운 디자인입니다.
사용성과 학습성은 유사한 요소가 비슷한 방식으로 일관된 모양과 기능을 가질 때 향상됩니다.
내적 일관성
아이콘 세트에는 시각적 통일성이 있어야 합니다. 프로덕트에 사용하기로 결정한 아이콘은 스타일이 같아야 합니다. 이상적으로는 모두 같은 사람이 디자인한 것처럼 보여야 합니다. 다음은 아이콘에 일체감을 만들기 위해 따라야 하는 몇 가지 규칙입니다.
- 모든 아이콘에 동일한 색상 또는 색상 조합를 사용하세요.
- 모든 아이콘에 대해 동일한 모양 및 기타 스타일 속성(예: 테두리 크기)을 사용하세요.
플랫폼과의 일관성
아이콘 스타일이 대상 플랫폼과 일치하는지 확인하세요. 유저가 가장 쉽게 인식할 수 있습니다.
프로덕트 패밀리와의 일관성
프로덕트 패밀리가 있는 경우 모든 프로덕트에 동일한(또는 최소한 유사한) 아이콘 스타일이 사용되는지 확인하세요.
'Design Study > Design Article' 카테고리의 다른 글
| 11. 로딩 상태 (0) | 2022.11.26 |
|---|---|
| 10. 오류 상태 (0) | 2022.11.26 |
| 8. 대화형 UI 요소의 다양한 상태 (0) | 2022.08.10 |
| 7. 권한 요청 화면 (0) | 2022.08.10 |
| 6. 기본 유저 아바타 (0) | 2022.01.26 |
