ウォーターフォールフローのウェブサイトの素敵な細部について話しましょう

デザイナーはウォーターフォール レイアウトに精通している必要があります。2011 年以降 Pinterest が人気を博し、ウォーターフォール レイアウトはますます多くの Web サイトで採用されるようになりました。中国では、華班、兩堂、武頭、発見、美麗碼、莫口街、人人光街、Vanclなど、Pinterestを模倣したウェブサイトが多数出現しており、その数は数十に上ると推定されている。

なぜウォーターフォールを選ぶのですか?

Pinterest スタイルのスウォーミングが登場したので、まずは体験の観点から見てみましょう。ウォーターフォール フロー レイアウトがなぜ良いのでしょうか。

これは単なる私の個人的な意見です。画像閲覧時代のファストフード消費の到来により、ウォーターフォールフローは画像の表示において効率的で魅力的です。ユーザーが一目見るだけのクイックリーディングモードでは、短時間でより多くの情報を取得でき、ウォーターフォールフローの遅延読み込みモードでは、ユーザーがマウスをクリックしてページをめくる操作を回避できます。このように、ブラウジング時にマウスをスクロールすると、最小限の操作コストで最大限のコンテンツ体験が得られます。中断されることなく没頭しやすくなるのではないでしょうか。通りを歩いていると、目を見張るような品々の並び方に魅了されるような気がしたことはありませんか?

さらに、ウォーターフォールフローの主な特徴は、交互に配置されたレイアウトです。幅は固定されていますが高さは固定されていない設計により、従来のマトリックス画像レイアウトモードとは異なります。視覚的な階層と任意の視線の流れを巧みに利用して、視覚的な疲労を軽減します。

ピンタレスト

Pinterest は 2011 年に設立されました。現在、毎月 1,100 万人を超えるユニークビジターがおり、各ユーザーは平均して 98 分間サイトに滞在しています。これは、多くのソーシャル プラットフォームの中で Tumblr と Facebook に次ぐものです。ウォーターフォール フロー レイアウトの創始者として、Pinterest は必然的にウォーターフォール フロー デザインの方向性をリードすることになります。

1. 天井ナビゲーション

天井に取り付けられたナビゲーションを使用する理由は何ですか? ウォーターフォール フロー モードでは、ユーザーは 10 行を一目で閲覧できます。カテゴリにすばやく切り替える場合は、先頭に戻ってカテゴリを選択する必要があります。天井に取り付けられたナビゲーションを使用すると、ユーザーはカテゴリを簡単に切り替えることができます。設計のポイントは、天井に取り付けられたナビゲーションの幅が広すぎないことと、色が目立ちすぎないことです。ユーザーが必要とするときに静かにそこにあることを確認するだけで十分です。

2. コメントのアンカー位置

Pinterest はもともと、ユーザーにコメントの入力を促すために、デフォルトですべてのコメント ボックスを表示するように設計されていました。最新の改訂版では、Pinterest のコメント ボックスのデザインが変更されました。画像と既存のコメントが短い場合、コメント ボックスはデフォルトで折りたたまれます。コメント操作ボタンをクリックすると、アンカー ポイントがコメント ボックスに配置され、カーソルが点滅し、ユーザーにテキストの入力を促します。画像と既存のコメントが長い場合 (1 画面の高さに近いかそれより大きい場合)、コメント ボックスがデフォルトで開きます。これは、ユーザーがコメント ボタンを使用してコメント ボックスを開く場合、長い距離をスクロールバックする必要があり、コストがかかりすぎるためです。

3. クリックするだけで大​​きな画像が簡単に表示できるデザイン

空白の領域をクリックして折りたたみ、大きな画像をもう一度クリックすると、画像の元の Web サイトにジャンプします。簡単でカジュアルな読書に非常に適しており、特にユーザーがここでの設計ロジックに適応すると、詳細を表示するニーズを満たしながら没入型のブラウジングを簡単に生成できます。

4. プレースホルダの読み込みにより視覚的な体験がスムーズになります

ユーザーがマウス ホイールをスクロールしてブラウズする場合、ネットワーク速度が必ずしも満足できるものではないため、読み込みプロセス中に画面が過度にジャンプするのを防ぐために、プレースホルダー読み込み (画像の高さのグレースケール画像を事前に読み込む) が使用されます。

ユーザーの視覚体験をよりスムーズにし、視覚的な遷移をよりスムーズにし、ユーザーのブラウジング動作をできるだけ妨げないようにすることができます。

5. Pin itツールの便利さ

Pinterest モデルが主導するウォーターフォール フローの Web サイト向けのもう 1 つの強力なツールは、Pin it ツールです。ユーザーは、さまざまな Web サイトを閲覧する際に、まず Pin it を使用して自分用のコンテンツを収集し、次に Web サイトのコンテンツを作成します。さらに、Pinterest はユーザーのためのオンライン画像コレクションとしても使用できます。ユーザーが好むコンテンツがここにあれば、トラフィックを心配する必要はありません。

華班

Huaban.com は、初期の「Pinterest のような」ウェブサイトの 1 つで、興味に基づいたソーシャル共有ウェブサイトとして位置付けられています。このウェブサイトは、ユーザーがお気に入りの写真を再編成して収集するのに役立つシンプルなコレクション ツールをユーザーに提供しています。 Petal はデザインとエクスペリエンスの面で Pinterest と非常に似ていますが、独自の配慮された詳細もいくつかあります。

1. アイコンとタイトルの組み合わせにより、ナビゲーションが簡単になります。

title 属性は、要素に関する追加情報を指定します。この情報は通常、マウスを要素の上に移動したときにツールチップ テキストとして表示されます。 つまり、マウスをホバーすると、タイトルプロンプトがユーザーに詳細情報を提供できます。

コンテンツ主導型のウェブサイトであるため、ほとんどのフレームワークは軽量なデザインを採用しており、Petals のナビゲーションも非常に簡素化されており、アイコンを使用できる場所ではテキストは使用されていません。したがって、アイコン + タイトルはスペースを最大限に節約し、構造を減らし、ユーザーを混乱させません。

2. タイムリーな特別ページデザイン - Petal Weekly

ユーザーに最新かつ最もホットなコンテンツを提供するにはどうすればよいでしょうか? Petal Weekly はその方法の 1 つです。最も人気のあるコンテンツをシンプルなページに集約することも、ユーザーが自分の興味を見つけやすくする方法の 1 つです。

3. 右のページの方が大きい

ホームページでは、特定の写真の詳細を表示するときに、Pinterest とは異なり、Petals はランディング ページの形式をとります。右側の左右のページめくりにより、ユーザーはアートボードの下の他のコンテンツを表示でき、右矢印は大きく、クリック領域が広く表示されます。差別化により、ユーザーは無意識のうちに右矢印をクリックしてページを右にめくる選択をするように促され、アートボード上に長く留まることができるようになります。

グアン

Guang.com は 2012 年初頭に設立されました。この Web サイトは、ユーザーが自分の好みを見つけ、より適切な消費を推奨するのを支援することに重点を置いています。 Pin it のような典型的なコレクションツールはありませんが、ウォーターフォールフローも主要な表示モードの 1 つです。

1. 数字の魅力

全体的なデザイン感覚からすると、Guang は大きなショッピングモールのように幅広い商品を揃えた活気のあるウェブサイトであり、その中にある正確な数字がさらに雰囲気を高めています。 「あなたにおすすめなアイテム 6,600 件」、「おすすめアイテム 2,876 件」など、正確な数字は、ここにはたくさんのコンテンツがあり、訪れることでさらに多くのコンテンツを得ることができることをユーザーに明確に認識させます。

2. スキューモーフィックデザインが興味をそそる

テーマストリートのゆっくりとしたスクロールと、道路感を与える間隔のラインが相まって、歩いているような、散策しているような感覚を味わえます。

ロケットのようにトップに戻るのは、一瞬の「シュッ」という感じでしょうか?

ウェブデザインで興味深い要素を適切に使用すると、ウェブサイトの楽しさが増し、ユーザーに愛情のこもったデザインと愛情のこもったウェブサイトだと感じさせることができます。

3. 機能的で操作が簡単です。

ウォーターフォールフローでは、Guangli の操作は「いいね！」のみです。 Like は、収集、集合、整理の機能を持ちます。操作が簡単なので、ユーザーにとってもコンテンツの管理が便利になります。操作が簡単であればあるほど、ユーザーの学習コストは低くなり、提供されるコンテンツも増えます。

まとめ：

諺にあるように、成功と失敗は細部によって決まります。ユーザー エクスペリエンスが最優先の時代において、ユーザーに好印象を与え、ユーザーを維持するために、ちょっとした心温まる細部を取り入れることで、ユーザーが無意識のうちに Web サイトに長く滞在し、より快適に使用できるようになります。

もちろん、あらゆる詳細の作成は、シーン、ユーザー グループ、設計目的という 3 つの側面に依存します。原点に立ち返ると、設計は最終的に製品要件の実現に役立ち、製品のライフサイクル全体を通じて、要件は常に最適化され、変更されます。ウェブサイトは、ユーザーベースの変化やデータの反映に応じて、常に細部を修正しています。インターネット製品のユーザー エクスペリエンス デザインの経験の蓄積には、終わりのない経験、継続的な実験、探求が必要です。この種の更新と反復は、このタイプの分析記事の範囲を超えています。この小さな草稿を公開することで、自分の醜さを誇示したいだけです。批判はご自​​由にどうぞ!

元のタイトル: 滝の流れのウェブサイトの素敵な小さな詳細について話す

キーワード: ウォーターフォール、ストリーミング、ウェブサイト、それら、素敵な、細かい部分、レイアウト、ウェブマスター、ウェブサイトのプロモーション、収益化