경고에 Kadence 블록 사용

Facebook의 Kadence Web Creator Community 회원 중 한 명인 Jake Pfohl은 최근 경고에 Kadence Blocks를 사용하는 몇 가지 예를 게시했습니다. Kadence를 사용하는 이 창의적 블록 모음은 Kadence의 기능을 훌륭하게 구현했으며 StartBlogging101.com 및 StartBloggingBlocks를 실행하는 Jake에게 연락하여 그의 게시물을 더 넓은 Kadence 커뮤니티와 공유할 수 있는지 확인했습니다. 경고에 대한 자습서. 전체 공개, Jake는 Kadence 계열사입니다.

Jake는 친절하게 예라고 대답했습니다. 그래서 여기 웹사이트 방문자와 중요한 정보를 전달하는 방법에 대해 생각하게 하는 경고의 몇 가지 샘플이 있습니다.

웹사이트에서 알림을 사용해야 하는 이유와 시기

활동 완료에 대한 성공을 알리거나 특정 콘텐츠에 주의를 환기시키려는 경우 WordPress 웹 사이트에서 경고를 사용하는 것은 불가피합니다. 경고는 작업에 대한 피드백을 제공하거나 사용자에게 작업의 결과에 대해 경고하는 등 사용자 경험 디자인에서 중요한 역할을 합니다. 경고 표시에 대한 의식적인 디자인 결정을 내리고 경고에 주의를 끌기 위해 색상과 레이아웃을 사용하는 것은 사용자가 중요한 사실에 주의를 기울이는 간단한 문장으로 바꾸는 데 중요합니다.

사이트의 사용자에게 경고를 표시할 때 경고가 어느 정도 전달되기를 원합니다. 경고로 인식할 수 있어야 하며 현재 진행 중인 작업, 수행해야 하는 작업 또는 사용자가 알아야 하는 내용에 대한 명확한 메시지로 즉시 확인할 수 있어야 합니다.

방금 읽었습니까?

불행히도 웹은 작성된 콘텐츠를 공유하기 위한 수단으로 시작되었지만 사용자가 문서를 거의 읽지 않고 곤경에 처하고 당면한 작업을 직관적으로 이해할 수 없는 경우에만 문서를 참조한다는 사실을 시간이 지나면서 알게 되었습니다.

그들은 문제를 해결하려고 시도하기보다 포기할 가능성이 더 큽니다. 따라서 사용자가 웹사이트에서 최대한 명확하고 친절하게 성공하는 데 필요한 데이터를 얻을 수 있도록 알림을 고려하고 잘 설계해야 합니다.

웹사이트 알림 유형

사용자가 웹사이트에서 확인해야 할 다양한 유형의 경고가 있습니다. 여기에는 다음이 포함되지만 이에 국한되지는 않습니다.

오류 메시지

좋은 오류 메시지는 정중하고 정확하며 건설적입니다. 그들은 명확하게 볼 수 있어야 하고, 문제를 해결하는 데 필요한 작업을 줄이고, 그 과정에서 사용자를 교육해야 합니다. 오류 메시지는 사용자에게 시스템 작동 방식에 대해 약간 가르치고 시스템을 더 잘 사용하는 데 필요한 정보를 제공하는 동시에 간단하고 요점이어야 합니다. 오류 메시지는 무언가 잘못되었다는 의미이며 관련 경고가 있어야 합니다.

성공 메시지

작업을 수행한 다음 해당 작업이 완료되었는지 여부를 궁금해하는 것보다 사용자에게 더 혼란스러운 것은 없습니다. 예를 들어 사용자가 문의 양식을 작성하면 다음 단계는 어떻게 됩니까? 메시지가 통과되었습니까? 언제 응답하시겠습니까? 누가 응답할 것인가? 사용자는 자신의 행동이 의도한 결과를 얻었는지 알고 싶어하므로 다음에 일어날 일을 알려야 합니다. 문제가 발생하고 버그가 있더라도 실제로 문제가 발생하지 않았을 때 문제가 발생했음을 알리는 것보다 문제가 발생했음을 알리는 것이 좋습니다.

재고 부족 알림

전자 상거래 구현에서 재고 부족 알림은 사용자에게 신속하게 조치를 취해야 함을 알릴 수 있습니다. 재고 알림은 사용자가 쇼핑하려는 품목의 공급 부족에 따라 조치를 취하도록 독려할 수 있습니다. 알림은 쇼핑객에게 해당 정보를 제공하는 완벽한 방법이 될 수 있습니다. 정보 경고는 이를 수행하는 쉬운 방법일 수 있습니다.

프로모션 알림

전자 상거래 상점에서 판촉을 실행 중인 경우 해당 판촉에 대한 알림은 창구 후 쇼핑과 완료된 판매 사이에 차이를 만들 수 있습니다.

정전 알림

어떤 이유로 시스템이 중단된 경우 웹사이트와 관련이 없더라도 알림을 통해 고객 서비스 과부하를 줄이고 문제가 발생했을 때 고객이 안도감을 느낄 수 있습니다. 예를 들어, 특정 지역에 서비스 중단이 있다는 ISP의 알림은 전화 지원 부하를 줄일 수 있습니다. 매장에 지원 이메일 시스템에 기술적인 문제가 있는 경우 고객이 요청을 시도하기 전에 고객에게 알리는 것이 기대치를 관리하는 데 도움이 될 수 있습니다.

구별하는 중요성

모든 경고가 동일하게 생성되는 것은 아닙니다. 재고 부족 알림은 오류 메시지와 같은 비중을 갖지 않아야 합니다. 중력을 설정할 수 있는 방법에는 여러 가지가 있습니다. 여기에는 언어, 글꼴 크기, 글꼴 스타일, 텍스트 색상, 경고 테두리 모양, 스타일, 크기 및 이미지가 포함됩니다.

색상을 중요성의 유일한 표시로 사용하지 마십시오. 색맹 사용자가 볼 수 있는 중복 신호를 항상 포함하십시오. 또한 알림에 이미지를 사용하는 경우 화면 판독기가 사용자에게 중요한 알림을 적절하게 전달할 수 있도록 필요에 따라 접근성 대체 텍스트 및 aria 레이블을 적절하게 추가해야 합니다.

경보 경험의 표준화

경고가 디자인에서 표준화되었는지 확인하면 사용자가 경고를 받고 있음을 인식할 수 있습니다. 종종 경고를 표시해야 할 때 사용자는 주의를 기울여야 하는 다른 많은 요구 사항이 있습니다. 경고가 눈에 띄도록 하면 경고가 필요한 주의를 끌 수 있도록 경고처럼 보이는 방식으로 스타일이 지정됩니다.

Kadence Blocks로 그렇게 하는 것은 쉽습니다. 여기서 Jake의 작업이 시작됩니다.

Kadence Blocks로 다양한 스타일의 알림을 생성하는 방법

Jake는 4가지 유형의 경고를 만들었으며 그 중 대부분은 자신의 클라우드 서비스(Kadence Cloud 사용)에서 무료로 다운로드할 수 있습니다. 그의 사이트에서 이것을 무료로 얻는 방법을 살펴볼 수 있습니다. 그러나 우리는 또한 웹사이트, 청중 및 커뮤니케이션 요구 사항에 맞게 맞춤화된 자체 알림을 개발하는 것이 얼마나 쉬운지 보여주고 싶었습니다.

Jake의 경고를 살펴보겠습니다. 사이트의 Kadence Blocks 디자인 라이브러리를 Jake의 서버에 연결한 후 사이트에 쉽게 통합할 수 있는 스타일이 지정된 여러 경고를 볼 수 있습니다. 이들 중 일부는 프로 옵션이며 Jake는 흥미로운 경고 이상의 디자인 요소를 제공하고 있습니다. (제이크가 이에 대해 알려드리겠습니다.)

Kadence Cloud 구현을 통해 Jake의 무료 경고를 다운로드하고 어떻게 설계되었는지 살펴볼 수 있습니다. 그는 그것들을 6가지 기본 유형으로 정리했습니다.

• 정보 알림
• 성공 알림
• 경고 경고
• 위험 경고
• 기본 알림
• 2차 경보

각각은 스타일과 색상을 사용하여 응집력 있는 방식으로 사용자에게 메시지를 전달합니다. 이 컬렉션을 사용하는 경우 사이트에서 경고를 받고 있는 것이 분명합니다.

그가 지은 방법

Jake와 Start Blogging 팀은 Kadence Blocks를 사용하여 Kadence에서 사용할 수 있는 다양한 스타일을 사용하여 각 경고를 작성했습니다. 이들은 모두 Kadence 섹션 블록 내에서 설정됩니다. 경고 섹션 차단의 기본 설정은 모두 다음을 사용합니다.

• 경고 섹션 블록 패딩은 상단 및 하단에 대해 1.5 REM, 왼쪽 및 오른쪽에 대해 3 REM으로 설정되었습니다.
• 테두리 너비는 4로 설정된 왼쪽을 제외하고 0으로 설정되었습니다. 그러면 왼쪽 테두리 색상이 더 강한 색상으로 설정되지만 배경 색상과 동일한 음영 내에 있습니다.
• 경고 내의 텍스트는 쉽게 사용자 정의할 수 있는 단락 텍스트를 사용하여 설정됩니다.

이러한 경고 블록을 만드는 것은 매우 간단합니다. 이것이 우리가 Jake가 한 일을 보여주고 싶었던 이유 중 하나입니다. Jake의 작업을 쉽게 복제할 수 있지만 그의 더 복잡한 블록 중 일부는 필요에 따라 그의 블록으로 Pro로 갈 가치가 있습니다.

클라우드 서버를 통한 공유

Jake는 Kadence Cloud를 사용하여 Kadence Blocks에 구축된 이러한 디자인의 무료 버전을 제공하고 프로 버전을 판매하고 있으며, 그는 혼자가 아닙니다. Kadence Blocks를 사용하여 놀라운 콘텐츠를 만들고 이를 통해 추가 수익원을 창출하는 디자이너, 대행사 및 개발자의 경제가 성장하고 있습니다. 향후 블로그 게시물에서 더 많은 Kadence 제작자를 소개할 예정입니다.

Kadence Cloud를 사용하여 다른 WordPress 사용자에게 디자인을 판매하는 비즈니스를 생성할 수 있을 뿐만 아니라 자신의 다양한 웹사이트 간에 디자인 요소를 공유하는 Kadence Cloud 인스턴스를 생성할 수 있습니다. 고유한 페이지를 구축하는 클라이언트와 함께 작업하는 경우 고유한 클라우드 인스턴스에 디자인 요소를 제공하여 고객이 디자인 요소 라이브러리를 사용하는 데 도움을 줄 수 있습니다. 이것은 물론 경고에 국한되지 않습니다. Kadence Blocks로 구축할 수 있는 모든 것은 자신의 디자인 라이브러리에 추가할 수 있습니다.

Kadence Cloud 페이지에 전체 비디오 설명이 있습니다. Kadence Cloud는 Kadence Full Bundle에 포함되어 있으므로 Kadence로 더 빠르게 설계를 시작하고 추가 수익원을 쉽게 구축할 수 있습니다. Kadence Full Bundle에는 Kadence Conversions, Kadence Shop Kit 및 기타 여러 유용한 도구를 비롯한 여러 유용한 도구도 포함되어 있습니다.