新しいヘッダードロップダウン/通知メニューのスタイル

これはマージされました → UX: Notification panel update by jordanvidrine · Pull Request #33795 · discourse/discourse · GitHub


更新:

これは現在、すべてのユーザーがメタで有効になっています。

まとめ

ヘッダーのドロップダウンメニューと通知アイテムのスタイルの新しい外観とスタイルの実験。

ヘッダーのドロップダウンから「アクティブ」な境界線のスタイルを削除します。この境界線は、テーマを作成する際のスタイリングを複雑にします。

通知メニューにスペースを追加し、「アクティブ」なアイコンのスタイルを変更します。

スクリーンショット

「いいね!」 16

クールですね、この実験はエキサイティングです!ここの新しい見た目、気に入りました、ジョーダン :smiley:

最初のフィードバックですが、スペーシングが少しタイトに感じます。もう少しスペーシングを試すことはできますか?おそらく、kbdkbdkbd✓ Dismisskbd ボタンのパディングがかなり大きいからだと思います。同じパディング(0.75rem?)で揃えると良いと思います。

こんな感じでしょうか?

「いいね!」 9

トピックのタイトルが懐かしいです。ユーザー名が短いユーザーからの「いいね」が1つか2つある場合は十分な情報があります。しかし、タイトルが1語か2語では私には十分ではありません。

「いいね!」 10

お二人とも、フィードバックありがとうございます :+1: :+1: 修正する前に、もう少しフィードバックが集まるのを待ちますが、必ずリストに追加しますのでご安心ください。

「いいね!」 7

いくつかの第一印象:

DefaultとHorizonについて:

  • Keeganと同様に、間隔が少し狭く感じます。
  • アイテム間のネガティブスペースにシェーディングがないため、すべてが混ざり合っていたときに比べて、忙しく感じます。

Horizon固有:

  • Horizonでは、アイテムの背景に色が付いていますが、あるべきでしょうか?(Defaultでは、現在はグレーです)。
  • Horizonでは、左上の角の丸みが不自然に見えます…コンテナの方がアイテムよりもシャープに見えます。Defaultでは、それらがより一致しているように感じます。
「いいね!」 5

古い通知(既に対応済みの可能性あり)のためにスペースを増やすことと、新しい通知(まだ対応が必要)のコンテキストを失うことのトレードオフは、予想外のものでした。

@moinが上で述べたことと同じことで@keeganが指摘したように、より高密度なデザインは、サイドバーのようなコンポーネントで目指してきた低密度化とは矛盾しています。

「いいね!」 6

これは、Horizon によって設定されたより大きな境界半径と、この半径を「large」として設定したコアによるものです。その後、コア内のこの境界を、通常設定される境界半径を継承するように変更しました。

良い指摘です。これは、間違った設定によるものだと思います。

「いいね!」 3

スペースについてですが、この方法はいかがでしょうか。

ここでは、タイトルを1行に制限し、シグニファイアは独自の行に配置できるようにしています。また、下のボタンと一致するように、左右に同じスペースのパディングを追加しました。

「いいね!」 7

この実験の目的に対して少し逸脱しすぎているかもしれませんが、私たちのデザインを制限しているより大きな問題は、表示される通知の量だと思います。ブラウザの高さが許容するからといって、通知でいっぱいのページを表示する必要はないと思います。ユーザーは「すべて表示」をクリックして、すべてを確認する必要があるときに /my/notifications にリダイレクトできます。

:100: これは正しい方向への一歩だと思います。そして、私たちは次のことを行う可能性があります。

  • 表示する通知の数を減らす
  • 通知ごとに表示する情報を増やす

例えば、このDribbbleで見つけたデザインは、通知の量 / 各通知の情報量 / 密度が良いバランスになっています。

「いいね!」 10

ああ、うん、そのディスプレイは本当に気に入っています。

「いいね!」 3

また、あなたのスクリーンショットでは、私のものよりもアイコンにアバターが隠れていないことに気づきました。「設定」でテキストサイズを「小」にすると、それが原因のようです。以前もテキストサイズを変更したためにアバターの大部分が隠れていたのかもしれませんが、今は以前よりもアバターが隠れています。(私はまだ以前のアイコンのみのバージョンの方が好きなので、気にしません。)

比較のため:実験とセーフモードの場合

そして、いくつかのアイコンがインデントされています

「いいね!」 3

ご意見は?

「いいね!」 3

通知の周りにスペースをもう少し設ける必要があると思います。これにより、このずれも解消されるはずです。

image

これらの半径を同じにすることはできますか?

image

新しい状態とアクティブな状態を示すために、グレーの背景がうまく機能していないように感じます。通常、新しい状態とアクティブな状態の両方には第三の色を使用し、グレーはホバーに使用します。

image

アイコンが少し小さすぎるように感じます。いくつか見分けるために目を細める必要があります。

image

image

検索メニューの変更でこれがどのように機能するか、何かアイデアはありますか?最近、検索メニューをフル幅にしたので、ボックスに戻るのは少し違和感があります。

「いいね!」 7

タブのスタイル変更は全体的に気に入っています。

もう少しスペースが必要な箇所がもう一つあります。モバイルでのタブのクリックターゲットが非常に小さいです。

タップするのがかなり難しいです。

「いいね!」 3

率直に言って、私はそれを楽しめず、以前のレイアウトの方が好きでした。

  • 他の人が上に書いたように、レイアウトが詰め込みすぎです。上記のスクリーンショットはそれを改善しています。
  • すべてのアイテム間の境界線の半径と間隔により、リストがより忙しく感じられます。情報に視覚的なノイズが追加されます。

  • 未読アイテムの背景色が、他のカラーパレットではそれほど良く見えません。すべて灰色がかっていて、色のアクセントが失われています。

以前:

新しいもの:

  • 通知をアイコンから分離する境界線がなくなったため、それらとアイテムの間のずれは、特に最初のアイコンで何かがおかしいという印象を与えます。

  • アイコンが小さすぎ、モバイルモードでは間隔がずれています。正しいアイコンをクリックするのが難しくなります。すでに通知をアイコンの代わりに2回誤ってクリックしました。

同意しません。利用可能なビューポートを活用できるのは良いことです。

それは良いでしょう。

「いいね!」 7

変更をマージしています。最新版はこちらです。

アバターを常にユーザー名に近い上部に揃えるにはどうすればよいでしょうか?多くのダブルライン通知があった場合、中央揃えのアバターは少し「固定されていない」ように感じるのではないかと思います…非常に大まかな比較です。

「いいね!」 1

ローカルで試したところ「違和感」がありましたが、ここで実装して皆さんの感想を見てみたいと思います。

「いいね!」 1

アイテム間の間隔を広げて、外側のパディングに合わせてどのように感じるか試していただけますか?

「いいね!」 1

「いいね!」 1