Astrale 프론트엔드 디자인은(는) 무엇을 하나요?
Domain을 랜딩 페이지가 아닌 집중된 제품 인터페이스로 구축하세요. Domain은 Astrale GUI 내부에 있으며 주변 쉘을 상속합니다. 히어로, 큰 프레젠테이션 영역, 중복된 페이지 헤더 또는 유용한 콘텐츠 전에 빈 공간을 추가하지 마세요.
이 스킬을 astrale-domain 뷰 가이드라인과 함께 적용하세요. 작업이 다른 방향을 설정하지 않는 한,
호스트 애플리케이션의 시각적 언어와 프로젝트의 기존 프리미티브를 재사용하세요.
정보 아키텍처 계획
UI 코드를 작성하기 전에 정신적으로 또는 임시 노트에 높은 수준의 와이어프레임을 스케치하세요. - 사용자의 주요 작업을 식별하세요;
- 주요 섹션 및 하위 섹션;
- 그들 사이의 논리적 연결;
- 상대적 중요성;
- 어떤 정보가 함께 속하는지;
- 모든 하위 섹션의 올바른 상위 항목.
모든 섹션을 하나의 일관된 논리 단위로 만드세요. 정보 아키텍처와 작업 우선순위가 레이아웃, 순서, 공간 및 시각적 가중치를 결정하도록 하세요. 상태와 컨트롤은 영향을 받는 콘텐츠 가까이에 배치하세요.
인터페이스 절제 유지
AI 슬롭 미학을 피하세요. 모든 요소를 카드로 만들거나, 실제 그룹화 필요 없이 컨테이너를 중첩하거나, 호버 시 카드가 떠오르게 하지 마세요. 호버는 상호작용을 명확히 하기 위해서만 사용하고, 키보드 및 터치 사용자에게도 동일한 명확성을 제공하세요.
적은 수의 강력한 영역, 명확한 계층 구조, 컴팩트한 간격, 일관된 컨트롤을 선호하세요. 기본적으로 장식용 그라데이션, 알약, 거대한 메트릭, 애니메이션 또는 장식용 카피를 추가하지 마세요. 각각의 시각적 장치는 구조, 상태, 우선순위 또는 어포던스를 전달해야 합니다.
상호작용 상태 정밀화
관련된 초기, 로딩, 빈, 준비, 제출 중, 성공, 실패, 권한 없음, 비활성화 상태를 모델링한 후에야 흐름이 완료된 것으로 간주하세요.
- 실제로 대기 중인 범위에만 로딩을 표시하세요: 로컬 작업의 경우 제출된 버튼 내부에, 초기 페이지 콘텐츠의 경우 페이지 스켈레톤으로. 하나의 작업에 대해 여러 로더를 절대 표시하지 마세요.
- 중복 제출을 방지하세요. 실패 시 사용자 입력을 보존하고, 영향을 받은 컨트롤 또는 콘텐츠 옆에 실행 가능한 피드백을 배치하세요.
- 생성 작업을 명확히 처리하세요: 작업이 성공했음을 표시하고, 사용자가 예상하는 위치에 결과를 삽입하며, 다음 작업에 도움이 될 때만 포커스를 이동하세요.
- 삭제 작업을 명확히 처리하세요: 되돌릴 수 있는 제거와 파괴적 삭제를 구분하고, 결과가 중단을 정당화할 때만 확인하세요.
- 결과가 예측 가능할 때 낙관적 목록 업데이트를 사용하세요. 실패 시 롤백하고, 실패를 표시하며, 커밋된 Kernel 상태와 인터페이스를 조정하세요.
- 사용자가 드롭다운 외부를 클릭하거나 Escape 키를 누르면 열린 드롭다운을 닫으세요. 키보드 탐색을 지원하고, 선택된 항목을 노출하며, 적절할 때 트리거로 포커스를 반환하세요.
- 긴 레이블과 값을 레이아웃 테스트의 일부로 만드세요. 읽기에 중요한 경우 줄바꿈하고, 진정으로 고정된 공간에서만 잘라내고 전체 값에 접근할 수 있도록 하세요. 텍스트가 인접한 작업을 가리지 않도록 하세요.
- 대화상자, 메뉴, 폼 및 인라인 작업을 키보드로 사용할 수 있게 유지하세요. 가시적인 포커스, 의미론적 컨트롤, 올바르게 연결된 레이블, 접근 가능한 상태 또는 오류 알림을 사용하세요.
- 호버, 비활성화, 대기 중, 성공 및 오류 상태를 색상에만 의존하지 않고 시각적으로 구별되게 만드세요.
텍스트 신중히 줄이기
사용자가 상태를 이해하고, 결정하며, 행동하는 데 도움이 되는 텍스트만 유지하세요. 필요한 레이블, 피드백, 접근성 텍스트는 보존하세요. 소개, 반복, 명백한 도움말, 장식용 카피 및 제목이나 컨트롤을 단순히 다시 말하는 설명은 제거하세요.
구현 후 전용 텍스트 축소 패스를 수행하세요. 컨텍스트에서 보이는 모든 문자열을 읽고, 인터페이스가 이해, 결정, 행동하기 더 어려워지지 않는 한 제거하세요.
결과 검증
대표적인 데이터, 빈 데이터, 긴 데이터, 로딩 데이터, 실패 데이터로 실제 작업 흐름을 실행하세요. 생성, 삭제, 롤백, 외부 클릭 및 Escape 동작, 키보드 순서, 좁은 레이아웃 및 가시적인 피드백을 확인하세요. 그런 다음 화면 전체를 다시 한 번 검토하고 유용한 콘텐츠 전의 중복 카드, 효과, 카피 및 공간을 제거하세요.