H5가 갑자기 인기를 얻었습니다
WeChat과 Moments의 급속한 발전을 통해 H5는 다운로드와 클릭이 필요 없다는 특성으로 인해 빠르게 인기를 얻었으며 뜨거운 작은 것이 되었습니다. TV, 잡지, 옥외광고 등 전통 미디어가 해마다 감소하고 있는 것에 비해, 브랜드 마케팅의 디지털과 모바일 측면에 대한 투자는 해마다 증가하고 있으며, 모든 채널 예산 중 모바일 기술에 대한 투자가 가장 빠르게 증가하고 있습니다. , 다른 채널보다 훨씬 높은 성장세를 보이고 있습니다. 모바일 마케팅이 대세로 자리 잡았습니다.
그렇다면 H5란 어떤 기술일까요?
H5는 무슨 뜻인가요? H5는 HTML5의 약자로 고급 웹 기술입니다.
html과 html5의 차이점은 무엇인가요?
일반적으로 통용되는 웹 기술 버전은 HTML4이고 이 버전은 1997년에 출시되었습니다. H4에 비해 H5는 더 많은 상호 작용과 기능을 가지고 있습니다. 가장 큰 장점 중 하나는 모바일 장치에서 멀티미디어를 지원한다는 것입니다.
아직도 이해가 안 되시나요?
말하자면 우리가 흔히 보는 초대장, 슬라이드, 미니게임... 다 H5 웹페이지인데, 우리가 온라인에서 흔히 보는 웹페이지와 본질적으로 똑같습니다.
H5는 무엇을 할 수 있나요?
여기서는 대략 세 가지 카테고리를 만들었습니다.
1. 브랜드 커뮤니케이션: 형식은 일반적으로 브랜드 출시, 요약 보고서, 인사 전달입니다.
2. 프로모션: 일반적으로 인사말 카드 초대, 게임 상호 작용 및 질문 답변에 대한 상품 형태로 제공됩니다.
3. 제품 디스플레이: 일반적으로 스토리텔링 및 퍼포먼스 디스플레이 형태로 제공됩니다.
3가지 유형의 H5 페이지에 대해 이야기해보겠습니다
브랜드 커뮤니케이션 H5 - 브랜드의 마이크로 공식 웹사이트와 동일하며 브랜드 이미지를 구축하고 브랜드의 정신적 태도를 사용자에게 전달하는 경향이 더 큽니다. 콘텐츠 측면에서는 태도와 주제를 내세우고, 디자인 측면에서는 사용자가 브랜드에 깊은 인상을 남길 수 있도록 브랜드 기질에 맞는 시각적 언어를 사용해야 합니다. 예를 들어 브랜드 커뮤니케이션 유형, 요약보고형 브랜드 커뮤니케이션, 공익 전달형 브랜드 커뮤니케이션, 인재 채용 유형의 브랜드 커뮤니케이션
디자인 방법 등이 있습니다. 브랜드 커뮤니케이션형 H5페이지?
콘텐츠에 대하여
적절한 활용 - 공명 모색
핫스팟 조합 - 사업 부문의 완벽한 통합
비주얼에 대하여
전체 - 분위기 렌더링
세부 캐릭터화 - 캐릭터 및 요소 조화
H5 케이스 감상 예시:
브랜드 커뮤니케이션 브랜드 출시형
Tencent - under life, Above 상상
이벤트 프로모션형 H5—— 이벤트 운영 페이지 사용자 공유 및 커뮤니케이션을 촉진하여 폭발적인 커뮤니케이션 효과를 창출하려면 더 강력한 상호 작용, 더 높은 품질, 더 많은 주제별 디자인이 필요합니다. 이벤트 프로모션을 위한 축하카드 초대형, 이벤트 프로모션을 위한 인터랙티브 게임형, 이벤트 프로모션을 위한 예의질문응답형 등
이벤트 프로모션 H5 페이지를 디자인하는 방법은 무엇일까요?
컨텐츠에 대하여
클릭포스팅 - 제대로된 클릭베이트가 되려면 먼저 그릇에 와서 이야기 나눠보세요
참여감 - 문턱이 낮고 참여하기 쉬우며, 컨텐츠가 울려 퍼지고, 수익이 전달을 이끈다
비주얼에 대하여
디테일 및 통일성 - 복고풍의 시각적 스타일을 위해서는 글꼴이 유머러스하고 장난스러운 톤을 위해 너무 현대적이어서는 안 되며, 카피라이팅은 감정적인 내용을 위해 너무 진지해서는 안 됩니다. 너무 화려해지지 마세요.
임팩트 - 티타늄 개 눈을 멀게 하는 것이 가장 좋습니다. 사용자가 "숏 오일은 좋은데 이 페이지는 좀 디아오"라는 기분으로 클릭하고 공유할 수 있도록
예:
Answers to 이벤트 프로모션 공손한 타입
투펑 여행 네트워크: 9년 전으로 돌아가, 당신은 어떤 삶을 선택하시겠습니까?
제품 디스플레이 H5——제품 기능 소개에 중점을 두고 H5의 대화형 기술 장점을 사용하여 제품 기능을 완전히 표시하고 사용자의 구매 및 구매를 유도합니다. 예를 들어 , 스토리텔링 유형의 제품 디스플레이, 성능 디스플레이 유형의 제품 디스플레이 등
제품 디스플레이 H5 페이지를 디자인하는 방법은 무엇인가요?
컨텐츠에 대하여
좋은 이야기를 전하라 - 공감하라
차별화된 디스플레이 - 제품의 개성과 톤을 찾아라
비전에 대하여
전체 - 명확하고 간결함
상세 설명 - 제품 중심, 성능 설명
예:
스토리텔링 유형의 제품 디스플레이
1947년 엽서
디자인 방법 H5 형식이나 내용 면에서 사람의 마음을 사로잡는 페이지는 무엇일까요?
공식적으로——
1. 슬라이드쇼: 빈번하고 작은 요구 사항에 적합합니다. 예를 들어, 예산이 거의 없이 정기적으로 출시되는 콘텐츠, 인기 주제와 결합된 마케팅은 주기가 매우 짧습니다.
2. 인터랙티브 애니메이션: 제작 주기와 비용이 상대적으로 높고 사전 계획이 필요합니다. 고품질 H5는 약 2~4주가 소요되며 더 길어질 수도 있습니다. 예를 들어, 중소 규모 활동/브랜드 이벤트 커뮤니케이션, 대규모 활동/브랜드 이벤트 커뮤니케이션에 적합합니다.
3. 기능성 유형: 가벼운 상호 작용과 무거운 기능을 갖춘 기능성 H5는 생산주기가 짧고 비용이 저렴합니다. 성공의 열쇠는 멋진 상호 작용이 아니라 사용자 요구 사항을 파악하고 후속 작업을 수행하는 것입니다. 예를 들어 브랜드 계정의 팬 운영에 적합합니다.
4. H5는 언제까지 당신의 마음 속에 머물 수 있나요?
Tencent가 올해 발표한 "모바일 페이지 사용자 행동 보고서"에 제시된 여러 데이터에 따르면 몇 가지 참고 자료를 제공할 수 있습니다.
H5 페이지 인기는 일반적으로 이틀 동안만 지속됩니다.
로드하는 데 5초 이상이 걸리면 74%의 사용자가 페이지를 떠납니다.
12시와 오후 10시는 페이지 방문이 가장 많은 시간입니다.
대부분의 사용자(89.9%)는 위아래로 스와이프하거나 마우스 오른쪽 버튼을 클릭하는 것을 좋아하며, 10.1%만이 왼쪽 버튼을 클릭합니다. 레벨이 깊어질수록 분실 가능성이 높아집니다. 다섯 번째 페이지에 남은 부분은 절반 미만(48.2%)입니다.
평균 공유율은 12.68%입니다.
H5와 열정적인 관계를 유지하는 방법은 무엇인가요?
1. 스토리텔링: H5의 형태가 아무리 변해도 항상 가치 있는 콘텐츠가 우선입니다. 제한된 공간에서 이야기를 전달하는 방법을 배우고 사용자 간의 정서적 공명을 불러일으키면 콘텐츠 전파가 크게 촉진될 것입니다.
2. 시나리오 기반: H5의 설정에는 사무실 건물, 지하철역 등의 장면이 통합되어 있습니다. 첫째, 사용자가 참여하는 동안 친숙함을 찾고 정보를 더 쉽게 받아들일 수 있습니다. 또한 현장에서 전달되는 브랜드 정보는 향후 특정 장소에서 사용자의 인지도를 불러일으켜 브랜드에 대한 사용자의 인상을 깊게 할 수 있습니다.H5 페이지를 만드는 방법은 무엇인가요?
이제 H5 페이지를 만드는 것은 매우 간단합니다. 기술적인 지식이 없는 사람이라도 온라인 H5를 사용하여 웹사이트를 만들 수 있습니다. 자세한 내용은 다음을 참조하세요. 가장 완벽한 최신 HTML5 개발 도구 권장 사항 2017 (국내외 포함)
생성 전 H5 페이지의 테마 목표를 먼저 확인해야 합니다. 이벤트 운영 H5 페이지를 생성하시겠습니까? 아니면 브랜드 홍보 H5 페이지를 만들고 싶으신가요? 제품 소개 H5 페이지를 만들고 싶으신가요? 아니면 요약 보고서 H5 페이지를 생성하시겠습니까?
테마 확정 후 사진, 음악, 카피라이팅 등 자료를 준비합니다. 자료가 준비되면 H5 페이지 제작을 시작할 수 있습니다.
그러나 H5 페이지의 뛰어난 디자인 품질은 커뮤니케이션 효과에 직접적인 영향을 미치며 브랜드 이미지에 대한 사용자의 인식에도 영향을 미칩니다.
다음 디자인 포인트가 여기에 요약되어 있습니다.
1 최신 주제를 따라가고 주제 효과를 사용하세요
귀하의 H5 주제 페이지가 인기를 끌기를 바랍니다. 이는 하루아침에 핫스팟을 포착하고 온라인에 빠르게 출시하여 브랜드를 홍보할 수 있는 지름길이기도 합니다.
2. 좋은 스토리를 전달하고 정서적 공명을 불러일으키세요
H5의 형태가 아무리 다양하더라도 항상 가치 있는 콘텐츠가 우선입니다. 제한된 공간에서 이야기를 전달하는 방법을 배우고 사용자 간의 정서적 공명을 불러일으키면 콘텐츠 전파가 크게 촉진될 것입니다.
3. 세부 사항과 통일성
고품질의 사용자 경험을 달성하려면 세부 사항과 전체의 통일성을 고려해야 합니다. 시각적 스타일이 복고풍이라면 글꼴은 너무 현대적이지 않아야 하며, 톤이 유머러스하고 장난스럽다면 문구의 표현이 너무 진지해서는 안 되며, 텍스트가 감성적인 내용에 기반을 두고 있다면 애니메이션은 너무 화려해서는 안 됩니다. .
4. 기술을 합리적으로 사용하여 원활한 상호작용 경험을 만드세요
기술의 발전으로 오늘날의 HTML5에는 그리기, 지우기, 흔들기, 중력 감지, 지우기, 3D 보기 등의 대화형 효과를 쉽게 얻을 수 있는 뛰어난 기능이 많이 있습니다. (관심이 있으시면 이 웹사이트 //m.sbmmt.com/xiazai/js/html5를 클릭하여 H5 동적 효과를 보실 수 있습니다.) 혼란스럽고 부풀려진 페이지에 다양한 유형의 애니메이션을 집어넣기보다는 기술의 합리적인 사용을 옹호하고 사용자에게 원활한 상호작용 경험을 제공하는 데 중점을 둡니다. 구체적인 제작 튜토리얼은 다음을 참조하세요: 초보자에게 적합한 제로 기반 HTML5 자습 튜토리얼 6개
결론
휴대폰 하드웨어의 업그레이드, HTML5 기술의 발전 및 위챗 플랫폼, HTML5 크로스 플랫폼, 저비용, 빠른 반복의 장점이 더욱 부각되는 시대는 모바일 인터넷 트렌드를 선도하는 기업주, 브랜드, 디자이너, 개발자에게 최고의 시대가 될 것입니다. 앞으로 더 훌륭한 H5 페이지가 나올 것이 분명합니다. 기다려 보겠습니다.
【관련 추천】
1.2017년 추천 가장 인기 있는 HTML5 동영상 튜토리얼 5선
2.웹 프론트엔드 개발 도구 순위: 다운로드에 권장되는 HTML 개발 도구 8선
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
