터치 스크린 세계에서 사용자가 탐색하는 방식 - 인형

비디오: New Inspiron 11 3000 series 2024

웹 사이트 방문자가 귀하의 페이지와 상호 작용하고 링크를 탐색하는 방식이 iPhone 또는 iPad에서 데스크톱 또는 랩톱 컴퓨터와 크게 다릅니다. iPhone 또는 iPad를 사용하는 사이트 방문자는 마우스, 키보드 또는 스타일러스가 아닌 손가락을 사용하고 있습니다. 즉, 링크를 쉽게 식별하고 사용자가 실수로 너무 많은 부분을 손가락으로 클릭하지 않도록해야합니다.

롤오버 효과는 iPhone 또는 iPad에서 데스크톱 브라우저에서와 같은 방식으로 작동하지 않습니다. 사용자가 웹 페이지의 이미지 또는 다른 요소 위에 커서를 올리면 발생하는 롤오버 효과 및 유사한 호버 효과는 iPhone 또는 iPad의 "클릭"이벤트로 자동 변환됩니다.

이 그림에서 웹상의 일반적인 디자인 기법, 즉 더 큰 버전으로 링크 된 축소 이미지의 행을 볼 수 있습니다. 컴퓨터에서 각 이미지 위로 커서를 이동하면 더 큰 버전을 볼 수 있습니다. iPad에서 롤오버 이벤트는 손가락으로 터치하여 링크로 변환됩니다.

터치 스크린에서 작동하도록 링크를 디자인하고 마우스를 비롯한 손가락 터치로 롤오버 효과 및 드롭 다운 메뉴를 활성화 할 수 있는지 테스트하십시오.

iPhone 및 iPad 방문자가 쉽게 탐색 할 수 있도록하려면

링크를 클릭하기 쉽게 설정해야합니다. 손가락 사이만으로 쉽게 탭할 수 있도록 링크 사이에 충분한 공간이 있어야합니다. (지침으로, Apple은 최소한 44 픽셀 x 44 픽셀의 공간을 차지하도록 링크를 설정할 것을 권장합니다.)

이 권장 사항은 iPhone 및 iPad의 경우 장치의 해상도 또는 화면 크기가 아니라 손가락의 크기를 기준으로하기 때문에 동일합니다. (일부 손가락은 다른 손가락보다 더 뚱뚱하지만 44 픽셀은 좋은 지침입니다.)
링크를 쉽게 볼 수있게하십시오: 스타일 링크는 페이지의 다른 텍스트 및 요소와 쉽게 구별되도록합니다. 방문자가 산만하거나 서둘러있을 수 있으며 휴대 성이 뛰어난 장치를 사용할 때 저 조명 또는 더 밝은 조명이 될 수 있습니다. 배경과 크게 대조되는 텍스트와 이미지를 사용하여 링크를 구별합니다.
링크 구성: 그룹으로 관련 요소를 그룹화하고 사이트 내에 하위 탐색 메뉴가있는 경우 해당 링크를 쉽게 알아볼 수있는 섹션으로 구성합니다.
작은 iPhone 화면에서 화면 상단에있는 것이 아니라 화면 하단에 탐색 메뉴를 배치하십시오. 탐색 링크는 모바일 화면에서 많은 공간을 차지할 수 있습니다.

링크를 사용하여 디자인의 윗부분을 어지럽히는 것이 아니라,이 디자인에 표시된 것처럼 각 페이지의 상단에 단일 메뉴 버튼을 포함시키고 페이지의 맨 아래로 점프하는 링크를 생성하십시오. 여기에 포함 할 수 있습니다 콘텐츠를 묻지 않고 더 많은 링크를 제공합니다.