この演習は前回の続きですが、アプリの Review & Nominate ページにいくつかのフィルターコントロールが追加されています。Oakmark の経営陣はこれらのコントロールを気に入っていますが、見た目をすっきりさせるためにまとめてほしいと考えています。
Review & Nominate
コントロールをポップオーバーに折りたたんで配置し、見通しをよくしましょう。
この演習はコースの一部です
理論を実践に変える、インタラクティブな演習のひとつをお試しください
第1章では、Sigma で AI アプリを構築するための基礎概念を紹介し、特にユーザー入力を取り込んでアクションベースのワークフローを駆動する方法に焦点を当てます。中でも、Sigma アプリの重要な構成要素であるリンクされた入力テーブルを重点的に扱います。 ウェアハウスのデータとユーザーが入力した値を並べて表示し、基盤となるデータセットと直接やり取りできるようにする、リンクされた入力テーブルの作成方法を学びます。また、入力可能なデータ型の制御や、テーブルを編集可能にする条件の定義など、ユーザー入力をガバナンスするベストプラクティスも取り上げます。第1章の終わりには、アプリ内のデータ整合性を保ちながら、ユーザー入力を安全かつ効果的に収集する方法をしっかり理解できています。
第2章では、モーダルとアクションシーケンスを使って、AI アプリをより双方向で反応のよいものにする方法を学びます。モーダルは、アプリ内に焦点を絞ったポップアップウィンドウを表示し、ユーザーに追加情報を提供したり、メインのインターフェースを煩雑にせずに詳細な入力スペースを用意したりできます。モーダルがユーザビリティを高め、特定のタスクへユーザーを誘導する様子を確認します。 また、アクションシーケンスを導入し、ボタンのクリックやテーブル行の選択などのユーザー操作にアプリが動的に反応できるようにします。単一の操作から複数の効果をトリガーし、ワークフローの自動化とユーザー体験の効率化を実現する方法を学びます。モーダルとアクションシーケンスを組み合わせることで、直感的で双方向性があり、目的に沿ったアプリを構築するための強力な手段が得られます。
第3章では、AI アプリのユーザーインターフェースと全体的な体験を磨き上げます。まず、必要なときだけフィルターメニューを隠したり、コンテキスト情報を表示したりできる多用途な UI 要素であるポップオーバーについて学びます。これにより、コントロールや詳細へのアクセス性を損なわずに、アプリをすっきり保てます。 さらに、使いやすさと視覚的な魅力を高めるデザインや整理のための機能を幅広く取り上げます。ナビゲーション用のボタン、区切り線、タブ付きコンテナを取り入れてコンテンツを構造化し、ユーザーがアプリ内をより効果的に移動できるようにする方法を学びます。第3章の終わりには、レイアウトやデザインを丁寧に工夫することで、AI アプリをより直感的で洗練され、使って楽しいものにできることを理解できています。
現在の演習
