Web3 UI/UX: 지갑 플로우, dApp, 제품 화면 디자인

첫 Figma 화면 전 3가지 점검 사항 기록

디자인 작업을 수주하기 전에 3가지 점검 사항을 기록합니다: 사용자 태스크, 지갑 상호작용, 개발자 인계 요구사항입니다. 이 조기 검토를 통해 UI 전반에 퍼지기 전에 누락된 제품 결정을 찾아낼 수 있습니다.

이 점검은 최종 디자인 노트에서 검토하고 보여줄 내용도 설정합니다. 각 관찰 사항을 플로우, 와이어프레임, 프로토타입 또는 미결 질문에 연결합니다. 검토 준비가 된 부분과 팀의 입력이 필요한 부분을 확인할 수 있습니다.

이 점검은 새로운 dApp, 지갑, 거래소 또는 랜딩 플로우에 적합합니다. 전체 인터페이스를 교체하지 않고 기존 태스크 하나를 개선하려는 경우에도 유용합니다. 인접한 창의 작업에 대해서는 디자인 및 비주얼을 참조하세요.

지갑 작업을 사용자가 이해하기 쉽게 만드는 방법은 무엇인가요?

2가지 사용자 그룹이 플로우를 결정합니다: 암호화폐에 처음 접하는 사람과 지갑 작업을 아는 사람입니다. 두 그룹 모두에게 다음 단계를 명확하게 제시합니다.

각 지갑 상호작용은 연결부터 트랜잭션 피드백까지 플로우에서 자리를 잡습니다. 와이어프레임은 사용자가 계속 진행하기 전에 보게 될 내용을 보여줍니다. 그런 다음 프로토타입이 합의된 상호작용을 연결하여 검토할 수 있게 합니다.

제품이 설명해야 하는 상태를 문서화합니다:

• 연결: 사용자의 작업과 인터페이스가 확인하는 내용.
• 트랜잭션: 사용자가 확인하기 전에 표시되는 정보.
• 진행: 작업이 진행되는 동안 인터페이스가 전달하는 내용.
• 완료: 사용자가 작업이 완료되었음을 알 수 있는 방법.
• 오류: 발생한 상황과 사용자가 다음에 할 수 있는 작업.
• 가스: 해당되는 경우, 인터페이스가 가스 정보를 표시하는 방식.

제품 및 엔지니어링 팀의 알려진 요구사항을 가져오세요. 상호작용이 확정되지 않은 경우 미결 결정으로 표시합니다. 확정되지 않은 동작을 가정으로 제시하지 않습니다. 플로우 전반의 사용자 대상 문구는 Web3 카피라이팅이 인터페이스를 지원할 수 있습니다.

Figma 인계에 포함될 수 있는 7가지 요소

제품 요구사항에 따라 7가지 요소가 하나의 Figma 인계에 포함될 수 있습니다. 팀은 의도된 플로우를 검토하고 화면이 재사용 가능한 패턴과 어떻게 연결되는지 확인할 수 있습니다.

• 리서치 노트: 고려된 사용자 니즈와 제품 질문.
• 경쟁사 검토: 제공된 참고 자료의 인터페이스 관찰 사항.
• 사용자 플로우: 주요 작업, 결정 사항, 대체 경로.
• 와이어프레임: 비주얼 개선 전 화면 구조와 계층.
• 비주얼 시스템: 인터페이스 전반에 적용된 디자인 방향.
• 컴포넌트 라이브러리: 일관된 화면을 위한 재사용 가능한 요소.
• 클릭 가능한 프로토타입 및 테스트 노트: 연결된 상호작용과 사용성 결과.

화면과 컴포넌트를 컨텍스트에 맞게 구성합니다. 인계 시 상호작용 의도와 미결 질문을 설명합니다. 개발자는 정적인 그림 이상을 검토할 수 있습니다. 제품 리더는 인터페이스 뒤에 있는 결정 사항을 살펴볼 수 있습니다.

비주얼 방향에 대한 더 넓은 정의가 필요하다면 암호화폐 프로젝트 브랜딩을 참조하세요. 제품 문구에 대해서는 암호화폐 콘텐츠 제작이 인터페이스를 지원할 수 있습니다.

첫 메시지부터 최종 디자인 노트까지 5단계

5단계로 제품 컨텍스트에서 검토 가능한 프로토타입과 개발자 인계까지 작업이 진행됩니다. 디자인 시작 전에 포함된 작업, 검토 지점, 일정을 확인합니다.

1. 제품 컨텍스트를 보내주세요. 제품, 대상 사용자, 주요 작업, 기존 화면, 알려진 제약 사항을 공유해 주세요.
2. 자료를 검토합니다. 제공된 리서치, 경쟁사 참고 자료, 현재 화면을 검토합니다. 사용자 플로우에 영향을 미치는 질문을 표시합니다.
3. 매핑 및 와이어프레임. 주요 경로와 중요한 대체 상태를 연결합니다. 와이어프레임으로 비주얼 개선 전 구조를 확정합니다.
4. 디자인 및 프로토타입. 비주얼 시스템과 인터페이스 화면을 만듭니다. 그런 다음 합의된 상호작용을 클릭 가능한 프로토타입으로 연결합니다.
5. 테스트 및 인계. 합의된 작업 범위 내에서 사용성 테스트를 진행합니다. 관련 결과를 반영하고 개발자를 위해 Figma 파일을 정리합니다.

피드백 수집 및 제품 질문 해결을 위해 한 명의 담당자를 지정하세요. 검토가 집중되고 필수 변경 사항과 선호 사항을 분리할 수 있습니다. 더 넓은 소셜 및 콘텐츠 지원은 소셜 미디어 및 콘텐츠를 살펴보세요.

Web3 프로토타입으로 확인할 수 있는 것은 무엇인가요?

3가지 입력 자료가 유용한 시작점을 설정하는 데 도움이 됩니다: 사용자, 작업, 현재 제품 자료입니다. 짧은 제품 설명으로 시작할 수 있습니다. 화면이나 리서치가 있으면 도움이 되지만, 시작에 필수는 아닙니다.

프로토타입은 합의된 인터페이스 상호작용을 보여주고 사용성 검토를 지원합니다. 기본 지갑 통합, 네트워크 응답 또는 스마트 컨트랙트 동작을 검증하지는 않습니다. 연결된 지갑, 네트워크, 컨트랙트가 자체 프롬프트와 응답을 제어합니다. 동작은 달라질 수 있습니다. 합의된 상태를 설계하고 기술적 확인이 필요한 사항을 표시합니다.

요청을 보내기 전에 가지고 있는 자료를 모으세요:

• 제품 요약 및 의도된 사용자.
• 주요 사용자 작업 및 알려진 마찰 지점.
• 기존 화면, Figma 링크, 리서치 또는 워크스루.
• 고려해야 할 지갑, 트랜잭션, 가스, 오류 시나리오.
• 개발 컨텍스트 및 파일을 검토할 담당자.

이 자료를 연락처를 통해 보내주세요. 작업을 검토하고 미결 결정을 기록합니다. 2영업일 이내에 견적서를 받게 됩니다. 보내실 내용: 제품 요약, 대상 사용자, 디자인하려는 주요 플로우.

이용 방법

1. 제품 컨텍스트 보내기제품, 대상 사용자, 주요 작업, 기존 화면, 알려진 제약 사항을 공유해 주세요. 디자인 결정을 검토할 담당자를 지정하세요.
2. 작업 및 일정 확인작업 시작 전에 포함될 플로우, 디자인 요소, 검토 지점을 합의합니다.
3. 플로우 및 와이어프레임 매핑가용 자료를 검토하고 주요 경로와 상태를 매핑하며 화면 구조를 확정합니다.
4. 디자인 및 프로토타입비주얼 시스템과 화면을 만든 후 Figma에서 합의된 상호작용을 연결합니다.
5. 테스트 및 인계합의된 작업 범위 내에서 사용성 테스트를 진행하고 관련 결과를 반영하며 개발자를 위해 Figma 파일을 정리합니다.