フロントエンド開発者向けの正規化されたユーザー インターフェイス (UI) パート 1

フロントエンド開発者向けの正規化されたユーザー インターフェイス (UI) デザイン

フロントエンド Web 開発者として、正規化されたユーザー インターフェイス (UI) デザインの概念を理解することが重要です。このアプローチには、ソフトウェア ワークフローをさまざまな画面に分割し、各画面が特定のタスクに集中できるようにすることが含まれます。これにより、混乱が軽減され、操作がより直感的になり、ユーザー エクスペリエンスが簡素化されます。

主要な概念: ワークフロー、画面、フレーム

UI デザインについて考えるとき、私たちは機能を考慮することがよくありますが、正規化された UI の場合は、次の点に焦点を当てるとより有益です。

1. 画面: これらは、Web アプリケーションのページまたはモーダルです。
2. フレーム: これらは、特定の瞬間に同時にアクセスできる UI 要素のセットです。これらは、画面の潜在的なコンテンツのサブセットを表します。
3. ワークフロー: ユーザーが実行するアクションのシーケンスであり、異なるフレームまたは画面間の移動が含まれる場合があります。

例: リンクナビゲーション

これらの概念をよりわかりやすく説明するために、リンクを使用した例を考えてみましょう:

フレームを使用したワークフロー

1. 画面 1: ユーザーはメイン ページから開始し、よくある質問 (FAQ) のリストが表示されます。各 FAQ は最初は折りたたまれており、質問のみが表示されます。この状態は、画面上のコンテンツのサブセットを表すため、フレームです。

1. アクション: ユーザーが質問をクリックします。このアクションにより、同じ画面内で答えが表示され、新しいフレームに移行します。

1. アクション: ユーザーはもう一度クリックして回答を非表示にし、最初のフレームに戻ります。

画面を使ったワークフロー

次に、画面を使用した別のデザイン アプローチを検討してください。

1. 画面 1: ユーザーは質問のリストが表示されたメイン ページから開始しますが、同じ画面内で展開するのではなく、質問をクリックすると回答が表示される別のページに移動します。

1. アクション: 質問をクリックすると、完全な回答を表示する専用の新しい画面 (またはモーダル) が表示されます。

ワークフロー図

• フレームベースのワークフロー図: ここでは、各アクションは画面から離れることなくフレームを変更します。

• 画面ベースのワークフロー図: この設計では、各アクションは新しい画面に移動します。

結論

正規化された UI 設計原則を使用し、ワークフロー図を通じて視覚化すると、インターフェースをより直観的でユーザーフレンドリーにすることができます。単一画面内でフレームを使用する場合でも、画面間を移動する場合でも、目的はユーザー エクスペリエンスを簡素化し、混乱を軽減することです。通常の UI デザインに関するさらなる洞察にご期待ください!

以上がフロントエンド開発者向けの正規化されたユーザー インターフェイス (UI) パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。