좋은 인터랙션 디자인에 대 한 UI 원칙 대화형 사이트를 만들

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

인터랙션 디자인은 지금 매우 일반적인 문제, 하지만 많은 디자이너와 개발자가 아직도 모른다 특정 의미. 오늘, 우리는 과거와에서 다른 것: 우리는 귀하의 사이트를 인터랙티브하게 사용자 인터페이스와 디자인 원칙으로 탐구 것입니다.

첫째, IXD 무엇입니까

인터랙티브 디자인 (즉 IXD)은 급속 한 개발의 새로운 영역, 대략 10-15 년 전, 다양 한 디자인 관련 연구에서에서 유래 나중 확인 되었고 전문 디자이너에 의해 허용.

인터랙티브 디자인 사람과 우리가 사람과 웹사이트, 상호 작용 디자이너 소프트웨어 또는 사용자를 포함 하는 시스템의 모든 측면에 대해 생각 하는 UX 디자이너 할 필요 없이 사용자와 컴퓨터의 상호 작용을 고려의 교환 참조 환경 간의 통신을 촉진 합니다. 당신은 인간-컴퓨터 상호 작용-다른 대학에 들어 있을 수 있습니다 이러한도 기본적으로 IXd 필드에서 경작 된다.

무슨 디자이너 할 수 처럼?

대화형 디자이너 제품의 대상 사용자는 누구 이며 누가 그것을 사용 합니다에 대 한 생각 합니다. 이 정보는 사용자 연구원 또는 정보 건축가 의해 제공 됩니다. 이러한 연구에 기초 하 여 인터랙티브 디자이너 사용자에 대 한 소프트웨어와 함께 상호 작용 하 고 가능한 한 빨리이 놀라운 상호 작용을 만드는 시간을 많이 보낸다.

디자이너는 주요 상호 작용을 식별 하 고 블록 다이어그램, 그래서 계속 스케치를 그려 해야 합니다. 일부 디자이너는 직접 그릴 것입니다, 그리고 일부 디자이너를 사용 하 여 소프트웨어 (몇 가지 좋은 예를 보여주는 문서 끝) 지원, 다른 디자이너는 개별적으로 또는 인터페이스를 만드는 데 협력에 있다.

인터랙티브 디자인 (IXD)는 끊임없이 항상 사이트에 일이 새로운 것 들을 기대 하는 사용자가 있기 때문에, 상호 작용 하는 새로운 방법을 보여줍니다. 그러나 상호 작용 디자이너는 이러한 기능 사용자에 미치는 영향을 알고 있어야 하 고 그들은 정말 달성 하고자 하 고 그들이 많은 아이디어에 동안 넣을 수 있습니다 무엇을 선택할 필요가 있다.

아래 우리는 몇 가지 운전 인터랙션 디자인의 개념을 볼 것 이다.

대상 기반 디자인

비록 IXD 해야 할 필요 하지 않습니다, 사용자 연구 최고의 디자인 피드백을 위해서 중요 하다. 사용자가 소프트웨어를 사용 하는 경우 그들은 일반적으로 마음에 몇 가지 목표를가지고 하 고 응용 프로그램은 그 목표를 잘 충족 해야 합니다. 성공적으로 디자인과 기능을 결합, 위해 사용자 연구는 가장 중요 한 요소입니다.

그래서 그 많은 사용자 연구원도로 찾을 수 있습니다 일 인터랙티브 디자이너 그들은 소프트웨어에 사용 되는 인간의 행동 패턴에 기술을 분석 하는 때문에 중요 하다.

단순한

사람들이 몰라 무슨 사용자 인터페이스. 사실, 그들은 상관 없어. 그들은 누군가가 그들은 사이트에 뒤에 무엇을 볼 계획은 모른다. 그들은 알고 그들은 간단한 웹사이트를 필요. 그들은 사용 하기 쉬운 시스템을 로드/응답 신속 하 고 생각 하 고 슬 퍼 할 이유가 사용자에 게 사용자를 허용 하지 않습니다 싶어요.

시나리오 및 패턴

우리가 일반적으로 사용 하는 제품의 일부가 매우 명확한 기능 디자인, 그래서 모두가 그들을 사용 하는 방법을 알고 있다. 가 위를 예로 들어 봅시다. 3 세 아이, 두 개의 반지, 그리고 그것을 사용 하 여 하나의 활성 방법에 두 손가락을 사용 하는 방법을 알고 있다. 아무것도 더 간단 하 게 이다입니다. 귀하의 사이트에 간단 하 고 사용 하기 쉽게가 해야 합니다.

왜 사용 하 여 단어 "상황" 여기? 웹사이트 또는 일부 열 뒤에 시스템의 기능을 표현 하는 단어 이기 때문에.

패턴, 관련 일련의 잘 알려진 구성 요소, 사용자 인터페이스 구성 해야 하 고 사용자는 양식을 제출 하 고 싶다면, 그들은 먼저 제출 버튼을 찾을 것입니다. 이 단추는 공통 요소, 그리고 디자이너 때마다 새 프로젝트를 수락 초기 바퀴를 반복에 대 한 필요는 없습니다.

어떤 사람들은 기존 패턴을 모방 하지 휠 혁신 할 것 이라고 사람들이 혁신적인 느낌을 말할 것 이다. 가용성은 보장 되지 않습니다 때 혁신에 대해 이야기 하는 것은 바보 이다. 기억 하 고, 사용 및 혁신의 용이성은 다릅니다.

혁신 하려면 여전히 알려진된 패턴을 이해 해야 합니다. 그러나, 높은 가용성을 추구 하는 경우 아무도 장려 한다 바퀴를 재발견 수 사용자가 당신의 바퀴에 적응 하는 시간이 필요 하기 때문에.

매우 사용 하기 쉬운 시스템을 규칙, 시나리오, 그리고 웹 유용성의 깊은 이해를가지고 상호 작용 디자이너를 필요 합니다.

당신은 상호 작용 디자인의 원리의 이해, 좋은 상호 작용 디자인 사용자에 미치는 영향에 대해 살펴보겠습니다.

방문자 위치

인터랙션 디자이너 알아야 그들의 디자인을 대상으로, 어떤 사용자가 그래서 그들은 사용자를 통해 그들을 배치할 수 있습니다.

경험과 사용자 머물고 페이지 쇼 탐색할 때 사용자를 혼동 하지 않습니다. 사용자가 또한 다른 한 페이지에서 이동 하는 방법을 배울 수 있습니다. 그것은 사용자가 어디에 있는지 지금 알 수 있도록 해야 합니다. 이 상호 작용 경험 때 나쁜 검색 쿼리 없이 고 말하지 않는다 사용자 다음 할 일을.

지속적인 대화

상호 작용 디자인 사용자에 게 지속적인 피드백을 제공에 많은 노력을 집중 한다. 여부 그들은 하 고 권리 또는 잘못, 무의식적인 수준, 사용자에 대 한 인기 있는 요소에 사용자에 게 합니다. 당신은 그들에 게 그들은 사용자 작업을 완료 하면 성공 했습니다.

아마존에서 뭔가 구입 하는 경우 귀하의 브라우저에 귀하의 사서함에 확인 얻을. 폼에 연락 하 여 메시지를 전송할 때 페이지를 확인을 받게 됩니다.

이 상호 작용 뿐만 아니라 사이트의 탐색 및 기능 사용에 있어 하지만 또한 새로운 수준의 상호 작용을가지고 있습니다: 그것은 사용자가 더 나은 그들의 현재 상태를 이해 하도록 하 고 의심과 문제, 최소화 하 고 사용자 좌절을 제거.

워크플로에 대 한 생각

IXD 또한 워크플로 고려 하십시오. 등록 양식이 있을 경우 어떻게 사용자가 그것으로 메시지? 것 이다 페이지 새로 고침, 홈페이지로 이동, 확인 표시 됩니다, 상위 2 페이지를 방문 페이지, 또는 같은 시간 점프에 이동할 것입니다?

그것은 많은 선택 하는 데 및 선택, 최고의 사용자 평균을 맞는 거 야 하나입니다. 언급 하는 요소의 모든 웹 사이트 작업의 일부입니다. 각 상호 작용 다음 논리적 단계를 수행 하 고 귀하의 사이트에 이전에 만든 경험을 일치 해야 합니다.

시각적 수준

원하는 무엇을 할 사용자를, 그들을 돕기 위해 시각 레벨을 사용할 수 있습니다. 레이아웃, 요소 크기 및 색상 조합 가이드 사용자의 눈에 시각적으로 현저한 효과 달성 하기 위해 사용할 수 있습니다.

또한 사용자가 원하는 찾을 수 있도록 시각적 계층 구조를 사용할 수 있습니다. 당신이 차를 임대 하 고 싶어요? 시각적 계층을 사용 하 여 "임대" 페이지로 사용자를 안내 하는 수 있도록.

좋은 와이어 프레임 도구

초안을 그리는 게 중요 하다 고 골격, 인터랙티브 디자인을 시작할 수 있도록 몇 가지 편리한 도구를 표시 하 고 싶습니다 그래서 바로 작동.

앵무새

앵무새는 웹 기반 응용 프로그램에 사용자 수, 연결, 미리 보기, 만들고 공유 하는 사이트 또는 응용 프로그램의 블록 다이어그램 이다. 그것의 인터페이스는 간단 하 고 친절 한, 사용자가 드래그 앤 드롭 요소, 크기 조정, 또는 링크 공유를 촉진 하기 위하여 동료를 통해.

앵무새는 웹 기반 응용 프로그램 이므로 생성 하 고 모든 컴퓨터에서 어디서 나 당신의 아이디어를 수정 의미.

사랑 스러운 차트

사랑 스러운 차트 flowcharts, 조직 차트, 사이트 맵 및 흐름 다이어그램을 만들 사용자를 허락 하는 온라인 차트 응용 이다.

응용 프로그램의 주요 기능은 무엇에 대 한 추측 그릴-드로잉 과정을 간소화 하는 데 도움이 그리고 그것은 또한 오래 된 버전을 반환 하 여 변경 내용을 취소할.

Mockflow

Mockflow 좋은 웹 응용 프로그램을 깨끗 하 고 간단한 조직 인터페이스와 다양 한 함수형 기능 이기도 합니다.

드래그-앤-드롭 사용, 메뉴, 광고 및 풀 다운 메뉴 차트에서 기본 제공 구성 요소 있습니다. 자신의 사진을 업로드 하거나 블록 다이어그램을 구축 하는 과정은 매우 빠르다 그래서 사이트 제공, 일반 자료를 선택할 수 있습니다.

Simplediagrams

Simplediagrams는 사용자가 위에서 언급 한 응용 프로그램으로 동일한 드래그 앤 드롭 기술을 사용 하 여 블록 다이어그램을 생성 하 여 자신의 아이디어를 표현 하는 데 도움이 또 다른 데스크톱 응용 프로그램입니다.

하지만 다른 응용 프로그램 보다 덜 기능, Simplediagrams 사용자가 빠른 블록 다이어그램을 만들 수 있도록 기본 도구 제공.

Simplediagrams 도입 후 오늘날의 기사를 종료 해야 합니다. 사용자가 테스트의 중요성을 잊지, 혁신 및 유용성 잘못 된 방향에서 이동 하는 경향이 기억 하지 마십시오. 마법의 대화형 인터페이스를 만들 때 혁신 하 고 그것을 사용 하는 사람들을 위해 쉽게 하는 방법에 집중 한다.

마음에 유지 하 고 멋진 웹 또는 응용 프로그램 상호 작용 디자이너 될 것입니다.

이 큰 상호 작용 디자인 분야의 무슨 생각 하십니까?이 혹시 시도 하지 않고, 비슷한 인터페이스 요소를 디자인 하거나 그것 당신이 갈망 하는이 원리를 알면?

이 문서에서 모든 번역 학습 및 통신 용도로, 문서 번역기, 소스, 그리고이 문서에 링크를 나타내는 데 반드시 재현

우리의 번역 작품 CC 계약에 따라 우리의 일 관심사, 위반한 경우 문의 하시기 바랍니다 즉시