小さなページングデザイン

小さなページングデザイン
ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao で「シャツ」を検索すると、通常は 100 ページの情報が表示されます (もちろん 100 ページ以上ありますが、通常、ユーザーはそれほど多くの情報を必要としません)。次のように:

タオバオページング

1. 小型ページングのオリジナルデザイン

ページングには、特にパフォーマンスの最適化の観点から多くの理由がありますが、最も重要な理由は、ユーザーが必要なものを見つけられるようにすることです。 Taobao は、多数のページをページネーションする作業をうまく行っています。しかし、小さなページネーションについては、前回デザイナーのグループと小さな配布設計方法を検討したときに、意見が異なりました。まず、この小さなページング (ここでは 5 ページ以下のページング デザインと定義します) の元のデザイン (インタラクティブ ホワイトボード、非視覚的な最終ドラフト) を見てみましょう。

ページネーションデザイン

見覚えがあるでしょう?はい、実際に多くのウェブサイトがこのタイプの表示方法を使用しています。ここでデザイナーは、ユーザーがクリックしやすいように、「前のページ」ボタンと「次のページ」ボタンを一緒に配置することを提案しました。このような:

ページネーションデザイン

うーん、確かに、これはオリジナルよりもずっと良いですね。少なくとも、ユーザーは少ない労力でページをめくることができます。すると、別のデザイナーが現れて、さらに最適化できるかどうか尋ねました。一般的に言えば、「次のページ」を押す頻度が高く、「前のページ」を押す頻度は低いからです。彼がこの時に提案した解決策は次の通りでした。

ページネーションデザイン

もちろん、これも良いことですし、理由も妥当です。そこには、テクノロジーとアートのどちらがより重要なのか、漢字を知っていることと良いエッセイを書けることとの関係など、説明するのが難しいものがあります。実際、問題は、第一に、左向きのインジケータがページを上にめくることを意味するかどうかをユーザーが推測するために「推測」プロセスを実行する必要があること、第二に、デザインの不一致により、人々に心理的な不調和を感じさせることにあります。これは特に中国に当てはまります。中国には「良いものは一対で来る」と信じる文化があり、すべてのものは一対で来るべきだとされています。

2. 私の計画

しかし、個人的には、私は上記の慣行に同意しません。このページは小さく、小さなスペースにすべてをリストできるのに、目的を達成するためのより便利な方法を直接提供するのではなく、ユーザーの選択プロセスを複雑にする必要があるのはなぜでしょうか?私の考えは、ユーザーが操作しやすいように、小さなページにすべてを表示する必要があるということです。次のように:

ページネーションデザイン

この拡張されたページング設計と元のソリューションの比較:

  • 宇宙から

    拡大表示によりピクセルを節約できます。優れたデザイナーの多くは、空白スペースを残すことを検討し、この貴重なスペースを合理的に使用してピクセルを節約する方法も検討します。

  • 実用性から

    3 ページ目を表示していて、突然 1 ページ目に戻りたい場合、元の設計では、「前のページ」を 2 回押す必要がありますか? 5ページあったらどうなりますか?ページ間の切り替えを高速化するにはどうすればよいですか?拡張可能な設計により、このような問題をより適切に解決できます。

3. 結論

もちろん、これは、このような拡張されたページングが優れていることを意味するものではありません。シナリオと組み合わせる必要がある場合もあります。たとえば、Weiboのようにタイムラインに沿って無制限にスクロールできる場所では、ユーザーが「ページング」の概念を完全に無視できるようにすることができます。ユーザーがスクロールダウンする限り、情報の自動読み込みを提供し、ユーザーが参照しやすくします。アプリケーションのシナリオは常に変化していますが、変わらないのは、これを継続するべきだと考えていることです。

1. 蓄積する。時々、常にこのような小さなもつれがありますが、これは、常にコードの最適解を追求しているような、一種の清潔さへの執着とも言えるものです。このような絡み合いはユーザーに大きな影響を与えませんが、プロジェクトでこのような最適化が 10、30、または 100 個あると、Web サイトのエクスペリエンスはユーザーの期待を上回るものになると思います。もちろん、この分野での私の能力も質的に向上するでしょう。だから、貯めていきましょう。

2. デザインを超えて考える。インタラクションに関して、私たちの最終的な目標は、実際にはユーザーにとって使いやすいかどうかです (ユーザーではなく、ユーザーが必要としているのはより高速な車両などの非常に単純なものだけかもしれませんが、フォードの車を提供したらどうなるでしょうか)。そのため、満足のいく結果が得られる可能性が高くなるように、デザイン自体を超えて考える必要があります。

<<:  フォームにファイルをアップロードした後にアクションを保存するよう促す理由と解決策

>>:  Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript

推薦する

WeChatミニプログラムは同時通訳を利用して音声認識を実装します

私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...

RedHat 6.5/CentOS 6.5 に MySQL 5.7.20 をインストールするための詳細なチュートリアル

rpmインストールパッケージをダウンロードするMySQL公式サイト: https://dev.mys...

MySQL トランザクション制御フローと ACID 特性

目次1. ACIDの特性トランザクション制御構文3. トランザクション同時実行例外1. ダーティリー...

CentOS 8 に MySql をインストールしてリモート接続を許可する方法

ダウンロードしてインストールします。まず、システムに MySQL または MariaDB があるかど...

Vueはプルダウンとスクロールでデータを読み込む例を実装しています

目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...

MySQL の DDL と DML についての簡単な説明

目次序文1. DDL 1.1 データベース操作1.2 データテーブルの操作1.3 一般的なデータ型1...

CSS3 天子グリッドリストのスタイルの書き方

多くのプロジェクトでは、中央に灰色の分割線があり、両側に分割線がないグリッド表示の機能を実装する必要...

MySQLは、where in()順序ソートを実装するためにfind_in_set()関数を使用します。

この記事では、MySQL で find_in_set() 関数を使用して where in() の順...

MySQLの保存時間の不一致の問題を解決する

Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...

MysqlチューニングExplainツールの詳細な説明と実践的な演習(推奨)

MySQL チューニング ツールの詳細な説明と実践的な演習の説明 ツールの紹介の説明 分析例の説明...

MySQL実行計画の詳細な説明

EXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情報を提供します...

Dockerコンテナの個別展開のためのLNMPの実装

1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...

WeChatアプレットAmapマルチポイントルート計画プロセス例の詳細な説明

電話Amap API を呼び出す方法は? Amap が https://lbs.amap.com/a...

HTML ページに画像を挿入し、マップ インデックスを追加する方法の例

1. WEBでサポートされている画像形式: GIF: 256色を保存でき、透明色をサポートし、アニメ...

CentOS8 で MySQL 8.0 をインストールしてデプロイする方法

MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...