IOS 응용 프로그램 경험 디자인

편집자 참고 사항: 청두 Cai 청 디자인 CTO 쇼 Yixiang "@yxshawn"에서이 문서에 초점 "ios, http://www.aliyun.com/zixun/aggregation/11432.html" > 인간-컴퓨터 상호 작용, UED, 음악가, 멀티미디어 철학, 과학 소설, 전자, 환각. 이 종이에서 그는 일반적인 웹사이트 디자인, iOS 응용 프로그램을 비교 하 고 자신의 디자인 아이디어를 앞으로 두고.

IOS 응용 프로그램 경험 디자인 인터넷 경험 디자인 처럼, 방법론의 많은 "참조"의 경우 될 수 있습니다. 뿐만 아니라 애플의 < 휴먼 인터페이스 가이드라인 >, 전 팜 팜의 < 선 > 아니 더 나은 디자인 철학 및 방법론을 찾을 수 있습니다.

사실, 당신이 hig과 손바닥의 선, 또는 심지어 Oolon Colluphid의 걸작에서 심각한 보세요, 경우에 우수한 응용 프로그램을 디자인 하는 지침 엄격 하 게 따를 수 없습니다. 로 시작 하는 이유는 프로그램 고릴라와 디자인 이야기 젖은.

프로그램

지난 세기의 시작 부분에 대부분 생각 했다 하는 사람들에 의해 개발 된 소프트웨어 설계 1에 의해 이해 되었다. 미술 2입니다. 프로그래머 3입니다. 프로젝트 관리자는 구성입니다. 내가 여기에 대해 이야기 하는 디자인은 예술! 이것은 전제 이다. 아트만 외모에 대 한 우려, 때문에 그들은 거의 걱정 하지 않습니다 (또는 이해 하지 않는) 제품의 사용의 용이성.

프로그래머와 디자이너는 어떻게 식별 합니까? 당신은 코드를 작성 하 여 구별 수 없습니다 (모든 후, 많은 디자이너 컬러 디자인의 디자이너 등 프로그래밍 작성 반대로), 하지만 그들은 일반적으로 생각 하는 방식으로 차별화할 수 있습니다.

프로그래머: 와우! 이 함수는 좋은! 우리는 우리의 애플 리 케이 션을 추가할 수 있습니까? "이 이런 장면 자주 볼 때 발생 한 매우" 쿨 "매우" 화려한 "애플 리 케이 션이 종종 느낌표 (또는 심장 한숨) 밖으로 보냅니다.

디자이너는 대답 했다: "왜 우리가이 기능 추가 해야 합니까?" "

프로그래머 그들의 일에 모든 좋은 것 들을 추가 하 길 원하고 함수 자체에 집중 하는 경향이 있습니다. 예를 들어 좋은 디자인 패턴, 효율적인 알고리즘, 겉으로 화려한 효과. 일반적인 프로그래머의 작업은 두 가지, 첫 번째 종류는 베이징 자동차 보다 더 많은 기능은, 해야는 옥스포드 사전 두꺼운 매뉴얼을 사용 하는 방법을 이해할 수 있을. 또 다른 종류는 매우 화려한 특수 효과, 인터페이스 파리, 곡예를 재생 하는 귀찮은 생각 하다.

디자이너는 전체 제품에 집중 하는 경향이, 그들은 일반적으로 청결의 함수의 제품. 그들은 일반적으로 사진에 공 진을 찾을: 좋은 그림은 3 요소 1. 뚜렷한 테마가 있다. 2. 화면 요소 신속 하 게 주제에 시청자의 관심을 끌 수 있습니다. 3. 하나의 테마, 초점에 없는 모든 항목 차단 된다.

불행히도, 많은 iOS 개발자 프로그램 원숭이에서 점프는. 활활 타오르는 시체와 울음 소리 쳤 다 "우리 프로그램 원숭이 마지막으로 돈을 벌 수 있습니다! 저기 나무와!. 저기 나무와!. 그래서 그들은 간단히 설명 하기 위해 다음 그림으로 뭔가 할 수 있습니다.:

맞아요! 질문 여부 기능, 하지만 얼마나 잘 경험 이며 문제 해결 여부 아니다. 그리고 iOS 응용 프로그램 디자인에서 특히 장치 자체의 특성은 직접 디자인을 결정 하기 때문에 완전히 다른 사이트 디자인의 경험에서.

주요 차이점은 다음 세 가지 포인트는 생각 합니다.

소위 시각적 초점 및 운영 초점의 문제, 우리는 전통적인 컴퓨터 사용에서 시작할 수 있습니다. 우리는 컴퓨터를 제어 일반적으로 마우스를 통해 마우스 제어 화면 포인터와 손을 이동 위치를 클릭, 두 번 클릭, 드래그, 등 작업을 완료 하는. 우리가 뭘 보고 화면, 마우스 작업입니다. 우리의 시각적 초점은 화면, 그리고 액션 마우스입니다. 다른 시각적 포커스와 작업에 속하는 종류.

터치 스크린 장치와 컴퓨터 사이의 가장 큰 차이 자신의 시각적 포커스와 운영 같은 지점입니다. 그래서, 우리는 사진을 열고, 그냥 손으로 클릭 그림 싶어요.

동일한 시각적 포커스와 작업의 큰 혜택은 이러한 장치를 사용 하는 법을 배워야 쉽습니다. 하지만 2-포인트 때문에 정확 하 게 같은, 우리는 작업에는 또한 초점을 차단 합니다.

이 기능은 영향을 미칠 수 UI 디자인의 많은 같은: 귀하의 아이폰을 꺼내 아이폰에 손을 넣어, 당신의 아이폰 최대 폭 4 손가락 너비를 찾을 수 있습니다.

원을 사용 하 여 차단 되, 녹색 지역은 안전 지역, 어디 우리가 우리가 정확 하 게, 심리학으로 있는지 그리고 노란색 영역 우리의 마음에 조금 방해 이며 생각 우리가 확실 하지 않은 경우 우리가 지구를 더럽힐 수 있는 영역을 대표 하는 지역 대표. 예를 들어 카메라 소프트웨어의 디자인:

네, 문제는 자명 하다. UI의 디자인, 그것은 웹 페이지, 거기는 정말 문제가 없습니다 비전 (물론, 삭제 버튼은 말할 것도 없고은 수정 옆 넣어 바보 같은 방법으로). 그러나, 동일한 시각적 초점 및 동일한 이유의 작업 초점 수정 클릭이 된다 매우 어렵고 긴장 삭제 버튼 옆에 있는 언급 하지 않기 위하여.

사이 점프의 전통적인 인터넷 페이지, 우리는 링크를 사용 하 여 잘 알고 있다. 전체 사이트에 링크 될 수 있습니다 하거나 심지어는 사이트 사이의 모든 점프, 새로운 공간을 입력 하려면 링크를 클릭 합니다. 공간 지 각으로, 머리와 꼬리, 없이 이며 URL 통해 언제 든 지 입력할 수 있습니다.

모바일 장치 응용 프로그램 디자인, 응용 프로그램에 대 한 액세스는 일반적으로 고정된 소수점, 각 작업은 다른 공간으로, 공간 지 각의 손실 같은 지도, 사용자 수의 손실을 쉽게 경우 잃어버린 느낌.

그리고 화면 및 다른 요인의 크기 때문에 app 말할 수 없어 직접 사용자 공간입니다, 있지만 사용자가 힌트를 주고 다양 한 방법이 있다. 예를 들어:

카메라 + 두 주요 장면이 있다, 하나는 사진을 찍고는, 다른 사진 관리는. 사진 장면, 디스플레이 사진 관리 현장을 인터페이스 되겠습니다 아래 사진 앨범을 클릭 하면 둘 사이의 공간은 상하 관계입니다. 부회장-versa。 이 시점에서 사용자에 게 암시 하는 시나리오는 그림에서와 같이.

Reeder 아이폰 버전 같은 더 복잡 한 공간 힌트. 공간에 있는 각 위치는 아주 명확 하다, 그리고 공간의 이러한 의미의 사용자 힌트를 방법의 애니메이션. 뿐만 아니라, Reeder 아이폰 공간 지 각 스타 별표 버전이 아니라 위나 아래로, 관계 하지만. 자신의 경험을 구입 하시기 바랍니다.

또한, Reeder ipad 버전와 공간 감각의 선택은 아주 좋다 또한. 우리의 선택과 Reeder ipad 예 (비디오)에 대 한 가져가 라. 장, 현장 섹션의 선택으로 장면 선택 섹션에서 우리의 선택 두 장면 사이의 공간 관계를 암시 하는 비행기에 "큰 멀리 작은" 근처의 일반적인 감각을 통해, 좁혀 될 것입니다. Reeder는 또한 유사한 접근 방식을 사용.

Ipad의 경우 우리가 일반적으로 사용 하 여 ipad 두 개의 서로 다른 위치에 대 한 첫 번째 ipad 운영, 버튼, 버튼 거리 사이 두 단계 한 손으로 할 필요가 클릭 부담 하지 않습니다 상관 없이 응용 프로그램을 사용 하 여이 위치를 바탕 화면에 넣어 하는 것입니다. 그리고 ipad 손에 있을 때, 문제는이 특정 위치에서 발생.

(만약 당신이 휴대 전화, 제발 잡아 그것은 당신의 손에 지금) 엄지 손가락으로 화면에 모든 지점에 클릭 하지만 녹색 지역 클릭 쉽게 찾을 것입니다 한 손으로 그것을 수행 하려는 경우. 다음 그림에서 알 수 있듯이, ipad의 쉬운 영역을 작동 하는 또한 배포 호 지역에서.

다음 비디오는 또한 나쁜 자세 디자인과 좋은 자세 디자인의 차이 보여 줍니다.

나쁜 자세 디자인의 첫 번째 절반은 디자인 고려 하지 않는 계좌 운영 자세 때문에, 영역의 정상 작동 영역을 운영 하 게 쉬운에서 멀리 이다 하는 동안 기능 가장 중요 한 금 영역을 차지는 왼쪽의 행 자주 사용. 그것을 먹고 죽은 파리 보다 작동 하도록 더 고통 이다. 디자인과 후자, 좋은 자세, 모든 일반적인 기능, 손, 너무 많은 운동을 완료 될 수 있습니다 필요 하지 않습니다: 기사, 다음 기사, 읽지 않은, 스타 플러스 표시.

물론, 우리의 "암소 1 주일" 충실 한 독자 인 경우 다음 당신이 해야 합니다 기억 (무적 뜨거운 바퀴의 황소 주 1.2 참조) 우리의 뜨거운 바퀴와 양 손가락 (소 주 1.1 업데이트 노트)? 그것은 아름 다운 하지만 어려운 디자인 (적어도 좋은 자세 디자인) 그래, 우리는 과감 하 게 양 손가락을 제거 했습니다. 우리는 뜨거운 바퀴의 구조를 유지 했다 (물론, 프로그램에만 사용할 수 없습니다 하지만)이 자세 디자인의 좋은 사례 이기 때문에. 예를 들어 잡지를 읽을 때 우리는 종종 기사 플립 해야, 전통적인 작업은 고급 카탈로그, 및 다음 찾기 문서를 참조 하십시오, 다음 점프. 비디오와 같이 뜨거운 바퀴를 사용 하 여, 당신의 손으로 화면을 떠나, 아무리 손을 얼마나, 당신은 왼손잡이 또는 오른 손잡이 든 없다.

곧 i o s 5에서 ipad의 키보드 디자인도 소위 postural 디자인의 본질을 구현:

iOS 장치, 안 드 로이드를 포함 한 모든 모바일 장치는 그들의 독특한 사용 하는 현장 웹 디자인에서 다르게 디자인 된다. 많은 "예술"와 자주 웹 디자인 디자인 모바일 응용 프로그램에서 역할을 변경 하는 프로그래머로 궁극적으로 제품 디자인의 어려운 수준으로 이어질 이러한 보이지 않는 요소를 감상할 수 있습니다. 최근 몇 년 동안, 상호 작용 디자이너 그들의 웹 사이트의 디자인에 점점 더 중요 해지고 있다, 하는 경우 모바일 장치의 디자인에 그들의 위치 훨씬 더 중요 한 것입니다. 시각적인 초점/작업 초점, 공간 지 각 및 자세 디자인이 3 개의 iOS 디바이스의 기능 안 드 로이드 또는 더 많은 장치, 그리고 물론, 세 가지 특징에 비유 될 수 있습니다.

물론, 그것은 바로 이러한 이유 때문에 우리가 우리에 게 흥분 하는 사람들을 듣고: "와우!" HTML5 적응형 모든 장비를 할 수 있는 예 ~ "우리는 일반적으로 무시 하 고, 명상 마음에 때" 프로그래머! "。 물론, 이것은 비 열 하다입니다. 그것은 단지, 한 가지 인정 하 고, 그 장치를 다른 해상도의 다양 한 크기 최고의 경험을 얻을 하려는 경우 "적응" 수 있도록 적응 하 고 적응 하기 어렵게 만드는 기계. 예를 들어 단추는 것 1 센티미터 폭, 적응, 원래 1/3 호출 했을 때 사람들이 클릭 하는 방법에 아이폰에? 물론, 많은 보기가 있다. 쿵후를 지출 하지 않는, 주의의이 종류의 대부분은 전신 극 작은 광고의 전체 일반적으로 신속 하 게 통증을 해결 하 고 신장 연습 구입 말기 하드웨어 제조 업체의 높은-품질의 애플 리 케이 션의 부족 처럼. 물론, 기술에 민감한 엔지니어는 무의식적으로 소리를 돕고 있습니다.

색상 범위 디자인 모바일 장치에 대 한 고려 수 나갈 것입니다. 더 많은 디자인 방법 및 철학 공유 나갈 것입니다. 유지 조정.

저자: 우 Yixiang "@yxshawn"

설명이 없는 한,이 사이트 기사 원래 또는 복제, 컴파일 지정 하십시오: 36 크립 톤에서 문서