Maoyan vs Tao Piaopiao 競合製品分析！

現代社会では、人々の余暇や娯楽活動は豊かで多様化しており、映画鑑賞は人々のリラックス方法の 1 つとなっています。オンラインチケットシステムはこれに重要な役割を果たしています。

この記事では、 MaoyanとTaopiaopiao を競合製品として取り上げ、チケット購入のための映画上映インターフェースから始めて、視覚、インタラクション、機能性の観点からチケット購入プロセスに関係するインターフェースの比較分析を行います。

この記事で述べられている意見は、製品を使用した私の個人的な経験のみに基づいています。

1. 環境を体験する

電話モデル: iPhone 8 plus;

携帯電話システム: iOS 12.1;

アプリケーションバージョン: Maoyan V9.8.1、Tao Piao Piao V10.0.6。

2. 視覚的なコントラスト

1. ホットスクリーニングインターフェース

全体的に、Maoyan のバナーデザインはインターフェイスコンテンツを豊かにしていますが、対照的に Taopiaopiao のインターフェイスはシンプルですっきりしています。

上部タブバー:

Maoyanの選択状態はブランドカラーのフォント+ブランドカラーの短い線で、非選択状態は灰色です。Taopiaopiaoの選択状態は黒色のフォント+ブランドカラーの短い線で、非選択状態は灰色です。両方のアプリケーションは、異なる状態で色相のコントラストを使用しています。コントラスト効果の観点から見ると、Maoyanの選択状態と非選択状態のコントラストの強さがより顕著です。

検索：

Maoyan はブランドカラーのアイコンのみを使用して機能の入り口を表しており、これは Maoyan の検索機能がそれほど高くないことを示しています。これを行う利点は、スペースを節約し、位置をより柔軟にできることです。他の機能を追加する必要がある場合は、検索アイコンの位置を直接調整できます。

Taopiaopiao は、ライトグレーの長方形のボックス + ダークグレーのアイコン + ダークグレーのプロンプトテキストを使用して機能の入り口を表し、検索機能がアプリケーション内でより高いレベルにあることを示しています。これの利点は、検索機能がインターフェース上でより大きなスペースを占め、ユーザーの注目を集め、ユーザーが一目で確認して検索タスクをすばやく完了できることです。

ボタン: 形状に関しては、Maoyan と Taopiaopiao はどちらも完全に丸いボタンを使用しています。色彩面では、Maoyan のボタンは単色塗りつぶし + 拡散投影を使用し、Taopiaopiao は左から右へのグラデーションカラーを使用し、両方のチケット購入ボタンと先行販売ボタンも異なる色で表現されています。

個人的には、Taopiaopiao のデザインの方が好きですね。グラデーションが視覚的な誘導になり、面白いです。

2. 映画館選択インターフェース

インターフェース全体を見ると、Maoyan は薄い灰色の区切り線を使用して劇場情報を分割し、Taopiaopiao は各劇場をカード上に配置して、薄い灰色の背景レイヤーに配置しています。

フィルターバー：Maoyan はすべてのフィルター条件を画面に表示します。これはすっきりと簡潔です。Taopiaopiao のこの列では、両側に情報があり、中央に空白があるため、インターフェイスのバランスが崩れているように見えます。

各映画館モジュールでは、MaoyanとTaopiaopiaoは異なる色のラベルを使用して、提供できるサービスを表しています。映画館カードとクーポンのラベルのデザインでは、Maoyanは単色の塗りつぶしを使用して他のストロークラベルと対照をなしていますが、Taopiaopiaoは他のラベルと同じストローク形式を使用しています。Maoyanが映画館カードとクーポンのプロモーションに重点を置いていることがわかります。

3. セッション選択インターフェース

トップナビゲーションバー：Maoyanは純白の背景を使用しています。Tao Piaopiaoはナビゲーションバーをインターフェースに接続し、暗い画像の背景を使用しています。Tao Piaopiaoのデザインは、インターフェース内の映画情報のレベルを高めていることは明らかです。

ナビゲーションインターフェースに入るために、Maoyan は機能の入り口を表す位置決めアイコンを使用しています。このデザインはより目立ち、ユーザーが次のステップに進むように促します。Taopiaopiao では、ユーザーが詳細なアドレスをクリックして入力する必要があるため、このデザインはよりわかりにくいように見えます。

Maoyan は割引カードを宣伝するために 2 つの位置を使用していますが、これはインターフェース上で多くのスペースを占めており、まったく不要です。Taopiaopiao のように、より明るい色のカードを使用して宣伝する方がよいでしょう。

映画館で上映されている映画: Maoyan は暗い背景を使用して、インターフェースのこの部分にユーザーの注意を集中させていますが、ポスターと背景のコントラストはそれほど明白ではありません。Tao Piaopiao は白い背景を使用しており、ポスターと背景のコントラストが明確で、各映画のポスターがより目立つようになっています。

チケットの価格には、元の価格と割引価格の2つの金額があります。割引価格を強調するために、Maoyanは単色の塗りつぶしを使用してユーザーの注意を引きます。Taopiaopiaoは、区別とコントラストのために2つの異なる色のフォントのみを使用しています。個人的には、Maoyanのデザインの方がコントラスト効果がより顕著だと思います。

満席の場合：Maoyan はブランドカラーの透明度を下げたボタンを使用してこれを示します。Taopiaopiao は直接グレーを使用し、残りの座席が少なくなると、Taopiaopiao はテキストを使用してリマインダーも提供し、非常にユーザーフレンドリーです。

4. 座席選択インターフェース

1) 座席の選択なし

映画館エリア全体で、タオ・ピアオピアオは赤い点線の円を使って最高の鑑賞位置を囲んでいます。

選択できない座席については、Maoyan と Taopiaopiao はどちらも同じグレーの背景を使用しています。選択できる座席については、Maoyan はブランドカラーで塗りつぶしています。Taopiaopiao はブランドカラーを使用するだけでなく、座席にブランドアバターを追加して、ブランドイメージを効果的に広めています。

下部の確認ボタン: Maoyan は角の半径が小さく、Taopiaopiao と Hot Movies は完全に丸い角を使用しています。

座席を選択する前、Maoyan の確認ボタンはクリックできず、ユーザーに確認を促すために透明度を下げたオレンジ色のボタンで表示されます。Taopiaopiao のデザインは基本的に Maoyan と同じで、左から右へのグラデーションボタンを使用して透明度を下げていますが、グラデーションボタンは単色の塗りつぶしよりもダイナミックで興味深いものです。

2) 座席選択インターフェース（座席の選択）

座席を選択すると、両方の座席マップに緑色+チェックマークが使用され、赤色とのコントラストが鮮明になり、下部の確認ボタンの透明度が 100% になり、ユーザーが次のステップに進むように促します。

5. 注文詳細ページ

Maoyan のインターフェース全体は、色を使用して情報を分割しています。価格はインターフェースの中央で再計算されるため、インターフェースのスペースを占有し、チケットの購入手順はインターフェースに表示されません。これにより、インターフェースのコンテンツが少なくなり、見た目がすっきりしてシンプルになります。

Taopiaopiao はカードを使用して情報を分割します。インターフェースの下部には支払う金額のみが表示されるため、購入手順を表示するスペースがあります。Maoyan と比較すると、Taopiaopiao のインターフェースは少し複雑に見えます。

猫眼と淘宝票の映画館割引カードはどちらもカラフルな背景を使用してユーザーの注目を集めています。カードを開くと節約できる金額が焦点になっています。猫眼は色を使って強調していますが、フォントサイズは小さくなっています。淘宝票は節約できる金額の後にアイコンを使用して、より多くのユーザーの注目を集めています。

支払いを確認するボタン：デザイン言語の一貫性に基づいて、Maoyan はオレンジ色のままで、角が小さく丸く、テキストが付いていますが、Taopiaopiao はグラデーションがあり、角が完全に丸く、テキストが付いています。

6. 映画チケット詳細ページ

猫眼の映画チケットのインターフェースは薄い灰色の背景を採用しており、1 つの画面に大量の情報を掲載しているため、混雑した印象を与えます。一方、淘宝牌は大きく異なり、暗い背景レイヤーを採用しているため、白いカードと鮮明なコントラストを形成し、最初の画面のインターフェースには最も必要なコンテンツのみが表示され、見た目がはるかにすっきりと爽やかです。

Maoyan は赤い四角形を使用してショーの開始までの時間を表示し、ユーザーの注目を集めることができます。Taopiaopiao は時間をインターフェイスの上部に直接配置し、占有スペースを増やしてより多くの注目を集め、ユーザーが一目でわかるようにします。

チケット変更・払い戻し申請ボタン：Maoyanは最初の画面でボタンがクリック可能かどうかを色とグレーで直接表示し、ユーザーが視覚的に申請要件を満たしているかどうかを知ることができるようにしています。Taopiaopiaoは最後の画面の下部にボタンを配置することで、チケット変更・払い戻し申請の可能性を大幅に減らすことができます。しかし、ユーザーは色だけでは申請要件を満たしているかどうかを判断できず、ボタンの下の文章を読むか、ボタンをクリックすることによってのみ知ることができます。この点では、TaopiaopiaoのデザインはMaoyanほどユーザーフレンドリーではありません。

Maoyanは、最初の画面の下部に次の画面のコンテンツの小さな部分を表示し、ユーザーインターフェイスに他の情報があることを知らせます。これは非常に優れたデザインです。視覚的に見ると、ユーザーはTaopiaopiao注文にさらにコンテンツがあるかどうかわからず、必要な機能や情報を見つけるために上にスワイプするだけです。もちろん、このデザインはチケットの変更や払い戻しの回数を減らす役割も果たしています。

7. 映画の詳細ページ

Maoyanの画面の前半は暗い背景を使用し、色合いはポスターの色を使用しています。各映画の詳細ページの暗い背景は異なります。その後の映画のレビュー、詳細情報、推奨事項などは白い背景にあり、前後のコントラストを形成して視覚疲労を防止しています。Tao Piaopiaoの画面はすべて白い背景です。

予告編はMaoyanの詳細ページで直接再生することはできず、別のインターフェースにリダイレクトすることしかできません。一方、Tao Piaopiaoでは、最初の画面のインターフェースの上部を使用して予告編を再生し、その他の情報はインターフェースの下部に移動されます。

Maoyan は映画チケット購入評価をオレンジ色で表しており、非常に目を引く直感的なデザインです。Tao Piaopiao の評価はカラーではなく黒色ですが、オレンジ色の星で視覚的に補完されています。

8. 予告編再生ページ

Maoyan には 2 つの異なる予告編再生ページがあり、ここでは (図 1) と (図 2) で区別しています。

予告編再生ページ（図 1）では、すべてのビデオがリスト形式でユーザーに表示されます。左側にはプレビュー画像、右側には紹介文が表示されます。予告編再生ページ（図 2）では、インターフェイスはビデオ再生機能に重点が置かれ、紹介文はビデオ再生領域の上部にあり、黒のグラデーションレイヤーで覆われています。両方の予告編再生ページには、ユーザーにチケット購入を促すために、目立つ位置にチケット購入ボタンが用意されています。

タオ・ピアオピアの予告編再生ページには映画紹介文が数行しかなく、チケット購入ボタンは映画紹介文の上にあります。いいね、コメント、共有ボタンはインターフェースの右下隅に配置されており、ユーザーの操作に便利です。それ以外、インターフェースには冗長な要素がなく、ほぼ全画面のビデオ再生インターフェースはユーザーに大きな視覚的インパクトを与え、ユーザーが予告編再生エリアに注意を集中できるようにします。

これまでの分析は、ユーザーが人気画面で直接購入ボタンをクリックしてチケットを購入するプロセスについてでした。しかし、人気画面で数画面スワイプしても見たい映画が見つからない場合、ユーザーは検索機能を使って検索します。このような状況では、検索ページのデザインもユーザーエクスペリエンスに影響を与えます。

ここで分析する検索ページとは、ホットスクリーンインターフェイス上の検索アイコンまたは検索ボックスをクリックして移動する検索インターフェイスを指します。

9. 検索入力ページ

検索ページを見ると、Taopiaopiao のインターフェースが丁寧に設計されていることが一目瞭然です。これは、Taopiaopiao における前述の検索機能のレベルの高さを裏付けています。

検索入力ページでは、Maoyan は検索ボックスに検索範囲のみを表示し、他のデザイン要素は表示しません。

Tao Piaopiao の検索インターフェースでは、デフォルトで 3 つのリストが表示されます。各リストには上位 10 件が表示されます。赤い上向き矢印はリストの増加を示し、緑の下向き矢印は減少を示し、灰色の水平線は変化がないことを示します。

人気検索リストの上位 3 つのランキングは、他のランキングのグレーとは色付きのフォントで区別され、上位 3 つの映画の名前の後ろには色付きのラベルが表示されます。

タオ・ピャオピャオの週間興行成績チャートと注目作品チャートには、映画名だけでなくポスターも表示されるようになりました。

10. 検索結果ページ

Maoyan の検索結果ページは、フィードストリームの形式でユーザーに表示されます。各映画モジュールは、左側にポスター、中央に映画情報、右側に評価とボタンで構成されており、右側の目を引く赤とオレンジ色のボタンは、ユーザーのクリックを引き付けます。

タオ・ピャオピャオの検索結果は映画と情報/ビデオの2つのカテゴリーに分かれており、映画セクションでは映画の1つを詳しく紹介し、カルーセル画像とチケット購入ボタンを提供します。

インターフェーススペースを最大限に活用するために、情報とビデオ部分は主に水平ブラウジングモードで表示され、情報は主に左側にテキスト、右側に画像があるフィードストリームの形式でユーザーに表示されます。一部のビデオは情報フィードストリームに散在しており、左側にテキスト、右側にプレビュー画像という形式で表示されます。プレビュー画像には再生ボタンが付いており、情報コンテンツと区別できます。

情報フィードに動画を挿入する設計により、ユーザーは長時間情報を見た後に休憩し、疲労を和らげ、驚きを感じることができます。

3. インタラクティブな比較

1. リフレッシュ

Maoyan には、更新するためのインタラクティブなジェスチャが 2 つあります。下部のタブバーにあるアイコンをクリックするか、下にプルダウンします。Taopiaopiao は下にプルダウンすることによってのみ更新できます。

これらのリフレッシュ方法はどちらも比較的一般的ですが、ユーザーごとに習慣が異なる場合があります。Maoyan は両方を考慮に入れています。

2. 読み込みアニメーション

ネットワークが遅い、操作時間が長い、データが多すぎるなどの特殊なケースでは、アプリケーションの実行速度がユーザーの期待を満たしません。このとき、インターフェースはユーザーに明確なフィードバック情報を提供して、システムがクラッシュしたのではなく、問題が解決していることをユーザーに知らせる必要があります。読み込みアニメーションはユーザーの注意を引き、ユーザーの心理的不安を軽減することができます。

Maoyan と Tao Piaopiao はどちらも、無限ループの読み込みアニメーションを使用して、アプリケーションが操作を実行しており、しばらく待つ必要があることをユーザーに通知していますが、待機時間の長さは指定していません。また、どちらも読み込みアニメーションにブランドイメージを組み込んでいます。

Maoyan のデザインはより伝統的で、すっきりと直感的に見えます。それに比べて、Taopiaopiao のデザインはより感情的で温かみがあります。

3. 映画館選択インターフェース

ユーザーが再度チケットを購入して劇場選択インターフェースに入る場合、再度選択して検索を入力する操作コストが非常に高いため、使い慣れた劇場を選択する可能性が高くなります。

Tao Piaopiao は、劇場選択インターフェースで最後に訪れた劇場の情報を優先的に表示します。他の劇場とは異なり、最後に訪れた劇場の映画の上映時間も表示されるため、ユーザーの選択が容易になります。

ヤコブ・ニールセンは、10 のユーザビリティ原則の中で、ユーザーが覚えやすいように支援する必要があると述べています。Tao Piaopiao は、劇場選択インターフェースでこの原則を完全に体現しています。

4. ショー選択インターフェースから劇場の詳細ページにジャンプします

ショー選択画面で、エリア①をクリックすると劇場の詳細ページに移動します。

タオ・ピアオピアに入るには、ユーザーは暗い色の画像領域をクリックする必要がありますが、これは目に見えないインタラクティブなジェスチャーであり、ユーザーには簡単には発見されません。インターフェース内の劇場情報スペースの割合を増やすためにタオ・ピアオピアを設計したのも、この理由によるところが大きいかもしれません。

5. ユーザーが座席選択インターフェースに入ると

Maoyan と Tao Piaopiao はどちらも、映画館全体の座席選択エリアの左上隅に映画館の座席レイアウトを表示します。表示は数秒後に消えるため、ユーザーに大きな支障をきたすことはありません。Tao Piaopiao は、最適な視聴エリアも赤で示します。

選択した視聴時間が今日ではない場合は、Maoyan と Taopiaopiao は画面上部にトーストを表示してユーザーに通知します。Maoyan のポップアップウィンドウで使用される色は背景とのコントラストがよくありません。

それに比べて、Tao Piaopiao の強いコントラストは、より多くのユーザーの注目を集め、ユーザーが選択した映画鑑賞時間に注意を払い、間違った選択をしないように思い出させることができます。

6. セッションの切り替え

座席選択インターフェースに入った後、映画の上映時間を変更したい場合、ユーザーは何をすべきでしょうか?

Maoyan では、戻るボタンをクリックして劇場のショー選択インターフェースに再度入り、視聴するショーを選択する必要があります。Taopiaopiao では、座席選択インターフェース上で左右にスワイプすることで座席を変更できます。また、ショー情報がインターフェース上でスペースを占有しすぎると感じた場合は、折りたたむことができます。比較すると、Maoyan のデザインはユーザーの操作パスを増やしますが、Taopiaopiao のデザインはより便利で高速です。

7. 座席をロックする

ユーザーが座席を選択し、「座席選択の確認」ボタンをクリックすると、座席が繰り返し選択される特殊な状況を回避するために、インターフェイスが注文詳細ページにジャンプする前に、システムは座席をロックします。

座席ロック期間中、ユーザーにフィードバック情報を提供する必要があります。以前のインターフェース読み込みの処理方法とは異なり、Maoyan と Taopiaopiao はどちらも Toasts を使用します。これは、ユーザーへの干渉が少ない軽量のフィードバックプロンプトです。

ここでの主な目的は、ユーザーに負担をかけないように、システムの動作状態をユーザーに通知することです。

8.座席指定をキャンセルする場合

座席選択インターフェースで以前の座席選択をキャンセルすると、Maoyan と Taopiaopiao にポップアッププロンプトは表示されなくなります。

ただし、チケット購入プロセスが注文詳細ページに到達し、座席選択インターフェースに戻り、座席選択インターフェースの戻るアイコンをクリックすると、インターフェースで座席選択がキャンセルされたかどうかに関係なく、Taopiaopiao は警告ボックス (アラート) を表示します。

警告ボックスは、ユーザーに決定を下すための2つのオプションを提供し、ユーザーが主観的な意志に基づいて座席選択をキャンセルすることを確保し、誤操作を回避します。実際、ポップアップウィンドウのデザインに、泣いているブランドイメージなどの感情的な要素を追加することができ、ユーザーの維持に役立ちます。

Maoyan 座席選択インターフェースの戻るアイコンをクリックすると、ユーザーを保持するための警告やプロンプトなしで、前の操作インターフェースに直接ジャンプします。

前述のように、Maoyan の予告編には 2 つの再生インターフェースがあります。ここでは、インタラクティブな観点からそれらを分析します。異なるジャンプパスは、異なる再生インターフェースに接続します。

9. 予告編再生ページ

1) 毛艶予告編再生ページ

図 1: 予告編再生ページ (図 1) にジャンプする方法はたくさんあります。ここでは、製品の使用中に学んだ 2 つの状況を主に分析します。ホットスクリーニングインターフェイスから再生ボタンをクリックするか、詳細ページのポスターのボタンをクリックして、予告編再生ページ (図 1) にジャンプできます。

予告編再生ページ (図 1) では、予告編の再生が終了すると、すべてのビデオのリストで次の予告編が自動的に再生されます (図 2)。予告編と公式ビデオの 2 つのタブに含まれるすべての映画ビデオは、すべてのビデオの再生リストに表示されます (図 1)。

図 2: 詳細ページから予告編再生ページ (図 2) に移動できます。予告編は (図 2) の再生ボタンをクリックした後にのみ再生されます。1 つの予告編を再生すると、自動的に一時停止します。次の予告編を視聴する場合は、次の予告編の再生ボタンをクリックする必要があります。

これにより運用コストは増加しますが、ユーザーは自分の希望に応じて視聴したい動画を選択できます。

2) タオ・ピアオ・ピアオ予告編再生ページ

Tao Piaopiao 予告編の再生ページのインターフェースは 1 つだけですが、ジャンプパスの違いに応じてプレイリストには 2 つの状況があります。

最初のケースでは、人気インターフェースの再生ボタンをクリックすると、予告編の再生ページにリダイレクトされ、システムが自動的に予告編を再生します。予告編が終了したら、インターフェースをスライドしないでください。この予告編はループ再生されます。上にスライドすると、人気インターフェースリストの最初の映画の最初の予告編が再生されます。

例えば、一般的なインターフェースで「時の果てにあなたを待っています」の再生ボタンをクリックすると、「時の果てにあなたを待っています」の詳細ページのビデオリストの最初のビデオが再生されます。再生後、インターフェースをスライドしないと自動的にループします。上にスライドすると、「八百」の詳細ページのビデオリストの最初のビデオが再生されます。再生後、上にスライドし続けると、「時の果てにあなたを待っています」をスキップし、「インセプション」の詳細ページのビデオリストの最初の予告編を再生します。

2 番目のケースでは、詳細ページから予告編の再生ページに移動します。インターフェイスをスライドしないと、予告編がループ再生され、上にスライドすると、ビデオリストに従って再生されます。

予告編の再生インターフェースを左にスワイプすると映画の詳細ページにジャンプし、ユーザーは映画の詳細情報を理解して視聴できるようになります。

個人的には、Maoyanのデザインの方が私の期待に合っていると思います。人気のインターフェースで、ポスターの再生ボタンをクリックしました。私が見たかったのは、現在の映画の予告編です。

Tao Piaopiao を使用する場合、一般的なインターフェースから予告編再生ページに入ると、1 つしか視聴できません。この予告編を再生した後、上にスワイプすると、他の映画の予告編が再生されますが、同じ映画の次の予告編が再生されることを期待していました。さらに多くの予告編を視聴したい場合は、詳細ページに入ってもう一度クリックするしかなく、ユーザーの操作コストが増加します。

10. 検索入力ページ

ユーザーが検索入力ページに入ると、キーボードがすぐにポップアップ表示され、入力ボックスにフォーカスが当てられるため、ユーザーはクリックすることなく検索内容を直接入力できます。

11. 検索結果ページ

Maoyan と Tao Piaopiao の検索結果ページのデザインは似ています。

たとえば、どちらもキーワードを強調表示して、ユーザーが必要なものをすばやく見つけられるようにします。また、検索結果ページにチケットを購入したり、見たいものを視聴したりするためのボタンを追加して、ユーザーの操作効率を向上させます。

検索結果の内容が多すぎる場合は、情報の明瞭性と可読性を高めるために、カテゴリ別に表示されます。Maoyanの検索入力ページでは、検索範囲が映画とテレビドラマに限定されているため、検索結果ページでは簡単に区別できるように青いラベルが使用されていることがわかります。

タオピアオ検索結果ページは、映画と情報/ビデオの 2 つの部分に分かれています。映画部分には検索結果の数が表示され、ユーザーは検索コンテンツの量を明確に把握できます。デフォルトでは 3 つの映画のみが表示され、他の映画は折りたたまれています。情報とビデオでは、水平および垂直の十字形のインタラクションを使用して、ユーザーにできるだけ多くのコンテンツを表示します。

4. 機能比較

1. ホットスクリーニングインターフェース

タブバーをクリックすると現在のチャネルが切り替わり、ユーザーに幅広い選択肢が提供され、トラフィックの入り口が増えます。

両者の違いは、人気映画、劇場公開中の映画、公開予定/近日公開の映画に加えて、Tao Piaopiao ではオンラインで映画を視聴する機能も提供していることです。これは、映画館に行きたくないが映画を見たいユーザーを支援し、これらのユーザーのニーズを満たし、これらのユーザーの悩みを解決します。

検索機能はアプリケーション内のさまざまなレベルにあるため、Maoyan の設計では操作バナーにインターフェーススペースが提供されており、トラフィックを引き付ける上で優れた役割を果たします。一方、Taopiaopiao には人気映画のインターフェースにバナースペースがありません。

Tao Piaopiao では検索ボックスの右側に QR コードスキャン機能があり、ユーザーはコードをスキャンしてチケットを確認できます。Maoyan ではホット上映インターフェースにこの機能はありませんが、Maoyan はこの機能を映画チケットインターフェースの下部に配置しています。

2. 映画館選択インターフェース

映画選択インターフェースのデザインにおいて、Maoyan と Tao Piaopiao には多くの類似点があります。

例えば、各劇場モジュールでは、劇場と自分との距離が表示されます。ユーザーはフィルター条件を「距離が近い」に設定し、数字を比較することで行きたい劇場を直接選択することができます。

Tao Piaopiao はナビゲーションバーに位置決め機能も提供しており、ユーザーは自分の位置に基づいて映画館を選択できます。位置決めインターフェイスでは、最も近い映画館がデフォルトで表示され、映画館の位置が拡大表示されます。

映画館を選ぶ 2 つの方法を比較します。

劇場選択インターフェースで直接距離を比較することで、行きたい劇場を決定するのは非常に便利で迅速です。それに比べて、Tao Piaopiao が提供する位置機能に基づいて劇場を選択する方法は少し複雑で、ユーザーの操作コストが増加し、前者ほど直感的ではありません。

3. スクリーンショットを共有する

Maoyan と Taopiaopiao はどちらもスクリーンショットを共有する機能を提供しています。 Maoyan を使用してスクリーンショットを撮影すると、アクティビティビューがポップアップ表示され、ユーザーはそれを共有できます。

Taopiaopiao を使用してスクリーンショットを撮影すると、画面上部にスナックバーが表示され、ショー情報や座席情報を友達と共有できます。スナックバーは画面上部に数秒間表示された後、ユーザーの現在の操作を中断することなく自動的に消えます。ユーザーを煩わせることなくリマインダーとして機能します。

4. 映画の詳細ページ

Maoyan では詳細ページで直接予告編を再生できないため、他のインターフェースに移動する必要があります。

前述のように、ジャンプパスはたくさんありますが、予告編の再生インターフェースは 2 つしかありません。Tao Piaopiao では詳細ページで予告編を直接再生でき、予告編の再生順序はビデオ部分のリストに基づいています。

Tao Piaopiao では、詳細ページに映画の週間興行収入チャートの順位も表示し、ユーザーがチャートを理解しやすくしています。

ユーザーが詳細ページの「観たい」ボタンをクリックすると、Maoyan はボタンの下に予告編リストをポップアップ表示し、ユーザーが予告編を見て映画の内容を知るように誘導します。ユーザーが Tao Piaopiao で「観たい」をクリックすると、ボタンの下にフィードバック情報が表示されるだけでなく、共有機能も提供され、映画を観るユーザー数の増加に役立ちます。

5. 映画チケット詳細ページ

映画チケットの詳細ページでは、Maoyan は共有機能をナビゲーションバーに配置し、注目を集めやすく、ユーザーの操作も便利です。一方、Taopiaopiao の共有機能はセカンドスクリーンに配置されています。Maoyan と比較すると、Taopiaopiao の映画チケットの詳細ページの共有機能のレベルはそれほど高くありません。

Maoyan は、インターフェイスの下部に、チケットの真正性をスキャンして検証する機能を提供しています。これは、以前にも言及されています。Taopiaopiao は、この機能を人気映画インターフェイスのナビゲーションバーに配置しました。

個人的には、この機能を使用する機会は非常に少ないと思います。Taopiaopiao は機能レベルを少し高く設定しており、Maoyan のデザインは比較的優れています。