[HIG] Components - Boxes

sewoong·2023년 4월 3일
0

HIG

목록 보기
2/3
post-thumbnail
Apple Developer의 Human Interface Guidelines를 읽고 정리한 글입니다.
전문을 번역한 것이 아닌 혼자 읽고 정리한 글이기에 잘못 이해하거나 오역된 정보가 있을 수 있습니다.

👉 원문 보러가기

Boxes

https://developer.apple.com/design/human-interface-guidelines/images/intro/components/box-intro-dark_2x.png![](https://velog.velcdn.com/images/grumpy-sw/post/c973a7e2-29a3-4cab-8b6b-2b8b955203da/image.png)

box는 논리적으로 관련이 있는 정보와 구성 요소들을 포함하여 다른 요소들과 시각적으로 구별되는 그룹으로 만드는 방법이다.
기본적으로 box는 테두리 혹은 배경색의 구분을 통해 다른 인터페이스 요소들과 구분한다.

Best practices

box를 상대적으로 작게 유지한다.

  • 만약 box의 크기가 화면 전체 크기에 가까워지면 컨텐츠의 분리를 전달하는 데 효과적이지 못하다.

box 내에서 추가적인 그룹화를 할 때는 padding과 alignment를 사용하여 나타낸다.

  • 테두리는 뚜렷한 시각적 요소를 나타내므로, box 내부에 box를 중첩하여 추가하는 것은 인터페이스가 복잡하고 제한적인 느낌을 준다.

Content

사용자가 box의 내용과 목적을 명확히 이해할 수 있도록 간결한 제목을 제공하는 것이 좋다.

  • 제목은 box가 어떤 목적 혹은 논리적인 연관성을 갖고 다른 요소들과 구분되었는지 이해를 돕는다.
  • 또한 사용자가 VoiceOver 기능을 사용하는 경우 box 내의 컨텐츠가 어떤 컨텐츠인지 쉽게 예측하도록 한다.

box의 제목은 내용을 설명하는 간단한 문구로 작성한다.

  • 문장 스타일(첫 글자는 대문자, 나머지는 소문자)를 사용한다.

in iOS

기본적으로 iOS에서는 box를 나타낼 때 secondary 및 tertiary backgroundColor를 사용한다.

profile
iOS Developer

0개의 댓글