脱構築：Toutiao のデザインの背後にあるロジック

Toutiaoの出現により、従来のニュース製品 (NetEase、Sina、Sohu News など) が破壊されました。

伝統的なニュースは編集部の推奨に頼ってユーザーにリーチしていましたが、今日頭条はニュースアルゴリズムに依存し、伝統的な手動配信の考え方を捨て去り、配信効率を数万倍に向上させ、急速にトップクラスのニュース情報商品へと成長しました。

ニュース情報フローのリーディング製品として、Toutiao の設計の詳細と設計ロジックは、検討と分析に値します。

この記事では主に、Toutiao の設計とその背後にあるロジックのいくつかについて説明します。この記事の概要は次のとおりです。

1. 情報フローのスタイル

2. 情報フローの分配

3. 検索

4. 短い動画

5. 短い動画

6. 短いコンテンツストリーム

1. 情報フローのスタイル

情報フローとは何ですか?情報フローは、情報フロー=情報+フローの 2 つの部分で構成されます。

情報とは、ニュース、ビデオ、画像などのコンテンツを指し、主にリストやカードの形式で提示されます。

フローとは、無限に閲覧できるウォーターフォールフローを指します。

情報の流れというのは、スライドすることでコンテンツ情報を無限に閲覧できるということになります。

情報フロースタイルの品質は、情報の表示効率とクリックスルー率に直接影響し、ユーザーの情報取得効率と全体的な読書時間に影響します。

次の図は、Toutiao のホームページ上の推奨チャンネルの情報の流れを示しています。

情報の流れのスタイルを単純に分類すると、プレーンテキスト、左にテキスト、右に画像、短いコンテンツ、大きな画像と動画の 4 つが最もよく使用されるスタイルです。次の図に示すように:

ニュースに写真がない場合、プレーンテキストスタイルが使用されます。記事に写真がない場合、このスタイルが使用されます。リストには、タイトル、ソース、コメント数、リリース時間が含まれます。

画像がある場合は、左側にテキスト、右側に画像が使用されます。現在、画像を含むニュースリストのスタイルには、一般的に、左側にテキスト、右側に画像、左側に画像、右側にテキスト、および 3 枚の画像の 3 種類があります。

左の画像と右のテキストのスタイルにより、画像が強調され、タイトルが弱くなります。ニュース情報の場合、写真ではニュース情報の内容を正確に表現できないため、現状ではこのスタイルを採用している製品はほとんどありません。

現在、市場に出回っているほとんどの製品は、Toutiao、NetEase News、Tencent News、Sina Newsなど、左側にテキスト、右側に画像を使用しています。 Sohu News のみが左の写真と右のテキストを使用しています。

3 つの画像は、ユーザーを惹きつけ、画像をクリックして閲覧するように誘導し、画像をクリックするように誘導します。クリック率を高めることができるという利点がありますが、全体的な情報の流れが乱雑に見え、ユーザーの読みやすさに影響します。

NetEaseと比較すると、Toutiaoの情報フローは読みやすく、視覚的な圧迫感も少ない。これは、Toutiaoの情報フローに占める3図スタイルの割合が小さいことに由来している。下図に示すように、NetEase Newsの情報フローに3図スタイルを挿入すると、情報フロー全体が雑然としてしまう。

次の図に示すように、NetEase News と Toutiao の情報フローのスタイルを比較します。

純粋なテキストの場合、Toutiao のタイトルの色は暗く、NetEase のタイトルの色は比較的明るくなります。 Toutiaoのリストの高さはNetEaseよりも高く、画面上に表示されるToutiaoの項目の数はNetEase Newsよりも少ないですが、全体的な空間感と余白はより快適です。同時に、Toutiao にはリリース時間も含まれているため、ユーザーはニュース情報を閲覧する際にニュースのリアルタイム性を認識できます。

左に文字、右に画像を配置したToutiaoのリストはNetEaseのリストよりも高くなっています。比較すると、Toutiaoのタイトルはより明確で、画像の角の半径は丸みを帯びており、Toutiaoの全体的な外観がより快適になっています。

大きな画像や動画の場合、両者の間に大きな違いはありません。唯一の違いは、タイトルのテキストの色、カバーの角の半径、リリース時間です。

要約:

見出しフローの全体的な空間感、余白、タイトルカラーのコントラストは比較的良好です。

NetEaseと比較すると、空白が多く、同じ画面スペースでは表示されるコンテンツ情報が少なくなり、画面表示効率が低下します。ただし、ユーザーは読書プロセス中に快適になり、同じ状況下では読書時間が長くなります。

2. 情報フローの分配

情報フロー配信とは何ですか?特定の設計戦略を通じて、ユーザーのトラフィックを他の場所に合理的に分散し、製品の設計目標を達成し、トラフィックの利用率を最大化することができます。トラフィックを改善してコンバージョンを最大化し、より大きな商業価値を獲得します。

Toutiaoの情報フローは、主にトップモジュール、情報リスト、広告モジュール、ショートコンテンツ、その他の機能モジュールのカードエントリの5つのモジュールで構成されています。次の図に示すように:

推奨ストリームの上部に固定できるコンテンツは 2 つまでです。これは関連するポリシー上の理由によるものです。

最初の通常の情報フローの後、プラットフォームの商業収益を生み出すために広告が挿入されます。その後は、ユーザーの閲覧習慣に基づいて情報コンテンツが推奨され、随時広告が挿入されるようになります。

今日頭条には編集部門がないので、ほぼすべてのニュースは機械のアルゴリズムから生まれます。 Toutiao は編集者の手動操作なしで、ユーザーの読書習慣に基づいてさまざまなコンテンツを推奨するための膨大なコンテンツを持っています。

3. 検索バー

ニュース情報フロー製品では、検索バーには主に 2 つの使用シナリオがあります。 1つは、キーワードで現在のニュースや過去のニュースを検索できるニュース検索機能を提供することです。

もう 1 つは、ユーザーが読めるように検索モジュールでホットなニュースを提供することです。

では、検索バーのクリック数を増やすにはどうすればよいでしょうか。 Toutiao は、ユーザーを引き付けるために、検索バーのスクロール内にプロンプトの形でホットなニュースを表示します。同時に、ニュース項目を最大限に表示するために、2 列デザインを採用し、クリック率を最大限に高めています。

ユーザーが検索ボックスをクリックすると、最初のホット検索キーワードが検索ボックスに組み込まれます。ユーザーはキーボードの検索機能を使用して検索できます。検索バーの下にある2つの注目ニュースをクリックして検索・閲覧することもできます。

4. 短い動画

ビデオタイトルはプレーヤーに組み込まれています。これの利点は、カードの高さを減らしてビデオの露出を増やすことができることです。欠点は、ユーザーがビデオタイトルの紹介を見たい場合、タイトルを再度表示するためにプレーヤーをクリックする必要があることです。

タイトルをプレーヤーの内側に配置すると、2.5 個の見出しを表示できますが、次の図に示すように、タイトルを外側に配置すると、Haokan Video では 2 個の見出ししか表示できません。

広告事業にとって、収益の重要な指標は広告露出です。広告収入を増やすには、動画の高さを下げて広告露出効率を高め、収益を増やす必要があります。そのため、Toutiaoがタイトルをプレーヤーに配置することは、商業的な目標は満たしますが、ユーザーの目標は満たしません。

5. ショートビデオ

ショート動画のレイアウトデザインは、大きく分けて2種類あります。1つは、アバターや操作項目を右側に配置するTik Tok風レイアウトです。これの利点は、ビデオとのインタラクションの量が明確に表示され、ユーザーのインタラクションを誘導できることです。しかし、ビデオの内容に一定の閉塞効果をもたらします。

もう1つは、見栄えの良いビデオスタイルのレイアウトで、アバターのニックネームと操作項目を下部に配置して、ビデオのインタラクティブデータを弱めます。ユーザーがビデオコンテンツに集中できるようにします。

Toutiaoのショート動画はTikTokと同じレイアウトを採用しています。右側にはアバターや操作アイテムを配置します。ただし、ユーザーがコメントを投稿できるように誘導するために、インターフェースの下部に入力ボックスが追加され、ユーザーがコメントを投稿できるように誘導し、ユーザーがコメントをより簡単に読めるようにしています。上にスワイプするジェスチャはコメントのプルアップになります。