ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao で「シャツ」を検索すると、通常は 100 ページの情報が表示されます (もちろん 100 ページ以上ありますが、通常、ユーザーはそれほど多くの情報を必要としません)。次のように:1. 小型ページングのオリジナルデザインページングには、特にパフォーマンスの最適化の観点から多くの理由がありますが、最も重要な理由は、ユーザーが必要なものを見つけられるようにすることです。 Taobao は、多数のページをページネーションする作業をうまく行っています。しかし、小さなページネーションについては、前回デザイナーのグループと小さな配布設計方法を検討したときに、意見が異なりました。まず、この小さなページング (ここでは 5 ページ以下のページング デザインと定義します) の元のデザイン (インタラクティブ ホワイトボード、非視覚的な最終ドラフト) を見てみましょう。 見覚えがあるでしょう?はい、実際に多くのウェブサイトがこのタイプの表示方法を使用しています。ここでデザイナーは、ユーザーがクリックしやすいように、「前のページ」ボタンと「次のページ」ボタンを一緒に配置することを提案しました。このような: うーん、確かに、これはオリジナルよりもずっと良いですね。少なくとも、ユーザーは少ない労力でページをめくることができます。すると、別のデザイナーが現れて、さらに最適化できるかどうか尋ねました。一般的に言えば、「次のページ」を押す頻度が高く、「前のページ」を押す頻度は低いからです。彼がこの時に提案した解決策は次の通りでした。 もちろん、これも良いことですし、理由も妥当です。そこには、テクノロジーとアートのどちらがより重要なのか、漢字を知っていることと良いエッセイを書けることとの関係など、説明するのが難しいものがあります。実際、問題は、第一に、左向きのインジケータがページを上にめくることを意味するかどうかをユーザーが推測するために「推測」プロセスを実行する必要があること、第二に、デザインの不一致により、人々に心理的な不調和を感じさせることにあります。これは特に中国に当てはまります。中国には「良いものは一対で来る」と信じる文化があり、すべてのものは一対で来るべきだとされています。 2. 私の計画しかし、個人的には、私は上記の慣行に同意しません。このページは小さく、小さなスペースにすべてをリストできるのに、目的を達成するためのより便利な方法を直接提供するのではなく、ユーザーの選択プロセスを複雑にする必要があるのはなぜでしょうか?私の考えは、ユーザーが操作しやすいように、小さなページにすべてを表示する必要があるということです。次のように: この拡張されたページング設計と元のソリューションの比較:
3. 結論もちろん、これは、このような拡張されたページングが優れていることを意味するものではありません。シナリオと組み合わせる必要がある場合もあります。たとえば、Weiboのようにタイムラインに沿って無制限にスクロールできる場所では、ユーザーが「ページング」の概念を完全に無視できるようにすることができます。ユーザーがスクロールダウンする限り、情報の自動読み込みを提供し、ユーザーが参照しやすくします。アプリケーションのシナリオは常に変化していますが、変わらないのは、これを継続するべきだと考えていることです。 1. 蓄積する。時々、常にこのような小さなもつれがありますが、これは、常にコードの最適解を追求しているような、一種の清潔さへの執着とも言えるものです。このような絡み合いはユーザーに大きな影響を与えませんが、プロジェクトでこのような最適化が 10、30、または 100 個あると、Web サイトのエクスペリエンスはユーザーの期待を上回るものになると思います。もちろん、この分野での私の能力も質的に向上するでしょう。だから、貯めていきましょう。 2. デザインを超えて考える。インタラクションに関して、私たちの最終的な目標は、実際にはユーザーにとって使いやすいかどうかです (ユーザーではなく、ユーザーが必要としているのはより高速な車両などの非常に単純なものだけかもしれませんが、フォードの車を提供したらどうなるでしょうか)。そのため、満足のいく結果が得られる可能性が高くなるように、デザイン自体を超えて考える必要があります。 |
<<: フォームにファイルをアップロードした後にアクションを保存するよう促す理由と解決策
>>: Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript
sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...
目次基本的な指示1. 現在のマシンのコンテナステータスを確認する2. イメージをダウンロードまたは取...
開発中にサーバーを起動する必要がある場合、ローカルテストではポートを直接書き込み、実際の環境ではバイ...
絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...
以下のように表示されます。 test コマンドはファイルが存在するかどうかを判断します。 ssh u...
この記事では、マーキーのシンプルな効果を実現するためのVueの具体的なコードを参考までに共有します。...
純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持...
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
目次概要1. 簡単な例1.サブコンポーネントの<ng-content>ディレクティブを使...
セキュアターミナルMobaXterm_Personalをダウンロードまず、安全なターミナルをダウンロ...
1. Docker とは何ですか? (1)DockerはLinuxコンテナ内でアプリケーションを実行...
目次1 テスト環境1.1 サーバーハードウェア1.1.1 t2.マイクロ1.1.2 c5.large...
1. MySQLのトランザクションの概念MySQL トランザクションは主に、操作量が多く複雑度の高い...
日々の開発経験と関連するオンライン情報に基づいて、アダプティブとレスポンシブの違いをシンプルでわかり...
企業では、データベースの高可用性は常に最優先事項です。多くの中小企業は、MySQL マスター スレー...