チャレンジ:スーパーヒーローなナビゲーションを実現するデザイン

すべてのデザイナーのみなさんへ。開発者というヒーローがコードやデザインに起こる大惨事と戦うAppのために、力を尽くして「スーパーな」ナビゲーションエクスペリエンスをデザインしてください。

この課題では、お気に入りのスーパーヒーローを助ける架空のAppのタブバーと画面をデザインしてください。どのようなAppを作るにしても、そのコアとなる機能をタブバー上のセクションに整理することが課題です。

ボーナス:もし、「スーパー」クリエイティブな気分なら、そのAppのタブの中から1つ、ルート画面をデザインしてください。みなさんのヒーローが確認する必要があるものは何でしょうか。ヒーロー達はどのような行動を取るでしょうか(注:デザインするのは1つの画面だけですが、このビューでデザインされた機能は、提案するAppの他のタブと調和して動作する必要があります)。

また、Design Study Hallで、この課題に協力して取り組むこともできます。さらに、質問したり、他の開発者とつながったり、自分の作ったものを共有したりすることができます。

課題を始める

まずは、「Explore design navigation for iOS」をご覧ください。既存のナビゲーション構造を活用して、Appの個性を損なうことなく複雑なインタラクションを簡素化する方法を学ぶことができます。タブバーやモダリティなどを扱う際のベストプラクティスやよくある落とし穴を紹介します。

また、「Writing for interfaces」では、わかりやすく、会話式の、役に立つラベルや文章をAppで作成する方法をご紹介していますので、ぜひご覧ください。

  • WWDC22

iOSナビゲーションデザインの探求

...

  • WWDC22

Writing for interfaces

The words and phrases you choose for your app matter. Whether you’re writing an alert, building an onboarding experience, or describing an image for accessibility, learn how you can design through the lens of language and help people get the most from your app. We'll show you how to create clear,...

デザインを始める準備ができたら、Apple Design ResourcesのページからiOSデザインテンプレートをダウンロードして、タブバーのシンボルやiOSシステムカラーにアクセスしましょう。また、タブバーに魅力的なアイコンを作成するために、SF Symbols Appをダウンロードして確認することをお勧めします。

iOS Appでは、2~5つのタブを追加できます。デザインするスーパーヒーローAppに最も必要な機能はどれかを考えてみてください。各タブには、説明的で簡潔なラベルを使用するようにしましょう。

Apple Design Resources

Download SF Symbols

「#WWDC22Challenges」のハッシュタグを付けてTwitterで作品を見せてください。また、Design Study Hallで作品を共有してください。また、デザインに関するトピックの意見交換をしたい場合は、WWDC22の残りの期間中に開催されるイベントにご参加ください。

Explore #WWDC22Challenges on social media

Read the WWDC22 Challenges Terms and Conditions