내비게이션을위한 메가 메뉴를 사용하고 사용하지 않는시기-Word누르다-php.cn

거대한 메뉴 및 사용자 경험 거대한 메뉴를 사용하는 주요 원칙은 간단한 질문에 대답 할 수 있어야합니다.

거대한 메뉴를 사용하면 사용자가 내 웹 사이트를 쉽게 탐색 할 수 있습니까?

당신은 그들이 최신 트렌디 한 것들이기 때문에 하나를 추가해서는 안됩니다. 웹 사이트에 거대한 메뉴를 추가하면 사용자 경험 (UX)을 고려해야합니다. 메가 메뉴가 내비게이션 프로세스를 더 매끄럽고 직관적 인 경우, 하나를 추가하십시오. 그렇지 않은 경우 메뉴에 항목이 거의 필요하지 않으면 일반 드롭 다운 메뉴를 사용하십시오.

메가 메뉴를 사용할지 여부를 결정할 때 다른 질문을 할 수도 있습니다.

거대한 메뉴가 내 웹 사이트의 목표를 달성하는 데 도움이 될 수 있습니까?

당신은 이것이 대답하기 어려운 모호한 질문이라고 생각할 수도 있지만, 웹 사이트 디자인 및 컨텐츠의 모든 측면은 웹 사이트가 달성하려는 것과 관련되어야합니다. 이것은 다음과 같은 상황 중 하나 일 수 있습니다

온라인 제품 판매 사람들이 귀하에게 연락하여 서비스를 구매하도록 권장합니다 추종자를 개발하십시오 자선 단체를 홍보 커뮤니티를 만듭니다

가입자를 얻으십시오 영업 이벤트 티켓

나는 웹 사이트에 더 많은 목표가있을 수 있다고 생각하지만, 이것들은 가장 일반적인 목표 중 하나입니다. 목표를 이해하면 목표를 달성하기 위해 사용자가 방문하려는 페이지를 정확히 알 수 있습니다.

따라서 사람들이 온라인으로 제품을 구매하고 크고 복잡한 상점이 있으면 거대한 메뉴가 최선의 선택 일 수 있습니다. 그러나 매우 구체적인 제품이나 서비스 만 있고 해당 제품 또는 서비스의 판매 페이지로 사람들을 안내하려는 경우 거대한 메뉴가 산만해질 수 있습니다.
거대한 메뉴를 추가할지 여부를 결정하기 전에 웹 사이트를 달성하기를 원하는 것에 대해 생각하고 방문자가 사이트를 방문하기를 원하는 곳 및 어떤 종류의 내비게이션을 장려 할 것인지 생각해보십시오.
다음은 웹 사이트를 향상시킬 수있는 거대한 메뉴의 구체적인 예입니다.

메가 메뉴를 사용하는시기 메가 메뉴 중 일부를 웹 사이트에 유용한 추가로 살펴 보겠습니다.

사용자가 사용 할 것으로 예상되는 경우 > 1 귀하의 웹 사이트가 소매 웹 사이트 인 경우 사용자는 거대한 메뉴를보고이를 사용하여 매장의 다양한 부서를 탐색하는 데 사용됩니다.

예를 들어 아래에 표시된 John Lewis 웹 사이트는 매장의 각 주요 섹션마다 다른 메가 메뉴를 사용합니다. 다음은 여성 의류 섹션입니다 :

드롭 다운 메뉴가 너무 큰 경우 > 2 경우에 따라 드롭 다운 메뉴 또는 일련의 드롭 다운 메뉴에는 많은 옵션이 포함되어있어 사용자 경험이 줄어 듭니다.

따라서 웹 사이트에 탐색 메뉴에 많은 요소가 포함되어야하는 경우 메가 메뉴는 사용자 경험을 향상시킬 수 있습니다. 그러나 거대한 메뉴를 사용하는 경우 사용자에게 직관적 인 방식으로 빌드하고 색상, 텍스트 효과 및 글꼴과 같은 디자인 팁을 사용하여 쉽게 탐색 할 수 있습니다.

아래 게임 웹 사이트는 웹 사이트의 일부와 관련된 거대한 메뉴 시리즈의 훌륭한 예입니다. 이 메뉴는 간격 및 굵은 텍스트 및 배경과 같은 간격 및 텍스트 효과를 사용하여 메뉴를 직관적이고 쉽게 탐색 할 수 있습니다.

때로는 텍스트 링크 이상의 웹 사이트에 콘텐츠를 추가 할 수 있습니다.

아래 표시된 Moleskine 웹 사이트에는 독특한 메가 메뉴가 있습니다. 텍스트 링크 외에도 텍스트를 다루는 텍스트 링크 역할을하는 주요 제품의 사진도 있습니다.

이것은 방문객 들이이 페이지를 방문하도록 권장하고 메가 메뉴를 웹 사이트의 기능적 측면보다 더 많이 만듭니다. 디자인을 향상시키고 판매 목표를 달성하는 데 도움이됩니다.

메가 메뉴를 사용하지 않으면 때때로 메가 메뉴를 사용해서는 안됩니다. 다음은 몇 가지 예입니다. When to Use (And Not Use) a Mega Menu for Navigation > 1 웹 사이트에 수백 페이지가없는 경우 거대한 메뉴가 중복됩니다. 일반적인 소규모 비즈니스 웹 사이트 또는 블로그의 경우 거대한 메뉴는 방문자 만 혼란스럽게하며 비어있을 것입니다.

Envato Tuts 웹 사이트는 거대한 메뉴와 일반 드롭 다운 메뉴의 조합을 사용합니다. 링크가 적은 웹 사이트의 일부의 경우 일반 드롭 다운 메뉴가 작업을 완료하고 더 적은 페이지를 다룰 수 있습니다.

홈페이지가 하위 페이지에 링크되는 페이지라면 거대한 메뉴가 필요하지 않습니다.

영국 정부 웹 사이트는 예를 들어 링크로 가득 찬 페이지입니다

웹 사이트로 이동하면 왼쪽 탐색 메뉴가 확장 될 수 있습니다.

이것은 또한 사용자가 메가 메뉴를 사용하지 않을 수있는 환경에서 메가 메뉴를 사용하지 않는 좋은 예입니다. 예를 들어, 공공 부문 웹 사이트에서 메가 메뉴는 소매 사이트보다 덜 일반적입니다. When to Use (And Not Use) a Mega Menu for Navigation > 3. 방문자가 특정 페이지로 방문하고 싶을 때 때때로 귀하의 웹 사이트는 하나 또는 두 개의 제품 또는 서비스를 판매하거나 메일 링리스트에 가입하도록 장려하도록 설계되었습니다.

이 경우 홈 페이지에 방문자를 로그인 페이지로 안내하는 배너가있을 수 있습니다.

이 경우 내비게이션이 최소로 유지되기를 원합니다. 거대한 메뉴는 방문자에게 많은 옵션을 제공하여 방문하려는 페이지를 방문 할 가능성이 훨씬 적습니다. 따라서 내비게이션을 최소로 유지하고 방문자를 로그인 페이지로 안내하는 데 집중하십시오.

소셜 미디어 심사관 웹 사이트가 좋은 예입니다. 이제 그들은 방문객들이 메일 링리스트에 가입하거나 회의 티켓을 구매하는 두 가지 중 하나를 수행하기를 원합니다. 배너는 두 번째 포인트를 반영하는 반면, 홈페이지의 상단 부분을 차지하는 동작은 첫 번째 포인트를 반영합니다.

방문자에게 큰 거대한 메뉴를 제공하면이 두 가지 중 하나를 수행 할 가능성이 줄어들어 내비게이션을 대신 간단하게 유지합니다.

작은 화면에서 읽기 쉬운 메가 메뉴를 만드는 것은 어려울 것입니다. 그것을 작동 시키려면 링크를 작게 만들어야합니다. 즉, 사람들이 링크를 클릭하거나 스크롤을 소개 할 수 없습니다. 거대한 메뉴와 스크롤을 결합하면 거대한 메뉴가 어디에서 끝나고 페이지 컨텐츠가 시작되는 위치를 알기가 어렵 기 때문에 혼란 스러울 수 있습니다.

모바일 장치에서는 햄버거 메뉴를 사용하는 것이 가장 좋습니다. 기호를 클릭 할 때까지 보이지 않는 메뉴. 상징은 종종 햄버거 메뉴라고 불립니다. 세 가지 수직선은 햄버거처럼 보입니다.

위에서 언급 한 John Lewis 웹 사이트에는 그러한 메뉴가 있습니다. 기호를 클릭하면 메뉴 옵션이 아래로 확장됩니다.

웹 사이트에 거대한 메뉴를 추가 할 때 주목할만한 것들 우리는 언제 방금 귀하의 웹 사이트에 거대한 메뉴를 추가해서는 안되고 해야하는지 논의했습니다. 거대한 메뉴가 웹 사이트의 유용성을 향상시킬 것이라고 생각한다면, 웹 사이트에 거대한 메뉴를 추가하기 전에 기억해야 할 몇 가지 중요한 사항에 대해 배울 차례입니다.

링크는 순서대로

이어야합니다

거대한 메뉴에는 일반적으로 많은 링크가 포함되어 있습니다. 따라서 적절한 부품으로 구성되어 나누어지는 것이 중요합니다. 이것은 John Lewis 웹 사이트의 거대한 메뉴 스크린 샷에서 분명합니다. 여성 섹션의 링크는 탐색하기 쉬운 다양한 범주로 배치됩니다.

링크는 읽기 쉽고 를 클릭해야합니다 또한 메가 메뉴의 모든 링크를 읽기 쉽고 클릭 할 수 있는지 확인해야합니다. 사용자가 실수로 액세스하고 싶지 않은 콘텐츠를 클릭하지 않도록 링크간에 충분한 간격이 있어야합니다. 그들은 제한된 텍스트를 포함해야하지만 여전히 사용자가 클릭 한 후 사용자를 어디로 가져갈 위치를 이해하도록 도와줍니다.

사용자를 돕기 위해 시각적 팁을 추가하십시오 사용자가 링크 구성 방법을 이해하는 데 도움이되는 내비게이션 메뉴에 시각적 팁을 추가 할 수도 있습니다. 예를 들어, 화살표 아이콘은 사용자에게 특정 하위 메뉴 항목을 클릭하면 많은 새 링크가 표시됨을 나타냅니다. 클릭 가능하고 클릭 할 수없는 품목은 쉽게 구별해야합니다.

최적화 성능

거대한 메뉴는 복잡하고 리소스 집약적입니다. 예상대로 예상대로 작동하려면 많은 태그, CSS 및 JavaScript가 필요합니다. 일부 거대한 메뉴는 이미지를 많이 사용합니다. 이것은 웹 사이트의 메뉴와로드 시간에 악영향을 줄 수 있습니다. 당신은 당신의 잠재 고객이 기다렸다가 경쟁사에게 지루해지기를 원하지 않을 것입니다. 따라서 메가 메뉴를 최적화하는 것이 우선 순위가되어야합니다. 모바일 장치에 대한 대안 제공 앞에서 논의한 바와 같이, 거대한 메뉴는 작은 화면 크기로 인해 모바일 장치에서 잘 작동하지 않습니다. 더 작은 화면에서 다른 내비게이션 방법을 제공하여 웹 사이트를 반응하게 유지해야합니다. 예를 들어, 모바일 장치의 버거 메뉴를 사용하고 기본 링크 만 사용하여 작은 화면의 탐색 메뉴에서 이미지를 삭제할 수 있습니다. 콜에 콜에 추가 버튼

사용자는 종종 거대한 메뉴를 사용하여 웹 사이트의 다른 부분으로 이동합니다. 이 지식을 사용하여 올바른 장소에 일부 전화 유도 문안 또는 프로모션을 추가하여 사용자 참여를 향상시킬 수 있습니다.

사용자 테스트를 통한 유용성 향상 메가 메뉴에서 당신에게 분명하고 정확한 것들은 사용자에게는 그렇지 않을 수 있습니다. 따라서 상황에 가장 적합한 레이아웃을 찾으려면 메가 메뉴의 A/B 테스트를 유지해야합니다. 여러 장치에서 메가 메뉴를 테스트하십시오 가능한 한 많은 브라우저와 장치에서 메가 메뉴를 테스트해야합니다. 거대한 메뉴는 복잡한 UI 요소이므로 제대로 보이게하는 것은 약간 까다로울 수 있습니다. 동시에 메가 메뉴의 모든 링크가 올바르게 작동하는지 확인하십시오.

웹 사이트에 거대한 메뉴를 추가하십시오 메가 메뉴가 웹 사이트에 적합한 선택이라고 결정한 경우 메가 메뉴를 추가하는 가장 쉬운 방법은 플러그인을 통한 것입니다.

Codecanyon은 선택한 많은 거대한 메뉴 플러그인을 제공합니다. 가장 인기있는 것 중 일부는 다음과 같습니다

메가 메인 메뉴를 사용하면 다양한 객체 유형을 메뉴에 배치 할 수 있습니다. 따라서 위의 Moleskine 웹 사이트와 같은 이미지를 원한다면 도움이 될 수 있습니다.

영웅 메뉴는 사용하기 쉽도록 설계되었으며 몇 분 안에 메가 메뉴를 시작하고 실행하는 데 도움이되며 드래그 앤 드롭 메뉴 빌더가 제공됩니다.

거대한 메뉴를 만드는 데 더 많은 영감을 주려면 Envato Tuts에서 다른 게시물을 확인할 수 있습니다. 거대한 메뉴를 현명하게 사용하면 웹 사이트를 향상시킬 것입니다

거대한 메뉴는 웹 사이트의 사용자 경험을 향상시키는 좋은 방법이 될 수 있습니다. 링크가 많은 대형 웹 사이트가있는 경우 거대한 메뉴를 추가하면 사용자가 탐색하는 데 도움이됩니다. 웹 사이트가 요구 사항을 충족하는 경우 오늘 거대한 메뉴를 추가하십시오.

위 내용은 내비게이션을위한 메가 메뉴를 사용하고 사용하지 않는시기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!