it-swarm-korea.com

iPad를위한 디자인

iPad 또는 다른 iOS 장치를 사용하는 사람들이 내 사이트에 액세스 할 수 있도록하려고합니다.

일반적으로 iPad 또는 iOS와 호환되는 사용자 인터페이스를 설계 할 때 고려해야 할 사항은 무엇입니까?

15
George Stocker

문제에 대한 Jakon Nielsen의 생각 을 확인하십시오. 하단에 링크 된 비디오 는 길이가 3 분에 불과하며 직접적으로 유용하지는 않습니다.

일반적인 생각 (개인 경험 외에는이를 뒷받침 할 사실이 없음) :

  • 다른 플랫폼의 디자인으로 넘어 가야한다면 iPod 디자인이 아니라 PC 디자인으로 넘어가십시오. iPad를 손에 넣을 수 있다면 iPad에서 기본 Amazon.com을 찾아보십시오. 맨 오른쪽에 텍스트가있는 가로 채우기 단추가 있으며 기본적으로 사용할 수없는 기본 iPod Touch/iPhone UI로 돌아갑니다.
  • 클릭하는 것보다 작은 것을 보는 것이 더 쉽습니다. 내 경험상 읽을 수있는 대부분의 텍스트는 클릭 할 수 없으며 종종 링크 (예 : Wikipedia)를 확대해야합니다.
  • 세로 및 가로 모두에서 디자인을 테스트하십시오!
  • 손을 움직이면 마우스를 움직일 때보 다 약간 더 많은 물리적 에너지가 필요합니다.
  • 여러 탭을 사용하는 것은 PC보다 어렵습니다 (아이폰보다 쉬울 것입니다). 사용자를 사이트에서 멀어지게하는 링크는 아마도 그렇게 할 것입니다. 빨리 다시는 기대하지 마십시오.
  • 실수로 누르는 것이 실수로 클릭하는 것보다 흔합니다.
  • 키보드를 사용하는 것보다 타이핑 (검색 용으로도)이 더 어렵습니다.
  • 임베드 된 YouTube 비디오가 작동합니다.
  • IPad를 구매하고 디자인하는 사용자층을 기억하십시오.
  • 업데이트 : 다른 웹 브라우저가 있습니다. 사용자의 95 %는 아마도 Mobile Safari를 사용하지만 다른 두 곳에서는 테스트 할 가치가 있습니다. 예를 들어 Atomic Web Browser 에서 Stack Exchange 사이트가 작동하지 않습니다 (질문을 게시 할 수 없음).

행운을 빕니다!

14
Robert Fraser

이것은 일반적인 UI 질문에 더 많이 적용됩니다.

"터치하지 마십시오."라고 생각하십시오. 귀하 (또는 잠재적 고객)가 와 함께 앱을 어떻게 사용 하시겠습니까? 마우스로 무언가를 가리키는 것과 손으로 무언가를 가리키는 것에는 근본적인 차이가 있습니다. 사람들이 쉽게 접근 할 수 있도록 측면에서 가장 중요한 제어 기능을 사용하고 있습니까? 다른 와이어 프레임으로 실험하고 사람들에게 사용의 용이성을 평가하도록 요청하십시오. 프로세스 초기에 사용자 테스트를 수행하면 디자인을 개선하는 데 크게 도움이됩니다.

8
Scott M.

IPad에 최적화/준비된 사이트를 설계 할 때주의해야 할 사항에 blog 을 썼습니다. 유용 할 수 있습니다.

3
Jin

IPad는 웹을 탐색하도록 설계되었습니다. 큰 화면을 사용하면 전체 웹 페이지 너비를 볼 수 있습니다. 따라서 웹 페이지 디자인은 iPad에서 잘되어야합니다.

IPhone, iPod Touch의 경우 다른 디자인을 만들어 기본 iPhone 앱과 유사한 UI를 만들 수 있습니다. 이를 가능하게하기 위해 사용할 수있는 도구가 있지만 많은 작업이 필요합니다. iPad에서도 사용할 수있는 Sencha Touch 를 확인하십시오.

Sencha Touch와 같은 것을 사용하지 않으려면 고려해야 할 또 다른 사항은 사용자 상호 작용이 이러한 장치와 매우 다르다는 것입니다. 마우스 기반이 아니라 터치 기반입니다. 예를 들어 호버 효과는 터치 기반 장치에서 작동하지 않습니다. 또한 마우스 클릭은 iOS 브라우저에서 캡처 한 탭 비 활동과 다릅니다. 즉, iOS에 사용하는 JavaScript를 사용자 정의하여보다 기본적이고 직관적으로 만들면 사용자 상호 작용을 향상시킬 수 있습니다.

Apple은 iOS의 기본 앱에 대해 Human Interface Guide 를 만들었습니다. 사용자가 기본 앱에서 기대하는 것이므로 이것을 살펴 보는 것이 좋습니다. 이를 준수하는 웹 페이지가 있으면 사이트를 이해하는 데 도움이됩니다.

3
googletorp

화면 크기와 다른 가능한 레이아웃을 잊지 마십시오 : 가로/세로 방향 모드가있는 iPad CSS 레이아웃

2
Kostya

특히 새로운 사이트를 디자인하는 대신 기존 사이트 또는 응용 프로그램을 수정하는 것과 관련하여 추가하고 싶은 두 가지 문제는 사소한 것처럼 보일 수 있지만 여전히 다음과 같습니다.

  • 툴팁과 같은 마우스 오버 동작에 대해 사이트 나 응용 프로그램이 응답하지 않는지 확인하십시오.
  • 오른쪽 클릭이 없음을 기억하십시오 (웹에서는 흔하지 않지만 때때로 웹앱에서는 발견됨)
1
Dan Barak

손가락은 마우스보다 정확도가 떨어지기 때문에 데스크톱 앱보다 요소가 커야합니다.

최근에 일부 그래픽 응용 프로그램을 사용한 결과, 손가락으로 물건을 정확하게 배치하기가 매우 어려울 수 있습니다. 움직이는 물체를 가리기 때문입니다. Apple처럼)이 문제를 해결하는 한 가지 방법은 손가락을 약간 움직 인 후에 만 ​​움직이기 시작하여 더 이상 움직이는 물체 위에 있지 않습니다.

다중 선택은 현재 매우 번거 롭습니다. 한 손가락으로 하나의 객체를 탭하고 다른 손가락으로 여러 객체를 탭하여 여러 선택 항목을 만드는 방법은 Apple) 방식이 마음에 들지 않습니다. 드래그 선택이 더 효과적 일 수 있습니다 (예 : 선택 도구를 먼저 탭한 다음 여러 오브젝트를 드래그하여 선택).

1
Erik Engheim