웹 디자이너는 웹사이트를 디자인할 때 항상 사용성과 시각적 매력 사이의 균형을 유지해야 합니다. 이 균형이 없으면 웹 사이트는 보기에는 좋지만 탐색하기 어렵습니다. 또는 눈이 즐겁지 않지만 탐색이 쉽습니다. 이를 염두에 두고 매력적인 탐색과 유용성 사이의 균형을 맞추는 것은 그리 어렵지 않아 보입니다. 사용자 정의 메뉴를 만들 때 새로운 아이디어와 영감을 생성하는 데 도움이 되도록 아름답고 사용자 친화적인 탐색 메뉴의 30가지 훌륭한 예를 소개합니다.
타이포그래피
이 사이트는 매력적인 메뉴의 단순함을 결합함과 동시에 사용자에게 매우 쉬운 탐색을 제공합니다. 로고 아래의 제목 위로 마우스를 가져가면 "유형"이라는 단어가 강조 표시된 상태로 유지되고 나머지 단어 위로 마우스를 가져가면 방문하려는 사이트의 적절한 섹션을 정확하게 선택할 수 있습니다.
명암비
Contrast.ie의 탐색은 독창적인 메뉴를 만드는 독특한 접근 방식의 한 예입니다. 모든 버튼은 그려진 댓글 숫자에 배치되며 마우스를 가져가면 팝업됩니다.
비디오 내부 검색
이 사이트의 탐색은 커서로 화살표를 가리키면 화살표를 통해 명확하게 안내합니다. 효율적인 탐색은 뒤에 남겨둡니다. 복잡한 디자인. 이 사이트는 이 표현과 완전히 일치하는 것 같습니다.
이 사이트는 창의적인 탐색을 기념합니다. 왼쪽을 보고 그 사람 위로 마우스를 가져가면 그가 어떻게 웃는지 볼 수 있으며 아이콘과 사진 위로 마우스를 가져가면 마우스 포인터 옆에 즉시 설명이 표시됩니다.
Forty는 창의적인 이미지 기반 탐색을 사용합니다. 화살표는 사용자의 주의를 버튼으로 이끌고 버튼을 클릭하도록 권장합니다.
힐로직스
Healogix는 사용자의 관심을 끄는 큰 글자로 가장 중요한 질문을 합니다. 언제, 무엇을, 왜, 누가? 모든 질문은 클릭 한 번으로 해결됩니다. 홈페이지.
아이디어에 대한 아이디어
이 사이트에는 메인 페이지에 대한 링크가 하나만 있지만 편리하고 창의적입니다. 링크는 시선을 사로잡으며 사용자에게 "말합니다". 그리고 대부분의 사용자는 상호 작용할 수 있는 페이지를 좋아합니다.
사라 롱네커
이 웹사이트의 탐색은 간단하고 사용하기 쉽습니다. 선택한 페이지 뒤에 있는 배너를 사용하면 탐색 요소를 페이지의 나머지 부분과 쉽게 구분할 수 있습니다.
코끼리가 만든
Made by Elephant는 크고 사용하기 쉬운 탐색 메뉴를 사용합니다. 파란색 텍스트는 더 어두운 빨간색 및 검은색과도 잘 대조됩니다.
직장에서 일하기
이 사이트의 메뉴 항목을 탐색할 때 전체 페이지의 배경 위치와 색상이 빠르게 변경되는 것을 알 수 있습니다.
왼쪽 지우기
이 사이트의 메뉴는 링크 위로 마우스를 가져가면 포스트잇처럼 보입니다. 이 사이트의 템플릿은 전적으로 이 개념에 기반을 두고 있습니다.
패턴 탭
사이트에 들어가면 사이트에 입력하는 각 섹션에 대한 정보를 제공하는 녹색 화살표가 나타납니다. 이를 통해 사용자는 사이트와 쉽게 상호 작용할 수 있습니다.
멈출 수 없는 로봇 닌자
탐색은 이 사이트의 이름만큼 멋집니다. 게다가 디자인도 많이 좋아졌습니다.
빨간 코의 날
폴라 골드
이 텍스트 기반 탐색 메뉴는 밝고 눈길을 끄는 요소를 결합합니다. 모습의 편리함과 함께 자바스크립트 사용하지만 대신 Flash를 사용합니다.
웹페이지 FX 블로그
독특하고 흥미로운 탐색 방식. 링크 홈페이지및 블로그는 페이지 헤더를 따라 문장에 삽입됩니다. 이것은 사용성 원칙을 위반하지 않으며 페이지는 읽기 쉽고 매우 효과적입니다.
오페라 매그?
탐색 메뉴 항목은 쉽게 찾을 수 있으며 녹색 밑줄은 탐색 요소와 페이지의 나머지 부분을 통합하는 효과를 만듭니다.
올빼미
Owltastic은 훌륭한 사용자 경험의 한 예입니다. 각 탐색 요소는 마우스를 가져가면 애니메이션과 반응합니다. 이 목록의 다른 예와 마찬가지로 탐색 기능은 아름답고 사용하기 쉽습니다.
기욤 파체코
Owltastic과 마찬가지로 이 웹사이트는 마우스 오버 시 사용자와 상호 작용합니다. 다양한 요소페이지. 사이트 템플릿은 잘 실행되고 탐색하기 쉽습니다.
풀 크림 우유
Full Cream Milk는 명확한 텍스트 기반 탐색을 사용합니다. 링크 위로 마우스를 가져가면 페이지 상단이 강조 표시됩니다. 이것은 사용자와 검색 엔진 모두를 만족시키는 탐색의 좋은 예입니다.
아르카 루이 노에 호텔
이 사이트의 탐색 기능은 아름답고 사용하기 쉽습니다. 매우 세련되고 페이지의 전체 디자인과 잘 어울립니다.
스시 및 로봇
Sushi and Robots는 우아한 디자인을 사용하여 다른 사람들과 눈에 띄는 아름답고 매력적인 탐색 메뉴를 만듭니다.
Sharify는 흰색 텍스트와 하늘색 배경의 대비로 인해 눈이 즐겁고 편안한 흑백 사용자 정의 탐색 메뉴를 사용합니다.
스티븐 카버
여기에서 탐색은 사이트에 들어갈 때 가장 먼저 눈에 띄는 것입니다. "깨끗하고" 사용하기 쉽습니다. 또한, 사용 자유 공간네비게이션이 우수합니다.
사상과 이론
이 사이트는 탐색에 대한 최소한의 접근 방식을 취했으며 제대로 작동합니다. 사용자의 주의를 산만하게 하는 페이지에는 불필요한 것이 없습니다.
조금 더
다시 말하지만, 흑백의 높은 대비는 이 사이트에 더 많은 사용성을 제공합니다. 마우스를 가져가면 탐색 요소가 밝은 파란색으로 켜지며 사이트에 상호 작용성과 미적 가치를 더합니다.
얼스터 식료품점
탐색은 밝은 색상, 사용 용이성 및 파란색 배경과 페이지 콘텐츠의 조화를 사용합니다.
Adaptd의 사이트는 창의적이고 명확하며 아름다운 탐색을 사용합니다. 이 탐색의 가장 두드러진 측면은 포트폴리오 섹션에 있습니다. 버튼 위에 마우스 커서를 놓으면 레이블이 투명해지고 사이트 배경과 혼합됩니다.
삭 재즈 페스티벌 2009
이 사이트에는 사용자가 알아낼 필요조차 없는 탐색 메뉴가 있습니다. 또한 적절한 메뉴 색상은 전체 페이지에 더 많은 색상을 추가합니다. 디자인 요소가 완벽하게 조화를 이룹니다.
- 현재 1.00/5
이 기사에서 우리는 무엇을해야하는지에 대해 이야기 할 것입니다 좋은 탐색사이트에서, 그리고 그것을 실제로 효과적으로 만드는 방법. 이 자료는 주로 자신의 웹사이트를 만들고자 하는 사람들에게 유용합니다.
탐색은 페이지 사이를 이동할 수 있는 방법, 트릭 및 특수 요소입니다.모든 것은 그것이 얼마나 잘 생각되었는지에 달려 있습니다: 전환과 자원 판촉의 성공 모두.
이것은 집의 배치와 비교할 수 있습니다. 레이아웃이 좋으면 필요한 방을 쉽게 찾을 수 있으며 부엌 입구와 거실 입구를 혼동하지 마십시오. 이동, 복도 및 문이 많으면 그러한 집에서 길을 잃을 수 있습니다.
웹사이트도 마찬가지입니다. 탐색이 좋지 않으면 올바른 위치로 연결되지 않는 링크가 많거나 어디로 연결되는지 명확하지 않습니다. 사용자는 혼란스러워하며 필요한 페이지와 필요한 정보를 찾을 수 없습니다.
을 위한 검색 엔진좋은 논리적 탐색도 중요합니다. 검색 엔진사이트에서 이 페이지의 역할을 이해해야 합니다. 잘 설계된 탐색 기능도 향상됩니다. 행동 요인사용자가 필요한 정보를 더 빨리 찾을 수 있기 때문입니다.
기본 요소 및 탐색 기술
먼저 사이트 탐색에 도움이 되는 주요 요소에 익숙해지는 것이 좋습니다.
넓은 의미의 탐색에는 많은 기술과 요소가 포함되며 주요 작업은 사용자가 다음으로 이동할 수 있도록 하는 것입니다. 원하는 페이지그리고 정보를 얻습니다.
오랫동안 사이트에서 필수였던 이러한 요소 중 하나는회사 로고를 클릭하면.
예를 들어 여기에서 로고를 클릭하면 시작 페이지로 돌아갑니다.
이 기술은 이미 사용자에게 친숙하며 사이트의 모든 페이지에서 홈 페이지로 돌아갈 수 있습니다.
두 번째 "클래식" 요소는상위 메뉴 .
헤더 아래에 있으며 사이트의 주요 섹션으로 연결되는 버튼 또는 링크로 구성됩니다. 이러한 메뉴는 하위 섹션 또는 개별 페이지로 연결되는 드롭다운 목록이 있어 더 복잡할 수 있습니다.
지난 몇 년 동안 또 다른 기술이 대중화되었습니다.햄버거 메뉴, 모든 링크가 도식적인 세 개의 수평 대시에 숨겨져 있습니다. 이 요소는 처음에는 다음에만 살았습니다. 모바일 기기, 하지만 이제는 데스크톱 버전의 사이트에서 점점 더 일반적입니다.
또한 일부 사이트에서 볼 수 있는세로 메뉴. 최상위 메뉴가 필요한 모든 항목에 맞지 않거나 사용자가 일부 제목으로 더 쉽게 이동할 수 있도록 해야 하는 경우 가장 자주 사용됩니다.
아니면 아무 것도 없이 스스로 살 수 있습니까? 가로 메뉴페이지 상단에 있습니다. 그리고 왼쪽과 오른쪽에 다음과 같은 몇 가지 메뉴가 있을 수도 있습니다.
(마이크로 마크업)은 페이지 계층 구조를 설정할 뿐만 아니라 원하는 섹션, 또는 모든 페이지에서 기본 페이지로:
기사 내 링크사이트의 다른 페이지로 이동 - 이것들도 탐색 요소입니다. 예를 들면 다음과 같습니다.
그들은 당신이 앞으로 나아가는 데 도움이 될 뿐만 아니라 SEO 관점에서도 좋습니다. 이 기술을 사용하면 조회된 페이지 수를 늘릴 수 있습니다.
바닥글의 링크(바닥글, 바닥글)은 또 다른 탐색 요소입니다. 일반적으로 연락처에 대한 링크, 사용자 계약, 사이트 사용 규칙 등은 바닥글에 배치됩니다. 그리고 때때로 당신은 많은 링크를 볼 수 있습니다 다른 페이지카테고리별로 분류된 사이트:
긴 랜딩페이지와 일부 사이트에서는 상단에서 볼 수 있습니다.진행 표시 줄, 주어진 페이지를 얼마나 스크롤했는지 보여줍니다:
양식이 길고 여러 단계로 나누어져 있는 경우 진행률 표시줄은 신청서 및 등록 양식에서도 찾을 수 있습니다.
이렇게 하면 페이지 자체를 더 쉽게 탐색할 수 있습니다. 끝 부분까지 볼 수 있습니다. 또한 방문자가 시작한 일을 마치도록 만드는 작은 심리적 속임수이기도 합니다.
에 긴 페이지방문 페이지에서 또 다른 훌륭한 탐색 요소를 찾을 수 있습니다.빠르게 맨 위로 돌아가기 위한 버튼:
이 버튼을 사용하면 페이지 맨 위로 빠르게 돌아갈 수 있습니다.
상위 메뉴, 연락처 또는 기타 중요한 정보끊임없이 우리 눈 앞에 있었고, 소위 "sticky header" 또는 "sticky navigation bar"가 사용됩니다. 사용자가 아래로 스크롤하는 동안 페이지 상단에 계속 유지됩니다.
여기에서는 항상 눈 앞에 검색, 기본 페이지로 돌아갈 수 있는 로고 및 작은 메뉴가 있습니다.
이 모든 요소를 의미 있고 유익하게 사용하는 방법은 무엇입니까?
사이트 탐색을 쉽게 만드는 방법
사이트에서 탐색 작업을 할 때 다음과 같은 간단한 규칙을 기억하고 사용하십시오.기본 페이지에서 사이트의 모든 페이지로 사용자는 최대 3회의 클릭에 도달해야 합니다.. 그 반대.
1. 홈페이지 로고를 우측 상단에 배치.
이것은 일반적으로 인정되는 표준이며, 그럴만한 이유가 있습니다. 바로 이 위치에서 로고가 눈에 띕니다. 그리고 사용자는 돌아가기 위해 클릭할 항목을 찾을 필요가 없습니다.
2. 1차 및 2차 요소 고려.
상위 메뉴가 기본이 될 수 있습니다. 보조 - 사이드바, 바닥글의 텍스트 내부 추가 링크. 이동 경로는 보조 탐색 요소로도 사용할 수 있습니다.
여기에서 최상위 메뉴는 기본 탐색 요소이고 이동 경로는 보조입니다.
사이트의 가장 중요한 부분을 메인 메뉴로 이동합니다.
3. 그룹화할 수 있는 페이지를 고려하십시오.
모든 것이 상단(또는 측면) 메뉴에 맞지 않는 경우. 예를 들어, 사이트의 일부 섹션이 "정보", "더보기", "더보기" 등의 버튼 하나 아래에 숨겨져 있는 경우 옵션을 종종 찾을 수 있습니다.
Mail.ru 메일은 따라서 회사의 프로젝트를 "숨겼습니다":
4. 정보 링크를 위한 좋은 장소 찾기.
정보 링크는 "연락처", "공개 제안" 등과 같은 것입니다. 사용자는 사이트의 모든 페이지에서 이러한 링크를 찾아야 합니다. 따라서 그들에게 가장 적합한 곳은 바닥글(footer)입니다.
다음은 정보 링크 배치의 생생한 예입니다.
5. 디자인을 잊지 마세요.
모든 탐색 요소는 명확하게 표시되어야 하며 링크는 링크이고 버튼은 버튼이라는 것이 명확해야 합니다. 링크를 색상으로 강조 표시하고 굵게 또는 밑줄로 만듭니다. 사용자가 자신의 앞에 클릭 가능한 요소가 있다는 것을 이해하는 것이 중요합니다. 이 요소는 사용자를 사이트의 다른 페이지로 보냅니다.
여기에서는 메뉴를 성공이라고 할 수 없습니다. 글꼴이 너무 작습니다. 그러나 여기에는 다른 접근 방식이 있습니다. 기본 페이지에서 바로 좋아하는 브랜드의 카탈로그로 이동하거나 할인을 볼 수 있습니다.
6. 새 창에서 페이지를 열지 마십시오.
이것은 사용자를 혼란스럽게 합니다.
7. 추가 요소.
다음과 같은 추가 요소를 고려하십시오."관련 상품", "추천 콘텐츠" 또는 "관련 기사", 사용자가 필요한 것을 더 빨리 찾는 데 도움이 됩니다.
8. 힌트.
탐색 간소화툴팁 사용자가 버튼이나 아이콘의 용도를 이해하도록 돕기 위해:
9. 메뉴는 잘 보이는 곳에 둡니다.
방문자가 각 페이지에서 새로운 메뉴를 찾을 필요가 없도록 하십시오.. 보조 페이지에서 메뉴를 변경하거나 제거하지 마십시오.
10. 연락처를 멀리 숨기지 마십시오.
헤더에 전화번호를 남겨주세요. 콜백 버튼과 온라인 어시스턴트와의 채팅이 즉시 표시되는지 확인합니다. 가장 일반적으로 페이지 하단의 왼쪽 또는 오른쪽에 표시되지만 측면에는 표시되지 않습니다.
주소는 머리글과 바닥글 모두에 남길 수 있습니다. 방문자가 사이트 전체에서 이 모든 정보를 찾도록 강요하지 마십시오.
이러한 모든 기술은 사이트 탐색을 크게 단순화하고 더 쉽고 효율적으로 만듭니다.
사이트 호스팅 선택:
탐색 작업을 할 때는 사용자를 가장 먼저 생각합니다.그는 과연 최단 시간에 자신이 찾던 모든 것을 찾을 수 있을까요? 귀하의 사이트뿐만 아니라 귀하의 분야 전반을 처음 접한 사람에게 모든 것이 명확합니까? 페이지가 멀리 숨겨져 있습니다. 최대 세 번의 클릭으로 각 페이지에 액세스할 수 있습니까?
어떤 사이트가 탐색하기 가장 쉬운지 스스로 생각하고 최고의 사이트에서 배우십시오.
자신의 인터넷 리소스 개발에 행운을 빕니다!
안녕하세요 바이크포스트입니다!
시즌이 다가오고 있으며 많은 사람들이 장거리 여행을 위해 오토바이를 타고 여행을 생각하고 있습니다. 많은 옵션을 시도한 결과 가장 저렴하지는 않지만 안정적인 옵션을 선택했습니다. 이에 대해서는 아래에서 설명하겠습니다.
이 시스템의 본질은 전화기와 그 부착물에 있지만 해외에서는 연결이 되지 않는 경우가 많기 때문에 오프라인 내비게이션을 사용합니다. 하지만 왜 그냥 전화를 사용하지 않습니까?! - 당신은 묻고 나는 대답할 것이다:
- 개인 휴대폰을 자주 교체할 수 있습니다(범용 마운트는 매우 불편하기 때문에 각 마운트에 대해 선택하지 않습니다)
- 전화를 받거나 전화해야 하는 경우 어떻게 해야 합니까? 탐색이 손실됨 + 마운트를 제거한 다음 제자리에 다시 넣어야 합니다. 헤드셋이 없거나 헬멧이 제거된 경우 편리하지 않습니다.
- 자주, 개인 전화중고 iPhone 5보다 분명히 더 높은 비용
- 탐색을 위해 전화를 분실/파손하는 것은 새롭고 값비싼 스마트폰만큼 공격적이지 않을 것입니다. + 이 경우에는 백업 옵션항해
- 여행 갈 때 여분의 카메라 폰을 가지고 있으면 항상 좋습니다.
- 끔찍한 화면 품질
- 거대한 본체 크기와 거대한 마운팅
- 제동, 불안정한 시스템 및 부정확한 GPS
- 당신을 실망시키거나 잘못된 순간에 얼어붙지 않는 생산적인 장치
- 멋진 화면가장 어려운 조건에서도 볼 수 있는
- 멀티미디어 플레이어
- 백업 전화
- 백업 카메라
- 장치 교체 없이 섀시 교체
품질을 많이 잃지 않고 무엇을 절약할 수 있습니까?우선 이것은 마운트이지만 실습에서 알 수 있듯이 이러한 마운트는 종종 매우 불편하기 때문에 $ 20보다 저렴한 옵션을 선택하는 것은 권장하지 않습니다. 종종 주유소에서 전화를 휴대해야하기 때문에 휴대 전화를 내부에 단단히 고정하고 제거하기 쉬운 마운트가 필요합니다. 다음은 저렴한 가격에 대한 몇 가지 유사품입니다. iBikeConcole - $39.99; Tigra 스포츠 자전거콘솔 자전거 - 37.90; 라이프프루프 - $29.95; Givi S955B 스마트폰 및 iPhone 5 홀더 - 37lbs. 이 시스템의 사용 용이성은 마운트 선택에 달려 있으므로 이 점에서 너무 많이 절약해서는 안 됩니다.
두 번째 저장 포인트네비게이션 소프트웨어입니다. 여기에는 두 가지 옵션이 있습니다. 가장 저렴하지만 더 복잡한, 무료이고 덜 신뢰할 수 있음. 싸구려 아이폰에 넣어 탈옥해킹된 버전의 소프트웨어를 다운로드할 수 있지만 지도 업데이트에 문제가 있을 수 있습니다. 무료 옵션이것은 탐색을 위해 무료 소프트웨어를 사용하고 있지만 여기에서도 모든 것이 그렇게 간단하지 않습니다. 난 절대 하나만 의지하지 않아 탐색 프로그램그리고 나는 항상 몇 개 더 가지고 있습니다..
제 경험이 유용하기를 바랍니다. 이 시스템으로 3시즌을 여행했는데 가격 빼고는 객관적인 단점을 드러내지 않았습니다. 이 시스템의 본질은 좋은 하드웨어, 화면, 마운트에 있다는 것을 상기시켜 드리겠습니다. Android 스마트폰에 정말 좋은 마운트를 찾으면 댓글로 공유해 주세요. 안드로이드 스마트폰그들은 여전히 온보드 컴퓨터의 기능을 수행할 수 있지만 완전히 다른 이야기입니다.
그런 무리가 오토바이에서 어떻게 생겼는지에 대한 아이디어를 얻기 위해 Google에서 몇 장의 사진.
웹사이트 탐색은 UX 디자인의 중요한 측면이 되었습니다. 이는 사이트에 도움이 될 수도 있고 피해를 줄 수도 있습니다. 탐색은 집의 지원에 비유될 수 있습니다. 기초 계획이 제대로 개발되지 않으면 건물 전체가 위험에 처하게 됩니다.
탐색은 사이트마다 다를 수 있습니다. 올바르게 수행하는 방법에 대한 특정 지침은 없습니다.
네비게이션이란?
"내비게이션"이라는 용어는 다양한 방식으로 해석될 수 있습니다. 대체로 사용자가 추가 클릭 없이 원하는 것을 찾을 수 있도록 하는 사이트의 핵심 부분입니다. 방문자를 가장 중요한 정보로 안내합니다.
탐색 차트를 준비하는 데 어떤 질문이 도움이 될까요?
누가 당신의 타겟 청중그리고 귀하의 사이트의 목적은 무엇입니까?
사이트에는 어떤 정보와 어떤 정보 모듈이 있어야 합니까?
사용자에 대한 중요도에 따라 정보를 어떻게 그룹화해야 합니까?
기능 및 정보 모듈을 트리 구조로 구성하는 방법은 무엇입니까?
탐색 계획
콘텐츠를 구성하는 방법? 요소의 이름을 지정하고 정렬하는 방법은 무엇입니까?
처음부터 정보가 표시되어야 하는 계층 구조에 대해 철저히 논의하십시오.
콘텐츠로 작업합니다. 카드 정렬을 사용하면 디자이너가 디자인을 시작하기도 전에 질문에 대한 답을 찾을 수 있습니다.
그런 다음 구조를 관리하십시오. 다음을 사용하여 사이트맵 또는 목록 만들기 다른 수준정보. 탐색은 가능한 한 쉬워야 합니다. 모호한 메뉴 제목이 있는 과부하된 페이지는 사이트 사용을 복잡하게 만듭니다. 탐색 메뉴를 만들 때 사용자의 언어로 말하십시오.
마지막으로 탐색 메뉴 항목, 유형 및 디자인을 정의합니다.
사이트의 탐색 모양을 정의하는 표준은 없습니다. 오히려 어떤 종류의 사이트를 만들고 있는지, 사용자에게 어떤 메시지를 전달하고 싶은지, 어떤 목표를 달성해야 하는지 이해하는 것이 중요합니다. 예를 들어 온라인 상점 사이트를 만들 때 방문자가 가능한 한 빨리 올바른 제품이나 서비스를 찾아 구매할 수 있도록 하는 알고리즘을 사용할 수 있습니다. 프로모션 사이트의 경우 정보에 대한 빠른 검색에 집중하고 사용자를 참여시킬 수 있습니다. 게임 프로세스더 쉽게 탐색할 수 있도록 주요 요소를 단순화합니다.
탐색 모음 디자인 트렌드
프로젝트에 사용할 수 있는 몇 가지 인기 있는 사이트 탐색 유형이 있습니다. 어느 것을 선택할지는 당신에게 달려 있습니다.
수평 또는 수직?
가로 및 세로 탐색 중 선택은 디자인 기능, 사용성 및 콘텐츠 목적을 기반으로 하는 여러 요소에 의해 결정됩니다. 소규모 사이트가 가장 자주 선호됩니다. 수평 패널페이지 헤더에서 탐색하는 반면 대기업 사이트에서는 가로 막대와 세로 막대를 모두 사용합니다.
큰 드롭다운 목록
크기가 조정된 드롭다운은 기본 탐색 모음에서 "드롭아웃" 또는 "날아가는" 메뉴 모음입니다. 이러한 유형의 탐색은 모든 사이트에 적합하지 않습니다. 드롭다운 목록의 주요 장점은 한 번에 많은 링크를 표시할 수 있다는 것입니다. 그렇다면 어떤 경우에 필요할 수 있습니까? 큰 드롭다운 목록은 표준 탐색 메뉴에 맞지 않을 것 같은 방대한 범주 목록이 있는 온라인 상점에 적합합니다. 따라서 포괄적인 범위의 서비스를 제공하는 다른 사이트에서도 이러한 탐색을 성공적으로 사용할 수 있습니다.
고정("고정")
고정 또는 고정 탐색 모음은 페이지를 스크롤할 때 사라지지 않습니다. 올바르게 이러한 탐색은 클릭 유도문안이 기본 패널에 있는 사이트에서 사용됩니다.
체적 바닥글
우리는 바닥글에서 법률 정보, 뉴스레터 구독이 있는 위젯 또는 소셜 미디어 아이콘에 대한 링크를 보는 데 익숙합니다. 많은 콘텐츠가 포함되어 있거나 결제 수단으로 아이콘을 표시하는 것이 중요한 온라인 상점인 경우 많은 사이트에 큰 바닥글이 있습니다.
반응형 디자인 탐색
반응형 탐색은 사이트를 보기 좋게 만듭니다. 다른 장치. 모바일 장치에서 막대는 일반적으로 햄버거 메뉴로 축소됩니다. 메뉴 아이콘은 세 개의 가로 줄무늬로 구성되어 있으며 열었을 때 요소가 하나씩 아래에 위치하여 소위 "햄버거"를 형성합니다. 이러한 종류의 메뉴는 너무 많은 공간을 차지하지 않고 모바일 장치에서 더 쉽게 탐색할 수 있도록 만들어졌습니다.
로고를 홈페이지에 링크하기
당연하게 들리지만 여전히 이 규칙을 무시하는 사이트가 있습니다. 로고를 클릭하면 사용자는 홈 페이지로 이동하기를 기대합니다. 이는 일반적인 관행입니다.
1 차, 2 차
대부분의 경우 기본 탐색은 다음과 같은 기본 요소로 구성됩니다.
사이트 전체에서 동일하게 보입니다. 일반적으로 메인 메뉴는 페이지 상단 중앙, 왼쪽 또는 오른쪽에 있습니다. 보조 탐색은 추가 요소로 구성되며 일반적으로 페이지 중간에 있으며 해당 디자인에서 강조 표시되지 않습니다.
상위 10개 웹사이트 탐색 디자인 아이디어를 살펴보겠습니다.
유형: 수직, 적응형.
왼쪽 메뉴 아이콘을 클릭하면 메인 메뉴가 페이지 중앙으로 이동합니다.
2.WE3
유형: 고정, 수직; 오른쪽 상단에 있습니다.
사이트 디자인은 대화식입니다. 페이지를 스크롤하면 새로운 정보가 나타납니다.
유형: 적응형, 수직; 왼쪽에 위치.
메뉴 아이콘에서 확장되는 왼쪽 패널의 탐색은 에서 보던 것과 유사합니다. 모바일 버전대지. 내비게이션은 탑승 구역의 왼쪽에 있으며 쉽게 볼 수 있습니다.
4 케네디 센터
유형: 가로, 드롭다운 목록.
JFK 센터 웹사이트는 두 가지 방법으로 탐색할 수 있습니다. 이미지를 드래그하거나 가로 메뉴를 사용하는 것입니다.
5. 비앤오 플레이
유형: 고정, 적응형, 수평.
사이트는 제품으로 사용자의 관심을 끌기 때문에 탐색 모음은 매우 간단합니다.
유형: 고정, 수평, 3D 바닥글, 반응형, 드롭다운
주요 기능과 방대한 드롭다운 목록이 있는 페이지를 길게 스크롤하면 사용자가 원하는 페이지로 이동합니다.
7. 아드리아 해 럭셔리 호텔
유형: 고정, 수평, 확장 가능한 드롭다운 목록, 3D 바닥글.
이 사이트에서는 페이지를 아래로 스크롤하거나 고정 메뉴를 사용하여 필요한 것을 찾을 수 있습니다.
유형: 고정, 적응형, 수평, 3D 바닥글.
Kalios 탐색은 왼쪽 상단에 있습니다. 메뉴 아이콘을 클릭하면 원하는 상품에 마우스를 올려놓으면 상품에 대한 정보를 얻을 수 있습니다.
이 사이트는 화살표를 클릭하여 관리할 수 있습니다. 사용자는 박물관처럼 사이트를 걸을 수 있습니다. 각 방의 페이지를 스크롤하여 정보를 얻을 수 있습니다.
10 호주 발레
유형: 고정, 적응형, 큰 드롭다운 목록
결론
사이트에서 사용할 수 있는 탐색 유형은 많습니다. 동시에 완벽한 탐색을 만들기 위한 만능 방법은 없습니다. 그것은 모두 귀하의 필요 또는 고객의 희망에 달려 있습니다. 우리의 사례가 당신에게 영감을 주었기를 바라며, AGENTE 팀이 당신의 가장 대담한 아이디어를 실현하는 데 도움이 되기를 바랍니다.