it-swarm-korea.com

모형에서 상호 작용을 어떻게 정의합니까?

저는 프로그래머이자 UX/UI 디자이너입니다. 물건을 디자인 할 때 일반적으로 인터페이스의 모양에 대한 정적 이미지를 만듭니다. 문제는 대부분의 UI가 정적이지 않다는 것입니다. 그들은 사용자 입력에서 변경되고 크기가 조정됩니다. 물론 인터페이스가 그러한 입력에 어떻게 반응해야 하는지를 정확히 알고 있지만 대규모 프로젝트의 경우 클라이언트와 다른 프로그래머가 내 모형을 가져 와서 상호 작용을 이해할 수 있어야합니다. 디자인이 사용자와 상호 작용하고 반응하는 방식을 모형에 어떻게 표시합니까?

17
Jonathan Dumaine

상호 작용을 설명하는 가장 좋은 방법은 대화식 프로토 타입으로 모델링하는 것입니다.

Axure 또는 우리가 개발하고있는 것과 같은 다양한 프로토 타이핑 도구가 있습니다. Handcraft . 어느 쪽을 사용하든 요점은 클라이언트, 동료 등에 게 모형의 요소와 상호 작용할 때 발생하는 일을 보여줄 수 있다는 것입니다. 그러나 프로토 타입을 사용하면 클릭 가능한 모형을 사용하는 것보다 대화 형 기능을 보여주는 훨씬 더 나은 결과를 얻을 수 있습니다. 모형을 사용하여 기본 상태 변경을 표시 할 수 있으며, 디자인 프로세스에 유용 할 수있는 단계가 있지만 애니메이션 (특정 상황에서는 중요), 반응 ( 상호 작용의 핵심 요소) 및 기본 또는 웹 앱의 경우 특정 플랫폼 사용의 "느낌".

7signals 와이어 프레임을 건너 뛰고 HTML로 바로가는 방법에 대해 많이 이야기합니다. 나는 몇 달 전에 그들이 프로세스를 설명하는 대화에 대해 블로그 게시물 을 썼습니다.

그러나 정적 모형을 보강하려는 경우 Jakub Linowski의 대화식 스케치 표기법 은 UML과 같은 방식으로 상호 작용을 설명하는 좋은 출발점입니다.

interactive sketching notation

비슷한 토론에 대해서는 PSD의 장단점 vs HTML 모형 을 참조하십시오.

웹 사이트 또는 응용 프로그램을 구축하는 경우 가능한 한 최종 제품에 가까운 형식으로 모형을 설계하기 때문에 HTML 모형이 훨씬 우수합니다. 이를 통해 기대치를 훨씬 쉽게 설정하고 최종 제품에서 가능한 것만 제한하며 훨씬 더 큰 유연성을 제공합니다.

25
Rahul

대화 형 모형이 옵션이 아닌 경우 텍스트를 사용해보십시오. 정적 이미지 또는 와이어 프레임의 일부를 가리키는 숫자를 추가 한 다음 각 숫자에 상호 작용 메모를 제공 할 수 있습니다.

alt text

위 : 포인팅 숫자의 예.

5
JeromeR

Axure (또는 다른 대화식 프로토 타이핑 도구 또는 HTML 또는 Flash)와 같은 옵션이없는 경우 가장 좋은 방법은 "표준"또는 "기본"보기를 와이어 프레임 한 다음 추가 와이어에 표시하는 것입니다. 특정 모듈의 대체 상태.

내 경험상 텍스트 기반 주석에 의존하여 변경 사항을 전달하는 것만으로는 충분하지 않습니다. 클라이언트/개발자 등이 완벽하게 주석 처리 된 와이어 프레임을 잘못 이해하거나 잘못 빌드 한 프로젝트를 너무 많이 수행했습니다. 시각적으로 더 잘 포착 될 중요한 텍스트 세부 사항을 놓쳤습니다.

2
Michael Histen

나는 이것이 반 살이라는 것을 알고 있지만, 아무도 그것을 언급하지 않았으므로 다음과 같이 할 것입니다.

Bill Buxton은 인터랙션 디자인의 "스케치"문제를 다루는 "Sketching User Experiences" 라는 책을 썼습니다. 어떻게 인터랙션 개념과 패턴을 신속하고 저렴한 비용으로 탐색 할 수 있습니까? 너무 추상적이지 않습니까?

2
Jan