새로운 헤더 드롭다운/알림 메뉴 스타일

전반적으로 여기에서 많은 진전을 이루고 있다고 생각합니다. 오른쪽 부분은 잘 작동하지만, 읽기 전용 요소의 대비가 너무 낮아 읽기 어렵고, 회색이 다소 칙칙하게 느껴집니다.

이 인터랙티브 아티팩트(클릭 가능, 직접 시도해 보세요)와 비교해 보세요.

개인적으로는 마지막 옵션이 가장 마음에 듭니다. 깔끔하고 어질기 때문이죠. 하지만 앞의 두 옵션도 나쁘지 않습니다.

여러분의 생각은 어떨까요? (그리고 네이던은 무슨 일이죠… 아바타가 좀 특이하네요 :slight_smile: )

(또한 모서리 반경이 줄어든 버전이 약간 더 좋아 보입니다.)

4개의 좋아요

오늘 디자이너 몇 명과 저가 페어링을 하며 스타일을 반복 개선했습니다. 최종적으로 아래 방향으로 정했습니다.

  • 파란색 배경을 다시 도입하되, 약간 더 차분한 톤으로 조정.
  • 새 “읽음” 스타일을 유지하여 토픽 목록과 유사하게 보이도록 함
  • 활성 내비게이션 항목의 “활성” 배경 하이라이트 강도 감소
  • 읽지 않은 항목 아이콘의 파란색 원형 배경 유지


샘, 당신의 아티팩트에 표시된 첫 번째와 두 번째 옵션도 마음에 듭니다. 더 자세히 살펴볼게요. 현재로서는 가장 최근 반복 개선 버전이 차별화가 좀 더 명확하게 드러나는 단계라고 생각합니다.

더 나아가려면 템플릿과 카피에 몇 가지 조정이 필요할 것 같습니다.

CSI ENHANCE

정상적으로 보입니다

6개의 좋아요

마지막 디자인이 꽤 좋습니다! 읽지 않은 상태를 명확하게 전달하면서도 여전히 가볍습니다. 마찬가지로 첫 번째 디자인도 마음에 듭니다(다만 파란 원은 필요 없다고 생각하지만, 비교하면 결국 마지막 디자인이 이깁니다). 나머지 디자인들은 제 취향에는 좀 과한 것 같습니다.

모바일에서는 파란색 대신 “붉은빛” 배경이 표시됩니다.

연한 회색은 읽기가 매우 어렵고, 번져 보입니다. 아바타 장식만 회색으로 처리해 보는 건 어떨까요?

여기서 대비가 너무 약해서 눈에 매우 부담스럽습니다. 특히 굵지 않은 텍스트에서 더 그렇습니다.

이것이 gmail이 구분선을 위해 font-weight를 사용하게 된 이유라고 생각합니다.

또한 데스크톱에서는 두 가지 다른 파란색이 표시되어 혼란스럽습니다.

네, 이 피드백이 흥미롭네요. 근접성, 굵기, 간격, 텍스트 폭이 좁은 것 등이 원인인 것 같습니다.

저는 주제 목록에서 사용하는 것과 동일한 색상을 "읽음"을 나타내기 위해 사용하고 있습니다.

그럼에도 불구하고, 아이콘 배경이 이 문제와도 관련이 있다고 생각합니다. 그래서 저는 @keegan의 이 제안을 좋아합니다:

제가 구현하고 싶은 또 다른 옵션은 인라인 제목과 설명입니다. 다음과 같은 형태입니다:

이것은 호버(hover) 상태일 때인가요? 아니면 목록이 실제로 다른 항목들에 두 가지 다른 파란색 배경을 표시하고 있는 건가요?

이거요, 네 색상 두 가지입니다. 이걸 보려면 로컬에서 승인 요청을 받기 위해 계정을 만들어야 합니다.

1개의 좋아요

아, 알겠습니다. 스타일이 읽지 않은 항목에 적용되고 있네요. 이 항목도 대상이 되도록 CSS를 추가하겠습니다.

모바일의 붉은색 배경에 대한 스크린샷을 보내 주실 수 있을까요?

1개의 좋아요

최신 업데이트가 이미 며칠 전부터 적용되었습니다. 여기 계신 분들의 의견을 듣고 싶습니다.

전반적으로는 괜찮지만, 그 연한 회색 텍스트가 여전히 신경 쓰입니다. 저는 여전히 검정색을 선호합니다. 읽음 알림에서는 아이콘은 회색으로 유지하되, 텍스트는 검정색으로 유지하는 방식으로 시도해 볼 수 있을까요?

이 부분을 제외하면, 기존 스타일링보다 이 스타일링을 더 선호합니다. 좀 더 대담한 옵션들을 더 탐색해 볼 가치가 있다고 생각하지만, 현재 이터레이션(반복 개선) 단계로서는 좋은 느낌을 줍니다.

또한 @lindsey, 우리가 고려해야 할 큰 변화 중 하나는 아바타가 기본적으로 표시되도록 하는 것입니다. 현재 그렇게 하지 않고 있기 때문에, 많은 기본 설치 환경에서 이보다 최적화된 기본 경험을 제공하지 못하고 있습니다:

@jordan.vidrine가 여기서 만든 변경 사항은 재구상이 아니라 세련된 개선 사항으로, 좋은 변화입니다.

  • 선택 인터페이스가 좀 더 좋아 보입니다.
  • 읽음/미읽음에 대한 명확한 아이콘 스타일링이 좋습니다.
  • 알림 내의 파란색 링크는 이질적으로 느껴지는데, 검정색으로 통일된 것이 좋습니다.
3개의 좋아요

변경 사항이 병합되었습니다.

1개의 좋아요

아, 우리가 최근에 이걸 시도해 본 것 아닌가요? 그걸 시도해 보고 어떤 이유로든 진행하지 않기로 했다고 생각했는데. 하지만 나는 이 아이디어를 정말 좋아합니다. 아바타가 있으면 알림 메뉴가 훨씬 더 흥미롭고 정보에 충실해지거든요.

2개의 좋아요

여기서 좋은 타협책은 기본적으로 새 설치 시 활성화하는 것부터 시작하는 것 같습니다.

우리가 주저했던 큰 이유는 사람들이 한 커스터마이징 때문이라고 생각합니다.

1개의 좋아요

@jordan.vidrine 이제 이 실험을 메타에서 전역으로 활성화하고(이 주제를 고정하고) 누가 불평하는지 살펴볼 수 있다고 생각합니다. 전반적으로 현재 상태가 기본값보다 낫다고 생각합니다.

@lindsey 의견은 어떻게 되시나요?

이것은 여러 면에서 미묘하게 더 나은 진화적 변화입니다.

3개의 좋아요

완료!

trust_level_0 사용자 전체에 대해 활성화되었습니다.

3개의 좋아요

아직도 흰색 배경에 파란 글씨와 흰색 배경에 검은 글씨의 차이를 구분하는 것이, 흰색 배경에 파란 글씨와 흰색 배경에 어두운 회색 글씨의 차이를 구분하는 것보다 훨씬 쉽다고 느낍니다.

아마도 아이콘이 내 시선이 가장 먼저 닿는 곳이기 때문일 것입니다.
내게 아바타보다 더 중요합니다. 알림을 유발한 사용자는 텍스트로도 표시되지만, 알림의 내용은 게시물이 이동된 경우에만 표시되고, 그 외에는 아이콘이 유일한 지표이기 때문입니다.

2개의 좋아요

글꼴이나 아이콘 크기에 변화가 있었나요? 첫인상으로는 이제 약간 더 커진 것 같은데, 추가된 여백 때문일 수도 있습니다. 이로 인해 알림 아이콘과 메뉴 아이콘 사이에 약간의 불일치가 생기는 것 같습니다.

또한, 오른쪽 패딩이 제 생각에는 약간 너무 큰 것 같습니다.

참고로, 저는 브라우저 배율을 90%로 설정하고 있습니다 (이것이 어떤 문제를 일으킬지 확실하지는 않지만, 가끔 브라우저가 이상하게 동작하곤 하니까요 :smile: ).

최신(아마도 마지막) 버전이 이제 라이브되었습니다. 추가 코멘트가 없다면 다음 주에 병합하기 위해 내게 북마크 알림을 설정해 두었습니다.

2개의 좋아요

이 멋진 기능을 발전시켜 주셔서 감사합니다. 1년 전과 비교하면 훨씬 좋아졌습니다.

다만, 설명 앞에 줄바꿈을 완전히 넣는 방식에는 완전히 동의하지는 않습니다.

현재 인스턴스에서 볼 수 있듯이, 상세 정보가 사용자 이름 바로 뒤에 시작되면 얼마나 많은 공간을 절약할 수 있는지 확인하실 수 있습니다. 그리고 사용자 이름의 굵은 글씨체와 설명의 얇은 글씨체 차이로 인해 어느 정도 분리 효과는 이미 달성되고 있습니다.

하지만 CSS를 통해 이를 커스터마이징할 수 있는 기능을 유지한다면 저는 괜찮습니다.

그에 관해 말씀드리자면, 이 div에 클래스를 붙이는 것이 의미가 있을까요?:

image

1개의 좋아요

네, 반드시 클래스가 있어야 합니다@

1개의 좋아요