사용자 인식 및 심미적 요소 최적화를 위한 권장사항
Power Platform Well-Architected 경험 최적화 체크리스트 권장 사항에 적용됩니다.
| XO:07 | 색 구성표, 타이포그래피, 레이아웃과 같은 시각적 요소에 클래식 디자인 원칙을 적용합니다. 사용자의 주의를 중요한 요소와 작업으로 안내하는 집중적이고 균형 잡혀 있으며 직관적인 시각적 계층 구조를 위해 노력하세요. |
|---|
이 가이드에서는 사용자 인식에 영향을 미치고 애플리케이션 만족도와 채택에 큰 영향을 미칠 수 있는 보편적인 시각적 디자인 패턴에 대한 권장 사항을 설명합니다. 시각적 요소는 경험을 만드는 데 사용되는 기본 구성 요소 역할을 합니다. 인간이 자연스럽게 정보를 인식하고 처리하는 방식과 일치하는 시각적 원리를 적용하면 시각적 요소를 선택하고 배열하여 효과적이고 매력적인 애플리케이션을 만드는 데 도움이 되는 구조화된 방법이 제공됩니다.
주요 디자인 전략
시각 디자인에 대한 인간의 인식에 대한 광범위한 연구에 따르면 사용자는 시각적 요소를 분리하여 않습니다. 대신, 그들은 다른 요소와 그것이 나타나는 맥락과 관련하여 그것을 인식합니다. 이러한 관계는 사용자 인식에 영향을 미치고, 특정 영역에 관심을 끌고, 감정을 이끌어내고, 이해를 돕고, 미적 감각을 강화하고, 브랜드 아이덴티티를 강화합니다. 시각적 요소를 신중하게 선택하고 배열하면 타겟 대상 그룹에 공감하는 매력적이고 기억에 남을 만한 효과적인 사용자 경험을 만들 수 있습니다.
미적 사용성 효과
미적 사용성 효과는 매력적인 제품을 더 유용하다고 생각하는 경향을 말합니다. 사용자는 약 50밀리초 내에 애플리케이션에 대한 초기 의견을 형성합니다. 이러한 첫인상은 구조, 색상, 간격, 대칭, 텍스트의 양, 글꼴 등 다양한 요소의 영향을 받습니다. 긍정적인 첫인상은 전반적인 사용자 만족도를 높일 수 있습니다. 연구에 따르면 사용자는 시각적으로 매력적인 인터페이스를 찾을 때 사소한 사용성 문제를 더 관대하게 여깁니다. 또한 디자인 품질은 신뢰성의 지표가 될 수 있습니다.
균형과 무게
시각적 균형은 시각적 인식의 균형과 조화를 나타냅니다. 인지적 부담을 줄여 사용자가 시각적 정보를 보다 효율적으로 처리하고 구성하는 데 도움이 됩니다. 균형 잡힌 구성은 일반적으로 더 즐겁고 이해하기 쉬운 것으로 인식되므로 사용자는 효과적으로 주의를 집중하고 시각적 자극을 더 쉽게 탐색할 수 있습니다. 시각적 균형의 이러한 인지적 측면은 명확한 의사소통을 촉진하고 전반적인 사용자 경험을 향상시키는 데 있어 중요성을 강조합니다.
모든 요소가 광학적 평형을 이룰 때 구성이 균형을 이룹니다. 수학적 배치를 조정해야 하는 경우가 많습니다. 시각적 무게에 영향을 미치는 요소로는 크기, 색상, 밀도, 공백 등이 있습니다.
크기: 큰 요소는 작은 요소보다 시각적인 무게를 더 많이 전달하는 경향이 있습니다. 균형을 이루기 위해 큰 요소는 작은 요소와 그룹화하거나 레이아웃 내에서 배치를 조정하여 균형을 맞출 수 있습니다.
색상: 밝거나 강렬한 색상은 차분하거나 중성적인 색상보다 더 많은 관심을 끌고 무거워 보일 수 있습니다. 색상 균형을 맞추려면 인터페이스 전체에 색상을 고르게 배포하거나 보색을 사용하여 시각적 조화를 이루는 것이 포함됩니다.
밀도: 요소의 밀도는 주어진 공간 내에 요소가 얼마나 촘촘하게 들어 있는지를 나타냅니다. 밀도의 균형을 맞추려면 요소가 인터페이스에 고르게 분포되어 과밀하거나 드문드문한 영역을 피해야 합니다.
공백: 음수 공간이라고도 하는 공백은 요소 사이의 빈 영역을 나타냅니다. 공간은 시각적 호흡 공간을 만드는 데 도움이 되며 특정 요소를 강조하고 강조하여 구성의 균형을 맞출 수 있습니다.
균형 잡힌 구성은 요소 간의 시각적 힘의 합입니다.
레이아웃의 균형을 맞추는 것은 쉽게 측정할 수 없기 때문에 가장 어려운 작업 중 하나입니다.
색상
색상, 색조, 음영 및 색조는 의미를 전달하고 감정을 불러일으키며 미적 매력을 만들어낼 수 있습니다. 색상은 사용자 주의를 유도하고, 계층 구조를 설정하고, 정보를 전달하고, 사용성을 향상시키는 데 중요한 역할을 합니다. UI의 사려 깊은 색상 디자인이 원하는 방식으로 사용자에게 영향을 줄 수 있는 이유를 설명하는 몇 가지 이유가 있습니다.
주의와 인식. 특정 색상은 다른 색상보다 눈길을 끌기 때문에 디자이너는 보는 사람의 관심을 특정 요소에 집중할 수 있습니다. 색상 대비는 가독성을 향상시키고 다양한 구성 요소를 구별하여 정보의 신속한 처리를 촉진합니다.
감정적 반응. 색상에는 감정과 기분을 불러일으키는 심리적 연관성이 있습니다. 빨간색과 주황색 같은 따뜻한 색상은 에너지와 흥분감을 불러일으킬 수 있고, 파란색과 녹색 같은 차가운 색상은 차분함과 평온함을 불러일으킬 수 있습니다. 원하는 반응을 유도하여 사용자에 대해 의도한 경험에 영향을 줄 수 있습니다.
브랜드 아이덴티티. 브랜딩 자료 전반에 걸쳐 색상을 일관되게 사용하면 강력한 시각적 아이덴티티를 구축하고 브랜드 인지도를 높이는 데 도움이 됩니다. 사용자는 특정 색상을 특정 브랜드와 연관시키고 자신의 경험을 브랜드 충성도 및 신뢰와 연관시키는 경우가 많습니다.
시각적 계층 구조. 색상을 사용하여 시각적 계층 구조를 설정하고 정보를 구성할 수 있습니다. 중요성이나 카테고리에 따라 요소에 다양한 색상을 할당하여 명확한 계층 구조를 만들고 더 쉽게 탐색하고 이해할 수 있습니다.
근접성
서로 가깝게 배치된 항목은 더 관련성이 높아 보입니다. 요소를 배열할 때 밀접하게 관련된 요소와 그렇지 않은 요소 사이의 간격에 눈에 띄는 차이가 있는지 확인하세요.
이 Gestalt 원리는 시각적 요소 사이의 공간적 거리가 시각적 요소가 정신적으로 인식되고 구성되는 방식에 영향을 미친다는 것을 시사하며, 시각적 자극의 효율적인 처리 및 이해를 촉진하는 데 있어 그 중요성을 강조합니다.
기능적으로 유사하거나 동일한 계층적 범주에 속하는 관련 요소를 그룹화합니다. 예를 들어, 드롭다운 메뉴 내에서 유사한 작업이나 옵션을 수행하는 버튼은 밀접하게 그룹화되어 연관성을 나타내야 합니다. 탐색 모음에서 간격이 촘촘한 메뉴 항목은 관련된 옵션 세트를 제안하는 반면, 메뉴 범주 간의 간격이 넓어 시각적으로 구분됩니다. 관련 있는 양식 항목은 함께 그룹화되어야 합니다(예: "주소"라는 섹션의 주소 필드)
단락, 문장, 단어 사이의 간격을 조정하여 텍스트가 많은 인터페이스의 가독성을 높입니다. 단락 간격이 가까울수록 논리적 연결 또는 생각의 연속을 나타내고, 간격이 클수록 내용의 전환 또는 중단을 나타냅니다. 이 기술은 텍스트 정보의 효율적인 이해를 촉진합니다.
혼동을 방지하기 위해 관련된 요소와 관련되지 않은 요소 사이의 간격에 눈에 띄는 차이가 있는지 확인하세요. 간격 램프는 요소 크기에 따라 필요한 적절한 간격을 일관되게 결정하는 데 도움이 될 수 있습니다.
왼쪽의 원은 다른 원보다 삼각형과 더 관련이 있습니다.
단락 사이의 간격은 섹션 사이의 간격보다 작습니다.
연속성
선이나 곡선 위에 배열된 요소는 선이나 곡선에 있지 않은 요소보다 더 관련성이 높은 것으로 인식됩니다.
탐색 메뉴나 프로세스의 단계와 같은 인터페이스 요소를 선이나 곡선을 따라 배열하여 순서나 진행을 암시합니다. 이 레이아웃은 사용자가 요소 간의 관계를 인식하고 정보나 작업의 논리적 흐름을 이해하는 데 도움이 됩니다.
확인란 또는 라디오 옵션 또는 글머리 기호 목록의 항목과 같은 관련 요소를 선을 따라 배치하여 시각적으로 그룹화할 수 있습니다. 이러한 배열은 이러한 요소가 공통 목적을 공유하거나 동일한 범주에 속한다는 것을 사용자에게 제안하여 탐색 및 이해를 더 쉽게 만듭니다. 유사해 보이는 항목이 안쪽으로 더 들여쓰기되면 항목의 위치는 시각적 계층 구조에서 더 낮은 위치와 연관됩니다.
선이나 곡선을 사용하여 사용자의 주의를 유도하고 인터페이스를 통해 시각적 경로를 만듭니다. 예를 들어, 화살표는 연결이나 진행을 나타내는 특정 경로를 따라 콘텐츠의 한 섹션에서 다른 섹션으로 사용자의 시선을 유도할 수 있습니다. 이 기술은 사용자가 인터페이스를 보다 직관적으로 탐색하고 탐색을 장려하는 데 도움이 됩니다.
콜 투 액션 버튼이나 중요한 정보와 같은 주요 인터페이스 요소를 눈에 잘 띄는 선을 따라 배열하여 사용자의 관심을 끌고 초점을 만듭니다. 예를 들어, Fluent MessageBar 패턴은 왼쪽에 메시지가 표시되고 오른쪽에 콜 투 액션 버튼으로 이어지는 등 콘텐츠 영역 전체에서 눈에 잘 띄는 균형 잡힌 메시지로 표시되는 경우가 많습니다. 이 레이아웃 전략은 이러한 요소를 강조하고 그 중요성을 강조하여 상호 작용 가능성을 높입니다.
곡선/선은 색상보다 우리의 지각에 더 강하게 작용합니다.
마법사는 연속성을 사용하여 사용자에게 너무 많은 정보로 부담을 주지 않으면서도 단계가 연결되어 있음을 보여줍니다.
종료
인간의 두뇌는 일부 정보가 누락된 경우에도 개별 개체에 대해 익숙한 단일 패턴을 인식하여 완전한 형태를 보는 경향이 있습니다.
디자인 요소(예: 모양, 색상, 크기)의 시각적 일관성을 보장하여 사용자가 다른 상황에서 제시되는 경우에도 예상해야 하는 패턴을 배울 수 있도록 돕습니다.
사용자가 이전 경험을 바탕으로 누락된 정보를 채울 수 있도록 간단하고 친숙한 아이콘이나 기호를 사용하십시오. 예를 들어 돋보기 아이콘은 일반적으로 텍스트가 없어도 검색 기능과 연결됩니다.
정보를 사용자에게 점진적으로 제공하세요(점진적 공개라고도 함). 사용자가 인터페이스와 상호 작용할 때 누락된 세부 정보를 채울 수 있으므로 너무 많은 정보로 인해 부담을 느끼지 않고 탐색을 장려할 수 있습니다.
사용자가 개체를 전체 엔터티로 인식하도록 장려하는 응집력 있는 시각적 패턴을 만듭니다. 예를 들어, 관련 요소를 그룹화하면 사용자가 해당 요소의 관계와 목적을 이해하는 데 도움이 될 수 있습니다. 분할을 나타내기 위해 Gestalt 원리를 사용하여 요소를 일관되게 시각적으로 배열합니다. 공간을 효과적으로 사용하여 인터페이스 요소 주위에 폐쇄감을 조성하세요.
애니메이션과 전환을 사용하여 사용자의 주의를 끌고 인터페이스 상태의 변화를 전달합니다. 다양한 상태나 화면 간의 원활한 전환은 사용자가 요소 간의 관계를 이해하고 누락된 정보를 채우는 데 도움이 될 수 있습니다. Power Apps에서 사용할 수 있는 여러 최신 컨트롤은 기본적으로 애니메이션을 표시합니다.
사각형은 4개의 불완전한 원이 인식되기 전에 인식됩니다.
카드에서 모달로의 애니메이션은 둘 사이의 간격을 좁히고 서로 연관성을 부여하는 데 도움이 됩니다.
초점
초점은 보는 사람의 관심을 즉시 끄는 디자인 요소입니다. 이상적으로 디자인에는 일반적으로 1에서 3 사이의 일련의 초점이 있어야 하며, 의도적인 방식으로 콘텐츠를 통해 사용자를 안내하도록 배열되어야 합니다.
가장 중요한 콘텐츠나 작업이 초점으로 강조되는 명확한 정보 계층 구조로 인터페이스를 디자인하세요. 크기, 색상, 대비, 위치 지정과 같은 시각적 신호를 사용하여 이러한 요소를 돋보이게 만드세요. 가장 중요한 초점부터 시작하여 점차적으로 정보를 제공합니다. 이 기술은 사용자가 가장 관련성이 높은 콘텐츠나 작업을 신속하게 식별하고 논리적 순서에 따라 인터페이스를 안내하는 데 도움이 됩니다.
기본 콜 투 액션 버튼을 인터페이스 내에 눈에 띄게 배치하여 가장 강력한 초점으로 만듭니다. 이러한 버튼은 다른 요소와 시각적으로 구별되어야 하며 사용자가 구매, 가입 등 원하는 작업을 수행할 수 있도록 전략적으로 배치되어야 합니다. Fluent 디자인 언어에서는 이러한 요소에 브랜드 테마 색상을 사용할 것을 권장합니다.
대비를 효과적으로 사용하여 초점을 만드세요. 색상, 밝기, 크기, 타이포그래피의 차이로 인해 눈에 띄는 요소는 자연스럽게 사용자의 관심을 끌게 됩니다. 밝은 표면과 어두운 텍스트 또는 브랜드 요소를 대조하면 더욱 눈에 띄는 초점이 만들어집니다.
공백을 사용하면 주변 요소와 시각적으로 분리하여 초점을 강조할 수 있습니다. 이 기술을 사용하면 주의가 산만해지는 것을 방지하고 사용자가 가장 중요한 콘텐츠나 작업에 집중할 수 있습니다. 주변에 간격이 더 많은 UI 요소는 공간이 적은 요소보다 더 많은 관심을 끌고 중요도가 더 높게 인식되는 경향이 있습니다.
응집력 있는 사용자 경험을 제공하기 위해 인터페이스 전체에서 초점 사용의 일관성을 유지하십시오. 초점 패턴을 설정하면 인터페이스를 탐색하기 위해 이해해야 하는 계층 구조에 대한 사용자의 기대치를 안내하고 다양한 화면이나 페이지에서 중요한 정보나 작업을 찾는 데 도움이 됩니다.
균형을 유지하고 너무 많은 경쟁 초점을 사용하여 사용자가 부담을 느끼지 않도록 해야 합니다.
시선은 먼저 파란색 사각형에 끌립니다.
콜 투 액션과 같은 요소는 사용자가 쉽게 알아볼 수 있도록 초점을 사용할 수 있습니다.
유사성
유사해 보이는 개체는 종종 그룹이나 패턴으로 인식되어 사용자가 동일한 기능을 가질 것으로 기대하게 됩니다.
유사한 기능을 가진 인터페이스 요소가 일관된 시각적 스타일을 가지고 있는지 확인하십시오. 예를 들어 유사하거나 동일한 가중치를 갖는 작업을 수행하는 버튼은 동일한 색상, 모양 및 크기를 가져야 하며 사용자에게 공유 기능을 알려야 합니다. 반대로, 기능이 크게 다른 요소는 명확하게 구분할 수 있는지 확인하십시오. 두 기술 모두 명확한 시각적 단서를 설정하여 혼란과 좌절을 방지합니다.
일관된 아이콘과 기호를 사용하여 인터페이스 전체에서 유사한 작업이나 기능을 나타냅니다. 사용자는 과거 경험을 바탕으로 친숙한 아이콘을 특정 기능과 연관시키는 경향이 있습니다. 이러한 기대를 충족하려면 보편적으로 인식되는 아이콘 메타포를 사용하세요. Fluent UI 아이콘 라이브러리와 같은 동일한 세트의 아이콘을 사용하여 아이콘 스타일의 일관성을 보장합니다.
요소나 카테고리 간의 유사성을 나타내기 위해 색상 코딩을 사용합니다. 예를 들어 동일한 색상을 사용하여 목록에서 관련 항목을 강조 표시하거나 차트에서 유사한 데이터 요소를 그룹화하면 시각적 일관성이 향상되고 사용자가 패턴을 식별하는 데 도움이 됩니다.
유사한 목적을 제공하는 요소에 대한 타이포그래피 및 텍스트 스타일의 통일성을 유지합니다. 일관된 글꼴 스타일, 크기 및 형식은 응집력 있는 시각적 언어에 기여하여 관련 콘텐츠나 작업에 대한 사용자의 인식을 촉진합니다.
인터페이스 전체에서 유사한 작업에 대해 일관된 대화형 피드백을 제공합니다. 버튼 위로 마우스를 가져가거나 링크를 클릭하는 경우 사용자는 시각적 유사성과 기능적 동등성 사이의 연관성을 강화하기 위해 일관된 반응을 기대할 수 있어야 합니다. 플랫폼은 본질적으로 대부분의 상호 작용 동작(예: 마우스로 가리키기 및 누름 상태 색상 값)을 제공하지만 처음부터 구성 요소 요소를 생성하거나 피드백 상태를 수동으로 구현할 때 이 디자인 원칙을 염두에 두십시오.
다양한 요구와 선호도를 가진 사용자를 수용할 수 있도록 텍스트 레이블이나 오디오 피드백과 같은 다른 단서로 시각적 유사성을 보완해야 합니다. 다양한 감각 양식을 통해 기능을 효과적으로 전달하면 유용성과 포괄성이 향상됩니다.
요소는 배열(열과 행)이 아닌 모양과 색상을 기준으로 그룹화됩니다.
대시보드의 카드 하나가 사이드 패널로 열리면 사용자는 모든 카드가 같은 방식으로 열릴 것으로 예상합니다.
사물 및 배경
사람들은 본능적으로 요소를 "사물"(앞에서 눈에 띄는 것) 또는 "배경"(배경으로 물러나는 것)로 인식합니다. 따라서 컨텍스트는 인식에 영향을 미치므로 중요한 요소를 배경과 구분할 수 있도록 충분한 묘사를 하는 것이 중요합니다. 공백(네거티브 공간)은 내용의 이해도를 높여줍니다.
색상, 크기 또는 시각적 스타일의 대비를 사용하여 사물과 배경 사이의 명확한 관계를 설정합니다. 중요한 요소는 배경에 비해 눈에 띄게 눈에 띄도록 하여 쉽게 구별할 수 있어야 하며 사용자의 주의를 효과적으로 유도해야 합니다. 더 밝은 색상의 표면과 배경과 대비되는 시각적 요소가 더 눈에 띕니다. 이 접근 방식은 시각적 혼란을 줄이고 사용자가 주요 정보를 식별하는 데 도움이 됩니다. 전경과 배경 요소 사이에 충분한 대비를 제공하여 시각적 어려움을 겪는 사용자의 가독성을 높이고 콘텐츠에 대한 액세스 및 이해 능력을 향상시킵니다.
인터페이스 요소의 배치와 스타일을 일관성 있게 유지하면 그림과 배경의 관계가 강화되고 사용자가 인터페이스 구조를 이해하는 데 도움이 됩니다. 디자인 패턴과 시각적 신호를 일관되게 사용하면 사용자가 다양한 화면과 상황에서 전경과 배경 요소를 빠르게 식별할 수 있습니다. 디자인의 불일치는 사용자의 정신 모델을 방해하고 인터페이스를 효율적으로 탐색하는 능력을 방해할 수 있습니다.
대비가 낮고 네거티브 공간이 최소화되면 흰색 사각형이 배경의 일부로 인식됩니다.
사용자가 중요한 콘텐츠에 집중할 수 있도록 측면 이미지가 배경으로 물러나야 합니다.
그룹화
요소는 명확하게 정의된 경계가 있는 영역을 공유하는 경우 그룹으로 인식되는 경향이 있습니다.
상자, 카드, 테두리 등 시각적 컨테이너 내에서 관련 요소를 그룹화하면 사용자가 이를 응집력 있는 단위로 인식하는 데 도움이 됩니다. 이 접근 방식은 콘텐츠와 기능을 시각적으로 구성하므로 정보를 더 쉽게 식별하고 처리할 수 있습니다. 명확한 그룹화는 복잡한 인터페이스를 피하고 혼란이나 비효율성을 줄이는 데 도움이 됩니다. 그룹화는 근접성을 선택할 수 없는 경우에도 효과적입니다. 예를 들어, 테두리와 배경색으로 인해 관련 단위로 인식되는 화면 전체의 여러 컨트롤에 걸쳐 있는 메시지 표시줄입니다.
그룹화된 요소에 대해 일관된 시각적 스타일을 유지하면 연결이 강화되고 유용성이 향상됩니다. 이러한 요소에 유사한 색상, 글꼴 또는 아이콘을 사용하면 해당 요소가 동일한 범주 또는 기능에 속한다는 것을 강조합니다. 시각적 표현의 불일치는 인식된 그룹화를 약화시키고 사용자가 요소 간의 관계를 간과하거나 해당 의미나 목적을 잘못 해석하게 만들 수 있습니다.
요소 또는 요소 그룹 주위에 테두리를 추가하면 주변 요소와 분리됩니다.
콘텐츠를 섹션으로 나누면 사용자가 주제가 바뀌고 있음을 이해하는 데 도움이 됩니다.
신호 대 노이즈
선, 대비, 간격 등의 시각적 단서는 사용자에게 중요한 내용을 알리는 데 사용됩니다. 그러나 신호가 너무 많거나 중요하지 않은 정보를 강조하는 신호는 금방 노이즈가 됩니다.
굵은 텍스트, 대비되는 색상 또는 아이콘과 같은 초점 원칙을 사용하여 사용자에게 중요한 정보나 작업을 알립니다. 예를 들어 중요한 버튼이나 제목에는 밝은 색상을 사용하여 눈에 띄게 만듭니다.
너무 많은 정보로 인해 사용자가 부담을 느끼지 않도록 강조할 내용을 선택적으로 선택하세요. 사용자의 작업이나 목표에 정말로 중요한 신호 요소만 표시합니다. 신호가 너무 많으면 사용자는 혼란을 느끼고 우선 순위를 정하기 어려울 수 있습니다. 사용자에게 가장 중요한 정보를 식별하고 이를 적절하게 강조하세요. 일반적으로 페이지당 하나의 콜 투 액션 버튼만 사용하는 것이 좋습니다. 양식에서 사용자의 주의를 끌기 위해 필수 필드를 강조표시합니다. 이를 통해 사용자는 불필요한 세부 사항에 빠져드는 것을 방지하고 중요한 것에 집중할 수 있습니다.
신호가 인터페이스 전체에서 일관된 시각적 언어를 따르도록 하여 사용자가 패턴을 인식하고 다양한 신호의 의미를 직관적으로 이해하는 데 도움이 되는 지침 역할을 하도록 합니다.
특정 상황과 사용자의 요구에 맞춰 신호를 조정하세요. 예를 들어 사용자가 특정 작업을 제공하는 인터페이스를 검색하는 경우 중요한 상태와 실행 가능한 항목을 명확하게 표시하여 관심을 끌 수 있습니다. 상황별 신호는 사용자가 관련 없는 세부 정보로 인해 주의가 산만해지지 않고 관련 정보를 빠르게 찾을 수 있도록 도와줍니다.
신호는 사용자에게 콘텐츠를 안내하고 중요한 내용을 전달하는 데 도움이 됩니다.
시각적 노이즈는 혼란을 야기하고 신호와 반대되는 영향을 미칩니다.
Power Platform 간편 사용
캔버스 앱에서는 레이아웃 컨테이너를 사용하여 관련 요소를 그룹화합니다. 이상적으로는 모든 페이지 요소를 컨테이너에 구성해야 하며, 레이아웃 컨테이너도 간격 속성을 조정하여 하위 컨테이너를 효율적으로 분리할 수 있습니다.
모델 기반 앱 양식에서 섹션을 사용하여 관련 필드 또는 요소를 그룹화할 수 있습니다.
재사용 가능한 사용자 지정 구성 요소를 사용하여 공통 시각적 요소의 일관성을 구현합니다.
캔버스 앱에서는 최신 컨트롤이 디자인 내에서 통합 신호 기능을 제공합니다. 특히 버튼 및 배지 컨트롤은 스타일 속성에 옵션을 제공하여 효과적인 신호를 만듭니다. 각 구성 요소에 대한 모범 사례를 준수하고 신호를 선택적으로 적용하여 최적의 통신을 보장합니다.