コンテンツへスキップ
MacTokyo.
EN

iFan Entertainment — 2022

iFan Entertainment

リアルタイムAIボイスチャットアプリ

役割
Product Designer
クライアント
iFan Entertainment
年
2022
サービス
Product Design, UI/UX, Mobile
iFan Entertainment

「iFan Entertainment」プロジェクトは、音声合成技術(TTS、ARS、NLU)を使って、セレブのアバターとのリアルタイム音声チャットを可能にしてる。私たちの作業は、UIデザインのイテレーションと視覚システムの構築に焦点を当てていて、ユーザーのコンバージョンを向上させてるんだ。​​​​​​​

・Support the design and optimization of the main interface and navigation structure to ensure a user-friendly and seamless experience.

・Help create and maintain visual design guidelines, ensuring consistency in brand presentation across different product versions.

・Assist in designing and refining icons based on product needs to improve user recognition and align with the product’s entertainment focus.

・Coordinate with product managers and developers to ensure that design solutions are implemented smoothly and align with technical requirements.

ロジェクト所属:Baidu, Inc.

役割説明:

・主要なインターフェースとナビゲーション構造のデザインと最適化をサポートし、ユーザーフレンドリーでシームレスな体験を確保する。

・視覚デザインガイドラインを作成および維持し、異なる製品バージョンでのブランドプレゼンテーションの一貫性を確保する。

・製品のニーズに基づいてアイコンのデザインと改良を支援し、ユーザーの認識を向上させ、製品のエンターテイメントの焦点に合わせる。

・製品マネージャーや開発者と調整し、デザインソリューションがスムーズに実装され、技術要件に合致するようにする。

ホーム画面イテレーション

Version 1.2 features a simple yellow background with a clean layout centered around a celebrity’s image (王一博), designed for quick selection and iteration. The right side presents version 1.5, which introduces a more complex, colorful interface with distinct topics, recommendations, and entertainment sections.

バージョン1.2はシンプルな黄色の背景と、セレブの画像(王一博)を中心にしたクリーンなレイアウトが特徴で、迅速な選択とイテレーション​​​​​​​が可能なデザインになっている。一方、右側のバージョン1.5は、より複雑でカラフルなインターフェースを導入し、明確なトピック、推奨、およびエンターテイメントセクションを提供している。

APP V2.0のホームページでは、新しいタブラベルとテーマセクションが導入され、ユーザーがセレブのニュースをより簡単に閲覧できるようになり、コンテンツの可視性が向上している。タブバーは、現在の選択を示すために「テーマ」セクションを丸いドットインジケーターで強調している。また、フォントサイズが18ptから24ptに増やされ、読みやすさと視覚的な明瞭さが向上し、全体的なユーザー体験が改善されている。

アプリのバージョン2.0のバナーデザインガイドラインは、一貫性と効果を確保するためにサイズ、コンテンツ、レイアウトの標準化に焦点を当てている。バナーのサイズは430x130(750x1334の標準)で、セレブの上半身ショットを中心にした主要なテーマやイベントを特徴としている。カラースキームはアプリの若々しく活気のあるデザインに合わせるべきだ。ガイドラインは6:4の画像対テキスト比を強調し、重要な情報を左側に配置してユーザーの読み習慣に合わせ、重要なイベントの際に視覚的に魅力を引きつけることを目的としている。これにより、商業プロモーションやセレブ関連コンテンツのための統一された基準が確立される。

前のアイコンは特徴がなく、エンターテイメント性に欠けていて、ユーザーが認識するのが難しかった。バージョン2.0のアップデートでは、3つのデザインの イテレーション が検討され、3番目のバージョンが選ばれた。新しいアイコンはより遊び心があり、認識しやすくなって、ユーザー体験が向上し、アプリのブランディングをより反映している。3番目のバージョンはバランスの取れたレイアウトと魅力的な色合いを特徴としており、ユーザーにとって機能がより明確になっている。

更新版では、ブロック間の隙間を減らし、コンテンツ密度を高めることで、より統一感のある魅力的な体験を提供するためにレイアウトが改善された。プロダクトチームは、ブロックの整列に取り組み、トピックを視覚的に魅力的でアクセスしやすくした。「ホットトピックエンゲージメントフロー」は、ディスカッションがどのようにユーザーを引き付け、可視性を高め、論争を生むかを示しており、ユニークなユーザー生成コンテンツ(UGC)を育て、参加を強化し、全体的なエンゲージメントを高め、最終的にユーザーの忠誠心を高める。リデザインは、アプリをよりインタラクティブで魅力的にすることを目指している。

The updated version aims to attract new users by offering free listening products with various celebrities. It encourages interaction through “listen” buttons, enhancing engagement with the content. Design changes were made to the title order and subject lines for clarity and trust, renaming it to “每日播报站” (Daily Broadcast Station) to reduce distrust related to “AI.” Other improvements include clearer call-to-action buttons, better text alignment, and subtle visual guidance to enhance the listening experience. These updates aim to increase clicks on featured items and provide a more trustworthy and visually appealing interface.

更新されたバージョンは、さまざまなセレブとの無料リスニング商品を提供することで新しいユーザーを引き付けることを目的としている。「リスン」ボタンを通じてインタラクションを促し、コンテンツへのエンゲージメントを高める。デザインの変更では、タイトルの順序や件名を調整して明確さと信頼を提供し、「AI」の強調を減らすためにタイトルを「每日播报站」(デイリーブロードキャストステーション)に変更した。他の改善点には、より明確なコールトゥアクションボタン、テキストの整列、リスニング体験を向上させるための微妙な視覚的ガイダンスが含まれている。これらの更新は、特集アイテムのクリック数を増やし、より信頼性が高く視覚的に魅力的なインターフェースを提供することを目指している。

新しいバージョンは、アプリのテーマに合わせた鮮やかな青、緑、オレンジの色を取り入れることで視覚的な読みやすさを向上させている。更新されたカードレイアウトは、コンテンツの明確な分離と独自のスタイルを提供し、現代的なトレンドに合わせている。各カードはより明確に分割され、視覚的な階層が向上し、チャットルーム内でのナビゲーションが容易になっている。また、デザインはグラデーションのカラースキームと柔らかい影を使用して、より現代的で魅力的なインターフェースを実現している。

チャットページイテレーション

旧バージョンでは、ユーザーはホームページからチャットにアクセスし、より多くの機能を得るためにメンバーシップサービスを試すよう促され、基本的なテキストや音声認識サポートが提供されていた。新バージョンでは、明るいアイコンで視覚的な魅力が向上し、バーチャルギフトやセレブとのランダムチャットなどの魅力的な機能が追加されている。また、メディア共有(セレブの写真や感情を表現するステッカーセット)を取り入れることで、チャット体験が個別化され、ユーザーが感情を視覚的に表現できるようになった。これらの更新により、チャットがよりインタラクティブで楽しいものになっている。

ファンコミュニティの改善

各セレブには、アプリ内に専用のファングループがあり、忠実なファンを集めるために整理されたシステムで構成されている。ユーザー生成コンテンツ(UGC)活動とイベントを統合し、ファンが好きなセレブに関するタスク、チェックイン、ディスカッションに参加できるようになっている。これにより、トレンドの話題や深いインタラクションが生まれ、製品への忠誠心が強化される。このプラットフォームは、興味や参加を通じてモチベーションを重視し、継続的なUGCの創出を維持してユーザーの定着を向上させ、最終的には製品の価値を高めることを目指している。

このページでは、セレブ活動コンポーネントのスタイルとガイドラインを説明していて、ラベルのスタイルやサイズ、セレブの役割や好みに基づいたカラーペアリングが含まれてる。フォントサイズは異なっていて(例:24pt)、画像サイズは標準化されてる:長方形の画像は88ptと56pt、円形の画像は56ptと32ptだ。「フォロー」や「いいね」といったユーザーインタラクション機能は、均一なサイズとスタイルを持っていて、一貫したインターフェースを保つために設計されてる。

バージョン2.0では、重要な更新を行い、影を取り除き、ヘッダーカードのサイズを縮小して横スクロールを速くしたよ。ユーザーエンゲージメントが低かった前のバージョンを改善するために、アイデンティティサークルタグを追加した。さらに、「いいね」ボタンなどのアイコンスタイルを一貫させるためにデザインを調整した。画像アップロードのレイアウトも改善され、ユーザーが1〜9枚の画像をアップロードできるようになり、よりダイナミックで整理されたコンテンツ表示が可能になったんだ。

助力榜の視覚改善

サポートランキングシステムの変更では、より没入感のある魅力的なビジュアル環境を作るために色のコントラストを強化して、ユーザーがランキングを簡単に追跡できるようにフローの明確さを改善したり、鮮やかな色と直感的なナビゲーションでユーザーの成果を強調して誇りと達成感を高めてるんだ。

タスクセンターの視覚改善

タスクセンターモジュールは、バージョン1.0から1.5にかけて大きな変更があって、視覚的な魅力とユーザーエンゲージメントを向上させるために色の配色が洗練された。ユーザーリサーチによると、ほとんどのユーザーは8:00〜12:00の時間帯に製品を使ってるから、昼と夜のモードが作られた。昼間のモードは青い背景で、青とオレンジの補色を使っていて、オレンジ色でコントラストを強化してる。新しいインターフェースはカードのスペースの利用効率も改善されて、タスクセンターの雰囲気を強調する視覚的な違いを生み出してる。

タスクセンターのフロー最適化

タスクセンターページのバージョン2.0では、タスクを完了するためのステップを減らすことに焦点を当てて、ユーザーの操作を最小限にし、効率を向上させたよ。ユーザーは、不要な遷移なしに現在のページから直接インタラクションできるようになった。例えば、毎日のサインインは、インターフェース内でシームレスに完了し、ポップアップ確認やよりシンプルなタスクセンターが同じページに表示されるようになってる。この変更で、インタラクションが簡単になり、全体的なユーザー体験が向上するんだ。