同じことの詳細
UIパターンについて聞いたことがない場合は、簡単に説明します。ほとんどの場合と同様に、特にソフトウェア開発中は、認識可能なパターンを形成するため、要素の大規模なセットをグループ化できることがよくあります。ソフトウェアの例は、アーキテクチャパターンまたは特定のプログラミング言語に関連するパターンの定義です。
しかし、UIを設計する際の一般的なパターンもあります。この記事を読んでいるデバイス上のいくつかのアプリをざっと見てみると、最終的に特定のことが繰り返されます。
- 保存、キャンセル、削除アクションのあるモーダルビュー
- テキストを含む要素のセクション。たとえば、各リストアイテムのスワイプアクションを含むリスト
では、さらに一歩考えて、UIを自分で設計するときに利用できるリソースはありますか？たぶん、他のデザイナーがすでに認識して形式化したパターンのコレクションですか？ええと、私がまだ答えを持っていなければ、私はこの質問をしません！第2章の時間です！
第2章（発表されたもの）
正式な定義を探しているIBMのCarbonDesignチームには、すばらしい定義があります。パターンは、ユーザーが目標を達成するためのベストプラクティスソリューションです。それらは、シーケンスとフローで一般的なユーザーの目的に対処するコンポーネントとテンプレートの再利用可能な組み合わせを示しています。
いくつかの例を見てみましょう。次のエントリは、IBMのCarbonDesignサイトとGoogleのMaterialUIパターンページから取得したものです。 MicrosoftのFluentDesignのサイトは見つかりませんでしたが、それでも補遺で彼らのスタートページをリンクしました。
探す
コンテンツの検索は、ほとんどのアプリにとって不可欠な構成要素であるため、コンテンツのUIパターンを定義するのに最適です。最終的な使用法（グローバル検索またはコンテンツページでの特定の検索）とは関係なく、検索UIは提供する必要があります
- テキスト入力
- 入力がまだ利用できない場合のテキストプレースホルダー
- 虫眼鏡を使用したり、新しい検索のトリガーとして機能したりすることで、テキスト入力の目的を明確に示すアイコン
場合によっては、ヒントラベルは、さまざまなコンテンツタイプを区別したり、無効な入力を支援したりするのに役立ちます。検索で処理する必要のある条件が多いほど、明示的なフィルターメニューを追加することで、検索をこの要件にうまく適合させることができます。
ダイアログ
非常に目立つUIパターンの1つ。ダイアログを使用すると、アプリはサイトの全体的なコンテキストを失うことなく情報を表示できます。これは、ウィンドウ全体をカバーするのではなく、ごく一部のみをカバーすることによって実現されます。ダイアログはユーザーの現在のワークフローを中断するため、ワークフローの停止が実際に有効な場合にのみ必要であると見なす必要があります。彼らは小さなタスクのみを処理し、何を達成するかに明確に焦点を合わせるべきです。たとえば、保存されていない変更を元に戻したり、重要なアクションをコミットしたりします。
空の状態
最初は奇妙に聞こえるかもしれませんが、アプリでは空の状態が非常に一般的です。利用できるデータがないことをユーザーに伝え、理想的にはその理由を説明することが重要です。コンテキストに応じて、空の状態を解決する方法に関するヒントは、優れたUXを作成するのに大いに役立ちます。たとえば、ユーザーが何かを検索したが何も見つからなかったとします。これは、別の検索クエリを提案すると、ユーザーがタスクを実行するのに役立つ可能性があるユースケースである可能性があります。いずれの場合も、空の状態を表すすべてのビューはコンテキストに依存している必要があります。否定的な例は、「これは機能しませんでした。あとでもう一度試してみてください"。
空の状態をUIデザインプロセスの後付けとして扱わないでください。正しく実装されていれば、ユーザーはワークフローをスムーズに進めることができます。空の状態では、ワークフロー全体を停止することは、アプリのクラッシュを除けば、実際には最悪のシナリオです。
ほんの始まり
これは、IBMのCarbonDesignとMaterialUIのパターンページから選択したいくつかのUIパターンを一目見ただけです。アプリにもUIパターンを適用すると、タスクを実行するためのユーザーのワークフローとユーザーインターフェースの間の摩擦を大幅に減らすことができます。 UIの設計は非常に難しい場合があるため、既存のUX調査から学ぶことで巨人の肩の上に立つことは、アプリの動作に対するユーザーの認識を向上させるのに大いに役立ちます。
