5月の最も重要なインタラクティブデザイン記事!今年、Baiduのデザイナーは体験の観点から出発し、大量の既存のレポートや資料と組み合わせて、すでに出現し、今年一定の規模を形成するインタラクティブ体験のトレンドを探りました。昨年と違うのは、この記事ではこれらのトレンドの応用シナリオも提供されており、詳しく読む価値があることです>>> モバイル製品: 2015 年もモバイル アプリケーションの数は引き続き大幅に増加しましたが、モバイル インタラクション エクスペリエンスは変化していました。昨年登場した無数の新しい形式と比較すると、今年のインタラクティブ体験のトレンドは、特定の側面における体験の最適化と深化に重点が置かれており、クリエイティブリーダーの出現は少なくなっています。これは、モバイル アプリケーションが市場での「爆発」後に新たな段階に入ったことを示しています。これは、スマートフォン市場の飽和、携帯電話の画面サイズの拡大、アプリケーションに対するユーザーの認知度の向上と密接に関係しています。 1. マルチメディア検索の広範な利用 技術の継続的な進歩により、検索入力方法はテキスト検索に限定されなくなりました。マルチメディア検索は検索結果の品質と精度において大きな進歩を遂げ、娯楽から実用性へと移行しました。多くのモバイル シナリオでは、マルチメディア検索はテキスト検索に比べてかけがえのない利点があります。 Baidu モバイルトレンドレポート 2015 によると、次世代のモバイルインターネットユーザー (2000 年以降に生まれたユーザー) はマルチメディア検索をより受け入れやすいことがわかりました。さらに、データトラフィックの面では、4G の急速な成長により、マルチメディア検索の実用化に必要な条件も整っています。 Camfind は、物体の写真を撮って検索し、検索物体の色、質感、属性を正確に識別することができます。関連する写真と関連する検索結果を提供します。 ![]() Google の音声認識は主要な検索方法の 1 つとなり、多くのプライベートな場面で広く応用され、音声からテキストへの変換精度も大幅に向上しました。 ![]() 適用シナリオ: テキスト入力のコストが高すぎる、テキストを入力する機能がない、または検索対象をテキストで記述できない。 2. 文脈に応じて提案されるエントリが増える TalkingDataが発表した「2014年モバイルインターネットデータレポート」のデータによると、国内のモバイルデバイス1台あたりに平均34個のアプリケーションがインストールされており、平均20個のアプリケーションが開かれている。多数のアプリケーションによる競争により、メイン インターフェースの前に入り口を配置することで、使用頻度を高め、使いやすさを向上させるアプリケーションが増えています。しかし、フロントエンドエントリーのアプローチは利便性を部分的にしか向上させず、ユーザーの使用負担と否定的な感情を増大させるだけです。シーンに適した事前配置は、特に配慮されているように見え、ユーザーの干渉を減らし、製品の粘着性と人間的な配慮を強化します。 NetEase Cloud Music は、ロック画面のインターフェースに「前の曲」、「お気に入り」、「削除」などのクイック機能を配置しました。素早く操作したいユーザーにとって大きな利便性をもたらします。同時に、これらの機能は「メニュー」に組み込むことも可能で、非常に考え抜かれた設計となっています。 Amap はモバイル ナビゲーション インターフェイスをロック画面に移動しました。これにより、歩きながらナビゲーションを使用する際に頻繁に携帯電話のロックを解除しなければならないという不便さが解消されました。 ![]() IOS システムのロック画面インターフェイスは、ユーザーの地理的位置と周辺情報に基づいて、必要なアプリケーションを推奨します。たとえば、ユーザーが China Merchants Bank の近くでロック画面インターフェイスを開くと、画面の右下隅に China Merchants Bank アプリケーションへのクイック エントリが表示されます。 ![]() アプリケーション シナリオ: 使用シナリオが明確で、操作頻度が高いアプリケーション。ロック画面、通知バー、その他の場所にシーンベースのフロントエンドを追加できます。 3. インタラクションのミニマリズム インターネット端末の多様化と利用シーンの複雑化により、ユーザーの操作はますます断片化され、せっかちになってきています。プロセスの簡素化と短縮は避けられない傾向になっています。同時に、主流のインタラクション方法に対するユーザーの認識が高まり、従来のインタラクション プロセスに対する信頼も大幅に向上しました。2 年前には過激に思われたいくつかの簡素化方法は、現在ではユーザーにそれほど大きな認知コストをもたらしません。 Blink は、マルチメディア ソーシャル ネットワーキングのプロセスを大幅に簡素化します。画像コンテンツでソーシャル化する場合、「送信先の選択」、「送信コンテンツの作成」、「送信」という 3 つのアクションがすべて、「連絡先をクリックする」という単一のトリガー イベントで完了します。ビデオ ソーシャル ネットワーキングに参加するときは、連絡先を長押しして放すだけで、プロセス全体が完了します。 ![]() Chrome では、「閉じる」ウィンドウと「新しい」ウィンドウが「更新」アクションに統合されています。ドロップダウン アクションの変換には、3 つの操作形式が含まれます。複数のウィンドウを切り替える面倒なプロセスを回避します。 ![]() 適用シナリオ: 多くのステップと頻繁な操作を伴うプロセスを簡素化します。マルチメディアソーシャルネットワーキング、決済など。 4. 情報構造の軽量化 大画面スペースでのコンテンツ収容能力はより複雑です。直感的なフラットなビジュアルデザインの背後では、フラットな情報構造がより重要です。情報構造はより軽量で明確になる傾向があります。軽量な情報構造は、コンテンツ自体を強化するだけでなく、ユーザーが情報構造やロジックを理解するコストを削減し、ユーザーが情報に到達する距離を短縮することもできます。 Baidu Mobile Assistantは、アプリケーションの詳細を閲覧するコアパスと高頻度パスにおいて、半層ポップアップモードを使用して、全体的なフレームワークと閲覧動作の「負担を軽減」し、ページレベルのジャンプを可能な限り回避するとともに、ユーザーの閲覧動作の負担を軽減し、操作体験をより軽く、より自然にします。 ![]() 「小さくて美しい」機能的なアプリケーションとして、UniqDay は製品設計の初期段階でユーザーの学習コストと受け入れを考慮に入れます。 UniqDay は、ユーザーが初めて使用したときに覚えやすいように、軽量の構造設計を採用しています。カウントダウン日を追加および編集する際、UniqDay はポップアップや翻訳を巧みに使用してユーザーが現在の位置を理解できるようにし、コアモジュールをユーザーの視界内で安定させ、ページレベルのジャンプを減らします。 ![]() EMO は従来のフレームワークレイアウトを打ち破り、コア機能を大幅に強化します。この没入型体験デザインは、軽量でフラットな構造を極限まで表現したもので、ユーザーは他の操作パスに邪魔されることなく、気分に合わせて音楽を聴く機能やコンテンツ自体のプレゼンテーションに集中することができます。 ![]() アプリケーション シナリオ: 情報レベルが多く、ページ ジャンプが頻繁に行われるアプリケーションや、機能がシンプルな垂直アプリケーションの負担を軽減します。 5. アニメーションのパフォーマンスがより機能的になり、費用対効果のギャップを埋める 2014年末に2大モバイル端末システムであるAndroid 5.0 LollipopとiOS 8がリリースされ、スムーズなモーションエフェクトは徐々にアプリケーションやシステムの「標準機能」となってきました。現在のモーションエフェクトの使用は、デザインと感情の過剰消費につながっています。より方向性と機能的な役割を果たす必要があります。方向性と示唆的な動的効果を通じて抽象言語を自然にマッピングすることで、インターフェースと情報間の階層と論理関係をより直感的に反映でき、アプリケーションを理解しやすくなり、ユーザーガイダンスのプロセスが簡素化され、ユーザーの学習コストが削減され、ユーザーに驚きをもたらすことさえあります。 Android 5.0 Lollipop システムは、マテリアル デザイン言語のカードベース デザインの定義に依存しており、量子モーション効果デザインの教科書的な例を作成します。このシステムでは、ユーザーを誘導し、ページの階層的なロジックを反映するために、スキューモーフィズムと明確な方向性のアニメーションを多用しています。 ![]() Yep! は、スムーズな変位と変形効果を使用して、ユーザーが検索プロセスのインタラクティブなメカニズム (アクティビティを選択 - 招待を送信 - 同じことをしたい他のユーザーが一致するのを待つ - 検索結果) を理解できるようにし、プロセスをよりスムーズでわかりやすいものにします。 ![]() アプリケーション シナリオ: このトレンドは、一般的に、アプリケーション シーンの遷移、プロンプト、複雑な情報の階層的なプレゼンテーションに適用されます。 6. HTML 5インタラクティブコンテンツは、製品のパフォーマンスを継続的に向上させるために広く使用されています。 2014 年 10 月、W3C は HTML5 の最終版を発表しました。 HTML5 テクノロジの発展により、インタラクティブ フォームの革新が促進され、シェイクや 3D ビューなどのフォームが広く使用されるようになりました。同時に、2014年にはストーリーシーンや商品感情などのHTML5のデザインがモバイルインターネットの普及に火をつけることに集中し、今後も継続的な波をもたらすことがわかります。 Dianping の「Just One Word Between Us」は、テキストベースの読み取りパフォーマンスに重点を置いています。差別化されたサウンドとモーション効果を使用して、さまざまなストーリーシーンの雰囲気を作り出し、テキストを使用して、さまざまなテーマのテキストストーリーを巧みに概説します。ストーリー全体にキャラクターは登場しませんが、あらゆる場所でユーザー独自の連想を引き起こし、ユーザーに多次元での感情的な共鳴を促します。 ![]() 「夢の水晶玉の世界」は、繊細な映像イメージで素晴らしいビジュアルストーリーシーンをユーザーに提供します。 3D ビューの回転などのアニメーションにより、ユーザーはズームインして詳細を確認したり、ズームアウトして全体像を確認したりすることができ、口頭で語られる物語のようにストーリーが展開され、ユーザーの好奇心を刺激し、ユーザーの参加を促します。 ![]() 適用シナリオ: ブランドの影響力を重視する業務活動は、感情的なデザインに適しています。 7. カード化は複数の端末でその利点を発揮し続け、クラシックなデザインモデルを実現します カードベースのコンテンツ プレゼンテーションは、コンテンツを第一に考え、気を散らすものをすべて排除するという元のモデルを破ります。現在広く使われているデザインパターンです。ユーザーが大量の情報を閲覧する必要があるシナリオでは、コンテンツの表示効率が向上します。同時に、カード化は、マルチプラットフォームのウェブサイト設計やさまざまな画面サイズへの適応において、依然として非常に明らかな利点を持っています。 モバイル アプリのコンテンツはカードのような形式で表示され、情報の表示に非常に役立ち、さまざまなサイズのデバイス インターフェイスで優れた表示効果を発揮します。 ![]() 最新のApple Watchアプリでは、カードベースのデザインも頻繁に使用されています。以下の Baidu モバイル インターフェースでは、カードベースのデザインにより、重要なグループ購入情報を一目で表示できます。 Baidu Mobile の位置情報サービスもカードベースのデザインを採用しており、さまざまなカードの組み合わせとコンテンツ表示によってサービス コンテンツを強調表示できます。 。 ![]() アプリケーションシナリオ: 大量の情報を表示する必要のあるアプリケーション、クロスプラットフォーム アプリケーションなど。 8. 大画面操作を最適化し普及させ、効率的な体験を創出する 最近は大画面の携帯電話がどこでも見かけるようになりました。画面が大きいほど、より多くのコンテンツを表示でき、その利点は比べものになりません。 「IDC World Smart Device Tracking Report」によると、大画面デバイスの市場シェアは今後も増加し続けるだろう。大画面の携帯電話をオープンな気持ちで受け入れるユーザーも増えています。 画面は大きくなっていますが、私たちの手は大きくなっていません。 4インチを超える大画面の携帯電話では、ユーザーの操作体験は満足できるものではありません。大画面化による操作上の不便さを早急に解決する必要があったため、「大画面対応デザイン」が誕生しました。インターフェース構造を最適化し、ジェスチャー操作を追加し、片手操作レイアウトを採用することで、ユーザーは手を自由にし、大画面でより自由かつ便利に操作できるようになります。 1. 下部にある主要な機能に焦点を当てます。 上部のナビゲーション バーに元々あった「機能」または「ナビゲーション」ボタンを必要に応じてインターフェイスの下部に移動し、ユーザーが片手で操作するときに簡単に操作できる領域でボタンを使用できるようにします。これにより、操作パスが短縮され、クリック コストが削減されます。 Light、KEEP、MONO などのコンテンツベースのアプリケーションでは、メイン機能ボタンを画面の下部に設計することで、操作のアクセシビリティが向上するだけでなく、コンテンツが強調表示され、読み取りと閲覧のエクスペリエンスが向上します。 ![]() 2. クリックの代わりにスライドするジェスチャー操作がさらに追加されました。 iOSユーザーを例にとると、従来の戻るボタンは画面の左上隅に配置されていることが多く、大画面のユーザーにとっては届きにくい死角になっています。 Storehouse はジェスチャー操作に対応しており、右にスワイプするだけでインターフェースを終了できるため、非常に便利です。ユーザーは、クリックして終了するのではなく、スワイプする習慣を徐々に身に付けてきました。 PEEKは、機能ボタンを大胆に放棄し、ジェスチャーの変更を通じて対応する操作を実行するジェスチャーベースのアプリケーションです。 ![]() 3. 片手モードで操作領域を縮小: 片手操作のニーズは普遍的であるため、クライアント製品とシステム プラットフォームの両方で、片手操作に適応するための対応するソリューションが作成されています。特定のシナリオでは、ユーザーは簡単なトリガー方式で片手モードに入り、制御範囲を狭めて、指で簡単にアクセスできるページの中央下部の領域に制御することができます。 iOS システムのホームボタンをダブルクリックすることと、Hammer フォンのプルダウンとホバー機能は、どちらもシステムレベルのインタラクション ソリューションです。製品レベルでは、Baidu Input Method は位置とサイズを個別に調整できる入力パネルを革新的に設計し、ユーザーから非常に良いフィードバックを得ています。 ![]() 適用シナリオ: プラットフォーム、ツールなど、頻繁に片手操作を必要とするアプリケーション 9. 感情的な許可要求はコンバージョン率を高める 一部の iOS アプリケーションを初めて使用する場合、機能サービスの依存関係により、地理的位置の取得、カメラへのアクセスなどのシステム機能を呼び出すためのユーザーの許可が要求されます。要求は通常、直接的ではあるが煩わしいダイアログ ボックスの形式で表示されます。通常、ユーザーはこのシナリオを拒否し、関連する機能サービスにおけるエクスペリエンスが失われ、ユーザーが離れることになります。オンボーディング中に許可リクエストの「先制的な」性質を強調すると、この問題は効果的に解決されます。感情的な手段を通じてサービス価値を提供することで、ユーザーは通話の目的を理解できるようになり、ユーザーの信頼が効果的に高まり、承認コンバージョン率が向上します。 Looksery製品は、iOSシステムのカメラリクエストを呼び出す前に、感情的なアイコンと疑問文を通じてカメラを呼び出す目的をユーザーに伝え、ユーザーが呼び出しの目的を理解できるようにすることで、承認変換率を大幅に向上させます。 ![]() Gogobot 製品は、ユーザーの地理的位置を取得する前に、対応する使用シナリオとその必要性を説明して、この許可を開くことに対するユーザーの心理的期待を満たし、承認変換率を向上させます。 ![]() 適用シナリオ: システム権限を要求する必要があるアプリケーション、特にそれに強く依存するアプリケーションに適用可能 一般的に言えば、来年はモバイル アプリケーション エクスペリエンスがそれぞれの分野で洗練され、深化され、エクスペリエンスはより極端な方向へと押し進められるでしょう。同時に、画面サイズ、ユーザーの認知の蓄積、製品市場の変化により、ユーザー エクスペリエンスを向上させるためのより有利な条件が整います。デザイナーがこれらの変更を習得し、活用して、より良いエクスペリエンスを生み出せることを願っています。 |
目次1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 3. インデック...
2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...
目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...
ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...
この記事では、例を使用して、MySQL インデックス カーディナリティの概念と使用方法を説明します。...
アプリケーションをコンテナ化した後、Docker コンテナを起動すると、デフォルトで root ユー...
最初は悲しい気持ちになりました。スクリーンショットは以下の通りです。 少し苦労しましたが、解決策は次...
1. 基本的な使い方これは MutationObserver コンストラクターを通じてインスタンス化...
初めて MySQL FUNCTION を書いたとき、エラーが何度も発生しました。 Err] 1064...
目次道具:ログインシナリオ:練習する:シナリオ1: 思考と実践シナリオ2: 思考と実践要約する道具:...
次のコードは、MySQL が 1 つのテーブルのデータに基づいて別のテーブルのいくつかのフィールドを...
序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...
通常、Web サイトを構築する目的は、検索エンジンにインデックス登録してもらい、プロモーションを拡大...
HTML 入力属性値属性value 属性は、入力フィールドの初期値を指定します。 <フォーム...
Alibaba Cloud ServerはTomcatをインストールして構成し、外部ネットワークアク...