Tag: linear

  • 멀티미디어의 4가지 네비게이션 구조

    멀티미디어는 크게 보면 선형과 비선형으로 나눌 수 있다.

    • 선형 콘텐츠: 영화 화면 표현과 같은 탐색 제어 또는 이전(PREV)/다음(NEXT)과 같이 단순한 제어로 진행된다.
    • 비선형 콘텐츠: 사용자의 상호작용을 제공하여 컴퓨터 게임이나 컴퓨터 기반 훈련을 사용하여 진행 상황을 제어할 수 있다. 비선형 콘텐츠는 또한 하이퍼미디어 콘텐츠로도 알려져 있다.

    멀티미디어 프레젠테이션은 생방송이 될 수도 있고 녹화 형식이 될 수도 있다. 녹화되는 프레젠테이션은 내비게이션 시스템으로 상호 작용을 하며, 생방송 멀티미디어 프레젠테이션은 발표자와의 상호 작용을 통해 대화하게 된다.

    종종 디자이너는 기획이 완료되고 멀티미디어 프로젝트를 승인하면 실제로 프로젝트를 설계하고 제작할 차례가 된다. 설계 단계는 계획을 따라야 한다. 그러나 필연적으로 변경이 발생하게 된다. 원래 목표를 충족하는 효과적인 멀티미디어 프로젝트를 제작하려면 디자인 및 제작에 대한 체계적인 접근 방식을 취해야 한다.

    “최상의 사용자 인터페이스는 최소한의 학습 노력을 요구합니다.”

    인터페이스 디자인에 대한 VAUGHAN의 일반적인 규칙!

    네 가지 기본 조직 구조(Organizing Structures)

    선형(Linear)

    사용자는 한 정보 프레임에서 다른 정보 프레임으로 순차적으로 탐색(navigate)한다.

    계층형(Hierarchical / Liner with Non-linear branching)

    사용자는 콘텐츠의 자연적인 논리에 의해 형성된 트리 구조의 가지를 탐색한다.

    비선형(Nonlinear)

    사용자는 미리 정해진 경로에 따라 제한 없이 콘텐츠를 자유롭게 탐색한다.

    복합형(Composite)

    사용자는 비선형으로 탐색할 수 있지만 때로는 선형 프레젠테이션으로 제한된다.

    멀티미디어에 사용되는 네 가지 주요 내비게이션 구조
    참고자료:
    Four Primary Navigational Structures Used in Multimedia
  • 인터랙티브 애니메이션 ①

    인터랙티브 애니메이션 ①

    본질적으로 어떤 것도 한 지점에서 다른 지점으로 선형 이동하지 않는다. 실제로, 물건이 이동할 때 가속하거나 감속하는 경향이 있다. 우리의 뇌는 이러한 종류의 모션을 예상하므로 애니메이션을 만들 때 이러한 모션을 활용해야 한다. 자연스러운 모션은 앱 사용자에게 편안한 느낌을 주고 전반적인 사용 환경을 개선해 준다. – Paul Lewis(Paul is a Design and Perf Advocate)

    • easing은 애니메이션을 자연스럽게 만든다.
    • UI 요소에 대해 ease-out 애니메이션을 선택한다.
    • 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피한는 것이 좋다. 최종 사용자에게 굼뜬 느낌을 줄 수 있기 때문이다.

    전통적인 애니메이션에서 느린 시작 후 가속하는 모션을 ‘slow in’이라고 하고 빠른 시작 후 감속하는 모션을 ‘slow out’이라고 한다. 웹에서는 각 모션에 대해 ‘ease in’ 및 ‘ease out’이라는 용어를 주로 사용한다. 두 모션이 조합된 경우는 ‘ease in out’이라고 한다. easing은 실제로 애니메이션을 더욱 부드럽고 편안한 느낌이 들게 만드는 프로세스이다.

    1. 선형(linear) 애니메이션

    LINEAR_EASE.gif

    easing을 사용하지 않은 애니메이션을 선형이라고 한다.
    시간 경과에 따라, 값이 균일하게 증가하며, 선형 모션을 사용할 경우, 로봇처럼 부자연스러운 느낌을 주므로 사용자가 불편함을 느낄 수 있다. 일반적으로, 선형 모션을 피하는 것이 좋다.

    2. Ease-in 애니메이션

    EASE_IN_CURVE.gif

    Ease-in 애니메이션은 ease-out 애니메이션과 반대로 느리게 시작했다가 빠르게 끝난다.
    이러한 종류의 애니메이션은 무거운 돌이 떨어지는 것처럼 느리게 시작하고 낮은 쿵 소리와 함께 빠르게 지면을 때린다.
    하지만 상호작용 관점에서 ease-in은 갑작스럽게 끝나기 때문에 약간 부자연스러운 느낌이 들 수 있다. 실제 세상에서 움직임은 단순히 갑자기 멈추는 것이 아니라 감속하는 경향이 있기 때문이다. 또한 ease-in은 시작 시 굼뜨게 움직이는 듯한 잘못된 효과로 인해 사이트나 앱에서 반응 인지에 부정적 영향을 미칠 수 있다.

    3. Ease-out 애니메이션

    EASE_OUT_CURVE.gif

    Easing out은 선형보다 더 빠르게 애니메이션을 시작하며 마지막에 감속한다.
    Easing out은 빠른 시작으로 애니메이션에 반응 효과를 주면서도 마지막에 자연스러운 감속 효과를 나타내기 때문에, 일반적으로 사용자 인터페이스 작업에 가장 적합하다.

    4. Ease-in-out 애니메이션

    EASE_IN_OUT_CURVE.gif

    Easing in 및 easing out은 차량의 가속 및 감속과 유사하며, 적절히 조합하여 사용하면 easing out만 사용하는 것보다 더욱 드라마틱한 효과를 제공할 수 있다.

    ease-in은 애니메이션을 더디게 시작하기 때문에 애니메이션 기간을 지나치게 오래 설정하지 않는 것이 효과적이다. 일반적으로 300-500ms 사이의 임의 값이 적합하지만, 정확한 값은 프로젝트의 느낌에 따라 상당히 달라진다. 그러나 느린 시작, 빠른 중간, 느린 종료로 인해 애니메이션의 대비가 증가하여 사용자에게 만족감을 줄 수 있다.

    5. Ease In Back 애니메이션

    EASE_IN_BACK.gif

    Ease In Back 은 애니메이션이 초기 키프레임 값을 지난 다음 끝에 도달함에 따라 가속되는 경우이다. 이것은 애니메이션에 바운스를 만들어 관객을 준비시키고 주요 액션을 강화하는 예측 액션 역할을 한다. 천천히 Ease In과 매우 유사 하게 Ease In Back는 개체를 보기에서 부드럽게 전환하는 데 적합하다.

    6. Ease Out Back 애니메이션

    EASE_OUT_BACK.gif

    Ease In Back 의 반대이다 . 애니메이션은 빠르게 시작한 다음 느려지고 종료 키프레임의 값을 지나간다. 이렇게 하면 기본 동작에 대한 부드러운 종료 전환을 만드는 정착 역할을 하는 애니메이션에 바운스가 생성된다. Ease Out 과 유사하게 Ease Out Back 은 개체를 보기로 이동하는 데 적합하다.

    7. Ease In And Out Back 애니메이션

    EASE_IN_OUT_BACK.gif

    애니메이션이 초기 키프레임 값을 초과할 때 천천히 시작한 다음, 속도가 느려지고 끝 키프레임 값을 초과하기 전에 빠르게 가속된다. 이것은 최종 상태 이전에 리바운드 모션과 함께 시작, 빠른 모션에서 예상되는 바운스를 만든다.

    슬라이드 자료