web-dev-qa-db-ja.com

リストをスクロールできないようにするにはどうすればよいですか?

サイトには、サイトの各「部屋」のチャットログのプレビューがあり、訪問者は部屋に入らなくても見ることができます。リストには継続的に新しいメッセージが表示されます。しかし、リストはスクロールできません。部屋に入って入室する必要があるため、外部からの会話全体に参加することはできません。ここでの問題は、チャットプレビューを含む領域が非常にスクロール可能に見えることです。

enter image description here

あなたができる基本的なことをいくつか知っています。メッセージを上枠の外に流さない(代わりに削除する)か、「Enter to the full chat」の行に沿って何かを説明するテキストを追加するようなものです。しかし、これがスニペットであることを伝えるためにここで使用するニースのパターンを知っているかどうかを知りたいと思います。あなたが見るものは、部屋に入るまでに得られるものです。

36
AndroidHustle

スクロールできるように見えるので、実際にスクロール可能にするにします。ただし、いくつかのメッセージについてのみ、そのメッセージが表示されたら、それが可能な範囲であることを示し、「Enter to the fullチャットのメッセージ。

そうすることで、あなたは彼らにもう少し相互作用して関わらせ、少しお誘いを見たので、メッセージを表示すると、彼らが興味を持っており、適切なタイミングでメッセージを表示していることがわかります。

87
Roger Attrill

別の提案-スクロール可能にする代わりに、後続の各メッセージを透明にフェードして、テキストがグラデーションを作成するようにします。最新のメッセージは100%の不透明度(通常のテキスト)であり、遠くに戻るメッセージは次第に消えていきます。このようにして、フィードを更新し続ける一方で、アクセスできないアーカイブがあることをユーザーに視覚的に通知することができます(それらを表示するためにスクロールする必要はありません)。

21
lunchmeat317

フレームからシャドウを削除するか、フレーム全体を削除して、ボックスの他の部分と同じ背景色にします。次に、タイトルとチャットの間にセパレータを追加します。これにより、リストは静的テキストと同じレベルになります。このようなもの:

絵は完璧ではなく、ラフなドラフトをすぐに作成しました。

14
Gumbo

私が考えることができる1つのアプローチはこのようなものです

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

このようにして、ログから一定数のメッセージを制限された数だけ表示でき、コンテンツがスクロール可能であるという印象を与えるテキストのにじみがありませんでした。

ロードされている新しいメッセージの視覚的インジケーターは、ユーザーが新しいメッセージが常にロードされていること、およびログが更新されていることをユーザーに知らせないようにします。下にスクロールしてみてください。

また、下部のスペースは読み込みメッセージ用に制限されているため、ログメッセージスペース全体がエッジからエッジへではなく、閉じたシステムの印象を与えます

編集:コメントからカイルズの提案を追加、最後のメッセージの表示に文字制限を設けることをお勧めします(残りのコンテンツは省略記号で示すことができます)オーバーローせず、ロードセクション用に指定された領域と重ならないようにします。

3
Mervin

簡単なアイデア:ログを挿入しないでください。他の明らかに静的なテキストと同じレベルに配置します。

別のアイデア(ただし、imoは劣ります):ハンドルのないスクロールバーを表示します。これは、文字通りすべてを表示する必要があることも意味します。あなたが提案したように:カットオフテキストはありません。完全なテキストのみを表示するため、ユーザーは、何かを明らかにする必要があるとは考えていません。ハンドルのない見慣れたスクロールバーを表示すると、この感覚が強調されます。

3
tenfour