stageshow은(는) 무엇을 하나요?
미니어처 제품 UI: 공간 안에 프레임된 믿을 수 있는 인터페이스, 하나의 정적 이미지 또는 하나의 작업이 발생하는 짧은 애니메이션. 시청자는 화면을 인식하고 작업이 일어나는 것을 봅니다.
하나의 아이디어
실제 제품처럼 읽히며, 시청자가 필요로 하는 것으로 단순화되고, 의도적으로 프레임되며, 모든 움직임에는 원인이 있습니다.
다섯 가지 실패 방식:
- 너무 많은. 모든 행에 실제 텍스트, 곳곳에 숫자, 모든 것이 빽빽함. 세부 사항이 많을수록 생성된 것처럼 보입니다.
- 와이어프레임. 회색 덩어리 두 개와 버튼 하나. 너무 작게 제작되었거나, 알아볼 수 있게 만든 것이 제거되었습니다.
- 박스형. 전체 창이 균일한 여백으로 카드 안에 축소됨: 제품 샷이 아닌 붙여넣은 스크린샷.
- 평평한. 모든 객체가 동일한 테두리 카드에서 동일한 무게를 가짐. 눈이 머물 곳이 없습니다.
- 밋밋한. 브리핑 내용이 무엇이든 간에 회색 창과 커서. 브리핑의 룩과 에너지(청사진, 색상 위의 유리, 다이나믹 아일랜드, 마스코트)가 핵심입니다. 요청한 내용을 가져와 규칙에 따라 구축하세요.
examples/hero-demo가 입력된 팝업과 터미널 새틀라이트(새틀라이트는 더 작은 두 번째 객체, 영수증, 휴대폰 또는 세부 카드로, 히어로의 가장자리에 걸쳐 있음)로 하는 것처럼.
수정 방법: 조용한 회색의 완전하고 구조화된 화면, 스토리가 전달하는 내용에만 실제 단어, 나머지는 자리 표시줄, 숨 쉴 공간, 눈이 스토리가 있는 곳으로 향하도록 하는 크롭. 단어를 단순화하되, 맥락은 단순화하지 마세요. 빈 구석, 리스트 아래의 공백, 창을 채우기 위해 펼쳐진 행, 접시(뒤의 배경 또는 색조 필드) 위에 떠 있는 창: 미완성이지만 차분하지는 않습니다.
이것들은 브라우저 자동화가 아닌 제작된 일러스트레이션입니다. a.click()은 커서가 누르는 것을 그리고, a.set()은 장면을 변경합니다.
얼마나 강하게 눌러야 하는가
제품 디자이너가 평가받을 출시 페이지를 구축하는 방식으로 구축하세요. examples/ 안의 골드 예제가 기준이며 참고 자료가 아닙니다. 만약 여러분의 결과물이 가장 가까운 골드 옆에 있을 때 더 비어 있거나, 더 평평하거나, 더 작다면, 그것이 첫 번째 수정 사항입니다. 그런 다음 여러분이 아는 가장 엄격한 디자이너가 프레임을 보는 방식으로 보세요. 잘못된 것 하나를 스크린샷 찍어서 "이게 뭐야?"라고 보내는 그 디자이너 말입니다. 아바타에서 벗어난 점, 혼자 있는 줄의 단위, 아일랜드 아래의 그리버, 카드에 닿은 복사본. 그 스크린샷을 상상할 수 있다면, 다음 수정 사항을 찾은 것입니다.
워크플로우
대부분의 품질은 코드 작성 전에 결정됩니다. 먼저 계획을 작성하세요: 위치, 초점 객체, 작업, 결과물, 생략할 수 있는 것.
- 매체와 장소. 정적 또는 애니메이션(루프, 한 번 보기, 또는 호버). 페이지, 바탕, 너비. 보여질 크기로 디자인하세요. 카피 옆의 히어로(
hero-demo)는 약 720 × 340, 전체 너비 히어로(linear)는 900~1100 너비, 카드는 400 × 300이며 1:1로 표시됩니다. 데모의 경우 약 320 미만은 안 되지만, 벤토 타일이나 새틀라이트 카드는 더 작을 수 있습니다. 휴대폰 컬럼에 들어갈 수 있는 모든 데모는 컬럼 너비(358)에 맞춰compact디자인으로 제공되며, 이는 단순한 축소가 아닌 재설계입니다(references/framing.md, 작은 형식과 페이지). 타일 그리드는 하나의 세트입니다.references/bento.md로 계획하세요. - 룩. 제품의 코드나 사이트를 참고하여 토큰을 키트의 토큰에 매핑합니다(
references/looks.md). 개발자가 자체 컴포넌트를 요청하면 키트의 작은 부품 대신 스테이지 내에서 사용하세요. 그렇지 않으면 테마(라이트, 다크, 청사진, 유리), 팔레트(액센트, 모노) 및 충실도(fidelity)를 결정합니다.minimal은 모두 막대,standard는 의미를 전달하는 곳에 단어, 나머지는 막대,realistic은 모든 곳에 실제 콘텐츠입니다. 기본값은 라이트, 액센트, 스탠다드입니다. 히어로 규모에서, 이름이 있는 실제 제품을 위해, 또는 정적 이미지의 주제가 리스트나 페이지일 때는 realistic으로 가세요.Text filler로 필러를 한 번 작성하면 충실도가 결정합니다. 제품 고유의 아이콘, 실제 크롬, 알아볼 수 있게 하는 콘텐츠를 사용하세요. 스타일(카와이, 종이, 포스터 컬러)이 포함된 브리핑은 그 스타일을 완전히 적용하되, 여전히 이 규칙에 따라 구축합니다. - 스토리. 그 형태(
references/motion.md, 스토리): 사용하는 느낌, 흐름, 또는 시스템이 하는 일. 35개의 비트와 결과물, 1016초. 설명할 수 없는 커서 이동은 없습니다. 원인 없이 데이터가 보이는 상태로 되감기지 않습니다. 더 풍부한 스토리와 더 차분한 프레임 사이에서 프레임을 선택하세요. - 예제에서 시작하세요. 가장 가까운 골드 예제(아래 골드 표)를 찾아 필름으로 만드세요(
node scripts/film.mjs "<preview>/?capture=<gold>" --select '#example' --still --out gold.png;npm run dev가 프리뷰를 제공합니다). 그 폴더를 프로젝트에 복사하여 시작점으로 삼으세요. 대충 보고 다시 작성하지 마세요. 가장 빠른 루프: 여기examples/<yours>/에 복사하면 프리뷰가 인식하고?capture=<yours>가 필름으로 만듭니다. 그런 다음 통과하면 호스트로 이동시키고 키트 가져오기 경로를 수정하세요. 구조 유지: 스테이지 크기, 크롭과 블리드, 행과 타입 크기, 간격, 스크립트의 비트, 키트 부품. 이제references/craft.md를 전체적으로 읽으세요. 짧고, 골드가 보여줄 수 없는 정지 프레임 규칙과 골드에 포함되지 않은 사례들을 담고 있습니다. 그런 다음 룩과 콘텐츠를 브리핑의 제품으로 교체하세요: 2단계의 토큰, 제품 고유의 아이콘, 크롬 및 단어. 이름만 바꾼 복사본은 완료된 것이 아닙니다. 브리핑의 제품처럼 읽혀야 하며, 골드의 제품처럼 읽혀서는 안 됩니다. 어떤 골드도 여러분의 스토리를 말해주지 않는다면, 두 부분으로 선택하세요. 먼저 레이아웃(references/framing.md의 표에서 선택; 각 레이아웃은 예제를 지정함)을 선택하고, 스토리가 다르더라도 해당 예제를 복사하세요. 그런 다음 스토리가 가장 가까운 예제에서 비트에 대한 모션을 빌리고, 둘 다 가지고 있지 않은 것을 같은 스타일로 구축하세요. 그런 다음 프레임을 지정하세요: 스토리가 발생하는 패널로 크롭하고, 최종 보이는 크롭으로 판단합니다(references/framing.md에는 규칙과 레이아웃 표가 있습니다). 간단히 말해: 하나의 거터, 완전한 거터 또는 훨씬 더 넓게; 필러만 블리드; 열리는 것은 안에 유지; 창은 모양 유지; 페이지가 바탕이므로 흰색 또는 어두운 페이지의 히어로 아래에는 접시가 없고, 사방에 공기가 있는 전체 창도 없음;unframed는 개발자가 요청할 때만; 데드 코너 없음. 골드 옆의 두 너비에서 하나의 정지 이미지를 필름으로 만드세요. 여러분의 것이 더 비어 있거나, 더 평평하거나, 더 박스형이라면, 움직임 전에 프레임을 먼저 수정하세요. - 화면. 실제 문자열 수를 세세요. 보통 3~7개입니다(
references/craft.md, 절제): 단어에 대한 예산이지 요소에 대한 예산이 아닙니다. 키트의 토큰(Bar,Text,Row)으로 구축하세요. 이동하기 전에 모든 컨트롤의 텍스트를 맞추세요. 커서가 닿는 것을data-target과data-cursor로 표시하세요.rect()로 측정하고, 절대값을 하드코딩하지 마세요. - 안무.
ActAPI. 마운트된 상태를 유지하고 토글하여 종료 애니메이션이 작동하도록 하세요(Bubble과Fly는 명시적으로 핸드오프). 객체 자체만이 아니라 관계에 애니메이션을 적용하세요: 새 행은 그 아래 행을 운반하고, 크기가 조정되는 표면은 텍스트를 늘리지 않습니다. 비트는 겹치고, 그룹은 지연되어 나타나며, 결과물은 유지되고, 루프는 시작된 곳에서 끝나거나 보이는 원인으로 리셋됩니다. - 리허설. 먼저
poster를 설정하세요. 대부분의 사람들은 그 프레임만 봅니다(썸네일, 축소된 모션, 스크린샷). 따라서 변경 중간에 포착된 것이 아니라 스토리를 자체적으로 전달하는 비트여야 하며, 결과는 치워지지 않고 화면에 남아 있어야 합니다(references/motion.md, 스토리). 그런 다음 정지 이미지뿐만 아니라 루프를 필름으로 만드세요: 표시된 너비와 390에서의 연속 샷(contact sheet), 그리고 모든 프레스, 메뉴, 모프 및 루프 이음새를 단계별로 확인하세요(references/rehearse.md). 정지 이미지는 팝을 보여줄 수 없습니다. 모든 프레임을 읽고, 가장 큰 보이는 결함부터 수정하세요(프레이밍, 그다음 계층 구조, 그다음 모션, 그다음 다듬기), 다시 필름으로 만드세요. 그런 다음 가장 가까운 골드 옆에 놓고references/teaching.md의 전체 구성 및 스타일 쌍을 여러분의 정지 이미지에 대한 질문으로 답하세요(눈이 가장 먼저 닿는 곳은 어디이며, 그것이 결과물인가? 하나의 창, 타일 또는 장치가 명확하게 주도하는가?). '아니오'가 가장 큰 결함입니다.film.mjs --gate가rehearsal passed로 끝나는 것은 필요 조건이지 충분 조건이 아닙니다. 그런 다음references/rehearse.md의 마지막 패스를 실행하세요: 새로운 시각으로 검토(references/review.md)와 컴포넌트 옆의REHEARSAL.md(템플릿은references/verify.md, 인계): 복사한 골드, 변경한 사항, 확인하지 않은 사항.
매 라운드마다 돌아오는 결함들, 각각 규칙과 함께; 인계하기 전에 확인하세요:
- 이동하지 않고 교체되는 콘텐츠 (
references/motion.md, 텍스트 및 값 변경). - 눈이 머무는 회색 막대; 필러는 가장자리에 속합니다 (
references/craft.md, 절제). - 창 뒤의 접시, 또는 사방에 공기가 있는 떠 있는 창; 창이나 휴대폰은 스테이지의 최소 2/3를 채우고 가장자리에서 벗어나야 합니다 (
references/framing.md, 규칙 5 및 작은 형식과 페이지). - 빈 밴드, 잘린 컨트롤 및 그림자 (
references/craft.md, 절제;references/framing.md, 규칙 4). - 재고(stock) AI 및 가짜 로고: 반짝임, 보라색, 컬러 사각형 안의 글자 (
references/craft.md, 아이콘 및 로고). - 복잡한 행과 고르지 않은 삽입 (
references/craft.md, 절제 및 간격 및 정렬). - 긴 유지와 원인 없는 리셋 (
references/motion.md, 루프). - I-빔 아래에 있지 않은 선택 (
references/motion.md, 드래그 및 선택). - 손으로 그린 상태 표시줄 또는 홈 인디케이터; Phone이 둘 다 그립니다 (
references/craft.md, 크롬 및 장치). - 기호와 함께 중앙 정렬된 금액 (
references/craft.md, 간격 및 정렬).
예제
시작하기 전에 가장 가까운 것을 필름으로 만드세요(4단계). 골드 예제는 품질 기준입니다. 제품 연구(Product studies)는 상호작용을 빌리기 위한 것이며, 절대 다른 제품의 정체성을 빌리지 않습니다. 스펙 시트(Specimen sheets)는 카탈로그이지 구성(composition)이 아닙니다. 모든 것을 npm install과 npm run dev로 실행하세요. teaching/에는 문제 진단을 위한 나쁜/좋은 쌍(references/teaching.md)이 있습니다. 나쁜 절반은 절대 시작점이 아닙니다.
골드
| 필요 | 예제 | 배울 점 |
|---|---|---|
| 정적 또는 기능 카드 | static-card | 조용한 계층 구조, 하드 크롭, 하나의 새틀라이트, 선택된 고객, 그 이웃 및 합계에만 실제 단어 |
| 다크 정적 | dark-bento | 한 번에 하나의 신호 전달; 앨범 아트가 음악 앱으로 유지 |
| 애니메이션 히어로, 제스처 | hero-demo | 5개의 비트, 명명된 대상, 주석, 앞으로 나오는 터미널 |
| 안무, 커서 없음 | payout-flow | 느린 중첩 도착, 읽기 시간, 유지되는 결과물 |
| 제자리에서 콘텐츠 변경 | choreography | 유지된 트랙, 소프트 마스크, 종속 타이밍 |
| AI 답변 | ai-chat | 전송된 질문, Thinking, 높이와 함께 스트리밍되는 답변, 마지막에 출처; 반짝임 없음, 보라색 없음 |
| AI와 카드 | ai-cards | 객관식 카드가 답변되고 레코드로 유지됨, 스레드에서 열리는 옵션 카드, 자체 버튼에서 예약됨 |
| 양식 유효성 검사 | form-error | 오류의 원인이 된 필드에 오류 표시, 수정 시 지워짐, 그런 다음 버튼이 자체적으로 확인함 |
| 재정렬 드래그 | reorder | 그립으로 들어 올려진 행, 다른 행들이 공간을 만들고, 제자리에 드롭됨 |
| 차트 스크럽 | chart-scrub | 포인터를 따르는 가는 선과 점, 헤드라인 값이 그 아래의 날짜로 롤링됨 |
| 표 편집 | table-edit | 제자리에서 편집된 셀, 그런 다음 그것이 공급하는 합계가 한 비트 후에 롤링됨 |
| 로딩에서 콘텐츠로 | loading | 콘텐츠 자체 형상의 스켈레톤, 위에서 아래로 해결되는 행, 전체에 걸친 실제 크롬 |
| 다크 히어로 | dark-hero | 검정색 위의 표면 단계에서 깊이, 하나의 밝은 색상, 자체 알약에서 변경되는 상태 |
| 실시간 공동 작업자 | presence | 각 사람이 모든 곳에서 하나의 색상, 자신의 커서를 타는 이름, 문서 자체 표시로 표시된 작업 |
| 시스템 스토리 | subscriptions | 칩이 행으로 날아가고, MRR이 롤링되며, 두 번째 장면이 리셋임 |
| 클로즈업 | close-up | 창 크롬과 함께 1.4배의 하나의 컨트롤, 전체 행, 일치하는 큰 커서 |
| 하나의 많은 | many-of-one | 모든 가장자리에서 벗어난 하나의 것의 그리드, 깊이에 의해 초점이 맞춰진 하나의 타일, 단어가 있는 유일한 타일 |
| 페이드 크롭 | fade-crop | 가장자리에서 벗어나는 대신 필러 위에서 발치에서 희미해지는 창 |
| 제품 위의 패널 | panel-annotation | 제품 여백 위의 설정 패널, 설정에서 변경된 항목으로의 하나의 리더 |
| 겹치는 창 | overlap | 창 앞의 카드, 창의 사이드바 라인에 가장자리가 있음 |
| 쌓인 카드 | stacked-cards | 하나의 너비에 두 개의 컴포넌트, 작은 간격, 아래쪽 컴포넌트는 하단에서 벗어남 |
| 반대쪽 모서리 | opposite-corners | 벤토 타일: 왼쪽 하단에 카피, 오른쪽 상단 모서리에 매달린 제품 |
| 기울어진 스택 | tilted-stack | 느슨한 종이 더미, 작은 교대 각도, 맨 위 카드만 단어가 있음 |
| 모서리 칩 | corner-chip | 창 모서리에 중앙 정렬된 작은 칩, 반은 외부에 있음 |
| 단색 | monochrome | 다른 회사의 제품을 한 줄로, 회색조, 발치에서 희미해짐 |
| 창 행 | window-row | 하나의 높이에서 나란히 있는 세션: 깊이에 의한 초점, 스테이지에 의해 잘린 이웃, 필러만 크롭됨 |
| 창과 휴대폰 | device-pair | 하나의 이벤트를 알리는 대시보드와 잠금 화면; 휴대폰은 여백 위에 걸쳐 있지만, 절대 그림 위에는 걸치지 않음 |
| 관련 객체 | story | 송장, 계획, 커넥터, 롤링 합계 |
| 달력 드래그 | calendar | 채워진 주, 하나의 초점 이벤트, 측정된 픽업 |
| 자유 드래깅 | freeform-drag | 그랩 오프셋, 측정된 그리드, 스냅되는 드롭 슬롯 |
| 휴대폰 앱 | phone-touch | 카드가 하나의 객체로 화면 안으로 열리고, 루프는 다시 접힘 |
| 다이나믹 아일랜드 | dynamic-island | 하나의 검은색 모양, 그 콘텐츠는 별도의 레이어 |
| 메시지 | messages | 컴포저, 타이핑, 영수증, 버블의 수명 |
| 커서 | cursors, cursor-morph, cursor-resize | 5가지 스타일, 요소 기반 종류, 가장자리 및 모서리 크기 조정, 커서 없음 |
| 주석 | annotations | 리더, 치수, 흐름 및 움직이는 대상; references/annotations.md |
| 기능 그리드 | bento | 하나의 히어로, 하나의 창, 하나의 통계, 하나의 객체, 하나의 다이어그램 |
| 다크 규칙 그리드 | ruled-bento | 공유 규칙 및 기술 이미지 |
| 소비자 그리드 | staggered-bento | 오프셋 타일, 그래픽 아트, 물리적 객체 |
| 이미지 리드 히어로 그리드 | hero-grid | 다양한 바탕 |
(번역 참고: 원문이 중간에 잘렸습니다. 전체 예제 표가 번역되었으며, 이후 생략된 내용도 동일한 방식으로 번역되어야 합니다.)