H5 디자인 시 팁 요약

이번에는 H5를 디자인할 때의 주의사항에 대해 정리해보겠습니다. 실제 사례를 살펴보겠습니다.

많은 사람들이 HTML5 사용에 대해 잘 알고 있다고 생각합니다. 실제로 HTML 사용에는 다양한 사용 기술이 있습니다. 다음 기사에서는 HTML 디자인의 여러 기술을 공유할 것입니다. 살펴보겠습니다. 1. 상호 작용 측면에서 올바른 슬라이딩 조작 방법을 주의해서 사용하십시오.

예:

얼룩 효과, 왼쪽 및 오른쪽으로 슬라이드하여 페이지 넘기기 등 이유: Apple 휴대폰에서는 오른쪽으로 밀면 "이전 페이지"로 돌아가는 효과가 쉽게 발생할 수 있습니다.

2. 상호 작용 측면에서 수평 화면 표시를 주의해서 사용하십시오.

이유: 경험상 사용자 기기에서 화면 회전 기능을 켜야 정상적으로 시청할 수 있으며, 사용자 운영 비용이 많이 듭니다. 화면이 다른 휴대폰의 경우 화면 비율이 다르기 때문에 최상의 시각 효과를 표시하기가 어렵습니다.

3. 시각적으로 기능 버튼 등이 페이지 하단에서 멀리 떨어져 있습니다(약 128px, 이 크기는 고정된 값이 아닙니다). 재구성에 사용되는 적응 방법에 따라 다릅니다(참고용: 640*1136px). , 위에서 아래로 계산, 주요 내용은 1008px 이내).

이유: 버튼이 막히는 것을 방지하기 위해 다양한 화면을 갖춘 휴대폰용 장비가 더 좋습니다.

4. 시각적으로 PS의 "라이트 오버레이 효과" 또는 "레이어 스타일" 효과를 주의해서 사용하세요.

예를 들어, 이 시각적 요소를 하나로 병합할 수 없는 경우 "소프트 라이트", "화면 색상", "색조" 및 기타 효과를 레이어에 추가합니다.

이유: 재구성을 위해 구멍을 파서 사진을 자르기 어렵고 시각 효과를 복원할 수 없습니다.

5. 시각적으로

을 만들고 싶다면 SVG 형식으로 내보내보세요! 이유: 크기를 줄일 수 있는 것을 왜 거부하는가... 6. 애니메이션의 경우 전체화면 애니메이션을 지양하고 부분 애니메이션을 우선시하도록 노력하세요.

예를 들어 다양한 입자 효과가 화면에 떠다니는 경우 등이 있습니다.

이유: 제시된 시각 효과를 코드로 구현할 수 없는 경우 전체 화면 크기 시퀀스 프레임을 사용하여 처리해야 하며 이로 인해 크기가 증가하고 로딩 경험에 영향을 미칩니다.

7. 애니메이션의 경우 시퀀스 프레임 압축 및 정적 이미지에 대한 팁을 더 높은 품질로 저장할 수 있습니다. 중앙의 흐릿한 움직임 상태는 과감히 화질을 낮춰보세요.

이유: 볼륨이 압축되어 모션 상태가 들쭉날쭉해도 명확하지 않습니다.

8. 재구성을 위해서는 사진을 "tinypng.com"에 업로드하고 압축하여 크기를 효과적으로 줄여주세요.

이유: 그럼, 그 이유를 말해볼까요? 비밀리에 말씀드리자면, 이제 이 웹사이트는 png 압축뿐만 아니라 jpg 압축도 할 수 있고, 더 중요한 것은... 일괄 다운로드를 지원한다는 것입니다! 9. 재구성을 위해 음악을 압축하면 전체 크기가 크게 줄어들 수 있습니다.

팁: 특별한 요구 사항이 없으면 비트 전송률이 48 이하인 모노 오디오 파일로 만드는 것을 고려할 수 있습니다.

10. 재구성 측면에서 안드로이드는 다중 오디오 동시 재생을 지원하지 않습니다. 즉, 배경 음악과 음향 효과를 동시에 재생할 수 없습니다. (Apple 기기에는 문제가 없습니다)

11. 재구성 측면에서

는 자동으로 재생될 수 없습니다. 처음 재생하려면 사용자가 클릭하여 실행해야 합니다.

(동영상은 어떤 형식으로 제작되나요? mp4 형식 사용을 권장하며 H.264 인코더 사용을 권장합니다)

12. 재구성 측면에서 테스트 시 화면 하단에 가상 버튼을 사용하는 'Meizu' 휴대폰과 Huawei P6/P7 휴대폰에 더 많은 관심을 기울여 주시기 바랍니다. 장비에 문제가 발생하기 쉽습니다. 그런 다음 여기에 몇 가지 추가 정보가 있습니다.

◆ 위챗은 어떤 브라우저 커널을 사용하나요? 음, 이 질문은 정말 명확하게 설명하기 어렵습니다.

안드로이드:

WeChat 버전 5.4-6.1, QQ 브라우저를

설치한 경우 QQ 브라우저 커널을 사용하세요. 그렇지 않으면 휴대폰 시스템과 함께 제공되는 것을 사용하십시오.

WeChat 버전 6.1 이후에는 QQ 브라우저의 핵심이 내장되었습니다.

QQ 브라우저: 버전 6.2 이상에서는 깜박임 커널을 사용합니다. 이전에는 웹킷 커널을 사용했습니다. (혼란하지 마세요. 필요한 경우 QQ 브라우저에 대해 자세히 알아보려면 http://x5.tencent.com/index로 이동하세요.) 사과:

항상 시스템에 내장되어 있었습니다...

◆ 위로 밀어 페이지를 넘길 때 시각적 안내 화살표는 아래쪽이 아닌 위쪽을 향해야 합니다. 페이지 넘기기 효과를 클릭하지 않는 한 아래쪽 화살표를 사용하세요.

◆ 지문 스캔으로 상호작용을 촉발한다고?

이것들은 모두 의사 기술입니다. 그냥 가지고 놀아도 기뻐요, 하하.

하지만 멀티스크린 인터랙션, 오디오 분석 등 다양한 인터페이스를 통한 기술 지원을 제공하고 일부 인터랙티브한 작업을 구현하는 것이 미래 트렌드입니다.

이 글의 사례를 읽으신 후 그 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 온라인에서 PHP 중국어 기타 관련 기사를 주목하세요! RECEMEDRENDED 읽기 :

위 내용은 H5 디자인 시 팁 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!