🔖 2021년 11월 3주 TOP3

🔖 2021년 11월 3주 TOP3

더 나은 계층 구조(UI)를 위한 공백과 텍스트 사용 이해

디자인에 숨을 불어넣는 것은 UI 디자인에서 효율성을 위한 일이 되었고, 그에 비례하여 UI에 숨 쉬는 공간을 추가하는 것은 설명 가능한 방식으로 사용성에 도움이 됩니다. 만족스러운 여백을 갖는 것은 디자인이 UI의 가장 눈에 띄는 요소를 강조할 수 있도록 하고 전체 디자인을 사용자에게 시각적으로 어필할 수 있습니다.

공백은 UI에서 자체적으로 제공하는 간격 요소이고 공백은 UI 요소 자체로 매우 중요한 요소입니다. 프로덕트의 외관과 사용성을 망칠 수 있는 능력이 있으며, 제대로 활용하지 않으면 프로덕트의 UI를 답답하고 혼란스럽게 만들 수 있습니다. 즉, 공백은 UI에서 요소에 부여하는 숨쉬는 공간입니다. 

공백 요소의 예시로는 패딩, 테두리(margin, 여백)일 수 있습니다. 공백은 UI에서 두 번째로 많이 사용되는 디자인 요소이고 텍스트는 가장 많이 사용되는 요소입니다. UI의 목표를 망치지 않으려면 공백을 함께 사용하고 독립적으로 사용하는 방법을 이해하는 것이 중요합니다.

이 시점에서 공백이 무엇을 의미하고 일반적으로 프로덕트의 UI에 무엇을 할 수 있는지 이해하게 되었습니다. 이 기사에서 따라야 할 몇 가지 지침을 찾을 수 있습니다. 계속 읽어보세요.

공백으로 작업하는 가장 쉬운 방법은 디자인의 초기 단계에서 공백을 과도하게 사용하는 것입니다. 드레스의 크기를 늘리는 것보다 줄이는 것이 얼마나 쉬운지 상상할 수 있습니다. UI에도 동일하게 적용됩니다. 추가하는 것보다 공백을 제거하는 것이 훨씬 쉬울 것입니다. 그러면 디자인에 뭔가 문제가 있다는 느낌이 들 것입니다.

위의 UI를 보면(이미지 참고) 이미 공간 요소가 서로 주고받는 작업에 대한 느낌이 있습니다. 문제는 그대로 두실 건가요? 아니면 여백을 조정할 것인가?

당신은 또한 위의 것보다(이미지 참고) 더 나은 일을 할 수 있습니다. 요점을 파악하기 위한 것으로, 공백은 터치 대상, 사용 용이성, 사용자가 의도한 작업을 완료하는 데 걸리는 시간을 고려하여 프로덕트 UI의 전반적인 사용성에 도움이 됩니다.

공백과 텍스트를 사용하는 동안 의사 결정을 쉽게 하는 또 다른 방법은 가이드로 사용할 시스템을 마련하는 것입니다. 여기에는 이미 내린 결정을 기록하고 향후 결정을 내릴 때도 사용할 수 있도록 합니다. 항상 미리 결정해서는 안 됩니다. 인터페이스에서 작업하는 동안 결정을 내려야 합니다. 

예를 들어, 4px의 배수와 같이 기본 값을 얻는 것부터 시작할 수 있습니다. 그럼에도 불구하고, 자신을 크게 제한해서는 안 됩니다. 즉, 4px의 배수가 어느 시점에서 UI에 적합하지 않을 때 다른 결정을 내릴 수 있어야 합니다. 하나는 디자인할 때 엄격하게 만들려는 것이 아니라 표준을 이해하고 필요할 때 최선의 판단을 내리기만 하면 됩니다.

또한 시스템이 갖춰져 있다고 해서 모든 것에 동일한 간격을 사용해야 하는 것은 아니므로 사용자가 모든 지점에서 어디에 속하는지 인지할 수 있어야 하며, 모호한 간격은 최대한 피해야 합니다. 이것은 디자인의 모든 요소가 속하는 위치를 명시적으로 표시하는 텍스트 들여쓰기(일부는 중첩이라고 함)와 잘 작동합니다. 이는 사용성과 작업 속도에 큰 도움이 될 것입니다.
..
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

아코디언 디자인: 모범 사례

축소와 확장 상태.  스타일링과 색상 사용법. 아코디언 샘플, 템플릿 그리고 UX 케이스로 원활한 경험을 제공합니다.

저는 온라인 기업가이자 UI 디자이너입니다.  Figma용 UI 키트를 만들기 시작한지 ​​3년이 넘었습니다.  Setproduct.com은 그렇게 설립되었습니다.  이 웹사이트의 사명은 회사와 프리랜서가 프로덕트를 훨씬 더 빨리 출시하여 디자인에 드는 비용과 시간을 절약할 수 있도록 돕는 것입니다.

저는 20년 넘게 그래픽 디자이너로 일해 왔습니다.  지난 몇 년 동안 저는 매일 수천 개의 다양한 구성 요소, 화면, 앱을 살펴보았습니다.  그리고 저는 앱과 그 구성 요소, 템플릿 등을 디자인하는 데 대한 포괄적인 책을 만드는 목표가 있었기 때문에 이 작업을 수행했습니다.

최근에 아바타에 대한 첫 번째 장이 출판된 덕분에 이 과정을 드디어 시작할 수 있게 되어 매우 기쁩니다.  다양한 소셜 네트워크에서 긍정적인 피드백을 받는 것이 좋았습니다. 제 기사는 여러 인기 있는 디자인 리소스에서 언급되었습니다.  이것은 제가 시작한 일을 계속할 동기를 부여합니다.

저는 또한 독자들에게 콘텐츠의 혜택을 받았는지 묻는 설문조사를 만들겠다는 아이디어를 얻었습니다.  사전 구축된 설문조사 위젯을 사용했기 때문에 결과를 쉽게 추적할 수 있었습니다.

결과는 상당히 고무적이었습니다!  최소 44명의 사용자가 기사에 관심을 갖고 완전히 읽었습니다.  그리고 무슨 일이 일어나고 있는지 잘 이해하지 못하는 적어도 두 명의 사용자가있었습니다 🤣

자, 이제 기사의 내용으로 넘어가겠습니다.  여기에 공개할 UI 세부 정보가 많이 있습니다.

 👇 시작해보겠습니다!

아코디언이란 무엇입니까?
아코디언(확장 패널이라고도 함)은 세로로 쌓이고 추가 관련 콘텐츠를 표시하거나 숨기기 위해 확장/축소할 수 있는 옵션 목록입니다.

콘텐츠
1. 요점
2. 컨테이너(container)의 스타일
3. 사용자 경험과 사용성
4. 사례 📱/💻

1.요점

1. 요점

상태(States)
아코디언 구성 요소의 기본 상태는 다음과 같습니다.
🔽 상쇄(Collapsed)
🔼 확장(expanded)
🖱 온 호버(on hovered)
👀 초점(focused)
🚫 비활성화(disabled)

쉐브론 아이콘(Chevron icons, V형 아이콘) 배치
아코디언을 클릭하면 쉐브론(Chevron)이 회전하여 요소가 성공적으로 확장되었음을 나타냅니다.  다시 클릭하면 축소가 발생하여 쉐브론(Chevron)이 초기 위치로 돌아갑니다.

쉐브론(Chevron) 대신 다음 기호를 사용할 수도 있습니다.
• 캐럿 (Caret, ▲)
• 화살표 (Arrow, ↑)
• + / -

추가 기호
아코디언이 오른쪽인 경우 추가 기호를 사용하여 의미를 강조할 수 있습니다.  그러나 구성 요소의 내용에 과부하가 걸릴 수 있으므로 주의합니다.

때로는 요소를 시각적으로 구분하기 위해 색상을 사용할 수도 있습니다.

2. 컨테이너(container)의 스타일

확장 요소(Expanded element)
여러 개의 아코디언을 사용하는 경우 확장된 상태를 강조 표시해야 합니다.  이를 통해 사용자가 어떤 아코디언 요소가 열려 있는지 이해하도록 돕습니다.  하이라이트 스타일을 지정하는 방법은 다음과 같습니다.

• 고도가 있는 그림자
• 배경 채우기
• 윤곽선 테두리
높이가 흰색과 밝은 회색 표면에서 멋지게 보이지만 확장된 아코디언  요소의 배경을 8-12% 불투명도로 채우는 것은 훌륭한 추가 기능입니다.  흰색 표면과도 잘 어울립니다.  필요한 경우 윤곽선을 추가할 수 있습니다.
..
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

UI/UX 디자인: 그리드 설정

거의 모든 프로젝트에 대해 반응형 레이아웃 그리드를 설정하는 방법입니다.

오버뷰(Overview)
디자이너에게 그리드는 우리가 접하는 모든 프로젝트의 기본 도구의 역할을 합니다.

문제는 엄격한 인쇄 디자인 시대 이후, 상황이 훨씬 더 복잡해졌습니다. 그리고 현대 웹의 출현으로 크로스 플랫폼, 반응형, 멀티 디바이스 경험이 이제 표준이 되었습니다.

이를 위해 오늘 우리는 다음을 살펴보겠습니다.

더 이상 고민하지 않고 들어가 보겠습니다.

왜 그리드를 사용할까요?
우리 모두가 같은 입장을 취하기 위해서, 애초에 왜 그리드를 사용하는지 아는 것이 중요합니다. 가장 중요한 이유 몇 가지를 살펴보겠습니다.

시각적 일관성
가장 중요한 일관성을 만드는 것입니다. 그리드를 사용하면 문서를 행(rows), 열(columns)로 배치할 수 있습니다. 콘텐츠를 차별화하고 콘텐츠를 보다 균일한 방식으로 배치할 수 있습니다.

문서 하이라키(Hierarchy)
그리드를 사용하는 또 다른 이유는 시각적 계층 구조를 위해 문서 섹션을 차단할 수 있기 때문입니다. 일반적으로 더 많은 그리드 공간을 차지하는 큰 요소가 더 중요한 반면, 더 작은 요소는 덜 중요한 정보를 나타냅니다.

반복 가능한 패턴
마지막으로 그리드를 사용하면 문서의 리듬, 여백, 패딩, 여백을 정의하고 콘텐츠 블록을 캡슐화하여 반복 가능한 패턴을 만들 수 있습니다.

사람의 눈은 일관성을 좋아하므로 그리드를 사용하여 보다 균일하고 읽기 쉽고 명확하게 식별할 수 있는 디자인 패턴으로 문서를 만들 수 있습니다.

그리드 정의
더 나아가기 전에, 거의 모든 최신 웹과 모바일 레이아웃 그리드는 다음 네 가지 유형의 그리드 중 하나임을 말씀드리고 싶습니다.

관심이 있는 경우, 여기에서 표준 그리드 범주에 대해 자세히 알아볼 수 있습니다.

★ 그래픽 디자이너에게 유용한 그리드 시스템 유형
그리드 시스템은 성공적인 레이아웃을 만드는 기본 요소 중 하나입니다. 그래픽 디자이너가 그리드 유형을 사용하는 방법을 알려드립니다.
Types of Grid System Useful for Graphic Designers (graphic-design-institute.com)
..  
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (1,900명)

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램