페이지 친화성과 관련하여 프로그래머가 저지르는 5가지 일반적인 실수와 이를 수정하는 방법

프로그래머가 페이지 친화성에서 흔히 저지르는 5가지 실수와 이를 수정하는 방법:

저는 뻔뻔한 웹 사용자이지만 이것이 제가 좋은 웹 사용자 개발자가 되는 데 도움이 되었다고 생각합니다. 웹사이트에서 불쾌한 디자인을 보면 매우 짜증이 납니다. 왜 아주 간단한 일도 잘 할 수 없는 걸까요? 다음은 5가지 일반적인 사용성 실수와 이를 수정하는 방법입니다. 자신에게도 남에게도 편리하도록 하시고, 그런 실수는 하지 않도록 하세요.

빠른 제출 이벤트를 사용하세요. 클릭 이벤트는 사용하지 마세요. 양식 태그 양식을 사용하세요!

Enter 키를 사용할 때 몇 번이나 접했는지 모르겠습니다. 키를 눌러 양식을 제출하거나(또는 휴대폰에서 화살표/Enter 키를 사용) 아무 일도 일어나지 않습니다. 다시 마우스로 제출 버튼을 클릭해야 했고, 마침내 양식이 응답했습니다. 이것은 제가 가장 싫어하는 사용성 문제 중 하나입니다. 아마추어가 만든 것 같습니다. 마우스로 제출 버튼을 클릭하거나 휴대폰의 키보드를 끄고 제출 버튼을 찾기 위해 페이지 하단으로 스크롤하는 것은 전혀 수행할 필요가 없는 성가신 추가 작업입니다. submit 이벤트만 사용하면 웹페이지가 훨씬 더 친숙해집니다.

document.getElementById("myForm").addEventListener("submit",function(e) {

e.preventDefault ();

// ... 여기서 처리하세요. "입력" 키 제출이 가능합니다!

return false;

});

어딘가에서 그런 실수를 했다면 즉시 바로잡아주세요.

document.getElementById("myLink").addEventListener("click",function( e) {

                                                                                             > >});

이것이 제가 웹사이트에서 하는 일입니다. 비슷한 문제가 발생하지 않았습니다. 사용자가 웹사이트에서 뒤로 버튼을 계속 누르도록 강요하지 마세요!

text-overflow:ellipsis를 설정할 때 웹페이지 요소에 title 속성을 추가하세요.

text-overflow와 같은 일부 새로운 CSS 속성이나 속성 값은 매우 유용합니다. 생략. 이 효과를 얻기 위해 프로그래머는 어떤 방법을 자주 사용했습니까? text-overflow: ellipsis에 동의합니다. 하지만 이 요소 위로 마우스를 가져가면 title 속성을 사용하여 전체 정보를 표시하는 것이 좋습니다.

저는 말줄임표로 표시할 정말 정말 긴 텍스트입니다

동일한 콘텐츠를 두 번 출력하고 싶지 않다면 Js를 사용하여 제목을 동적으로 설정할 수 있습니다. 어떻게 구현하든 사용자를 고려하시기 바랍니다.

:focus와 :active를 잊지 마세요!

많은 사람들이 페이지 요소의 스타일을 디자인할 때 자신의 상태를 무시하고 사용자의 마우스 조작만 고려하며 사용자가 키보드를 사용하여 조작할 수 있다는 사실을 잊어버립니다. :focus 및 :active를 사용하여 상태를 표시하세요.

a:hover,a:active, a:focus { /* 스타일 변경*/

color: #900;

}

사용자를 위해 좋은 일을 하십시오. 다음에 웹 사이트를 개발할 때 탭 키를 사용하여 페이지의 모든 요소를 ​​탐색하면 페이지가 이동하지 않습니다. 포커스가 변경되면 스타일시트를 확인하여 상태 스타일을 추가하는 것을 잊었는지 확인하세요!

검색/이메일 입력란 형식을 이용해주세요

휴대폰, 태블릿 등 모바일 기기에서 양식 정보를 입력할 때 키보드 모드를 전환해서 찾아야 하는 불편함이 있습니다. "@"성격. 웹 개발자가 성숙해 올바른 텍스트 상자 유형을 사용하는 방법을 배우기를 바랍니다.

약간의 수정만으로 휴대폰 사용자에게 큰 편리함을 선사할 수 있습니다.

우리 프로그래머들이 저지르는 흔한 실수는 많습니다. 앞으로 이에 대한 기사를 더 많이 쓸 예정이지만, 확실한 것은 이러한 실수의 대부분은 알아차리기만 하면 쉽게 수정할 수 있다는 것입니다.

LAMP Brothers의 오리지널 PHP 비디오 튜토리얼 CD/"PHP 설명" 필수 버전을 무료로 받아보세요. 자세한 내용은 공식 고객 서비스에 문의하세요: http://www.lampbrother.net

이메일을 구독하시면 수시로 IT 관련 튜토리얼과 책을 공유해 드리겠습니다.

http://list.qq.com/cgi-bin/qf_invite?id=ea7d919ad263169bce2be53a3e16da0f0ec55ac36513c68e