2020年を形作るUIのトレンド

サイエンスフィクションのように聞こえるかもしれないことをお聞きします。 おそらく地球が最近より少し速く動いているということがあなたに起こったことがあります–しかし、私たちはまだ気づいていませんか? 2018年に移行したときに予想したことを確認したのは昨日だけのようですが、奇妙なことに、それはほぼ2019年です。

考えてみてください、しかし、2018年はUI設計にとってXNUMX年のなかで一年でした。 物事は、過去数年に比べてはるかに単純になりました-指数関数的な成長の設計ツールが最近経験したおかげです。 ほんの数分で素晴らしいUIを備えたプロ並みのサイトを作成するために、もはやコーディングの達人である必要さえありません。

そして、それはかろうじてベースをカバーしています。 ユーザー設定の変更も、2018年のインターフェイスの設計方法に大きな影響を与えています。

遠近感を出すために、 インターネットユーザーの94% デザインの悪いサイトを信頼するのをやめたので、妥協の余地はもうありません。

その後、スクロールが広く受け入れられるようになったため、サイトは最高のものを上に配置することを優先しなくなりました。 あなたはそれらをインターフェース内に比例して広げることができます。 しかし、再び、私たちはその考慮に非常に注意することを学びました 訪問者の40% 全体的なレイアウトが粗末であることが判明した場合はそのままになります。

そして、それが彼らが嫌うすべてではありません。 ユーザーもコンテンツスライダーに飽きてきました。 1%がクリックします それらの上に。 興味深いことに、コンテンツを削除することで緩和することは、 サイト訪問者の86% ホームページに掲載され次第、重要な製品とサービスの情報を見たい。

魅力的ですね。

正直に言うと、UIデザインはこれほどエキサイティングではありませんでした。 ユーザーは変化し、デバイス技術は天文学的に発展しており、インターネットの速度は現在、F1レベルであり、Web上の幅広いデザインツールに支えられています。 これらすべてを最新のUIデザイナースキルセットと組み合わせると、2019年がさらにインパクトのあるものになることに間違いなく同意します。

では、どのようなトレンドを楽しみにしていますか?

モバイルファースト

モバイルの最適化は、すぐには廃止されないように見える流行語です。 控えめに言っても、この傾向は数年前から続いています。 そして、2019年にモバイルベースのUIデザインの採用が増えると予測するのは正しいでしょう。

また、対応する技術を除いて、少なくとも今後12か月ほどの間、この分野でこれから登場する可能性のある新しいものは何もないと想定することもできます。 十分に公平ですが、これを取得してください…

ご存知のように、かなり前から、モバイルに移行する前に、PC向けの同じ古いアプローチを最初に使用してきました。 振り返ってみると、トラフィックの大部分がPCユーザーからのものであるため、デスクトップUIが主な焦点でした。

その後、2016年後半に興味深いことが起こりました。モバイルトラフィックは最終的にPCトラフィックを上回りました。 その年の終わりまでに、携帯電話はヒットしました 市場シェアの50.31%、タブレットは4.9%まで追加されました。

モバイル市場シェア

しかし、それにもかかわらず、PCユーザーがオンラインで費やした累積時間のトップを維持することがあったため、デスクトップインターフェイスを優先しました。 たとえば、北米では、2017年の携帯電話のサーフィンは依然として遅れており、 サーフィン時間の33%.

サーフィン時間

そういえば、モバイルも最終的にPCに追いつくのは時間の問題だと私たちは皆知っていました。 そして2018年までに、モバイルが普及し、テーブルは完全に変わりました すべてのグローバルWebページの52.2%.

トラフィックシェア

これはUIにとって何を意味しますか

まず、UIデザインアプローチの変化を期待します。 開発者は、PC用に設計する前に、まずモバイルUIに焦点を当てることで優先順位の変更を開始します。 モバイルユーザーはPCユーザーよりも優先されます。

影と奥行きの使用

フラットなUIデザインにメリットがあることは否定できません。 しかし、それに直面しましょう。 彼らは今、単調になりすぎており、明らかに、退屈です。

残念ながら、結果として面倒なグラフィックスが発生するため、3Dデザインの使用は困難でした。 たとえば、3Dインターフェースを使用したウェブページの読み込みには、通常、フラットなデザインのウェブページよりも時間がかかりました。

まあ、ウェブブラウザが大幅に改善し始めるまで。 一方、デザイナーは、影を利用して奥行きの錯覚を導入する優れた手法を開発しました。

影と奥行き

したがって、2019年には、さまざまな3Dインターフェイスの外観を実現するために、シャドウバリエーションを段階的に使用する予定です。

たとえば、特定の要素に注意を向けようとする設計者は、柔らかさと強さの度合いが異なる偽の影を作成できます。 最終結果は、3Dの残りの部分の上にホバーしているように見える要素です。

もうXNUMXつの一般的な手法は、パターンにシャドウを配置して、さまざまなレベルのテクスチャを作成し、その後、インターフェイス要素に命を吹き込むことです。

次に何を推測しますか? UI設計ツールの最近の進歩により、これらの設計アプローチに伴うダイナミクスがさらに拡大しています。 影とグリッドおよび視差レイアウトを簡単に組み合わせて、対応する奥行きを体系的に拡張できるため、よりリアルな3Dの錯覚を実現できます。

つまり、シャドウを高度に使用することで、2Dディスプレイでより洗練された奥行きが実現されます。 そしてそうすることで、特別な3D画面の必要性を排除します。

ミニマリズム

2000年には、少なくとも、 マイクロソフト、12秒でした。 次に何を推測しますか? 2015年までに、標準の金魚よりも驚くほど短い8秒になりました。

まあ、それ以上悪化する可能性はないと私たちが思ったとき、インターネットは人々をより焦らせました- サイト訪問者の47% ページが2秒未満で読み込まれることを期待してください。 彼らは単にもっと長く待つことができません。 実際、40秒以上かかると3%が離れてしまいます。

驚いたことに、多くのWebデザイナーはこれを真剣に受け止めていません。 現在 平均ページ読み込み速度は8.66秒です– 3年は2018秒未満というGoogleの推奨にもかかわらず。

ページの読み込み時間

そして、それだけではありません。 彼らが取るので、状況はモバイルサイトにとってかなり貧しいことがわかります 平均22秒 ロードする。 しかし、残念ながら、モバイルページの訪問者の53%はXNUMX秒以上滞在していません。

しかし、これはUIとどのように関連していますか?

通常、ページの読み込み速度はいくつかの要因によって決まりますが、ユーザーインターフェイスの全体的な設計は特に非常に重要です。 ここから連鎖反応が始まります。

では、これは2019にとって何を意味するのでしょうか?

まあ、 Googleの速度更新 2018年XNUMX月に、読み込み速度を大幅に低下させる複雑でグラフィックスが多いUIの終わりの始まりでした。 現在は、非常に高速に読み込まれる、合理化された無駄のない最小限のUIにますます移行しています。

本質的に、ミニマリズムは、シンプルさ、便利さ、機能性の間の理想的なバランスを達成することを伴います。 これにより、全体的な速度と検索エンジンのランキングが向上するだけでなく、対応するトラフィックの直帰率も低下します。

重複する効果

グラフィカルデザインの現代では、複数のレイヤーを組み合わせて空間感を作り出し、最も重要なことに、インターフェイスをより魅力的なものにするために、オーバーラップエフェクトが導入されました。

しかし、待ってください。 そもそも重複効果とは?

通常、これには、画像、テキスト、色などの要素をスタイリッシュに重ねて配置することが含まれます。 私はあなたがすでにいくつかのウェブサイトで重複するグラフィックスに出くわしているのは確かだと思います。

重複する効果

確かに、この2019、XNUMX年の間、デザインの傾向はかなり良くなっています。 しかし、最新のデバイスでより優れた色のグラデーションが再現されるようになったため、XNUMX年にはPCとモバイルの両方のUIで重複する効果が広範囲に採用されることが予想されます。

たとえば、Samsung MobileはLCDディスプレイから 最先端のOLEDテクノロジー 彼らが7年前にギャラクシーSXNUMXをリリースしたとき。 その後、AppleはiPhone Xでバンドワゴンに加わりました。iPhoneXは、以前のLCDよりもディスプレイのコントラストが大きくなっています。 会社も持っています これを維持する計画 2019年に予定されているすべてのiPhoneモデル。

そして、最も恩恵を受ける立場にあるのは誰ですか?

予想通り、グラフィックデザインの世界ではこれを最大限に活用して、より自然に見える、よりシャープでクリスピーなグラデーションとのオーバーラップを作成しています。 OLEDディスプレイが重なり合う要素に関する最大の問題を大幅に軽減したことを気に入っています。コントラストが低いために、ユーザーが下にある二次要素に気を取られてしまいます。

この傾向は、UIデザインの透明性の発達にもつながります。 UIで「ガラスのような」テクスチャの使用が増加することがわかります。デザイナーが透明度を利用して、意図した強調に干渉することなく、プライマリグラフィックとセカンダリグラフィックの両方を同時に引き出すからです。

フレームレスデザイン

そして、現代のデバイスでも、最近の全体的なエクステリアデザインの最も優れた点に確かに気づいています。 いいえ、私は彼らが今ほとんどすべての表面でガラスを使いすぎている方法について話しているのではありません。

わかりました、それはそれと関係があるかもしれません。 奇妙な理由で、今や誰もがディスプレイフレームを嫌っているようです。 主要なスマートフォンやテレビの画面メーカーは、ディスプレイの外形とそれに対応するデバイスの端との間のスペースを徐々に減らしています。 次に、外観を完成させるために、丸みを帯びたデバイスエッジと組み合わせることにしました。

サムスンは、スマートフォンの画面の一部を縁を越えて拡張することで、縁フレームを完全になくすことさえしています。 一方、Appleは、iPhoneの顔全体をディスプレイ画面で覆い、受話口だけのための余地を残すことにしました。

フレームレスエッジ

考えてみると、それは無限の錯覚とすべての関係があると思います。画面を自然環境の一部のように見せることが必要です。 そして、正直に言うと、ディスプレイがより没入型であると感じていると報告されているユーザーにとって、それは非常にうまく機能しています。

おそらく当然のことながら、この傾向はアプリ業界にも波及しています。 UIは、フレーム付きのアウトラインから、丸みを帯びたエッジを組み合わせた滑らかなラインへと徐々に移行しています。 その結果、これはインターフェースがデバイス画面とシームレスに統合し、その後フルスクリーンのフレームレスアウトルックを作成するのに役立ちました。

デバイスメーカーはこの傾向を2019年まで続けているため、UIはスムーズで丸みのあるフレームレスデザインのために、旧世代の鋭いエッジを徐々に落とすと予想しています。

マイクロアニメーション

それらは微妙で、時には取るに足らないように見えるかもしれません。 しかし、単純な真実は、UIのこのマイクロアニメーションは、ユーザーがナビゲートするときにユーザーを引き付け、支援するのに非常に強力であることが証明されていることです。

スクロールまたはクリックすると色が変わるボタンを見たことはありますか? また、メニューレイアウトが表示され、ポインターが上に来るとすぐに追加のオプションが表示されます。 さて、これらはすべて、小さな視覚効果を作成してユーザーエクスペリエンスを豊かにするマイクロアニメーションの例です。

マイクロアニメーション

移動要素は注意を引くのに特に効果的であるため、多くの設計者はすでにそれらを利用してユーザーをさまざまなコンバージョンポイントに向けています。 この傾向は今や流行しているので、マイクロアニメーションの形式をまだ実装していないサイトをXNUMXつ以上見つけることができないほどの幸運を賭けたいと思います。

その後、これを入手してください。 現在、主要なWebブラウザはすべて、PCとモバイルの両方でマイクロアニメーションを十分にサポートしています。 したがって、2019年に近づくにつれ、この傾向は続くと思います。UIには体系的に構造化された視覚的階層が組み込まれることを期待しています。

結論

全体として、最も注目すべきトレンドの一部のみを取り上げました。 時が経つにつれ、さらにエキサイティングなものが登場することは間違いありません。2019年にボールが転がるのを待つことはできません。

とはいえ、最も影響力のあるUIデザイントレンドは何だと思いますか。 そして、あなたはこの他にどんな注目すべきトレンドをこのリストに加えますか?

ヘッダー画像提供 ワリド・ベノ

ボグダン・ランセア

ボグダンはインスパイアードマグの創設メンバーであり、この期間でほぼ6年の経験を積んでいます。 余暇には、クラシック音楽を学び、視覚芸術を探索するのが好きです。 彼はフィクシーにもかなり夢中です。 彼はすでに5を所有しています。