WeChat Mini 프로그램 설계 사양 (2) 명확하고 명확함

2. 명확하고 명확하게

사용자가 미니 프로그램 페이지에 들어가면 우리는 사용자가 현재 어디에 있는지, 어디로 갈 수 있는지 명확하게 알려줄 책임과 의무가 있습니다. 페이지 길을 잃지 않고 쉽게 여행하는 것은 사용자에게 안전하고 즐거운 경험을 제공할 수 있습니다.

1. 명확한 탐색, 쉽게 오고 갈 수 있음

탐색은 사용자가 웹 페이지를 탐색하고 이동할 때 길을 잃지 않도록 하는 가장 중요한 요소입니다. 내비게이션은 사용자에게 내가 어디에 있는지, 어디로 갈 수 있는지, 어떻게 돌아갈 수 있는지 등을 알려주어야 합니다. 우선, WeChat 시스템의 모든 미니 프로그램의 모든 페이지에는 WeChat에서 제공하는 자체 탐색 표시줄이 있어 현재 위치와 돌아가는 방법에 대한 문제를 통일적으로 해결할 수 있습니다. WeChat 수준 탐색에서 일관된 경험을 유지하면 사용자가 미니 프로그램과 WeChat 간 전환 시 새로운 학습 비용이나 사용 습관을 추가하지 않고도 WeChat 내에서 보다 통일된 경험과 대화형 인식을 형성하는 데 도움이 됩니다.

WeChat Navigation Bar

WeChat Navigation Bar는 클라이언트에서 직접 상속됩니다. 네비게이션 바의 색상과 별도로 개발자는 콘텐츠를 맞춤 설정할 필요도 없고 할 수도 없습니다. 그러나 개발자는 내비게이션 시스템이 합리적으로 작동할 수 있도록 미니 프로그램의 각 페이지 간의 점프 관계를 지정해야 합니다.

WeChat 탐색 모음은 탐색 영역, 제목 영역, 작업 영역으로 구분됩니다. 탐색 영역은 프로그램 페이지 프로세스를 제어합니다. 현재 내비게이션 바는 어두운 색상과 밝은 두 가지 기본 색상으로 구분되어 있으며 아래 그림과 같이 iOS와 Android에서 다르게 표시됩니다. 이전 레벨 인터페이스로 돌아가는 것입니다. 개발자는 콘텐츠를 정의할 수 있지만 스타일은 수정할 수 없습니다.

내비게이션 영역(안드로이드)

보통 시스템 내비게이션 왼쪽에 있는 유일한 작업은 "미니 프로그램에서 나가고 위챗으로 돌아가면 프로그램이 백그라운드에서 실행됩니다."입니다.

사용자가 미니 프로그램의 2차 페이지에 진입하면 미니 프로그램 자체에서 복귀 동작을 설계할 수 있는 것을 권장하며, 안드로이드 시스템에 내장된 하드웨어 복귀 버튼을 통해 이전 레벨로 복귀할 수도 있습니다.

WeChat 탐색 바 사용자 정의 색상 규칙(iOS 및 Android)

미니 프로그램 탐색 바는 기본 배경 색상 사용자 정의 기능을 지원합니다. 선택한 색상은 회의 유용성을 전제로 WeChat에서 제공하는 두 가지 기본 세트와 조화롭게 일치해야 합니다. . 탐색 표시줄 아이콘. 다음 색상 선택 효과를 참조하는 것이 좋습니다.

색상 선택 구성표 예:

페이지 내 탐색

개발자는 자신의 기능적 필요에 따라 페이지에 자체 탐색을 추가할 수 있습니다. 그리고 여러 페이지 간에 일관된 탐색을 유지하세요. 그러나 휴대폰 화면 크기의 제한으로 인해 미니 프로그램 페이지의 탐색은 최대한 단순해야 하며 일반적인 선형 탐색에만 사용되는 경우 WeChat 탐색 표시줄만 사용하는 것이 좋습니다.

WeChat 컨트롤 라이브러리는 개발자가 선택할 수 있는 탭 탐색 기능을 제공합니다. 탭 표시줄은 페이지 상단이나 하단에 고정될 수 있으므로 사용자가 다른 탭 페이지 간에 쉽게 전환할 수 있습니다. 클릭 가능한 영역을 보장하려면 탭 항목이 4개를 초과할 수 없습니다. 한 페이지에는 탭 세트가 두 개 이상 있어서는 안 됩니다.

2. 대기 시간을 줄이고 적시에 피드백 제공

페이지를 오래 기다리면 사용자 사이에 나쁜 감정이 생길 수 있습니다. WeChat 미니 프로그램 프로젝트에서 제공하는 기술을 사용하면 대기 시간을 크게 줄일 수 있습니다. 그럼에도 불구하고, 로딩과 대기가 불가피하게 발생하는 경우에는 시기적절한 피드백을 주어 사용자의 기분 나쁜 대기 기분을 해소할 수 있도록 해야 합니다.

스타트업 페이지 디자인

미니 프로그램 스타트업 역시 미니 프로그램이 위챗 콘텐츠에서 브랜드 특성을 어느 정도 보여주는 페이지 중 하나입니다.

이 페이지에서는 미니 프로그램의 브랜드 기능과 로딩 상태를 강조합니다.

시작 페이지의 로고 브랜드 표시를 제외하고 로딩 진행률 표시기와 같은 페이지의 다른 모든 요소는 WeChat에서 제공하며 변경할 수 없습니다. 개발자가 개발할 필요가 없습니다.

드롭다운 표시 영역

모든 WeChat 미니 프로그램 페이지에는 풀다운 시 WeChat에서 디자인한 통합 표시 영역이 있습니다. 브랜드 표시 영역은 브랜드 이름과 WeChat 미니 프로그램 프롬프트로 구성됩니다. 미니 프로그램에 대한 브랜드 및 사용자의 제품 인식을 강화하는 것이 목적입니다.

드롭다운 표시(iOS 어둡고 밝은 색 구성표)

WeChat은 두 가지 세트의 어둡고 밝은 색 구성표를 제공합니다. 여기 표시에 표시된 것처럼 개발자는 주의해야 합니다. 배경색을 사용자 정의할 때 드롭다운 표시의 가시성을 보장합니다.

드롭다운 표시(Android 어둡고 밝은 색 구성표)

WeChat 드롭다운 프롬프트는 사기 및 부정 행위를 방지하기 위해 사용자에게 미니 프로그램의 명확한 소유자를 제공하는 데 사용됩니다. 여기의 로고는 어둡고 밝은 두 가지 솔루션을 제공합니다. 텍스트 색상은 사용자 정의할 수 없습니다. 개발자는 배경 색상을 사용자 정의할 때 드롭다운 로고의 가시성에 주의해야 합니다.

페이지 새로 고침 상호 작용(iOS)

개발자는 드롭다운 상호 작용을 통해 새로 고쳐야 하는 페이지를 사용자 정의할 수 있습니다. WeChat은 이러한 유형의 상호 작용에 대한 표준 기능과 스타일을 제공합니다. 스타일 측면에서는 새로고침 아이콘과 드롭다운 아이콘의 색상을 묶어서 어두운 색상과 밝은 색상 두 세트로 구분하여 사용할 때 개발자는 헤더 텍스트의 조화와 통일성에 주의해야 합니다. 드롭다운 아이콘과 새로 고침 아이콘이 있습니다. 그러나 사용자가 이 유형의 페이지에서 풀다운 상호 작용을 수행하면 WeChat 애플릿 페이지의 표준 로딩 애니메이션이 나타납니다. 개발자는 자신만의 스타일을 개발할 필요가 없습니다.

개발자가 페이지 상단에 탭을 디자인하지 않은 경우 풀다운 동작을 통해 페이지를 새로 고칠 수 있도록 정의하면 제목 아래에 로딩 상태 프롬프트 미니 프로그램 브랜드 표시 영역이 나타납니다. 바 및 새로고침 후 페이지 상단에 표시됩니다.

개발자는 현재 이 로딩 효과를 정의할 수 없습니다.

개발자가 페이지 상단의 탭을 정의하고 탭 아래의 콘텐츠 페이지를 풀다운 작업을 통해 새로 고칠 수 있도록 정의한 경우 새로 고침 후 로딩 상태 프롬프트 미니 프로그램 브랜드 표시 영역이 상단 탭 아래에 나타나며 현재 페이지만 페이지 콘텐츠가 새로 고쳐집니다. 개발자는 현재 이 로딩 효과를 스스로 정의할 수 없습니다.

페이지 새로고침 상호작용(Android)

스타일 측면에서 Android의 새로고침 아이콘과 드롭다운 표시 색상을 번들로 묶어 어두운 솔루션과 밝은 솔루션 두 세트로 나눴습니다. .개발자는 헤더를 사용할 때 본문과 드롭다운 로고, 새로고침 아이콘의 조화에 주의해야 합니다.

WeChat 드롭다운 표시 잘못된 사용 사례

정보의 가시성과 페이지의 유용성을 보장하려면 다음과 같은 잘못된 사용 사례를 피하세요.

페이지 내 탐색

WeChat 제어 라이브러리는 개발자가 선택할 수 있는 깊고 얕은 탭 탐색 솔루션을 제공합니다. 사용자가 다른 탭 페이지 간에 쉽게 전환할 수 있도록 탭 표시줄을 페이지 상단에 고정해야 합니다. 클릭 가능한 영역을 보장하려면 탭 항목이 4개를 초과할 수 없습니다. 한 페이지에는 탭 세트가 두 개 이상 있어서는 안 됩니다.

탭 바의 선택된 상태는 기본적으로 100% 단색이고, 선택되지 않은 상태는 60%입니다. 선택된 상태의 색상을 맞춤 설정할 수 있습니다. 사용자 정의 색상 선택 시 탭의 유용성, 가시성, 조작성을 유지해야 합니다.

페이지 내 로딩 피드백

개발자는 미니 프로그램에서 페이지 콘텐츠의 로딩 스타일을 맞춤 설정할 수 있습니다. 로컬로 사용하든 전체적으로 사용하든 사용자 정의 로딩 스타일은 최대한 간결해야 하며 간단한 애니메이션을 사용하여 사용자에게 로딩 프로세스를 알리는 것이 좋습니다. 개발자는 그림의 예와 같이 WeChat에서 제공하는 통합 페이지 로딩 스타일을 사용할 수도 있습니다.

모달 로딩

모달 로딩 스타일은 페이지 전체를 덮게 되기 때문에 구체적인 로딩 위치나 내용을 명확하게 알 수 없기 때문에 사용자에게 불안감을 줄 수 있으므로 주의해서 사용해야 합니다. 특정 전역 작업을 제외하고 모달을 사용하지 마십시오.

부분 로드 피드백

은 로드된 페이지에서 부분 피드백을 트리거하도록 설계되었습니다. 이 피드백 메커니즘은 보다 구체적이며 페이지 변경이 덜 필요합니다. WeChat에서 권장하는 피드백 방법입니다. 예:

로딩 피드백에 대한 참고 사항

• 로딩 시간이 긴 경우 취소 작업을 제공해야 하며 진행률 표시줄을 사용하여 로딩 진행 상황을 표시해야 합니다.
• 로딩 과정에서 애니메이션 효과는 유지되어야 합니다. 애니메이션 효과 없이 로딩하면 인터페이스가 멈춘 듯한 착각을 일으키기 쉽습니다.
• 같은 페이지에 로딩 애니메이션을 1개 이상 사용하지 마세요.

결과 피드백

사용자가 기다리는 동안 적시에 피드백을 제공하는 것 외에도 작업 결과에 대한 명확한 피드백도 필요합니다. 실제 상황에 따라 다양한 결과 피드백 스타일을 선택할 수 있습니다. 페이지의 로컬 작업의 경우 작업 영역에서 직접 피드백을 제공할 수 있으며, 페이지 수준 작업 결과의 경우 토스트, 팝업 창 또는 결과 페이지를 사용하여 표시할 수 있습니다.

페이지의 부분 작업 결과에 대한 피드백

페이지의 부분 작업의 경우 다중 선택 컨트롤을 클릭하기 전과 후 아래 그림과 같이 작업 영역에서 직접 피드백을 줄 수 있습니다. 일반적인 컨트롤의 경우 WeChat 디자인 센터는 컨트롤 라이브러리와 WeUI 컨트롤 라이브러리를 제공했으며, 여기서 컨트롤은 완전한 작동 피드백을 통해 설계되었습니다.

페이지의 전역 작업 결과 - toast

그 중 Toast는 1.5초 후에 자동으로 사라지며 프로세스를 방해하지 않는 데 적합합니다. 성공을 강조할 필요가 없는 주제. 토스트 양식은 오류 알림에 적용되지 않습니다.

전체 작업 결과를 페이지에 표시 - 팝업 상자

사용자에게 명확하게 알려야 하는 작업 결과의 상태를 팝업 상자를 통해 사용자에게 알리고, 다음 단계 운영 지침이 동반됩니다.

페이지 글로벌 운영 결과 - 결과 페이지

작업 결과가 현재 프로세스의 끝인 경우 작업 결과 페이지를 사용하여 피드백을 제공할 수 있습니다. 이 방법은 사용자에게 작업이 완료되었음을 알리는 가장 강력하고 명확한 방법이며, 실제 상황을 바탕으로 다음 단계에 대한 안내를 제공할 수 있습니다.

3. 이상은 제어 가능하며 탈출구가 있습니다

어떤 작업이나 프로세스를 설계할 때 비정상적인 상태와 프로세스는 쉽게 무시되는 경우가 많으며 이러한 비정상적인 시나리오는 사용자가 가장 좌절하고 도움이 필요한 경우가 많습니다. , 비정상적인 상태의 설계에 특별한 주의가 필요합니다. 예외가 발생하면 사용자에게 필요한 상태 메시지를 제공하고 해결책을 알려주어야 합니다.

사용자가 비정상적인 상황에서 특정 페이지에 머물고 갈 곳이 없는 상황을 방지하기 위해 필요합니다. 2.2에서 언급한 팝업 창과 결과 페이지는 이상 상태를 알리는 역할을 할 수 있습니다. 또한, Form 페이지, 특히 Form 항목이 많은 페이지에서는 오류 항목을 명확하게 지적하여 사용자가 수정할 수 있도록 하여야 한다.

예외 상태 - 양식 오류

양식에서는 오류를 보고하고, 양식 상단에 오류 원인을 알리며, 오류 필드를 식별하여 사용자에게 수정하라는 메시지를 표시합니다.