성공적인 탐색 메뉴 아이디어 및 영감을 디자인하십시오
웹 사이트의 탐색 메뉴는 거리의 도로 표지 또는 쇼핑몰의 수준 디렉토리와 같습니다.. 자신이 어디에 있는지 알지 못하면 목적지에 도착할 수 없습니다.. 실제 생활과 마찬가지로 웹 디자인의 탐색은 매우 중요하며 사용자 경험뿐만 아니라 웹 사이트의 유용성에서도 중요한 역할을합니다..
요즘에는 흥미롭고 독창적이며 독특한 디자인으로 다양한 유형의 탐색 메뉴를 볼 수 있습니다. 그러나 웹 사이트에서 효과적인 탐색 방법은 어떻습니까? 어떻게 보일까??
오늘 웹 디자인에서 내비게이션의 중요성에 대한 관찰과 지식을 나누고 싶습니다. 웹 사이트 탐색 및 유용성을 향상시키는 데 사용할 수있는 몇 가지 간단한 팁을 알려 드리겠습니다. 또한 다음 디자인을 계획하는 방법에 대한 아이디어를 줄 수있는 효과적인 탐색 메뉴의 몇 가지 예가 있습니다..
정보 아키텍처
탐색 계획은 정보 아키텍처로 시작해야합니다. 앉고 앉는 것이 중요합니다. 웹 사이트의 정보 아키텍처에 대해 브레인 스토밍. 웹 사이트가 제공하는 기능의 종류, 가장 중요한 것, 정보 계층의 하위 수준에 배치 할 수있는 기능을 파악해야합니다.
정보 아키텍처 포함 기능, 사용자 요구, 사이트 맵, 테스트 및 와이어 프레임. 정보 아키텍처에 대한 Cameron Chapman의 기사에서 정보 아키텍처에 대한 자세한 내용을 볼 수 있습니다. 101 : 기술 및 모범 사례.
사용자가 사용할 수있는 기술 사용
Flash, JavaScript, jQuery 또는 네비게이션 바를 구축 할 때 웹 사이트 탐색에 대한 액세스를 방해하는 위험 요소를 피하거나 적어도 정상적으로 성능을 저하시킬 수 있는지 확인하십시오..
에 대한 자세한 내용은 자바 스크립트의 우아한 저하, CSS와 자바 스크립트를위한 10 가지 유용한 대체 방법에 대한이 게시물을 확인하십시오..
간단하고 사용자 친화적 인 용어 사용
사용하는 것이 낫다. 간단하고 분명한 용어 및 알아 내기 쉬운 용어 귀하의 탐색 메뉴에 대한 업계 전용 용어를 유지하는 것보다. 알아내는 데 2, 3 초 이상 걸리는 링크는 사용하기에 적합하지 않을 수 있습니다..
사용자가 링크를 클릭해야 링크가 무엇을 연결하는지 알아 내면 방문자의 나쁜 사용자 환경에 영향을줍니다.
예제들
Larissa Ness 웹 사이트의 탐색 메뉴에있는 용어는 이해하기 쉽고 일반적으로 사용하기 쉽습니다. 사용자는 이미 이와 같은 메뉴에 대한 경험이 있으므로 혼란스럽지 않습니다..
일반적인 용어가 사용 된 깨끗하고 명확한 웹 사이트 탐색 메뉴의 다른 좋은 예가 csupport입니다..
광고 대행사 Eighty8Four는 방문자에게 혼동을 줄 수있는 "쇼룸"이라는 용어를 사용합니다. 이 용어는 포트폴리오 또는 업무를 의미 할 수 있지만 명확하지 않으며 방문자는 클릭하여 체크 아웃 할 수밖에 없습니다..
탐색 디자인 표준화
동일한 탐색 모델 사용 모든 페이지에서 일관된 디자인이 없으면 사용자는 실제로 그가 다른 웹 사이트에 있다고 생각할 수 있기 때문에 매우 중요합니다. 사용자가 길을 잃지 않고 쉽게 웹 사이트를 탐색 할 수 있도록 동일한 탐색 모델을 사용해야합니다..
Bluegg, 아래에 표시된 것처럼 모든 서브 페이지에서 동일하게 유지되는 간단하고 깨끗한 탐색 디자인을 사용합니다. 유일한 차이점은 방문자가 현재 방문중인 페이지를 보여주는 색상 표시기입니다..
현재 위치 표시
사용자가 그가 어디에 있는지 항상 알도록하는 것이 중요합니다. 당신은 다음과 같이 할 수 있습니다. 링크의 배경 변경, 페이지 이름의 색깔 또는 텍스트를 굵게 표시 내비게이션 메뉴에서 다른 사람과 다른 것으로 만들기.
오스틴 이스트 사이더스 다른 색상과 배경을 사용하여 사용자가있는 페이지를 나타냅니다. 이 표시기는 미묘한 설계 변경으로도 작동 할 수 있습니다. 예를 들어, 다른 탐색 배경 다른 메뉴 항목이 깊이있는 느낌을줍니다..
미디어 외과 열려있는 서브 페이지의 표시기로 어두운 색상을 사용합니다. 간단하지만 효과적인.
웹 규칙 사용
그것은 사용하기 쉽고 직관적 인 웹 사이트 탐색에 관한 것입니다. 웹 컨벤션을 사용하면 디자이너가 자신의 디자인을 쉽게 작업 할 수 있습니다. 대부분의 사용자는 홈페이지로 돌아가려면 웹 사이트 로고를 클릭하므로 로고를 디자인하면됩니다..
네가하지 않으면, 당신은 그들에게 새로운 것을 배우기 위해 시간을 보내고 있습니다. 또는 어떤 경우에는 그들이 일반적으로 받아 들여지는 항법적인 규범이 될 것으로 기대하는 것을 제공하지 않음으로써 불편을 겪는다..
웹 컨벤션에 대한 자세한 내용은 다음을 참조하십시오.
- 10 웹 디자인 대회
- 웹 디자인 휠을 재발견하지 마십시오.
- 웹 컨벤션으로 디자인
디자인 삽입 오늘날 가장 많이 사용되는 웹 컨벤션 중 하나 인 로고를 왼쪽 상단에 배치합니다..
아담스 창조 가장 일반적인 웹 컨벤션 중 하나를 사용합니다. 로고는 웹 사이트의 왼쪽 상단 모서리에 배치되고 홈페이지로 연결됩니다..
그것을 시험하십시오 : 제 3자를 포함하십시오
이전에 인터넷을 사용한 적이있는 사람과 항상 네비게이션 디자인을 테스트하십시오. 디자인 프로세스와 관련이없는 사람들을 테스트 할 수 있습니다.. 탐색 할 때 환경 설정 준수 귀하의 사이트를 통해 그들이 찾고 있었던 페이지를 찾는 데 걸린 시간을 분석하십시오..
정확성 향상, 더 많은 사람들의 참여, 데이터 수집, 분석 및 요약 더 나은 적합을 위해. 필요한 경우 사후 검사를 수행하십시오. 이 테스트를 거치지 않고 예상치 못한 아이디어와 입력을 얻을 수 있습니다..
컨텍스트 제공
콘텐츠 및 탐색 기능과 일관성을 유지하기 위해 웹 사이트 사용자가 필요한 것을 신속하게 찾을 수있는 환경을 제공합니다. 링크 한 콘텐츠와 관련된 작은 아이콘이나 짧은 설명을 배치하여 페이지의 개요를 제공 할 수 있습니다..
내 자신의 자전거 간단한 아이콘을 사용하여 특정 서브 페이지에서 찾을 수있는 것에 대한 정보를 사용자에게 제공합니다..
사라 파 멘터 메인 네비게이션에서 짧고 멋진 캡션을 사용하여 메인 네비게이션이 연결되는 서브 페이지에 대한 정보를 제공합니다..
의 SEO 목적
Google은 일관된 탐색을 좋아합니다. 사용자가 웹 사이트를 탐색하는 방법에 대한 아이디어를 이해하고 얻을뿐만 아니라 검색 엔진에서 웹 사이트의 색인을 생성하기위한 일관된 탐색 기능을 갖는 것이 좋습니다..
검색 엔진 로봇은 웹 사이트를 크롤링하여 웹 사이트를 색인하고 검색 엔진 결과 페이지에 링크를 삽입합니다. 눈에 보이고 싶다면 좋은 탐색 디자인에주의하고 더 많은 트래픽을 얻으십시오..
무료 탐색 스크립트 (CSS 및 jQuery)
다음은 프로젝트에 유용한 최신 탐색 메뉴의 간단한 목록입니다. 이 스크립트를 사용하면 멋진 기능을 추가하고 사용하기가 즐거워서 제품의 사용자 만족도를 더욱 향상시킬 수 있습니다..
HTML 및 jQuery를 사용하는 XML 기반 수직 뉴스 Scroller 스크립트 : vScroller
여과
페이지 스크롤러
타임 라인 포트폴리오
수평
CSS3 최소 탐색 메뉴
CSS3를 사용한 서클 탐색 효과
jQuery를 사용한 그리드 탐색 효과
아쎈서
우아한 CSS3 탐색 메뉴 만들기
아름다운 수평 네비게이션 쇼케이스
그리고 마지막으로 중요한 것은 몇 가지 고무적인 수평 탐색 메뉴입니다. 이 놀라운 웹 사이트와 탐색 메뉴 솔루션을 확인하여 프로젝트에 대한 새로운 아이디어를 찾으십시오..
찬물
블룸 검색 마케팅 Inc.
알렉스 페레즈
리 보르 즈 줄카
하우 스카!
골든 아일 즈
닐 카펜터
마크 토마스
3D 폴리스티렌
리히텐 테커
어드벤처 월드
Arbutus 사진
OMDRL
4 파인 맥주
헌터 와인
잘하면이 기사가 유용하고 유익한 정보가 될 것입니다. 의견이 있거나 동의하지 않는 경우 댓글 섹션에 의견을 말하십시오..
