Workshop 표, 버튼과 검색 구성
표와 목록
Object Table, Object List와 Pivot Table에는 목록의 크기를 확인할 수 있는 수치를 함께 표시합니다. 섹션 header에 Metric Card를 추가하고 layout style을 Tag로 선택하면 객체 수를 제목과 함께 보여 줄 수 있습니다.
행을 선택할 때 필요한 정보는 표나 목록 안에 둡니다. 추가 정보는 기본 화면을 가리는 overlay보다 접을 수 있는 상세 패널을 사용할 수 있습니다.
표의 화면 설정은 Widget setup의 Display & formatting에서 조정합니다. 스크롤 원칙에 따라 사용자가 목록을 내려 보아도 탐색과 주요 조작을 찾을 수 있게 합니다.
버튼의 Intent
버튼의 색은 실행할 결과나 위험과 맞춥니다. 모든 버튼에 다른 색을 주기보다 주요 행동을 먼저 정하고 필요한 강조만 사용합니다.
| Intent | 색과 용도 | 레이블 예 |
|---|---|---|
| None | 회색입니다. 보조 액션에 사용합니다. | Back, Skip, Cancel |
| Primary | 파란색입니다. 주요 행동이나 다음 단계로 이동할 때 사용합니다. | Create, Add new, Next, Continue |
| Success | 초록색입니다. 완료나 긍정적인 결과를 나타냅니다. | Submit, Save, Complete, Approve, Enable |
| Warning | 황색입니다. 파괴적이지 않지만 주의를 요구하거나 중간 수준의 위험이 있는 작업에 사용합니다. | Review required, Pending approval, Archive, Suspend |
| Danger | 빨간색입니다. 쉽게 되돌릴 수 없는 삭제나 위험한 작업, 오류 또는 중요 경고에 사용합니다. | Delete, Remove |
버튼의 순서와 의미
그룹 안에서는 왼쪽에 주요 버튼을 두고 중요도와 시각적 부담을 고려하여 이어 배치합니다. 덜 중요한 작업은 메뉴로 묶을 수 있습니다.
아이콘으로 누른 뒤 일어날 작업을 보완합니다.
모듈 안의 페이지나 섹션으로 이동할 때는 수평 화살표를, 모듈 밖의 새 탭으로 이동할 때는 비스듬한 화살표를 사용할 수 있습니다.
관련된 후속 작업과 독립적인 메뉴 작업은 버튼 묶음과 + 또는 메뉴 표시로 구분합니다.
레이블은 사용자가 이해하는 자연스러운 문장형 표현을 사용합니다. 영어 레이블은 sentence case로 쓰고, 섹션 제목에서 이미 알 수 있는 맥락은 버튼마다 반복하지 않습니다.
버튼은 영향을 주는 위젯 가까이에 둡니다. 가상의 Equipment 표와 Part 표를 함께 표시한다면 각각의 작업 버튼을 해당 표의 header에 넣습니다.
Widget setup의 Display & formatting에서 크기, 테두리와 색의 강도로 위계를 정합니다. 여러 색으로 경쟁하게 하기보다 주요 액션 하나를 강조합니다.
검색과 필터
여러 조건을 동시에 사용하거나 복잡한 필터 구성이 필요하면 Filter List의 Vertical layout을 사용합니다. 사용할 수 있는 조건을 한눈에 확인하기 쉽습니다.
화면이 좁거나 필터를 자주 바꾸고 초보 사용자도 쉽게 선택하게 하려면 Pills layout을 사용합니다. Exploration Filter Pills도 간결한 시각 필터를 제공하는 경로입니다.
숙련 사용자가 키워드, 속성 조건과 복잡한 질의를 조합해야 한다면 Exploration Search Bar를 추가합니다. 단순 필터 선택과 자세한 검색 중 실제 사용자에게 필요한 조작을 정합니다.