フローチャートと UI フローの違いは何ですか?

今回は、FLOW CHARTとUI FLOWの違いと、プロジェクトでFLOW CHARTとUI FLOWを使用する際の注意事項についてお届けします。実際の事例を見てみましょう。

UI デザインの多くのコンセプトは、紙の上ではあまり変わらないように見えますが、実際には大きく異なります。長い間投稿していない台湾人デザイナーの @Akane_Lee 先生が、コンセプトを分析し、フローチャートと UI フローの機能について詳しく説明しました~

書くのに忙しいので、ほぼ 1 か月間投稿していませんでした。プロジェクト、プロトタイプの作成、研究室の学生レポートの作成など。最近UI Flowを整理しなければならないことが多くて、整理すればするほど頭がごちゃごちゃになってきます。 UI フローとフローチャートについて話しましょう。 Flow は「プロセス」、UI Flow はページの流れ、Flow Chart はフローチャートです。この 2 つはまったく異なるグラフです。

UIデザイナーはUIフローについてはよく知っていますが、フローチャートについては詳しくないかもしれません。ソフトウェア開発ではフローチャートはSAが書くことが多く、「判断力」に重点が置かれていますが…雑誌に付いている心理テストのようなものだと思ってください。「はい」を選択した場合は次へ進みます。右に進み、「いいえ」を選択した場合は左に進みます。

RDでは、プログラムを書く前に、様々な「判断」から構成される演算構造である「ロジック」をまず知らなければなりません。 UI にはロジックも非常に重要です。そうでない場合、操作後にユーザーはどのような応答を返すべきでしょうか。 最も一般的なメンバー ログイン

「メンバー ログイン」を例に挙げると、ユーザーはアカウントのパスワードを入力します。会員情報ページでは、入力が間違っているとエラーメッセージが表示されます...

機能マップからUIフローを描画したいだけですが、「何をすればいいのか」を無視してしまうことがよくあります。 「ユーザーが操作ミスをした場合はどうしますか？」と表示され、最後の瞬間に不足しているページが UI であることがわかりました。急いで不足しているページを追加しました。RD は悲惨です。プラグイン機能がエレガントではなく、エラーが発生しますプロンプトは、ステージを下げたり、時間があるときに補ったりできるものではありません。ページやプログラムは、口で描いたり書いたりするものではありません...

ランダムに入力していただければ、認証コード

を差し上げます。

とても単純なことのようですが、それだけではありません。実際に描いてみると、UIフローには見落としがちな点がたくさんあることがわかります。 (そして、機能を追加せずに、どうやってこのようになったのでしょうか?)

時々、ユーザーが間違いを繰り返すことがあり、誰かがアカウントを盗もうとしていると推測するのが合理的です。一般的なブロック方法は、複数の間違った入力を行ったユーザーに追加の確認コード フィールドに入力するよう求めることです。したがって、フローチャートは次のようになります。

上の図は単なる単純なプロセスのデモですが、何気なく「認証コード機能の追加を手伝ってください」と言うと、フローチャートは突然太くなります。実際のメンバーのログイン認証には、さらに多くのトリックや

セキュリティの考慮事項があります。たとえば、ログインを 3 回間違えると、「パスワードを忘れた場合」などの追加のプロンプトが表示されます。さらに深刻なのは、アカウントが直接ロックされることです。ユーザーはカスタマーサービスに問い合わせるよう求められます。

フローチャートとUIフローは相互補完しており、フローチャートさえもUIフローよりも先に来ます。フローチャートがなく、処理する判断の数がわからない場合、UI フローが生成され、計画が不十分なためにページ漏洩が発生する可能性が非常に高くなります。

UIフローだけがあってフローチャートがなければ、RDは絵からフローチャートや判断式の使い方をほとんど想像できませんが、システムが大きくなればなるほどバグが発生しやすくなります。パッケージはRD経験値に基づいて決定されます。しかし、UI フローさえありません。ただいくつかのワイヤーフレームやモックアップに頼るだけで、RD は 1 つの

静的 画像を見てページをリンクする方法を理解できません。ブレーンストーミングだけに頼ってください。

何も言わないなら、RD にプロトタイプを投げてコピーしてもらってください。全く同じものを作るのは簡単ですよね？ RD もすべての画面のすべての

ボタン を押して押す必要があります。あらゆる種類の間違いを試してみると、関数の接続方法がわかります。人をこんな風に扱うRDがどれだけ嫌いですか...

UIデザイナーの観点から見ると、フローチャートは「この状況でユーザーがタスクを完了するためにどのように操作し、ソフトウェアがどのように反応するか」と考えることができます。 、UI フローを「ユーザーがこのように操作するため」に拡張し、これらの機能と情報を提示するため、ページはこのように接続されます。

UIデザイナーは必ずしもフローチャートを描ける必要はありませんが、フローチャートを理解できなければなりません。一般的なフローチャートのシンボルは修正されます。見た目が悪いからといって、新しいスタイルをデザインしないでください。RD によって形勢が逆転することは間違いありません。

「結婚前の頭の中の水は、結婚後に流した涙である」という有名な言葉がありますが、ソフトウェア開発に当てはめると、「仕事を始める前に消耗する脳は、仕事を始めてから傷つく肝臓です。」仕事。"初期段階ではどれだけの機能が想定外だったのか、後期ではどれだけの工数が想定外だったのか…

これらの事例を読んで、あなたは手法を習得したと思います。さらに興味深い情報については、注目してください。その他の関連記事は PHP 中国語 Web サイトにあります。

関連書籍:

HTML 要素の水平方向と垂直方向の中央揃えを設定する方法

XHTML で一般的に使用されるタグとは何ですか

HTML で水平線の注釈とコード コメントを使用する方法

以上がフローチャートと UI フローの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。