> 웹 프론트엔드 > HTML 튜토리얼 > 플로우 차트와 UI 플로우의 차이점은 무엇입니까?

플로우 차트와 UI 플로우의 차이점은 무엇입니까?

php中世界最好的语言
풀어 주다: 2018-01-25 11:25:03
원래의
1592명이 탐색했습니다.

이번에는 FLOW CHART와 UI FLOW의 차이점과 프로젝트에서 FLOW CHART와 UI FLOW를 사용할 때의 주의 사항에 대해 알려드리겠습니다.

UI 디자인의 많은 개념은 종이 위에서는 크게 달라 보이지 않을 수 있지만 실제로는 크게 다릅니다. 오랫동안 포스팅을 하지 않았던 대만 디자이너 @Akane_Lee 선생님께서 개념을 분석하고 Flow Chart와 UI Flow의 기능을 자세히 설명해주시네요~

거의 한 달간 글을 쓰느라 바빠서요. 프로젝트, 프로토타입 제작, 실험실 학생 보고서 실행. 최근 UI Flow를 많이 정리해야 하는데, 정리할수록 머리가 복잡해지는 느낌이 듭니다. UI Flow와 Flow Chart에 대해 이야기해 보겠습니다. Flow는 "프로세스"이고, UI Flow는 페이지 흐름이고, Flow Chart는 순서도입니다. 둘은 완전히 다른 차트입니다.

 UI Designer는 UI Flow에 매우 익숙하지만 Flow Chart에는 익숙하지 않을 수도 있습니다. 소프트웨어 개발에 있어서 Flow Chart는 보통 SA가 작성하는데 초점이 '판단'에 맞춰져 있는데... 잡지에 붙어 있는 심리 테스트라고 생각하면 된다. 오른쪽으로, "아니요"를 선택하면 왼쪽으로 이동합니다.

 RD의 경우 프로그램을 작성하기 전에 먼저 다양한 "판단"으로 구성된 연산구조인 "논리"를 알아야 합니다. UI에서는 로직도 매우 중요합니다. 그렇지 않으면 작업 후 사용자가 어떤 응답을 해야 할까요?

  가장 인기 있는 회원 로그인

"회원 로그인"을 예로 들면 사용자가 계정 비밀번호를 입력하고, 맞으면 자동으로 넘어갑니다. 회원정보 페이지에서 입력이 잘못되면 오류 메시지가 뜹니다...

그냥 Functional Map에서 UI Flow를 그려보고 싶은데 "어떻게 하면 되는지"를 무시하는 경우가 많습니다. 사용자가 작업 오류를 발생시켰습니다.", 마지막 순간에 누락된 페이지가 UI라는 것을 알아내고 급히 누락된 페이지를 추가했습니다. RD는 비참합니다. 플러그인 기능이 우아하지 않고, 오류 프롬프트가 별 것도 아닙니다. 페이지나 프로그램은 입으로 그려서 작성하지 않습니다...

 무작위로 입력하시면 인증코드

드려요

아주 간단해 보이는데요. ?그게 다가 아닙니다. 실제로 그려보면 UI Flow에서 쉽게 간과되는 부분이 많다는 것을 알게 될 것입니다. (기능을 추가하지 않고 어떻게 이럴 수 있겠습니까?)

때때로 사용자가 계속 실수를 저지르는 경우가 있습니다. 누군가가 계정을 도용하려고 한다고 추측하는 것이 합리적입니다. 일반적인 차단 방법은 잘못된 항목을 여러 번 입력한 사용자에게 추가 확인 코드 필드를 입력하도록 요청하는 것입니다. 따라서 Flow Chart는 다음과 같습니다. 위 그림은 단순한 프로세스 시연일 뿐이지만 "야, 인증코드 기능 추가 도와줘"라고 아무렇지도 않게 말하면 Flow Chart가 갑자기 더 두꺼워집니다. 실제 회원 로그인 인증에는 더 많은 트릭과

보안

고려 사항이 있습니다. 예를 들어, 3번 잘못 로그인하면 "비밀번호를 잊어버렸습니다"라는 메시지가 추가로 표시됩니다. 더욱 심각한 경우 계정이 직접 잠깁니다. 사용자는 고객 서비스에 이의를 제기하라는 메시지를 받게 됩니다.

 Flow Chart와 UI Flow는 서로 보완적이며 Flow Chart도 UI Flow보다 먼저 옵니다. Flow Chart가 없고 얼마나 많은 판단을 처리해야 할지 모르는 경우 잘못된 계획으로 인해 페이지가 누출될 확률이 매우 높습니다.  UI Flow만 있고 Flow Chart가 없으면 RD는 Flow Chart를 그림으로 보고 판단 공식을 어떻게 사용할지 거의 상상할 수 없습니다. 그러나 시스템이 클수록 버그가 발생하기 쉽습니다. 패키지는 RD 경험치에 따라 결정됩니다. 하지만 UI 흐름도 없습니다. 몇 개의 와이어프레임이나 목업에만 의존하는 것은 단순히 코끼리를 파악하려는 장님입니다. 단일

정적

그림을 보면 RD가 페이지를 연결하는 방법을 알 수 없습니다. 브레인스토밍에만 의존한다.  아무 것도 안 주면 RD에게 프로토타입을 던지고 복사해 달라고 하면 똑같이 만드는 건 쉽죠? RD도 화면마다

버튼

을 찔러서 눌러야 하잖아요. 온갖 실수를 시도해 보면 기능을 연결하는 방법을 알게 될 것입니다. 이런 사람을 대하는 RD가 얼마나 싫은지...

UI 디자이너의 입장에서 보면 Flow Chart는 "이 상황에서 사용자가 작업을 완료하기 위해 어떻게 작동하는지, 소프트웨어가 어떻게 반응하는지"라고 생각하면 됩니다. , 그리고 UI Flow를 "사용자가 이렇게 조작하기 때문에"로 확장하고, 이러한 기능과 정보를 제시해야 하므로 페이지가 이렇게 연결됩니다.

 UI 디자이너는 반드시 Flow Chart를 그릴 필요는 없지만, 이를 이해할 수 있어야 합니다. 일반적인 순서도 기호는 수정되었습니다. 보기 흉하다고 해서 새로운 스타일을 디자인하지 마세요. RD가 판도를 뒤집을 것입니다.

"결혼 전 머리 속의 물은 결혼 후 흘린 눈물이다"라는 유명한 말이 있습니다. 일하다." 초기 단계에서는 얼마나 많은 기능이 예상되지 않았는지, 이후 단계에서는 얼마나 많은 작업 시간이 예상되지 않았는지...

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주목해 주세요. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!

관련 읽기:
HTML 요소의 가로 및 세로 중심을 설정하는 방법

XHTML에서 일반적으로 사용되는 태그는 무엇입니까


HTML에서 가로줄 주석 및 코드 주석을 사용하는 방법

🎜🎜

위 내용은 플로우 차트와 UI 플로우의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿