オンボーディングアニメーションは、数年前にウェブを席巻しました。デザイナーの間で、ますます人気が上昇していました。 Dribbbleコミュニティはさまざまなソリューションであふれていました。スマートなアプローチと芸術的な性質の共生に魅了された静的なイラストを使用した簡単なプレゼンテーションから始まりました。結果的に、未来型モバイルアプリケーションの美しさを最大限に発揮するアニメーション作品を作りあげました。
もちろん、常にそうであるように、時間が経つと、その話題は徐々に消えていきました。しかし、あらゆる強力なトレンドと同じ様に、数々のオンボーディングプロジェクトは、そのステータスを贅沢な位置づけから必須機能へと路線を変更しています。
プロの製品を作成することを目的とし、そのユーザーを気にかける人は誰でも、真剣にオンボーディングに取り組んでいます。長期的には、オンボーディングはユーザーとアプリケーション間のギャップを埋める上で重要な役割を果たします。すべての優れたユーザーエクスペリエンスの基礎となっているのです。だから見逃すことはできません。
この重要なテクニックを認識しており、内部に隠された力をすべて活用したい人のために、オンボーディングコードスニペットのコレクションを用意しました。より良いユーザーエクスペリエンスの構築を開始するのにコードスニペットが役に立ちます。
Fabio Ottavianiによるオンボーディング
Fabio Ottavianiは、すっきりときれいなデザイン、美しいグラフィックス、素敵なダイナミクスを備えた、見た目で楽しませてくれるソリューションを作成しました。ナビゲーション用の3つの小さなドットを提供する従来の水平スライダーがベースになっています。 3つの画面がありますが、その数を増やしてもかまいません。オンボーディングを目立たなくするために使用してください。
See the Pen
DailyUI – #023 Onboarding by Fabio Ottaviani (@supah)
on CodePen.
Hainer Savimaaによるjqueryを使用したオンボーディングスライド
前例では、従来の方法でオンボーディングを行っていますが、Hainer Savimaaによるこのプロジェクトにはいくつか最新の機能が組み込まれています。ここでは分割レイアウトが主流で、情報表示のために慎重に構成されたスペースを提供しています。
テキストからビジュアルコンテンツを分離すると便利です。そして、すべて含めて、見栄えが良いだけでなく、トレンディにも見えます。作成者はまた、各セクションに全体的な印象を強化するだけのトランジション効果を提供しています。最高水準のドットベースのナビゲーションに加えて、細かいコントロールが苦手な人向けの「次へ」および「戻る」ボタンもサポートされていることに注意してください。
See the Pen
Onboarding slides with jquery by Hainer Savimaa (@hainersavimaa)
on CodePen.
Nahom Ebssaによるオンボーディング
Nahom Ebssaのプロジェクトの重要な特徴は、保守的にスペースを使用する点です。作成者のアーティストは、必要なすべての情報を1つの画面に収めながら、快適なユーザーエクスペリエンスを提供しています。ナビゲーションに関しては、戻るボタンがなく、ナビゲーションドットは単なる装飾であるため、多少未完成という状態です。ただし、全体として、このコードスニペットはエクスペリメントの堅固な基盤として機能します。
See the Pen
Onboarding by Nahom Ebssa (@enahom99)
on CodePen.
Fersho Plsによるオンボーディング
Ennio Dybeliによって作成された優れたオンボーディングスクリーンに触発されているため、このソリューションの最小限の外観と美しい動作に満足できるでしょう。特別おしゃれなわけではありません。すべてのディテールはスタンダードで、トランジションはベーシックですが、完璧な連携で機能します。コンセプトはシンプルでありながら、わかりやすいものです。小規模プロジェクトに最適です。
See the Pen
Onboarding by Fersho Pls (@fershopls)
on CodePen.
Dario Corsiによるオンボーディングカルーセル
コレクション内の分割画面がすでに表示されています。今回は、90度回転し、従来のストライプレイアウトに変換されました。過去のベーシックなスライダーによく似ています。しかし、間違いなく、ユーザーに配信するすべてのオンボーディング情報を網羅する可能性があります。
2種類のナビゲーションが付属しています。まず、比較的大きな上部が、視覚素材に大きな注目を集めています。次に、テキストに付随する領域があります。また、ニーズに合わせて調整できる素晴らしいアニメーションもあります。
携帯電話ではなくタブレットに適した比較的広い構造であるにもかかわらず、すぐにアイデアを取り入れて、応答性の高いバージョンを思いつくことができます。
See the Pen
Onboarding Carousel by Dario Corsi (@dariocorsi)
on CodePen.
Nick Wanningerによるオンボーディング
Nick Wanningerによるオンボーディングは、美的感覚や並外れたアニメーションでユーザーの心を掴むものではありません。むしろ、エクスペリメントのベースとして機能します。派手なデザインではなく、古典的な構造です。 2つの領域があります。 1つ目はコンテンツに割り当てられ、2つ目はナビゲーションを含んでいます。
前述のスニペットとは異なり、このコンポーネンツには、ドットの代わりに短線、「次へ」および「戻る」という単語の代わりに標準の矢印が付属しているため、直感的なインターフェイスを実現しています。 Dario Corsiのコードスニペットと同じように、装飾待ちの完璧な基盤の役割を果たしています。
See the Pen
Onboarding by Nick Wanninger (@nickwanninger)
on CodePen.
Elenaによるモバイルカルーセル
才能のあるアーティストElenaによって作成されたのは、ローランドビクターからのドリブルショットの正確なレプリカです。ただし、1つ例外を除きます。Elenaのプロジェクトにはアニメーションの対応物があり、全体的にすばらしい印象をもたらします。
野生で最も人気があり、実績のある直感的なカルーセルの1つであるOwl Carouselを使用して、アーティストはこのコンセプトを実現しました。アイデアを紐解き、ニーズに合わせて調整するのにそれほど労力はかかりません。
See the Pen
Mobile carousel by Elena (@ElenaDi07)
on CodePen.
Mat Swainsonによるアンドロイドアプリオンボーディング
Mat Swainsonによるプロジェクトは、昔ながらの雰囲気を求める人向けです。少し時代遅れに見えますが、それでも完璧に機能します。
さらに、まとめでは他の機能と区別する1つの独特な機能があります。オンボーディングには2つのパーツがあります。最初のものは、ビジターを教育するために使用できる4つの標準画面を示しています。 2番目のものには、説明を必要とせず、「スキップ」ボタンを押してすぐにビジネスを開始したい人のためのログインフォームが含まれています。
See the Pen
Android App Onboarding by Mat Swainson (@matswainson)
on CodePen.
CubertoによるLiquid Swipe Open Source
一連のスクリーンショットまたはアニメーションを連続して表示するための基本的な手法を提供するソリューションを検討してきました。 CubertoのLiquid Swipe Open Sourceは少し異なります。
これは、液体のスワイプ動作を完全に模倣する優れた移行効果を中心としています。とても自然に感じられるので、アプリケーションから手を離すのは非常に困難です。 GitHubリポジトリで利用でき、iOSとXcodeが必要です。
単純にユーザーエクスペリエンスの向上
本質的に、オンボーディングは、非常に直感的に使用できる典型的なカルーセルに基づいて実現できます。各スライドを2つの部分に分割するだけです。1つはコンテンツ用、もう1つはナビゲーション用です。
その後、デザイン機能、アニメーション、トランジションエフェクトを追加して、ユーザーエクスペリエンスを有益なだけでなく楽しいものにすることもできます。
おすすめ新着記事
おすすめタグ