it-swarm-korea.com

실행 가능한 양식 요소 크기

나는 UI 디자이너가 아닙니다. 지난 2 ~ 2 년 동안 많은 웹 사이트에서 중요한 버튼/링크 등이 매우 큰 클릭 영역을 가지고 있음을 알게되었습니다. 나는 행동을 취하기 위해 커서를 얻는 것이 고통 스럽기 때문에 고맙다고 말해야합니다. 나는 아마도 모바일과 더 관련이 있다고 말할 것입니다.이 디자인 변경의 드라이버 일 수도 있습니다.

웹 페이지의 버튼/링크 크기에 대한 경험 규칙이 있습니까?

8
rick schott

그것은 모두 Fitts의 법칙 을 기반으로하며, 커서를 버튼에 가져 오는 데 걸리는 평균 시간을 제공합니다. 웹에 적용되는 Fits의 UI 법칙 또는 Jared Spool의 podcast 와 같은 주제에 대한 다른 기사를 찾을 수 있습니다.

엄지 손가락의 규칙은 쉽습니다. 중요한 단추는 문자 그대로 엄지 손가락 (hello, iPad)으로 누를 수 있도록 너무 커야합니다 :-)

10
Kostya

다음은 Apple 's Human Interface Guidelines 의 iPhone에 대한 경험 법칙입니다.

최소 29 픽셀 높이의 컨트롤을 만들고 44 픽셀 높음.

책에서 더 많은 Tapworthy , 실제로 발견했습니다.

그러나 iPhone 탭 대상과 관련하여 얼마나 큰가요? 손가락 끝의 크기는 얼마입니까? Apple 44 픽셀에서 정확하게 페그하고이 측정 값은 표준 iPhone 컨트롤 전체에서 안정적으로 나타납니다

5
Patrick McElhaney

모든 인터넷 사용자가 전문적인 풀 타임 인터페이스 디자이너의 민첩성과 민첩성을 가지고 있지는 않다는 인식이 발달하고 있기 때문에 경험이 많지 않습니다. 1999/2000 년에는 물건이 작고 8x8 큰 버튼을 사용하는 많은 "픽셀"디자인을 보았습니다. Steve Krug, Kathy Sierra, 37signals, Jakob Nielsen 및 2000 년대에 걸쳐 다른 사람들이 영감을 얻은 유용성 붐 때문에 사람들은 앱과 사이트의 사용 가능성을 더 잘 알고 있으며 그에 따라 디자인을 시작했습니다.

이야기의 또 다른 측면은 일반적으로 화면과 화면 해상도가 커지고 있다는 것입니다. 오늘날 평균은 아마 1280x1024 이상일 것입니다. 반면 10 년 전에는 대부분의 사람들이 평균 800x600 정도 인 평균 1280x1024 방문자를 찾는 것이 운이 좋을 것입니다. 해상도가 더 크기 때문에 화면에 더 많은 픽셀이 들어가고 이전에는보기가 훨씬 쉬워졌습니다 (그러므로 클릭하기가 더 어려워 짐).

마지막으로, 터치 기반 장치의 도입으로 많은 개발자들이 클릭 포인터 영역을 심각하게 시작하게되었습니다. 마우스 포인터의 정밀성과 비교할 때 손가락처럼 정확하지 않은 작은 대상을 공격하기가 어렵 기 때문입니다.

이러한 모든 변경 사항은 언젠가는 어림짐작으로 이어질 수 있지만 전체적으로 수행 할 수있는 최선의 방법은 사이트를 방문하는 사용자의 종류를 파악하고 그에 따라 누구인지, 어떤 기기인지를 고려하여 디자인하는 것입니다. 사용 및 화면/창의 공간과 같은 기타 요소.

4
Rahul

클릭 영역의 크기는 페이지의 다른 요소와 관련이 있습니다. 엄격한 표준은 없지만 일반적으로 내 버튼의 높이는 40px 이상이고 텍스트 크기는 13px 이상입니다. 또한 최소한 그래픽 구성 요소가있는 탐색 및 기타 버튼의 경우 텍스트가 아닌 전체 영역을 클릭 가능하게 만드는 것이 중요하다고 생각합니다.

0
Virtuosi Media