多くのトレンドが生み出されていますが、モーションはモバイルとウェブのユーザーエクスペリエンスの分野でトップを維持しています。アニメーションは、よりインタラクティブで効果的なユーザインタフェースの不可欠な部分となっています。
洗練されたUIアニメーションの新しいコンセプトが注目されています。それらを見てみましょう。
この記事は後編、さらなるアニメーション例をご紹介します。
前編はこちらです。
11.Mobile Menu Interactions
ここでは、ユーザーがあらゆる種類の日常活動を収集して追跡できるシンプルなアプリのカテゴリメニューとのインタラクションを提示するコンセプトがあります。コントラストの色や太字は、ナビゲーションをはっきりとわかりやすくするために多くの貢献をします。スムースモーションは、使いやすさとインタラクションの優雅さをサポートします。
12.Learn Chinese App
これは、漢字と発音を学ぶためのカードを提示するLearn ChineseアプリケーションのUIコンセプトです。カードの一方の面にはユーザーが漢字を表示し、もう一方の面にはその音訳と翻訳を見たり、聞くことができます。ユーザーは、カードを保存して、学習したかどうかをマークし、さまざまなテーマコレクションを学習できます。興味深いモーションは、学習プロセスをより明るくよりインタラクティブにしています。
13.Book Swap App
Book Swap Appはカードごとに本を整理することができ、各本のカードは、そのカバーと一致するユニークなデザインを持っています。アニメーションコンセプトでは、書籍とその所有者を示すフィードとのやりとり、および交換できる2冊の書籍のカードが表示されます。
14.Wine Yard App
これは、ユーザーが異なる種類のワインについて学べるようにするアプリケーションです。また、選択したワインをユーザーの所在地に基づいて購入できるよう、情報を提供します。ユーザーが「もっと見る」を押すと、アイテムに関する完全なデータが円滑な動きで表示され、写真やタイトルなどの他のUI要素は消えてしまいます。
15.Cinema App
これは、シネマチェーン用のモバイルアプリケーションのUI設計コンセプトです。最初の画面には、ホーム画面とのやりとりがあり、映画の一覧が表示されます。ユーザーが一度に多くのオプションを見ることができるように、互いに密接に配置されたポスターを介して映画の種類が提示されます。ポスターをタップすると、必要なすべての詳細を含む特定の映画の画面に移動します。
16.Music News App
これは、音楽ニュースアプリの創造的なコンセプトであり、音楽に関する歌詞、ニュース、クイズをすべて1か所で収集できます。UIは、明るい配色とカスタムイラストを使って表示され、アプリのユニークさを示します。ホームページの背景には、ユーザーが画面をスワイプしたときにその場所と色を変更する幾何学的図形が適用されます。
17.NGIN App
NGINは、スマートカー制御のためのアプリケーションです。このアプリは定期的なデータ収集のプロセスを自動化して、ユーザーに車両の技術状態とその利用状況を通知します。提示された画面は、平均速度、距離、燃料消費量、有用な通知などの基本的な現在の統計情報をユーザーに提供します。アニメーションは、選択した期間の速度のグラフ曲線とのやりとりを表示し、グリッチ効果を使用しています。
18.Home Budget App
Home Budgetアプリケーションを使用すると、ユーザーは生活にかかる経費と所得を管理し、財務フローを追跡するための拡張データベースを作成し、包括的な統計情報を取得することができます。大量のデータにもかかわらず、アニメーションによりインタラクションとナビゲーションがより直感的になります。
19.Food App
これは、ユーザにレシピのデータベースを提供するモバイルアプリケーションです。ユーザーが現在持っている食材に基づいてレシピを見つけたり、欠品している食材を購入する買い物リストを作成したりするのに役立ちます。このコンセプトは、レシピカードとのやりとりのプロセスを示しています。ユーザーはサイドスワイプで適切なカードを選択できます。最初のインタラクション中に目立たないエレガントなアニメーションは、カードの下に隠され、スワイプダウンで利用可能な追加の機能についてプロンプトを表示することができます。
ご覧のように、アニメーションはユーザーインターフェイスのさまざまな問題に対する効果的なソリューションになることがあります。うまく作成されたモーションコンポーネントは、ナビゲーションを改善し、インタラクティブなプロセスをさらに使いやすくします。
※本記事はMobile Motion. 20 Creative Concepts of UI Animation.を翻訳・再構成したものです。
▼こちらの記事もおすすめです！
おすすめ新着記事
おすすめタグ