Apple WWDC 2020のデザイナー向け教育プログラム

ロボットはトレーニングセッションを見て、Redmadrobot Design Labのテーマダイジェストに役立つものを選択しました。



最高の状態で学ぶことと覗くことは、私たちの仕事の重要な部分です。したがって、これまでの年と同様に、私たちと数千万人の開発者、デザイナー、エンジニアがWWDCをフォローしました。そして、アップルの基調講演は間違いなくオンライン会議の新しいベンチマークを設定しました：これらすべてのクールなスペースの変更、スピーカーの切り替え、適切なタイミングでのスピーカー。



入門プレゼンテーションの後、会議自体は（我々はすでにしているトレーニングの講義（セッション）とワーキング協議を始めた書かれたすべてのものがどのように機能するかについて）。そして、（Worldwide Developers Conference）という名前にもかかわらず、Appleは伝統的にデザインに大きな注意を払っています。多くの講義はデザイナーやエバンジェリストによって行われますが、スライドのコードは存在しないか、少量しかありません。



エフゲニー・ボンダレフ、Redmadrobot設計研究所のクリエイティブディレクター：

AppleがiPadOSやiOSなどで各機能をどのように提示するかに注意を払うと、最初にデザインについて、次に機能についての話があることに気づくでしょう。第一に、それは単に美しいです、そして第二に、デザインは感情を生み出します。そしてAppleは、テクノロジーと連動して働く感情のレベルでユーザーインタラクションを構築しています。



たとえば、WWDCでは、ドロップダウンメニューの行間隔を増やすことについて発表がありました。国際的な規模でのプレゼンテーションに参加しているAppleだけが、行間を増やすことについて話すことができるようです。これは、強力な設計文化が企業内で依然として支配的であることを示唆しています。これはおそらくテクノロジーよりも進んでいます。

iPad

IPadOS 14はホーム画面を再設計し、サイドナビゲーションバー、手書き認識、およびよりリアルなARオブジェクトを追加しました。



今後は、iPadの大きな画面で余白が少なくなり、コンテンツが増えます。多くのアプリには、フォルダやサポート情報をナビゲートするためのサイドバーがあります。ファイルアイコンが小さくなり、iPad画面のコンテンツが以前よりも300％多くなりました。







Freehand for Apple Pencilは、手書きのテキストを活字のテキストに変換し、レタリングと図面を区別し、幾何学的形状を均一かつ正確にします。これは、メモのスケッチに最適です。ただし、これまでのところ、プログラムは英語と中国語のみを認識しています。Redmadrobot設計研究所のクリエイティブディレクター、







Evgeny Bondarev

Pencil iPad — Apple . , , - , . — Pencil « » . , 99% , .

• « », Apple Meet Scribble for iPad.
• - , Inspect, modify, and construct PencilKit drawings.
• タッチバーとマウスをサポートするiPadアプリのUIを設計するには、iPadOSポインターセッションの設計を参照してください。

Appleはまた、iOS / iPadOSアプリがApple Siliconプロセッサーを搭載した新しいMacでロールアウトされることを発表しました。したがって、我々はすべてが、例えば、そこにどのように機能するかを見て、あなたに助言マック触媒の新機能とのMacOSの新しい外観採用セッションを。Redmadrobot設計研究所のクリエイティブディレクター、



Evgeny Bondarev

Apple : iOS iPadOS, iPadOS macOS.



Mac iPad . UX, , . , .



, Mac, iPad. — Photoshop, Figma. , . , Apple iPad, .

macOS Big Sur. , Apple - ?

Sidebar iPadOS

以前は、iPhoneでおなじみのタブバーをiPadで見るのに慣れていました。画面下部のアイコンをクリックすることで、アプリケーションセクションを切り替えることができました。







新しいiPadOSでは、Appleのデザイナーがサイドバーを使用した別のナビゲーションを提供しています。サイドバーはアプリのコンテンツの左側に配置され、画面のメインセクションへのリンクが含まれるだけでなく、ユーザーが独自のリンクを追加することもできます。



iPadのサイドバーは、タブバーよりも論理的に見えます。古いタブバーは画面の幅いっぱいに伸びていて、不合理な量の画面スペースを占めていました。サイドバーは、ナビゲーションをより充実させ、よりパーソナルにし、macOSナビゲーションに類似させることを目的としています。



サイドバーをデザインするためのいくつかのヒント：

• トップレベルのナビゲーションにはコンポーネントを使用します。
• ナビゲーションを折りたたむ機能を追加します。
• ユーザーがサイドバーのセクションをカスタマイズできるようにします。
• ドラッグ＆ドロップをサポートします。
• 輪郭を描かれたアイコンを使用します。

Tab BarとSidebarを同時に使用できないことを覚えておくことが重要です-ユーザーを混乱させます。また、iPhone（コンパクト幅）では、引き続き主要なナビゲーションツールとしてタブバーを使用することを忘れないでください。このコンポーネントの詳細については、Design for iPadプレゼンテーションをご覧ください。

ARおよび更新されたアイコン

Appleは、新しいDepth APIを備えたARKit 4を導入しました。iPad Pro 2020のLiDARスキャナーは、オブジェクトまでの距離を推定し、環境データを収集します。







地理参照機能を使用して、AR要素を地理マップに追加し、iPhoneおよびiPadアプリですべての角度から表示できます。関連セッションでiPadの新機能の詳細をご覧ください。Redmadrobot設計研究所のクリエイティブディレクターである





、Acute Artアプリケーションの



Evgeny Bondarev におけるアーティストKAWSの彫刻

新しいアプリケーションアイコンは、ボリューム感が増し、マルチレイヤーになり、影が付きました。これはスキューモーフィズムへのステップのように思えるかもしれませんが、拡張現実ではこれらのアイコンがクールに見えるという疑いがあります。空間内のインターフェースとの対話を開始すると、アイコンが少し移動し、さまざまな顔が表示されます。この階層化は、空間インターフェースでクールに機能します。これは推測にすぎませんが、今日、ARKitの強力なポンプ機能が見られます。来年Appleが拡張現実メガネをリリースするという噂があり、おそらくアップデートされたアイコンがすでにそこにあるでしょう。



興味深いことに、長い間、アイコンのデザインに大きな変更はありませんでした。私の意見では、これはアイコンが非常にモダンに見えないという事実につながりましたが、Appleは文化遺産に依存しており、ある種のシステムに再構成するよりも保存することが重要です。

車

車のキーととの仕事の一例についてのWWDC基調講演の一部BMW（英語内側）



エフゲニーBondarev、Redmadrobotデザイン研究室のクリエイティブディレクター

Apple . Car Play, Apple Map Car Key. Car Key iPhone Apple Watch. 5 . , Apple Map . iPhone . . , , , , .

サンフランシスコとニューヨークのフォントが、可変フォント形式で利用できるようになりました。 1つのファイルで異なるスタイルを補間サポートと組み合わせることで、中間スタイルを作成できます。同時に、作成されたフォントはさまざまなサイズに適合します。両方の書体を使用すると、視覚的な階層を作成したり、コンテンツの意味の違いを強調したりできます。 Appleは、以前のバージョンのiOSで可変フォントを使用すると、「予期しない結果になる」可能性があると警告しています。



Appleのライブラリには、750個の新しい白黒アイコンと150個以上のカラーアイコンがあります。色付きのアイコンはSFシンボル2の新機能であり、暗いテーマまたは明るいテーマに自動的に適応します。



水平方向の配置をより適切に制御するために、システムおよびユーザー定義の文字で負のサイドマージンがサポートされています。シンボルの詳細はこちら。

アプリクリップ

アプリクリップは、フルバージョンをインストールしなくても使用できるガジェットです。ここで、スクーターをレンタルするには、最初にアプリケーションをインストールし、登録して、支払いの詳細を入力する必要があります。 App Clipを使用すると、すべてがより簡単で高速になります。スクーターを取り、QRコードをスキャンするか、NFCタグを使用し、Appleにサインインしてワンクリックで登録し、Apple Payを介して家賃を支払い、健康に乗る。アプリケーションが気に入った場合は、リンクに従ってフルバージョンをインストールしてください。







別のシナリオは、毎回新しいアプリケーションをダウンロードしないように、休暇中または出張中にさまざまな都市の駐車料金を支払うことです。開発者は、オンラインショッピング、コーヒーショップ、食品配達、旅行用のスクリプトも提供しています。詳しくは、アップルのセクションをご覧ください。



Redmadrobot設計研究所のクリエイティブディレクター、Evgeny Bondarev

アプリクリップは、コードをスキャンするだけで多数のアプリケーションを使用できるため、モバイルアプリケーションを使用するためのエントリしきい値を大幅に下げ、プラットフォームに大きな機会を開き、UXに大きな影響を与えます。

ガジェットは10 MBを超えてはならず、SwiftUIおよびUIkitを使用し、フルバージョンと同じ機能（カメラの使用、地理位置情報、Bluetoothなど）にアクセスできます。アプリクリップは、24時間以内、またはユーザーの許可を得て1週間以内にプッシュ通知を送信できます。

ウィジェット

iPhone、iPad、Macにホーム画面ウィジェットが追加されました。Appleによれば、これはホームページに根本的に新しくより有益な見た目を与え、すべての必需品が手元にあるでしょう。ユーザーは、ウィジェットをグループ化するか、「推奨」、「最近開いた」などの自動配置を使用できます。





スマートスタック機能はiPhoneとiPadで使用できます。基本的にはウィジェット用のウィジェットです。それはあなたがいくつかの属性に基づいてグループにウィジェットを組み合わせることができ、それらの間でこれらのグループを裏返すことができます。たとえば、メイン画面の朝には、天気とニュースのグループ、午後にはカレンダー、夕方には渋滞に関する地図と情報が表示されます。



ウィジェットは、S、M、Lの3つのサイズで利用でき、さまざまな情報のロードに対応します。ウィジェットは、鮮やかな色、写真、一目で読みやすい鮮明なフォントを使用しています。ウィジェットUIキット



からのヒント：ウィジェットには、アプリケーション名やロゴを含める必要はなく、役立つコンテンツのみを含める必要があります。ウィジェットは、暗いテーマと明るいテーマのどちらでも同じように見えるはずです。テキストは常に存在している必要がありますが、ボイスオーバー機能が正しく機能するようにラスターに変換しないでください。Appleセッションでウィジェットを使用するための詳細情報とヒント。



また、ウィジェットに関するもう少し役立つ情報は、さまざまなシナリオ（Siri、通知、ウィジェット）でのユーザーの問題を解決するためのオペレーティングシステムの機能に関するセッションで見つけることができます。インテリジェンスの設計：新しい機会を発見します。





ウィジェットに関する興味深い考えと、ウィジェットがどのように機能するかを視覚的に示すものは、The Vergeのレビューで見ることができます。

新しい設計コンポーネントなど

iOSはピッカー、コンテキストメニューを更新し、カラーピッカーを追加しました。



Appleはピッカーの視覚的なスタイルと、ユーザーがピッカーを操作する方法を再考しました。日付の選択は、カウントダウン、時間、日付、時刻、日付の4つのモードで利用できます。これにより、カレンダーで年と月を簡単に切り替えることができます。スイッチをスクロールする代わりに、キーボードから時間を入力できるようになりました。また、選択した要素をより見やすくするために、ピッカーに薄い灰色の背景を追加しました。コンテキストメニューはどのボタンにも追加でき、メニューはスマートフォンの画面に重なりません。設計コンポーネントに関するセッション。



SwiftUI APIの更新により、アプリの色を簡単に選択できるようになりました。開発者はカラーピッカーを持っています：

• グリッド、スペクトル、またはスライダーを使用して色を選択します。
• 透明度を変更し、色空間を切り替えます（ディスプレイP3とsRGB）。
• 画面のどこからでも色を選択します。
• Mediumのカスタムカラーピッカーに関する記事があります。

時計のUIの違いや、そのようなコンポーネントを正確に使用する必要がある理由など、watchOS 7のアップデートについては、watchOS設計セッションの新機能を参照してください。



そして、私たちの意見ではそれほどクールではないデザインセッションがいくつかありますが、インスピレーションを得るためにそれらを見ることができます：

• アプリの音声操作を評価して最適化します。
• ロケーションプライバシーの設計。
• インテリジェンスの設計：進化したアプリ。
• インテリジェンスの設計：「システム」で友達を作りましょう。
• インテリジェンスの設計：どこにいても会うことができます。

このWWDCについて覚えていることをコメントに書き込んでください。そして、これが私たちのアップルデザインダイジェストの結論です。テレグラムでDesign Jamを購読すると、ロボットの力があなたと一緒になりますように！



PS資料の作成にご参加いただき、ありがとうございます。vani2 （iOS Redmadrobotの責任者）、 Bealex（CTO Redmadrobot SPb）、元アイアンデザイナーのArtur Abrarov、Redmadrobot Zhenya Bondarevのクリエイティブディレクター。



PPSそして最後に、AppleからのUXマジックのもう1つの例は、iOS 14ベータのリリース後に気づきました

バックタップを使用すると、iPhoneの背面をダブルタップまたはトリプルタップしてさまざまなアクションを実行できます。これは私がスクリーンショットを撮るためにダブルタップを設定したものです。pic.twitter.com/uZKv4Cjorf

-Aditya Daniel（@adityadaniel）2020年6月23日