웹 사이트에서 모바일 클라이언트에 적용

등에 대 한 상호 작용, 비전, 상대적으로 전통적인 웹 디자인 작업을 이제 당신은 당신의 시야를 확장 하려고 귀하의 능력을 업그레이 드 하 고 모바일 인터넷 선수가... 다음이 문서를 읽을 당신을 위해 아주 적당 하다. 일부 필드에 황소의 우리에 게 앞으로 몇 일에서 몇 가지 실제 경험을 줄 것 이다. 전체 텍스트 대략 세 가지 테마로 나누어져 있습니다.

어떤 지식과 기술을 디자인의 분야 및 모바일 응용 프로그램의 개발을 입력 하기 위해 배워야

웹 디자이너 필요 합니까? 디자인 관점에서 모바일 클라이언트 응용 프로그램 및 전통적인 사이트 페이지 사이의 주요 차이점 하는 것이 무엇입니까? 모바일 클라이언트 응용 프로그램에 대 한 사용자 경험을 어떻게 향상 시킬 수 있습니까? 무슨 디자이너에 특별 한 주의를 지불할 필요 합니까?

포인트를 얻을. 요즘, 사람들이 시각적 모양 대화형 경험, 그의 기쁨에서에서 모바일 응용 프로그램에 대 한 얘기는 어디에 나입니다. 실제 통계는 또한 꽤 놀라운 합니다. 단말 마에서 최근 연구가 보여줍니다 (미국)에서 사용자가 모바일 애플 리 케이 션을 사용 하 여, 인터넷 시간 74 분을 평균 하루 약 81 분 지출.

이 세상에서 사용자 경험 디자인 관련 실무자, 상호 작용의 주요 방향이 되었습니다 여부, 비전 또는 프런트 엔드, 지금은 모바일 응용 프로그램의 관련 분야를 탐험을 시작 할 수 있습니다.

이 문서에서 우리는 세 가지 주요 문제 및 그들은 생각 하 고 "전환"에서 제안 하는 무엇을 볼 수 여러 업계 전문가 함께 토론.

어떤 지식과 기술을 디자인의 분야 및 모바일 응용 프로그램의 개발을 입력 하기 위해 배워야

웹 디자이너 필요 합니까? 조 쉬 클락 (디자이너, 개발자, "감동 심장-아이폰 응용 프로그램 설계" 책

)

그것은 8의 디자인 기술에 관해서 라면, 거기 아니다 입문 단계에서 배울 수 많은 새로운 것 들. 우리는 매우 좋은 사용자 인터페이스 클라이언트 응용 프로그램을 만드는 이미 익숙한 HTML, CSS, 자바 스크립트를 사용할 수 있습니다. 날 오해 하지 마세요, (웹 응용 프로그램은 무엇입니까?) 웹 응용 프로그램 형식에 대해 말하는 게 아니에요 웹 사이트 마이그레이션 방법. 소위를 참조 우리의 이전 기사를 참조 하십시오 "하이브리드 응용 프로그램 (애플 리 케이 션 하이브리드)", HTML 및 네이티브 클라이언트에 다른 프런트 엔드 기술에 따라 사용자 인터페이스를 구현 하는 방법을, 해당 웹 응용 프로그램에 네이티브 클라이언트의 망 토를 퍼 팅 하는 그리고 응용 프로그램 스토어에 그것을 넣어. 이 접근은 전통적인 웹 디자인 및 변환 하 고 싶은 개발자를 위한 좋은 출발점입니다.

"하이브리드"응용 프로그램, 관련 조나단 스타크 두 훌륭한 책 들을 작성 했습니다 "아이폰 엔터 프 라이즈 구축-HTML, CSS, 자바 스크립트에 기반 애플 리 케이 션", "HTML, CSS, 그리고 자바와 안 드 로이드 애플 리 케이 션 개발", 책에는 오픈 소스 프레임 워크 PhoneGap을 사용 하 여이 혼합 형태의 클라이언트 응용 프로그램을 만드는 방법을 보여 줍니다.

그것은 좋은 시작, 하지만 혼합된 응용 프로그램을 네이티브 클라이언트 응용 프로그램과 비교할 너무 많다. 시각에서 만들려는 애니메이션 효과 등은 더 믿을 하는 경우 특히 필요가 재생 장치 하드웨어 자체는 다양 한 응용 프로그램을 네이티브 클라이언트 응용 프로그램의 기능 여전히 최고의 선택입니다. 즉, iOS 애플 리 케이 션을 작성 하거나 자바 안 드 로이드 버전을 빌드를 사용 하 여 개체 지향 C 언어 (-c)을 사용 하는 법을 배워야 필요 합니다. 이 진짜 프로그래밍 언어, 그리고 웹 디자인 관련 사람들 처럼 우리 학습 많이 어려울 것 이다 우리가 종종 아이디어와 프로그램 코드를 통해 디자인 하는 경험 있는 개발자를 작업할 수 있습니다.

그럼에도 불구 하 고, HTML, CSS, 자바 스크립트, 또는 관련된 웹 응용 프로그램 프런트 엔드 개발 프레임 워크-도구 개발 네이티브 애플 리 케이 션-과정에서 신속한 프로토 타입을 만들 수 있는 멀리 던 질 필요가 없습니다 시각 및 대화형-상당히 높은 충실도 빠른 프로토 타입.

그것에 올 때 디자인 작업 자체, 특히 사용자 경험의 조건, 모바일 애플 리 케이 션 및 전통적인 웹 페이지 사이 큰 차이가 있다. 특별 한 주의 필요로 하는 2 개 점이 있다: 인간-기계 상호 작용 및 현장 사용.

모바일 장치에 대 한 많은 직면 하 고 해결 해야 하는 상호 작용 디자인 문제 이며 과거에는, 지금 디자인 하는 손가락. 고려해 야 하는 1 가지 질문 페이지 요소 레이아웃 자유롭게 작동 하 고 완전히 휴식 하는 엄지를 허용 하는 방법 이다. 또한 때 사용자 인터페이스의 일부 작업에는 손가락에 의해 막힐 것 이다, 그래서 하려고 컨트롤 요소의 레이아웃 실제 콘텐츠 간섭 하지 것입니다 확인 합니다. 대부분의 합계 될 수 있다 "위로" 및 "표시"에, 이렇게 많은 더 많은 문제가 있다. 이 때문에 대부분의 터치 스크린 스마트폰 화면-하단에 주 제어 구성 요소 또는 탐색 장소 그리고 이들은 전통적인 웹 디자인 습관의 반대. 당신은 얼마나 대부분의 사용자가 클라이언트 응용 프로그램을 사용 하 여 어떤 맥락에서 것입니다 알아야 합니다. 우리는 일반적으로 사용자 들은 너무 바빠서 초점 애플 리 케이 션을 사용할 수 있을 것입니다 오해가 있다. 사실, 이것은 실제 상황의 유일한 부분 이다, "모바일 응용 프로그램" 아니다만 사용, 모바일 상태에서에서 여러 번, 사람들은 동작을 위해 대기 하는 공항에서 부엌에서 소파에 있을 것 이다. 이러한 시나리오에서 사용자가 충분 한 시간, 운영을 하 고 관심 집중 될 수 있다. 또한, 데스크톱 컴퓨터, GPS, 내장 마이크와 카메라, 터치, 자이로스코프, 나침반, 등 다양 한 유형의 클라이언트 응용 프로그램을 만들, 이러한 기능을 기반으로 보다 많은 방법으로 모바일 장치 그들의 해당 사용 시나리오는 다릅니다.

너무 자신 있게 사용자의 의도 가정 하지 마십시오. 모바일 애플 리 케이 션 반드시 변하지 않습니다 단순화 기능, 그리고는 "사용자가 할 필요가 없습니다 모바일 버전에서이 기능을 사용 하 여." 자신에 게 말할 때 당신은 잘못 될 수 있습니다. 만약 당신이 경험을가지고 기억: 익숙한 모바일 장치 브라우저에서 웹 사이트를 오픈 하지만 페이지 비전 및 운영의 의미에서 뿐 아니라 소위 모바일 버전으로 이동 하지만, 아마도 그것을 단순화 하는 기능은 당신이 필요로 하는 무슨을 찾을. 사용자가 작은 스크린 장치를 사용 하는 있지만 이것은 필요가 있다는 정보를 얻을, 더 적은 기능을 사용 하는 데 필요한을 의미 하지는 않는다.

내가 말하고 싶은, 대부분의 경우, 모바일 응용 프로그램 및 소위 모바일 페이지를 모두가지고 있어야 한다고 비슷한 내용과 기능 데스크톱 웹 사이트 및 제품을 믿습니다. 물론, 우리가 앞서 언급 한 프레 젠 테이 션 및 상호 작용, 그들은 장치 자체의 특성에 따라 다르게 치료 해야 하지만 내용을 최대한으로 일관 되어야 한다. 때 모바일 애플 리 케이 션도 시간이 더 많은, 예를 들어 아마존을 복용 할 필요, 그들의 모바일 클라이언트 응용 프로그램 또한 바코드 스캔, 모바일 장치의 고유 기능 활용의 일반적인 경우 기능.

웹 디자인 및 개발자, 웹사이트 이동성 관점에서 생각에 더 많은 유연성을 행사할 필요가 있다. 15 년 이상, 우리 그냥 데스크톱 브라우저에 대 한 웹 사이트를 설계 했습니다. 실제 웹 디자인 해서는 안됩니다 같은, 그것은 어떤 장치에 있는 다름의 플랫폼에 액세스 및 가용성을 보장 하기 위해 스크린의 어떤 크기 든 지 이어야 한다.

물론, 그것은 모바일 디바이스의 대량 인기 전에 이것을 보고 정말 열심히 하 고 우리가 지금 우리의 사이트와 제품 액세스 하 고 다양 한 유형의 장치에서 사용 되는 이해 하기 시작. 그건 우리가 정말 필요로 하는 무슨이 적응 하 고 반응 하는 웹 사이트가 장치-의 모든 종류에 대 한 단일 버전을 만들 거 라면 말을 하지.

응답 웹 디자인에 대 한 우리의 두 이전 기사를 참조할 수 있습니다: 응답 웹 디자인 무엇입니까? 진행 하는 방법? 그리고 CSS3 미디어 쿼리를 통해 응답 웹 디자인을 구현.

로빈 닉슨 (웹 개발자, 기술 문서, IOS와 안 드 로이드에 대 한 HTML5의 저자: 초보자 가이드)

전통적인 웹 디자인 및 개발자에 대 한 내 생각에 시작 하는 가장 좋은 방법은 HTML (5), (3), CSS와 JavaScript를 포함 하 여, 고급 기술을 유지 하는, 현재, 네이티브 클라이언트 응용 프로그램에 웹 애플 리 케이 션을 통합 하는 솔루션을 점점 더 성숙 되고있다 달성 하기 위해 제품의 모바일 응용 프로그램, 우리가 반드시 필요가 없습니다 개체 지향 C 언어, 자바, 등 그 복잡 한 프로그래밍 언어를 학습 하는 시간을 보내고. NET입니다. 대로 당신이 충분 한 단단한 프런트 엔드 설계 및 개발 능력, 웹 응용 프로그램을 쉽게 만들 수 있습니다.

아론 맥스웰 (설립자를 모바일 웹)

디자인 관점에서 대부분의 개념 및 기술을 여전히 적용 됩니다. 디자이너로 서, 모바일 애플 리 케이 션, 함께 할 수 사용자가 원하는 고 어떤 종류의 사용자 경험을 제공 귀하의 제품의 인식 해야 합니다. 일부 피 정, 비록 그것이 생각 하는 것을 계속 하 고 이러한 문제에 초점을 좋은 시작 합니다.

메뉴가 너무 많은 메뉴 항목을 제공 하지 않으면 효율성을 가져올 수 있는 UI 요소입니다. 레이어는 프레 젠 테이 션에 슬라이드, 합리적인 상속 관계에 메뉴 항목을 구성 하 고 거기 하지 너무 많은 메뉴에에서 있는 각 레이어에 있는지 확인 하십시오. 또한, 라벨 (탭) 형태의 탐색 모바일 응용 프로그램에 중요 한 요소 이기도합니다.

전통적인 웹 페이지와 마찬가지로 모바일 응용 프로그램 인터페이스에 백색 계속 학습의 문제 이기도 합니다. 화이트를 사용 하 여 시각적 요소와, 그룹 간의 관계를 표현 하는 방법 그것은 신중 하 게 고민 하 고 시도 하는 데 필요한. 요소 사이의 거리의 컨트롤에서 표시 영역의 모바일 장치 화면 크기에 의해 특히 우리 필요가 없습니다 너무 많은 픽셀 수, 그래서 더 중요 한 될 수 있는 능력을 파악 하는 세부의 픽셀 수준.

적절 한 시기에 일부 요소를 삭제 하도록 하십시오. 예를 들어 설정 메뉴에서 사용자가 필요 하지 않을 수도 기능에 더 많은 시간과 관심을 지출 하는 작업의 복잡성을 증가 단일 메뉴 항목을 추가 합니다. 기능 요소의 우선 순위를 결정이 기준 현장, 완전 한 이해를 할 수의 사용에 관련 된 제품에 대 한 트레이드 오프를 확인 합니다.

사라 린 (웹 디자이너, 창조적인 디자이너)

모바일로 전환에서 내가 개인적으로 생각 하는 최고의 하 고 시작 하는 가장 실용적인 방법은 시장에 모바일 애플 리 케이 션의 모든 종류를 공부 하는. 그들을 관찰, 분석 기능, 네이티브 컨트롤을 사용 하는 방법 배울, 연습에 그들을 사용 하 여, 숙지 하 고 얼마나 다양 한 컨트롤 상호 작용, 및 다른 응용 프로그램을 비교 이해. 더하여, 많은 회사와 팀 다양 한 사용자 연구 했을, 배울 수 있습니다 많은 사용자 경험 측면에서 특히 그들의 연구 보고서를 통해.

또한, 몇 가지 좋은 서 또한 수 시작. 내 가장 중 하나는 수잔 Ginsburg의 디자인 아이폰 사용자 경험 (UX 디자인 아이폰 애플 리 케이 션에 대 한)을 권장 합니다.

몇 가지 작업 시간과 노력을 실행, 예를 들어 사용자 로부터 피드백을 얻을 수 배울 수 다른 점은 종이 프로토 타입을 만들 수 있습니다 전체 계획 작업 전에 실제 디자인 개발 프로세스 초기 단계에서 입력 사용자와 의사 소통 경험된 모바일 응용 프로그램 디자인 개발자 초.

디자인 관점에서 전통적인 사이트 페이지 및 모바일 클라이언트 응용 프로그램 사이의 주요 차이점은 무엇입니까? 사라 린

나는 가장 큰 차이점은 인터랙티브 디자인에 생각 한다.

전통적인 웹 디자인, 모바일 장치의 화면 크기 보다 다른 시스템 플랫폼, 사용 시나리오 및 사용자 습관의 차이점을 고려 하는 방법에 여러 가지 있다. "이동", 가장 일반적인 사용을 포함 하 여 모바일 응용 프로그램 시나리오를 사용 하는 많은 있다 그리고 일반적인 시나리오 사용자가 안정적인 환경, 그러나 때문에 그들은 한정 되지 있습니다 또는 게으른 데스크톱 또는 노트북을 사용 하 여, 그들은 사용 하 여 모바일 장치 응용 프로그램 실행 대신에 하지만 종종이 간과. 그래서, 응용 프로그램에 대 한 가장 적절 한 사용 시나리오의 알고 있어야 하 고 이러한 시나리오에서 사용자 습관에 대 한 디자인. 대상 사용자 중심, 모바일 응용 프로그램 디자인 또는 웹 페이지 디자인에이 원칙을 구현 해야 합니다.

모바일 응용 프로그램을 변환 하는 과정을 전통적인 웹에서 작고 더 유연한 디자인 개체에 어떻게 자연 이건 작은 도전. 화면 방향을 고려해 야 하는 문제 이기도 하 고, 두 모델 모두에서 잘 작동 하 고 각 방향 접근법의 장점 발휘 응용 프로그램을 확인 해야 합니다.

입문 단계에서 철저 하 게 원래의 기능을 제공 하는 플랫폼의 장비의 장단점을 이해 하는 플랫폼을 먼저 선택 하는 것이 좋습니다. 대상 사용자를 기반으로 응용 프로그램 및 연구에 필요한 함수에의 전체 계획을 포함 하는 선택 때 고려해 야 할 많은 요인이 있다.

모바일 클라이언트 응용 프로그램의 사용자 경험을 어떻게 향상 시킵니까? 무슨 디자이너에 특별 한 주의를 지불할 필요 합니까? 마이크 Gualtieri (보험 분석, 보고서 모바일 애플 리 케이 션 디자인의 저자 모범 사례)

사용자는 일반 웹 사이트 보다 모바일 응용 프로그램에 대 한 높은 기대 있다. 애플의 아이폰과 같은 제품 디자인, 특히 모바일 애플 리 케이 션에 대 한 높은 명성을 그리고 모바일 응용 프로그램과 상호 작용의 새로운 혁명 방법을 제공 하는 멀티 터치 및 제스처와 같은 기능. 모바일 응용 프로그램에서 좋은 사용자 경험 디자인을 달성 하기 위해 있어야 합니다 사용자의 좋은 이해 그들이 자신에 대해 아는 것 보다 훨씬 더. 전통적인 사용자 연구 방법 아직도 효과적으로 사람들을 만들, 그들의 실제 요구를 이해 하 고 응용 프로그램의 사용 하 고에 우리 도울 수 있다.

일반적으로 모바일 응용 프로그램에 대 한 디자이너 상호 작용 및 시각 디자인 과정을 안내 하는 다음 5 요인 고려 하려고 한다:

위치: 사용자가 어디서 나 모바일 애플 리 케이 션을 사용 합니다. 모바일: 사용자는 조깅, 또는 차량에서, 등의 모바일 상태에서 응용 프로그램을 사용 합니다. 인스턴트: 사용자가 언제 든 지 장치에 밖으로 갈 수 있게 됩니다. 기본 설정: 조건 하에서 사용자, 사용 합니다 다른 요구 사항에 따라 다른 모바일 장치, 일부 사용자 장치에 디지털 의존의 감각을가지고 것입니다 그리고 일부 가끔 사용의 실제 요구에 따라는 상황이 다릅니다. 장비: 모바일 장치는 단지 일반적인 개념, 일부 응용 프로그램에 대 한 고려해 야 다양 한 장치, 스마트폰, 정제, 전자 독자에.

J.d.biersdorfer (기술 제품 저널리스트, 최고의 아이폰 애플 리 케이 션)

최고의 아이폰 애플 리 케이 션을 작성 하는 과정에서 나 바라보 고 400 ~ 500 아이폰 애플 리 케이 션, 밖으로 시도 그리고 좋은 사용자 경험을 가져올 수 있는 것 들의 대부분은 모바일 디바이스의 시각 및 대화형 측면에서 전문 그 결론 했습니다. 그리고 그 전통적인 웹 디자인 아이디어를 분명히 있는 화면 크기 요소의 시각적 스타일 또는 조직, 공간 컨트롤의 레이아웃 이며, 대부분 만족 스 럽 지, 나도 나쁜 경험 생산할 예정 이다 여부는 응용 프로그램의 배려의 부족의 터치.

출처: 소스 주소: HTTP://BEFORWEB.COM/NODE/14