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

未読の青いドットが少しジグザグになっており、説明が早期に切り捨てられています。

読んだ通知が「グレーアウト」されるようになった今、ドットはまったく必要ないのではないでしょうか?

「いいね!」 6

切り詰めは「単語の区切り」で行われるため、可読性が向上すると考えています。
ギザギザのドットは、トピックリストやサイドバーで行っているものです。フィードバックに基づいてこの方向性にしましたが、個人的にはすべて右端のゾーンに揃えたいと思っています。

うーん、それは興味深いですね。
現在、UIで2つのパターンをマージして模倣しています。

未読のサイドバーでは:
青いドット

未読のトピックリストでは:
青いドット、テキストはプライマリカラー

「いいね!」 2

通知タイプアイコン付きのドットは、右側にさらに1つ必要ないほど似ているでしょうか?(より明るい三次色で合わせると機能しますか?)

タイトルの2行目が表示されていません。3単語では短すぎます!

「いいね!」 4

はい、背景色付きのアイコンが「青い」ドット通知のようなものとして機能するように見えてきました。

うーん…これは確信が持てません。アイコンがあるとコントラストが微妙です。アイコンの色を変更することもできますが。

切り捨てられるよりも多くの単語を好むというフィードバックを十分に得られたと思います。これは削除します。

「いいね!」 3

既読/非表示にした通知と、新しい通知の区別が分かるような表示に戻していただけないでしょうか? 現状では、違いが全く分かりません。

「いいね!」 2

これが見えないということですか?

それとも、ここの違いが十分ではないということでしょうか?

Gmailモバイルアプリのスタイリングをエミュレートすることについて疑問に思います。非常に確立されたパラダイムです

(太字 vs 細字)

「いいね!」 2

それは少し良いですね。


目的はトピックリストを模倣することですが、アイテムが非常にコンパクトで密集しているため、本質的にさらに多くの差別化が必要になる可能性があります。サイドバー/トピックリストの標準からわずかに逸脱することは悪いことではないと思います。

「いいね!」 1

通知ドロップダウンに新しいアイテムしかなく、異なるマークも見当たらなかったので、既読アイテムの憂鬱なグレーのアイコンに気づいたのは、通知のフルページを見たときでした。

未読アイテムがあったときの「青の海」が好きでした。「うわー、色が多すぎて見つめられない」と思ったことは一度もありませんでした。注意が必要なことや、誰かが実際にと話したいと思っていることが一目でわかりました。

「いいね!」 4

これは素晴らしいフィードバックです。青の海の中で、「これを全部クリアする必要がある」というのが非常に明確です。

それがなくなると、その目立ちやすさは間違いなく失われます。その目的のためだけに、ドットを復活させるのは良いことかもしれません。

「いいね!」 3

私にとって、青と灰色との違いはごくわずかです。これは、WCAGパレットのため、灰色がより暗くなっていることも一因かもしれません。未読通知は、白い背景に灰色のアイコンのままであれば、違いがより明確になると思います。

もちろん色の違いは認識できますが、既読通知しかない場合、既読のものが未読のように見えると思います。

また、Discourse Meta - The Official Support Forum for Discourse でも、灰色に黒いアイコンが表示されるようになりました。
image


封筒をクリックして、PM関連の通知のみを表示すると、すべて既読であるにもかかわらず、すべてのメッセージが未読のように見えます。
image

「いいね!」 4

今朝、皆さんにこのフィードバックを共有したかったのです。ここに提示されたすべてのアイデアとともに、このような短い期間で一緒にイテレーションを進めることができたのは素晴らしいことです。

未読の表示をもう少し強くする必要があると感じているので、私は再び青い点に傾いています。


ああ、そうですね…これは理想的ではありません。ありがとうございます!

興味深いですね…確認してみます。

現在のイテレーションのレイアウトは、関連情報がすべてコンパクトなアイテムにまとめられており、リスト全体のスペーシングも十分だと感じられるので、とても気に入っています :+1:

状態については、さまざまな選択肢に対して強いこだわりはありません。しかし、デザインの探求の中で、より一般的に対処できれば素晴らしいと思います。完全に一貫したシステムが導入されているわけではなく、今、通知メニューに最適なものを見つけるだけでなく、アプリ全体の状態とコンテキストをマッピングする、より広範な探求を行い、それを変数で適用できれば素晴らしいでしょう。

例えば、状態(既読/未読)はトピックリストに似ていますが、コンテキストが異なります。また、類似のコンテキスト(他のメニューパネル)では、より微妙なグレーは通常、その状態を示すものではありません。現在、他のメニュー項目も、ミュートされた状態を示しているかのように見えます。そのため、より体系的なマッピングから本当に利益を得られると感じています。

「いいね!」 5

現在、Discourse の一部では「未読/既読」のスタイル状態のみを使用しています。

このメニューのもう 1 つの部分は「選択済み」の状態です。これは、現在選択されている通知タブを示すためのものです。このイテレーションでは、サイドバー項目の選択済み状態を模倣しています。

メニューで検討している項目の基本的な監査を以下に示します。未読、既読、選択済み

サイドバー
サイドバーでは、「未読」をドットで示します。「既読」は、青いドットがない場合はデフォルトで想定されます。

サイドバー - アクティブ
現在選択されているサイドバー項目、つまりアクティブな項目は次のとおりです。

トピックリスト
トピックリストでは、現在青いドットを表示し、タイトルとメタデータの色を使用して区別しています。ただし、フォロー/ウォッチしていないトピックには青いドットを表示しないという例外があります。したがって、青いドットが表示されるかどうかは、ユーザーにはすぐにはわかりません。

メニュー
ここでは selected を状態として使用して、アクティブな選択を示します。これは通知には当てはまらないと思いますが、通知の現在のタブの選択済み状態には当てはまります。

現在、選択済みに対して使用される色に一貫性がありません。

トラッキングではグレーを使用します。

現在選択されているカテゴリでは青を使用します。

ユーザー通知ページ
このページは、現在のイテレーションでいくつかの作業が必要です。

「いいね!」 2

いつものようにあなたの仕事に感謝しており、この件に特化して取り組んでくれていることを嬉しく思います。

ボタン/セクションの角のパディングの動機を教えていただけますか?

正直なところ理解できませんが、何か見落としているのかもしれません。

これは、角丸に余分なパディングがないと美しく見えます :slight_smile:

「いいね!」 1

サイドバーにより近い外観にするためです。

「いいね!」 1

ボタンの余分なパディングがなくなった最後のアップデートの方が私には良く見えます👌

この微妙な改善についてどう思いますか?

右側のアクティブボタンパネルのホバー効果を削除し、左側パネルに微妙なブレンド効果を適用することです。

これにより、パネルとボタンを区別し、アクティブな通知とパネルが同時に存在する場合にインターフェースが過度に飽和したり「完全にペイントされた」ように見えるのを防ぐことができます。

こちらでいただいたフィードバックに基づいたイテレーションのアイデアです。

「いいね!」 3

通知をすでに見たときの白い背景に慣れているせいかもしれませんが、そうでないテーマでグレーの背景が広範囲に使われているのは少し奇妙に見えます。

「いいね!」 2

この実験はmetaで再び公開されました。実験グループに参加してください。

「いいね!」 3