2023. 10. 25. 18:42ㆍ디자인 관련
*영어공부 중이라 어색한 번역체 말투가 있을 수 있습니다.
UI design tip: Try to avoid using multiple alignments
Sticking with a single alignment (or as few as possible) helps to simplify an interface, making it look neater and tidier.
medium.com
UI 디자인 요소의 정렬 인터페이스는 가장 까다롭고 중요한 파트중에 하나입니다. 올바른 정렬은 심미성과 가독성이 향상됩니다.
다양한 타입의 정렬들을(왼쪽, 오른쪽 또는 중앙) 사용할수록 복잡하고 지저분한 인터페이스를 볼 수 있습니다.
우리의 눈은 각각의 정렬을 따라 움직이는 어려운 일을 해야합니다. 이는 인터페이스의 작은 컴포넌트 이내에 다양한 다중 정렬이 사용될 때 중요합니다. 고정된 하나의 정렬(또는 될 수 있는대로 적게)은 심플한 인터페이스를 도와주며, 깔끔한 인터페이스를 만들 수 있습니다.
예시 1
이 예시는 텍스트가 가운데 정렬로 시작되어있으며, 다른요소를 위해 왼쪽 정렬로 바꿀 것입니다.
복잡하고 불필요한 정렬이 혼합되어 있으며 인지 부하가 낮아져 인터페이스가 덜 깔끔해 보이는 결과를 가져옵니다.
모든 왼쪽 정렬 인터페이스 요소는 간단하고 깔끔해보입니다. 직선으로된 왼쪽은 가독성을 향상시킵니다.
글이 적기 때문에 모든 요소를 가운데 정렬로 만들 수 있습니다.
전체 너비의 가로 버튼을 만들면 오른손, 왼손 유저 모두 한 손으로 누를 수 있는 쉬운 사용성을 도와줍니다.
예시 2
적은 수의 정렬을 사용하면 간단하고 쉬운 인터페이스가 어떻게 도움이 되는지 보여주는 또다른 예시 입니다.
사용자 이름 그리고 직업을 중앙정렬로 했고, 사진은 오른쪽 정렬, 설명은 왼쪽 정렬, 그리고 별점은 중앙 정렬입니다.
정보를 볼 때 지그재그로 보이며, 어수선해 보인다는 것을 느낄 수 있습니다.
다수의 요소를 왼쪽으로 정렬했더니 간단하고 깔끔해보입니다.
또한 가독성을 개선 할 수 있습니다. 모든 텍스트를 왼쪽 중심으로 합니다. 한가지의 정렬 요소를 가지고 있기에 사진은 오른쪽 정렬로 해도 괜찮습니다.
UI 디자인은 그렇게 어렵지 않습니다. 위와 같이 논리적 룰의 시스템을 따르면 정보를 바탕으로한 효율적인 디자인이 됩니다.
'디자인 관련' 카테고리의 다른 글
| [스크랩] UI 디자이너 vs UX 디자이너 어떤 커리어를 선택해야 할까? (1) | 2023.10.28 |
|---|---|
| [스크랩] 어떻게 하면 디자인 사례 연구를 사람들이 건너뛰지 않게 할까? (0) | 2023.10.27 |
| 디자이너의 맥북프로 후기 16인치 M1PRO 커스텀 CTO (0) | 2022.01.28 |
| [디자인 워크샵] 스탠포드x홍익대 디자인 엔지니어링 워크샵 리뷰 (0) | 2021.12.20 |
| 디자이너 단가! 나는 얼마 받아야될까? 객관적 지표로 확인하기 (0) | 2021.08.09 |