-
[HIG]컴포넌트_레이아웃과 배열_박스들UX, UI, GUI 2024. 6. 3. 16:03
박스는 논리적으로 관련된 정보들과 컴포넌트들의 시각적으로 구별된 그룹을 만듭니다.
기본적으로, 박스는 시각적인 경계와 배경색을 그것의 내용을 다른 인터페이스로부터 구볋하기 위해 사용합니다. 박스는 또한 제목을 포함시킬 수 있습니다.
Best practices
박스를 그것이 가지고 있는 뷰에 따라 상대적으로 비교해서 박스를 구분해 유지하는 것을 선호하세요. 박스의 상이즈가 그것이 포함된 창이나 스크린의 사이즈와 비슷해지려고 할 때, 그것은 그룹화된 내용의 구분으로 소통하는 것이 효과적이지 않을 것이고, 그리고 그것은 다른 콘텐츠를 침범할 수 있습니다.
패딩과 배열을 추가적인 크룹핑을 박스에 잘 넣기 위해 유지하는 것을 선호하세요. 박스의 가장자리가 시각적인 구분 요소입니다 - 서브 그룹들을 정ㅇ의하기 위해 집합 박스들을 추가하는 것ㅇ은 여러분의 인터레이스가 어지럽고 부자연스럽게 만든다.
콘텐츠
타이틀이 당신의 박스 콘텐츠를 명확하게 한다면, 성공적인 도입부 타이틀을 제공하세요. 박스의 외형은 사람들로 하여금 그 콘텐츠들이 서로 연관되어 있다고 이해할 수 있게 만들지만, 그 관계에 대하 디테일을 더 잘 제공할 때 말이 되는 것입니다. 또한, 타이틀은 보이스오버 유저들로 하여금 그들이 박스에서 만날 콘텐츠를 예측할 수 있게 합니다.
만약 여러분이 타이틀이 필요하다면, 콘텐츠를 설명할 수 있는 가장 간략한 문장을 쓰세요. 문장 형식의 대문자를 사용하세요. 만약 여러분이환경 설정 창에서 사용하지 않는 한 느낌표로 끝나는 것은 피하세요.
플랫폼 고려사항
visionOS를 위한 별도의 고려사항이 필요하지 않습니다. tvOS or watchOS에서는 지원하지 않습니다.
iOS, iPadOS
기본적으로, iOS와 iPadOS는 두번째 그리고 세번째의 배경 색을 박스에서 사용합니다.
macOS
기본적으로, macOS 박스의 타이틀을 위에 배치합니다.
'UX, UI, GUI' 카테고리의 다른 글
[HIG]컴포넌트_레이아웃과 이미지뷰_칼럼뷰 (0) 2024.06.10 [HIG]컴포넌트_레이아웃과 구성_콜렉션 (1) 2024.06.06 [HIG]컴포넌트_콘텐츠_웹뷰 (0) 2024.05.30 [HIG]컴포넌트_컨텐츠_텍스트뷰 (0) 2024.05.23 [HIG]컴포넌트_컨텐츠_이미지뷰 (0) 2024.05.20