동적 설계를 엔지니어에게 정확하게 전달하는 방법은 무엇입니까?

제가 최근에 웹사이트에서 본 문장 한 편을 인용해 보니 좋을 것 같습니다. 원본 주소: 엔지니어에게 동적 설계를 정확하게 전달하는 방법은 무엇입니까? |UE| 원본/자체 번역 자습서 |TCWison

소프트웨어와 단말기가 발달하면서 사용자 경험 디자인에서 동적 효과의 역할이 점점 더 중요해지고 있으며, 점점 더 많은 디자이너들이 자신의 작품을' 동적' 으로 만들려고 시도하고 있다. 하지만 실제 업무에서는 자신이 설계한 동적 효과를 엔지니어에게 정확하게 전달하여 실현의 편차를 피할 수 있을까 하는 의문이 종종 생길 수 있다고 믿는다. (윌리엄 셰익스피어, 윈스턴, 일명언) 다음으로, 저는 제 경험에 근거하여 여러분과 이 주제에 대해 이야기하고 싶습니다.

조용한 밤, 인터페이스의 전환 애니메이션에 대해 고민하고 있다고 상상해보세요. 갑자기 생각이 번쩍이고 완벽한 방안이 머릿속에 떠올랐습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 침묵명언) 네가 지금 가장 하고 싶은 것은 개발 문서 연구 실현 원리를 보는 것이 아닐 것이다. "나는 즉시 보여줘야 한다."

네, 우리는 디자이너이고 디자이너가 해야 할 일은 시각화입니다. 동적 효과의 경우, 허공에서 묘사하는 것은 항상 손이다. 당신의 마음속에서 가장 빠른 시각화를 설계하는 것이 실현의 첫걸음이다. (조지 버나드 쇼, 성공명언)

첫째, 정확한 디스플레이: 비디오 데모

비디오 데모는 좋은 시작이다. 대부분의 장치에서 반복해서 재생하고 볼 수 있는 영상은 다른 사람들이 자신의 생각을 빠르게 이해할 수 있는 최고의 매체이다. 비디오 데모 제작에 가장 많이 사용되는 도구는 AfterEffects 입니다. AE 는 동적 효과를 제어하고 표현할 수 있는 최고의 개념 설계 도구입니다.

비디오 외에도 AE 의 또 다른 장점은 출력한 PNG 시퀀스 프레임 소재를 일부 PC 또는 휴대폰 소프트웨어에 직접 적용하여 효과를 얻을 수 있다는 점입니다.

둘째, 운영 경험: 대화 형 프로토 타입

비디오 프레젠테이션의 한계는 상호 작용할 수 없다는 것입니다. 대부분의 동적 효과는 사용자가 인터페이스와 상호 작용할 때 트리거됩니다. 이 부분의 동적 효과의 시작 시점과 제스처의 관계는 비디오 데모만으로는 100% 정확하게 전달할 수 없습니다. 이때 상호 작용의 원형이 있다면 많은 문제가 해결되었다.

대화형 프로토타입의 경우 인터넷에는 이미 많은 문장 및 다양한 제작 도구 (Flash, AdobeEdge, QuartzComposer, Keynote, Framer, Pixate, Form ...) 가 있습니다 이 문제에 대해 저는 주로 1, 프로토타입이 여러 사람이 쉽게 공유할 수 있는지 두 가지를 봅니다. 개발에 사용할 수있는 매개 변수를 직접 출력 할 수 있는지 여부

이 두 가지 점을 바탕으로, 나의 첫 번째 선택은 플래시이다.

사과 때문에 플래시의 처지가 갈수록 나빠지고 있다. 그러나 동적 프로토타입 도구로서 몇 가지 고유한 장점이 있습니다.

이점 1: AE 에서 생성된 시퀀스 프레임 푸티지를 직접 가져올 수 있습니다.

이것은 AE 를 동적 디자인으로 시작한 나 같은 사람에게 너무 중요하다. 반복적인 작업이 필요 없다는 뜻입니다. Flash 에 AS3.0 기반 상호 작용 코드를 추가하기만 하면 프로토타입을 완성하고 초기 디자인 아이디어가 프로토타입 단계에서 실현될 수 있습니다.

장점 2: 내보낼 수 있는 설치 패키지 Apk 또는. Ipa 를 가지고 있고, 휴대폰을 가지고 있는 누구와도 공유할 수 있습니다.

제 일은 종종 오프사이트 교류가 필요하기 때문에 원형의 이식성이 중요한 요구 사항입니다. (저는 컴퓨터를 다른 사람에게 표현할 수 없습니다.). 플래시의 패키지 게시 기능이 이제 쓸모가 있습니다. 프로토타입은 AirforAndroid 를 통해 apk 파일 하나를 포장하고, 메일을 상대방의 휴대폰으로 보내며, 쉽고 즐겁다.

Pixate 및 Form 과 같은 기타 주목할 만한 도구는 공유 엔지니어링 파일을 통해 원격으로 전송할 수 있으며 공식 App 를 통해 프로토타입을 휴대폰에 투영하여 실시간 미리 보기를 수행할 수 있습니다. 단점은 몇 가지 기초적인 효과만 할 수 있고, 혁신은 있을 수 없지만, 반복적인 업데이트, 특히 후자가 방금 구글에 인수되어 앞으로 빠른 발전이 있을 수 있다는 점이다.

두 번째 개인 도구 선택은 FramerStudio 입니다. 내가 엔지니어에게 프로토타입을 보여 줄 때, "소스 코드를 보여 줄 수 있니?" 라고 묻는 사람들이 종종 있다. 이때 분위기는 일반적으로 어색합니다. 플래시 또는 Flash 이 만든 프로토타입은 개발에 도움이 되는 코드를 직접 생성하는 것이 아니라 프레젠테이션 역할만 할 수 있기 때문입니다. 이럴 때 학원에 등록하여 안드로이드나 iOS 개발을 배우는 것 외에 다른 방법이 있나요? 대답은: "네! 클릭합니다 FramerStudio 는 우리에게 약간의 서광을 주었다.

FramerStudio 는 강력한 동적 구현 기능을 갖춘 순수 프로그래밍 프로토타입 도구입니다. 그 언어는 Javascript 의 coffee 스크립트에서 유래했다. 문법과 Android\iOS 는 크게 다르지만 동적 효과에서만 공유할 수 있는 논리가 많다.

물론 학습 비용은 더 높을 수 있지만, 한 엔지니어에게 프레임 소스 코드를 보여 줄 때, 일부 애니메이션 매개변수와 구현 논리는 그들에게 실제적인 도움을 줄 수 있기 때문에, 지불과 보답은 정비례한다. 트위터의 디자이너들은 Framer 를 사용하는 과정에 대해 그들의 경험을 공유했다. 이 문장' 트위터 비디오 기능 설계 전 과정 분석' 을 볼 수 있다

또한 iOS 플랫폼에 집중하면 직접 종이접기를 시도할 수 있습니다. 이것은 페이스북 팀이 개발한 프로토타입 도구이다. 클래스 노드 작업을 통해 코드를 직접 작성할 필요가 없습니다. 최신 업데이트에서 iOS 및 안드로이드에 대한 코드 내보내기를 지원합니다. 이 문서에서는 IntrocingOrigamiLive 에 대해 설명합니다.

셋째, 보조 개발: 매개 변수 문서

비디오 데모 및 대화형 프로토타입을 통해 엔지니어가 이미 당신이 무엇을 해야 하는지 알고 있다고 믿는다면, 그들은 즐겁게 동적 효과를 얻을 수 있습니까? 대답은: 반드시 그런 것은 아닙니다. 경험 많은 엔지니어가 해결할 수 있는 간단한 동적 효과도 있습니다. 동적 설계가 복잡하고 많은 매개변수와 속도 변화가 관련되어 있다면, 당신의 묘사와 엔지니어의 육안으로만 보면 편차가 생길 수 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 이 시점에서 매개 변수 문서의 도움이 필요합니다.

자신의 설계가 정확하게 실현되려면 실현의 원리를 이해해야 한다. 구현 원리에 따라 해당 매개변수, 즉 매개변수 문서를 정확하게 작성합니다. 동적 효과의 경우 기본 매개 변수는 다음 세 가지 범주에 불과합니다.

1, 애니메이션 시작 시간, 기간 (비율 \ 간격띄우기)

2. 속성 변경 (회전 \ 위치 \ 배율 조정 \ 알파)

3, 운동 속도 ()

IOS 와 안드로이드의 프로그램 구문이 다릅니다. 공식 홈페이지에 가서 개발자의 문서를 뒤져보고, 동적 구현에서 그들의 대략적인 문법적 형식을 찾은 다음, 이 매개변수들을 적절한 표기하여 엔지니어에게 전달하여 그들이 진정으로 행복하게 개발할 수 있도록 할 수 있다. (윌리엄 셰익스피어, 햄릿, 행복명언)

물론, 개발 과정에서 엔지니어와의 끊임없는 소통 (픽셀 위치, 다양한 모델의 화면 비율, 발생할 수 있는 오차 포함), 생각을 바꿔 문서 또는 demo 를 그에게 던져서는 안 되며, 자신이 손바닥이 되는 것도 무책임하다.

요약:

간단히 말해서, 설계를 정확하게 전달하는 세 단계가 있다.

첫 번째 단계: 빠른 상상력.

너는 어떤 수완이 좋은 도구라도 선택할 수 있고, 빠르고 정확하게 너의 생각을 제시할 수 있다. 이미 절반의 성공을 거두었다.

두 번째 단계: 사용 장면을 최대한 복원합니다.

만약 PC 쪽에 있다면, 컴퓨터에서 시연해 보세요. 모바일 터미널인 경우 휴대전화에 시연됩니다. 가능하다면 상호 작용 원형을 만드는 것이 가장 좋다. 물론 시간과 비용이 허용된 경우이다.

3 단계: 파라메트릭 설계로 엔지니어가 느낌에 따라 개발할 수 있는 상황을 최소화합니다.

저를 믿으십시오, 엔지니어가 느낌에 따라 UI 색상을 조정하지 않기를 바란다면, 동적 효과도 동일합니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 정확한 문건은 너의 전문적인 소양의 구현이다.

마지막으로, 이 문장 속에는 많은 도구들이 언급되어 있으며, 그 도구들은 매혹적인 마력을 가지고 있는 것 같다는 것을 상기시켜 드리고자 합니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 따라서 도구를 추구하는 과정에서 설계의 근원을 잃지 않도록 주의해야 한다. 영화' 블루마인' 에는' 복권에 당첨되려면 복권을 살 충분한 돈을 벌어야 한다' 는 대사가 있다. 마찬가지로, 우리는 디자이너이고, 엔지니어들이 멋진 역동적인 효과를 내려면, 먼저 멋진 디자인을 해야 한다. (윌리엄 셰익스피어, 햄릿, 디자이너명언) 자신의 디자인 능력을 향상시킬 수 있는 모든 기회를 잡아라! 그것은 너의 가장 소중한 것이다.