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

이것은 병합되었습니다 → UX: Notification panel update - Pull Request #33795 - discourse/discourse - GitHub


업데이트:

이제는 모든 사용자에게 meta에서 활성화되었습니다

요약

헤더 드롭다운 메뉴와 알림 항목 스타일에 대한 새로운 룩 & 스타일을 위한 실험입니다.

헤더의 드롭다운에서 “활성” 테두리 스타일을 제거합니다. 이 테두리는 테마 생성 시 스타일링에 복잡성을 더합니다.

우리는 알림 메뉴의 간격을 추가하고 “활성” 아이콘 스타일을 변경합니다.

스크린샷

16개의 좋아요

좋아, 이 실험이 기대된다! 조던, 새로운 디자인 정말 마음에 들어 :smiley:

초기 피드백을 몇 가지 남길게요: 간격이 조금 좁게 느껴지는데, 조금 더 넓게 설정해 볼 수 있을까요? ✓ Dismiss 버튼의 패딩이 꽤 크기 때문인 것 같아요. 이들을 동일한 패딩(0.75rem ?)으로 정렬하면 좋을 것 같습니다.

이런 느낌이면 어떨까요?:

9개의 좋아요

저는 definitely 토픽 제목이 있는 것을 그리워합니다. 짧은 이름의 사용자가 좋아요를 하나 또는 두 개 눌렀을 때는 충분한 정보가 제공됩니다. 하지만 제목의 한두 단어만으로는 저에게는 부족합니다.

10개의 좋아요

둘 다 피드백을 줘서 고마워요. 두 의견 모두 정말 정확해요 :+1: 더 많은 피드백이 쌓인 후에 처리할 예정이지만, 이 내용들을 목록에 추가할 거니 안심하세요.

7개의 좋아요

몇 가지 첫인상:

Default와 Horizon 모두:

  • Keegan의 경우처럼, 여백이 약간 좁게 느껴집니다.
  • 항목 사이의 음영이 없는 빈 공간은 이전처럼 자연스럽게 어우러졌을 때보다 화면이 더 복잡하게 느껴집니다.

Horizon에만 해당하는 사항:

  • Horizon에서는 항목 배경에 색상이 있습니다. 이 색상이 있어야 할까요? (Default에서는 이제 회색입니다.)
  • Horizon에서는 왼쪽 위 모서리의 둥근 각이 어색하게 보입니다… 컨테이너가 내부 항목보다 더 날카로워 보이는데, Default에서는 두 요소가 더 잘 어울리는 것 같습니다.
5개의 좋아요

기존 알림(이미 처리했을 가능성이 있는)에 더 많은 공간을 할당하는 대신, 더 새로운 알림(아직 처리해야 하는)의 맥락을 잃는 트레이드오프를 발견했는데, 이는 예상치 못한 결과였습니다.

@moin이 위에서 말한 내용과 일치하며, @keegan이 지적했듯이 더 밀집된 디자인은 사이드바와 같은 컴포넌트에서 목표로 해 온 덜 밀집된 디자인 방향과 모순됩니다.

6개의 좋아요

이것은 Horizon && core 설정에서 더 큰 테두리 반지름을 설정하고, 이 반지름을 "large"로 지정했기 때문입니다. 이후 core에서 이 테두리가 일반적으로 설정된 테두리 반지름을 상속받도록 변경했습니다.

좋은 지적입니다. 아마도 잘못된 설정 때문인 것 같습니다.

3개의 좋아요

여백(spacing)에 관해… 이거 어떻게 생각해?

여기서 제목은 1줄로 제한하되, 시그니파이어(signifier)는 별도 줄을 가질 수 있도록 했다. 또한 아래 버튼들과 맞추기 위해 좌우 패딩을 동일한 크기로 추가했다.

7개의 좋아요

이 실험의 목적에서 약간 벗어날 수 있지만, 우리의 설계를 제한하는 더 큰 문제는 우리가 표시하는 알림의 양이라고 생각합니다. 브라우저 높이가 허용한다고 해서 알림을 한 페이지 분량이나 표시할 필요는 없다고 봅니다. 사용자가 모든 것을 확인해야 할 때 "더 보기"를 클릭하면 /my/notifications로 이동할 수 있도록 하면 됩니다.

:100: 나는 이것이 올바른 방향의 한 걸음이라고 생각하며, 다음과 같은 조치를 취할 수 있을 것 같습니다:

  • 표시하는 알림의 수를 줄입니다
  • 알림당 더 많은 정보를 표시합니다

예를 들어, 이 Dribbble에서 찾은 디자인은 알림의 수 / 각 알림의 정보량 / 밀도 비율이 좋습니다.

10개의 좋아요

아, 맞다. 그 디스플레이 정말 마음에 들어.

3개의 좋아요

또한 스크린샷에서 아바타가 아이콘에 가려지는 정도가 제 화면보다 덜한 것 같았습니다. 설정에서 텍스트 크기를 "작게"로 선택하면 그런 현상이 발생하는 것 같습니다. 이전에 텍스트 크기를 변경했기 때문에 아바타의 더 큰 부분이 가려졌을 수도 있지만, 지금은 이전보다 아바타가 더 많이 가려져 있습니다. (그래도 저는 이전의 아이콘 전용 버전을 더 선호하므로 상관없습니다.)

비교를 위해: 실험 모드와 안전 모드에서

그리고 일부 아이콘은 들여쓰기가 되어 있습니다.

3개의 좋아요

생각은 어때요?

3개의 좋아요

알림 주위에 여백을 더 확보해야 할 것 같아요. 이렇게 하면 이 정렬 문제도 해결될 거예요:

image

이 반지름 값들을 동일하게 맞출 수 있을까요?

image

새로고침과 활성 상태를 표시하는 데 회색 배경이 잘 어울리지 않는 것 같아요. 보통 새로고침과 활성 상태에는 tertiary 색상을 사용하고, 호버 상태에는 회색을 사용하거든요.

image

아이콘이 지금은 좀 작게 느껴져요. 몇몇은 가만히 들여다보지 않으면 알아채기 힘들 정도예요.

image

image

검색 메뉴 변경 사항과 이 디자인이 어떻게 조화를 이룰지 아이디어가 있으신가요? 최근 검색 하이라이트를 전체 폭(full-width)으로 변경했었는데, 다시 박스 형태로 돌아가니 약간 어색하게 느껴져요.

7개의 좋아요

전반적으로 탭의 스타일 변경은 좋습니다.

여기 한 곳 더 여백을 조금 더 넓게 두면 좋겠습니다: 모바일에서 탭을 클릭하는 영역이 매우 작습니다.

탭을 누르기 꽤 어렵습니다.

3개의 좋아요

솔직히, 이번 변경사항은 마음에 들지 않았고 이전 레이아웃이 더 좋았어요.

  • 위에서도 언급했듯이, 레이아웃이 너무 빽빽해요. 위 스크린샷에서는 그 부분이 개선되어 있습니다.
  • 모든 항목 사이의 테두리 반경과 간격 때문에 목록이 더 복잡해 보입니다. 정보에 시각적 노이즈를 더하는 셈이죠:

  • 읽지 않은 항목의 배경색이 다른 색상 팔레트에서는 이전만큼 아름답지 않아 보입니다. 모두 회색빛이 돌며 색상 강조 효과가 사라졌습니다.

이전 버전:

새 버전:

  • 이제 알림과 아이콘을 구분하는 테두리가 없기 때문에, 그들과 항목 사이의 정렬이 어긋나 뭔가 어색해 보입니다. 특히 첫 번째 아이콘에서 더 그렇습니다.

  • 아이콘이 너무 작고, 모바일 모드에서는 간격이 어긋납니다. 올바른 아이콘을 클릭하기가 더 어려워졌어요. 이미 실수로 아이콘 대신 알림을 두 번이나 클릭했습니다.

동의하지 않습니다. 사용 가능한 뷰포트 공간을 활용하는 것은 좋은 일입니다.

그것도 좋겠습니다.

7개의 좋아요

일부 변경 사항을 병합하고 있습니다. 최신 반복 버전입니다.

아바타를 상단에 정렬하면 사용자 이름 쪽에 항상 더 가깝게 보이게 할 수 있을 것 같은데, 어떻게 생각하세요? 이중 줄 알림이 많을 경우 중앙 정렬된 아바타가 약간 “부유하는” 느낌을 줄 것 같아요. 매우 대략적인 비교입니다.

1개의 좋아요

로컬에서 시도해 보았는데 뭔가 어색했지만, 여기 구현해서 모두의 의견을 들어보겠습니다.

1개의 좋아요

외쪽 패딩과 일치하도록 항목 사이의 간격을 넓혀서 느낌을 확인해 보시겠어요?

1개의 좋아요

1개의 좋아요