web-dev-qa-db-ja.com

単純なワークフローを視覚化する-コンテンツの視覚化

上司のWord文書には、次のような内容が含まれています enter image description here

このコンテンツをWebサイト、具体的にはレスポンシブWordPress Webサイト。

最初から最後までの流れを示しているので、彼は本当に矢印が好きだと思います。

私はこれがWeb上でどのように見えるかを示す単純なCSSモックアップを作成しましたが、あまりにも多くの部分が好きではありません。小さな画面では実際には機能しません。

コンテンツの本質は、タイトル/キャプショングループです。タイトルはすべて、矢印の形で並べて配置する必要があります。

これを視覚化するより良い方法はありますか？

https://jsfiddle.net/mouseoctopus/wtsj873m/

info-visualisationflowcharts
1
user1778606

あなたはすでに何か他のことをしたことを知っていますが、あなたが取ることができるもう1つのアプローチは、「矢印」のメタファーを保持することですが、矢印を横切るのではなく画面の下に移動するようにそれらを回転させます。

次に、暗黙のフローを保持できますが、関連するテキストの幅も広くなります。急いでハッキーなフォトショップの仕事（ひどいテキストの配置など）を許しませんが、次のようなものです：

vertical flow steps

もちろん、横長形式の画面にはあまり適していませんが、矢印をよりフラットにして、右側のテキストをもう少し広げることで、より適切にフィットさせることができます...ブラウザ。そのアプローチはまた、縦向きの電話ディスプレイでもうまく機能するものにつながるでしょう...

コメントですでに採用しているアプローチもこのアプローチで機能し、垂直ビューに切り替えるときに矢印を保持します。

3
Adrian Long

Arrowsソリューションの方が好きです。投稿した2番目のjsfiddleリンクは、矢印からボックスに切り替えたため、フローの一部が失われています。

モバイルでの見た目が気になる場合は、最初の3つの図形の後に休憩を作成するだけです。このようにして、最初の3つ（損失の最初の通知、割り当て/分割、調査/評価）はすべて1つの行にあり、次の3つは2つ目の行にあります。

0
Ana Zdravic

ワークフローの視覚化に役立つ a Sankey Diagram の使用を検討してください。

visualization of a security incident workflow

ワークフローを表すために使用される階層グラフを見てきましたが、たとえば、2つの親を持つことができるノードなど、何かが欠けているといつも思っていました。 Sankeyダイアグラムはその問題を解決し、およびは、「ノード」間で移動するボリュームの量の概念を導入する簡単な方法を提供します。また、定義により、 フローチャートは「ワークフローまたはプロセスを表す図の一種」 です。 Sankey図は、階層図よりもはるかに流れているように見えます。

詳細については、 Sankey図を使用してワークフローを視覚化する、David Pallmannの説得力のある事例 を参照してください。

私は このワークフローの視覚化 を10分で作成できました HighchartsのSankeyデモ をフォークし、シリーズデータを次のようにカスタマイズします。

    data: [
        ['Event Submission', 'Event Submission Close', 250],
        ['Event Submission', 'Create Incident', 750],
        ['Event Submission Close', 'Approve', 240],
        ['Event Submission Close', 'Reject', 10],
        ['Approve', 'After Action Review', 640],
        ['Create Incident', 'Contained', 400],
        ['Create Incident', 'Provide Analysis', 150],
        ['Create Incident', 'Incident Close', 125],
        ['Contained', 'Containment Approval', 370],
        ['Contained', 'Containment Rejection', 30],
        ['Incident Close', 'Approve', 110],
        ['Incident Close', 'Reject', 15],
        ['Containment Approval', 'Eradicated', 320],
        ['Containment Approval', 'Provide Analysis', 50],
        ['Eradicated', 'Eradication Approval', 315],
        ['Eradicated', 'Eradication Rejection', 5],
        ['Eradication Approval', 'Recovered', 315],
        ['Eradication Approval', 'Provide Analysis', 5],
        ['Recovered', 'Approve', 310],
        ['Recovered', 'Reject', 5]
    ]
0
Jeromy French