집 > 기사 > 웹 프론트엔드 > 인기 없는 H5 디자인 팁 12가지

인기 없는 H5 디자인 팁 12가지

php中世界最好的语言원래의: 2018-01-09 10:22:102676검색

이번에는 인기 없는 H5 디자인 팁 12가지를 가져왔습니다. H5 디자인 팁 활용법은? H5 디자인 팁의 주의 사항은 무엇인가요? 실제 사례를 살펴볼까요?

인기 없는 H5 디자인 팁 12가지 내용은 다음과 같습니다

1. 인터랙션 측면에서 올바른 슬라이딩 조작 방식을 사용하도록 주의하세요.

예: 스크래치 음악효과 적용, 왼쪽 및 오른쪽으로 슬라이드하여 페이지 넘기기 등
이유: Apple 휴대폰에서 오른쪽으로 스와이프하면 "이전 페이지"로 돌아가는 효과가 쉽게 발생할 수 있습니다.

2. 상호 작용 측면에서 가로 화면 표시를 주의해서 사용하세요.

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

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

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

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

예: 시각적 요소를 하나로 병합할 수 없는 경우 "부드러운 조명", "화면 색상", "색조" 및 기타 효과를 레이어에 추가합니다.
이유: 재구성을 위해 구멍을 파서 사진을 자르기 어렵고 시각 효과를 복원할 수 없습니다.

5. 시각적으로 벡터 그래픽? 간단한 애니메이션을 만들고 싶으신가요? SVG 형식으로 내보내 보세요!

이유: 크기를 줄일 수 있는 것을 거부하는 이유는...

6. 애니메이션의 경우 전체 화면 애니메이션을 피하고 부분 애니메이션을 우선시하세요.

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

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

이유: 압축된 볼륨으로 인해 모션 상태가 들쭉날쭉해도 눈에 띄지 않습니다.

8. 재구성하려면 "tinypng.com"으로 이동하여 사진을 압축하여 크기를 효과적으로 줄여주세요.

이유: 음, 이건 이유를 말해야 하나요? 이제 이 웹사이트는 PNG뿐만 아니라 JPG도 압축할 수 있으며, 더 중요한 것은... 일괄 다운로드를 지원한다는 사실을 비밀리에 말씀드리겠습니다!

9. 재구성을 위해 음악을 압축해 주세요. 그러면 전체 크기가 크게 줄어들 수 있습니다.

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

10. 재구성 측면에서 Android 기기는 여러 오디오의 동시 재생을 지원하지 않습니다. 즉, 배경 음악과 음향 효과를 동시에 재생할 수 없습니다! (Macintosh는 문제 없습니다.)

11. 재구성 측면에서 비디오는 자동으로 재생되지 않습니다.

(동영상은 어떤 형식을 사용해야 하나요? mp4 형식을 사용하고 H.264 인코더를 사용하는 것이 좋습니다)

12 재구성을 위해 테스트 시 "Meizu" 휴대폰과 Huawei P6/P7에 더 주의하시기 바랍니다. , 화면 하단에 가상 버튼이 있는 휴대폰. 장비에 문제가 발생하기 쉽습니다.

그렇게 말했지만, 여기에 몇 가지 추가 정보가 있습니다.
◆WeChat은 어떤 브라우저 커널을 사용합니까? 글쎄, 이 질문은 명확하게 설명하기가 정말 어렵습니다.
Android:
WeChat 버전 5.4-6.1. 설치된 QQ 브라우저가 있는 경우 QQ 브라우저 커널을 사용하세요. 그렇지 않으면 휴대폰 시스템과 함께 제공되는 것을 사용하십시오.
WeChat 버전 6.1 이후에는 QQ 브라우저의 핵심이 내장되었습니다.
QQ 브라우저: 버전 6.2 이상에서는 깜박임 커널을 사용합니다. 이전에는 웹킷 커널을 사용했습니다.
Apple:
항상 시스템에 내장되어 있습니다...
◆ 위로 슬라이드하여 페이지를 넘길 때 시각적 안내 화살표는 아래가 아닌 위쪽이어야 합니다. 페이지 넘김 효과를 클릭하지 않는 한 아래쪽 화살표를 사용하세요.
◆ 지문 스캔? Pro 화면이 상호작용을 유발하나요? 가스 조성을 감지하기 위해 불어?
이것들은 모두 의사 기술입니다. 재미있게 놀아보세요, 하하.
하지만 멀티스크린 인터랙션, 오디오 분석 등 다양한 인터페이스를 통한 기술 지원을 제공하고 일부 인터랙티브한 작업을 실현하는 것이 미래 트렌드입니다!

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!