UI 레이아웃 디자인 6가지 패턴

UI 레이아웃 디자인에 관해서는 일반적인 디자인 패턴을 이해함으로써 더 나은 디자인을 만들고 프로토타입 할 수 있습니다.

일관된 UI 레이아웃 디자인 작성은 우리 중 가장 경험이 많은 UX/UI 디자이너들에게도 힘든 작업입니다. UI 패턴의 보고에서 고를 수 있기 때문에 동일한 콘텐츠를 다양한 방법으로 만들 수 있습니다.

웹이나 모바일 UX 디자인에서 가장 중요한 부분입니다. 겉보기에는 그렇게 중요한 부분이라고 생각하지 않을 수 있습니다. 하지만 일반적인 사용자 인터페이스의 설계 패턴을 검토하면 콘텐츠를 가장 효과적으로 표시하는 방법을 확인할 수 있습니다.

UI 레이아웃 설계의 6가지 필수 예를 보고 각각의 개요를 소개하려 합니다.

UI 패턴을 분석하여 디자인을 프로토타입 할 때 어떻게 사용하는지 이해할 수 있도록 합니다.

자신의 원하는 프로토타입, 웹과 모바일 레이아웃을 Justinmind을 통해 디자인을 해 보는것도 나쁘지 않을 것 같네요~

Free prototyping tool for web & mobile apps - Justinmind

---

UI 레이아웃 설계: 공통 패턴

에어비앤비 웹사이트는 매우 미니멀합니다. 충분한 여백을 통해 제공되고 있는 숙박시설과 체험의 범위를 강조하고 있습니다. 색이 적기 때문에, 페이지에 있는 유일한 색, 즉 사진에 있는 색에 눈이 끌립니다.

숙소, 체험, 장소를 모두 한 곳에서 - 에어비앤비

Airbnb는 드문드문 일러스트가 그려져 있지만, 홈페이지 상에서 몇 개의 공통 UI 레이아웃 디자인 패턴을 잘 이용하고 있습니다.

• 내비게이션 탭

• 카드

 

내비게이션 탭

 

내비게이션 탭은 다양한 이유로 사용됩니다. 내비게이션 탭은 UI 레이아웃에 집중할 수 있도록 도와주며  , 파일 캐비닛 내의 기존 파일과는 잘 어울리도록 합니다.

다양한 섹션, 혹은 카테고리나 하리잔 틀 바(horizontal bar)를 상요하고 계시다면 에어비앤비가 사용하고 있는 UX, 탭은 좋은 설루션이 될 수 있습니다.

내비게이션 탭은, 표시 스페이스가 한정되어 있거나, 콘텐츠를 섹션에 분할할 필요가 있는 경우에 사용합니다.

 

 

 

카드

 

에어비앤비에서 사용하고 있는 카드형 UI 레이아웃 디자인은 매우 잘 되어있다.

 

카드형 디자인은 다음과 같은 컨텐츠를 표시할 경우에 사용할 수 있습니다.

• 인터랙티브(상호적인)

• 다양한 길이

• 직접 비교할 필요가 없는 내용(즉 하나의 카드가 다른 카드와는 관계없음)

카드는 검색할 때 정보를 수집하려는 사용자에게 유용하며 카드도 쉽게 조작할 수 있습니다. 클릭하면 추가 정보가 확장되거나 카드를 뒤집어 추가 정보가 표시될 수 있습니다.

카드에는 일반적으로 다양한 콘텐츠가 들어 있습니다. 이미지, 텍스트, 동영상, 클릭 유도 문안 등이 있습니다.

 

그리드

 

YouTube는 전 세계에 제공할 콘텐츠가 많으므로 콘텐츠를 가장 잘 표현하기 위해 여러 UI 패턴을 사용합니다.

 

그리드는 콘텐츠를 배치할 구조를 만드는 일반적인 방법입니다. 그리드는 매우 강력한 힘을 가지고 있습니다. 그리드는 웹 사이트의 리듬을 만들고 비율을 정의하는 데 도움이 됩니다.

 

콘텐츠를 효과적인 방식으로 우선순위를 지정하는 데 도움이 되므로 UI ​​레이아웃 디자인에서 비율이 중요합니다. 그러나 그리드가 하는 일은 합리적인 구성을 통해 모든 요소를 ​​하나로 묶을 수 있는 기본 구조를 만드는 것입니다.

 

그리드를 사용하면 디자이너가 일관성을 유지할 수 있으며 그리드에 배치된 내용이 체계적으로 구성됩니다.

---

점진적 공개

 

점진적 공개는 YouTube의 댓글 섹션에서 사용됩니다. 프로그레시브 공개는 사용자 인터페이스를 이해하기 쉽게 만드는 디자인 패턴입니다. 또한 점진적인 공개로 인해 작업량이 줄어듬에 따라 너무 많은 정보로 인해 혼란이 생기는 것을 막을 수 있습니다.

 

YouTube의 댓글 섹션의 경우 점진적 공개는 사용자가 최소한의 방해 없이 원하는 것을 읽을 수 있도록 하는 것입니다. 그들은 원한다면 더 깊게 파낼 수 있습니다. 추가 설명은 함께 그룹화되며 "모든 또는 답장 보기"는 사용자가 읽을 수 있는 모든 설명을 드롭 다운합니다. 점진적 공개 UI 패턴이 표시될 때 “추가 정보”와 같은 사본을 보는 것이 일반적입니다.

 

' 회전목마 ' (Carousels)

 

' 회전목마 ' 는 UX 디자인 커뮤니티에서 화제가 되고 있습니다. 많은 양의 콘텐츠를 강조하고 싶지만 공간이 없는 경우에 유용합니다.

 

통계가 효율성 부족을 강조하더라도 소매 업체는 추가 공간을 찾을 필요 없이 최신 제안 또는 새로운 제품 범위를 표시할 기회를 가지므로 전자상거래 웹사이트에서 일반적으로 사용됩니다.

 

아마존은 웹 사이트 전체에서 회전목마를 자유롭게 사용합니다. 아마존은 '즐겨찾기', '최근에 추가' 또는 '고객이 구매 한 제품' 중 어느 것을 선택하든 '회전목마'를 통해 다음 단계로 끌어올립니다.

Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more

 

한 가지 단점은 불행히도 많은 사람들이 '회전목마'가 회전하기 전에 스크롤하여 사용자 경험을 방해한다는 것입니다. 회전 목마는 주로 시각적이므로 이미지와 함께 제공되어야 합니다.

 

 

이동 경로(Breadcrumbs)

 

사이트 이동 경로는 사용자에게 웹 사이트의 위치를 ​​알려주고 사용자가 길을 잃거나 좌절하지 않도록합니다. 

 

일반적으로 (>) 기호로 서로 분리되어 있으며 내비게이션 바 아래에 있습니다.

 

홈페이지에서 찾을 수는 없지만 홈페이지에 웹 사이트의 다른 영역에 대한 탐색 요소가 포함되어 있으면 사이트 이동 경로가 나타날 수 있습니다.

 

아마존은 자사 웹 사이트에 많은 콘텐츠를 가지고 있기 때문에 UI 레이아웃 디자인에 사이트 이동 경로를 사용합니다. 내용이 너무 많으면 페이지 계층 구조에서 쉽게 길을 잃을 수 있습니다.

 

이동 경로의 각 레이블은 해당 섹션에 연결되어야 합니다.일반적으로 '더보기 >'로 서로 분리되어 있습니다.

 

이동 경로는 다른 탐색 패턴과 함께 사용해야 하며 아마도 슬라이드 쇼나 갤러리와 같은 보다 시각적인 것이어야 합니다.

 

 

결론

 

웹 사이트에서 사용할 UI 디자인 레이아웃을 찾을 때 가장 좋은 방법은 엄격한 사용자 테스트와 많은 실험을 통하는 것입니다.

 

빠른 스케치이든, 완벽한 대화식 프로토 타입이든, 다양한 UI 레이아웃 디자인을 발견하면 더 나은 디자인 레퍼토리를 얻을 수 있습니다. 이는 자신 만의 프로토 타입을 만들고 사용자 경험을 향상하는 데 적합합니다.

---

 출처 : https://www.justinmind.com/blog/ui-layout-design-6-must-know-patterns/

UI layout design – 6 must know patterns