웹사이트 디자인: 웹 탐색 디자인 두 가지 또는 세 가지

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

탐색 웹 응답 사용자에 역할 "내가 누구?" 할 내가 어디에서 "? 역할 어디 나 가입니다. " 좋은 탐색 웹사이트의 주요 초석입니다. 웹사이트 또는 웹 페이지 디자인을 시작할 때 자주 직면 하는 디자이너 첫 번째 도전 이다.

탐색 디자인의 01 정보 아키텍처

정보 아키텍처 결정 탐색, 탐색의 역할을 극대화 하기 위해, 콘텐츠를 정보 구조 설계 하기 전에 자연 빗 웹 사이트, 정보 기능 전송의 구조. 얼마나 많은 계층적 관계는 웹 페이지 구조에? 거기 상단은 낮은 수준의 관계?는 다양 한 유형의 레이블 사이의 관계 측면-의해-측면 관계 또는 그들은 관련? 병합 될 수 있는 각 아이에 어떤 항목이 있습니까? 관계의 단순한 논리를 피하기 위해, 심지어 페이지 탐색 하위 수준 3 또는 심지어 비즈니스 관계에 따라 레벨 4 또는 생산 및 사용자 인식 정보의 카테고리와 일치 하지 않습니다. 각 추가 수준 인지 차원, 여러 번, 뿐만 아니라 사용자의 작업의 복잡성을 전체 네비게이션 시스템의 각 추가 수준을 추가 하려면 탐색의 증식, 나중에 웹 페이지의 유지 보수에 큰 비용을가지고. 다음 두 개의 아이콘 만들 분명히 사용자에 게 다른 경험을 제공 하는 페이지의 같은 수의 다른 배치.

웹 인터랙션 디자인에 "3 번" 원리는, 사용자는 원하는 찾을 수 없습니다 3 클릭 하거나 기능을 완료 후 정보를 포기 하도록 선택할 것 이다. 따라서 탐색에 대 한 가장 기본적인 것 사용자가 페이지에 하 고 그들의 목표는 알 것 이다. 폭과 깊이 탐색 디자인의 보기는, 일반적으로, 폭은 깊이 보다 더 나은. 깊은 구조의 서로 다른 수준 사이 선택 방향을 잃을 가능성이 높습니다 그리고 손실 얻을 수 있습니다. 또한 폭에 확산 되지 않습니다 하지만의 너무 넓은 든 지 너무 많은 콘텐츠를 표시 하는 사용자를 놀라게, 그들이 "선택 증후군."에서 고통을 강요 하는

사용자의 인지를 더 잘 이해 하거나 심지어 디자이너의 요구에, 생성 및 탐색의 얼굴 이라고는 일반적인 방법은 카드 분류입니다. 카드 분류 방법의는 매우 간단 하 고, 우선 빈 카드를 다른 카드에 대 한 정보의 같은 크기의 일부를 준비 하, 자신을 분류 하는 참가자도 적절 한 설명 지도 가질 수 있도록. 각 테스트의 수는 2, 4, 사이 좋은 사람들의 수는 너무 작은 너무 사용자 간의 토론을 생성 하 많은 것에 게 토론 혼란, 어려운 제어. 이것은 웹 사이트에서 공통 또는 다른 구조를 조정 하기 위한 기준으로, 간의 인식 차이 찾기 위한 모든 정보, 분류의 진정한 사용자 습관을 이해 하는 테스트 방법의 초기 단계에서 계획 이다.

02 대화형 스타일 탐색 디자인

웹 네비게이션의 가장 중요 한 기능은 친화적인 방법으로 사용자에 게는 웹사이트의 콘텐츠 정보를 표시 하는 것입니다. 귀하의 웹 사이트에 대 한 정보 아키텍처를 결정 한 후 필요에 따라 적절 한 탐색 스타일을 취해야 한다. 하지 3,721, 탭 형 탐색, 느낌 없는 빔 같은 탐색은 웹 페이지를 하 고 있는 그 말을 당황 합니다. 먼저 우리 탐색의 가장 일반적인 형태의 이해:

1. 단계 탐색 보통 이루어져 있다 텍스트 레이블 및 링크를 함께 화살표, 뒤로. 마법사, 지불 등의 페이지 프로세스 연동, 온라인 읽기, 등, 다른 후 한 페이지에 대 한 액세스를 제공 하기에 적합 합니다.

(그림: Google.com 등록 페이지)

2. 페이징 탐색 (페이징 탐색) 자주 검색 페이지에 표시 하 고 한 번에 표시 될 수 있는 결과의 수는 일반적으로 제한 초과의 결과 새 페이지에 표시 됩니다. 가장 간단한 호출기 페이지 번호 매기기 배포 탐색 이다.

(여기 사진: 알리 바 바)

3. 이동 경로 (이동 경로 트레일에서) 요소와 노드의 큰 문자열의 구성 된 사이트를 방문 사용자의 경로 표시 합니다. 각 노드를 이전에 방문한 페이지 또는 상위 항목 구분 기호, 일반적으로 더 큰 연결 되어-보다 (>), 콜론 (:) 또는 수직 (|).

(그림: apple.com)

4. 나무 같은 탐색 (탐색)에 계층 구조에 액세스할 수 있습니다. 작은 아이콘은 종종 더하기와 빼기 또는 작은 화살표를 확장 하 여 하위 노드를 닫습니다 포함 되어 있습니다.

5. 사이트 맵 사이트의 상하의 간략 한 개요를 제공합니다. 대 한 다양 한 콘텐츠 및 다양 한 사용자 그룹 사이트. 그래서 그것은 간단 하 고 쉽게 스캔을 해야 합니다. 레이블을은 페이지에 머리글을 일치 해야 합니다. 사이트 맵, 건물의 세분성을 고려, 일반적으로, 사이트의 구조 2 ~ 3 레벨 표시, 페이지에 대 한 링크를 제공 해야 합니다. 바닥글 사이트 맵, 오늘날의 대형 및 중소 사이트, 사이트 맵 부분 전체 지도에 대 한 링크를 포함 하 여 페이지의 하단에 표시의 방법입니다.

(그림: Flickr.com)

6. 탭 탐색 (탭된 탐색) 탐색 모음 + 탭의 동등 물 이다. 때로는 수직 막대로 구분 된 한 줄에 하이퍼링크를 연결할 탐색 바의 가장 간단한 형태가입니다. 탭 탐색은 구조 하는 사이트의 콘텐츠 및 다중 탐색 모음 탭 컨트롤을 결합 한 제품.

(그림: motorola.com)

Amazon.com 아마 탭 탐색을 사용 하 여 첫 번째 대형 전자 상거래 사이트 이며 현재 아마존 수직 메뉴 + 동적 메뉴를 사용 합니다.

(그림: Amazon.com 1998)

7. 수직 메뉴 (수직 메뉴)은 일반적으로 웹 사이트 링크의 왼쪽 또는 오른쪽 열에 배치 됩니다. 수직 메뉴는, 확장 하 고 더 이상 레이블 허용 쉽게 수평 탐색 보다 더 융통성이 있다.

(그림: apple.com)

8. 동적 메뉴 떠오른된 메뉴, 풀 다운 메뉴 또는 팝업 메뉴 라고도 합니다. 사용자는 메뉴를 표시와 함께 작용 해야 합니다. 가장 일반적인 상호 작용 마우스 hover 또는 클릭 합니다.

(그림: Amazon.com)

9. 드롭-다운 상자 (드롭 다운 메뉴) 탐색 풀 다운 메뉴 기능을 하나 이상의 옵션을 선택 하면 새 페이지에 사용자를가지고 활용 합니다.

(그림: dell.com)

10. 레이블 클라우드 (태그 구름) 알파벳 순으로 링크를 나열 하 고 글꼴 크기 및 색 레이블 인기에 따라 결정 합니다. 태그 구름의 디자이너는 대화형 디자이너 스튜어트 버터 필드입니다. 태그 구름의 첫번째 사용은 플 리 커 이다.

(그림: Flickr.com)

탐색 디자인의 03 시각 디자인

애플은 자주의 디자인 세계, 그리고 그들의 모든 시각적 업데이트 베인 또는 반복 트리거 인터넷 모방 출 격. 여기, 그것은 애플의 주요 스크린샷 수집 visual 수준 업데이트 1997 년부터, 그리고 보이지 않는 탐색 및 웹 사이트의 비주얼 시스템의 반복에서 변화에서 Apple.com 역 년에서.

애플 1997:

아래 화면에서 애플에서 나온 시각적 수준에서 분별 하기가 어렵습니다. 그 당시, 인터페이스는 주로 텍스트 체인, 탐색만 간단한 수직 메뉴 구성 된다.

애플 1998:

애플 웹 사이트 스타일의 원래 레이아웃. 간단 하 고 명확한 시각적 스타일, 구조, 상위 대형 제품 배너 포스터 + 하단 3 열 형태의 제품 디스플레이 위아래로.

애플 2000:

고정 가기 첫 번째 탭 유형 탐색. 몇 가지 주목할 만한 기능을 확인 하 고 있습니다.

1 애플 레드 로고, 홈페이지를 표시입니다.

2 가로 탭 수준 2 탐색

3 백색 유리 질감 탐색 비주얼 스타일,이 유리 텍스처는 오랜 시간에 대 한 웹에서 대중적 이다.

2001 년 애플:

비주얼 및 인터랙티브 형태의 탐색 많이 변경 되지 않았습니다 하지만 빨간색 로고 파란색으로 바뀝니다. 그리고 흰색 유리 종 계속 전체 사이트 인터페이스와 컨트롤 느낌.

당신은 발견할 것 이다, 검색 버튼을 포함 하 여 및 다른 컨트롤 필렛 유리 질감 처리를 수행 하 고 프레임의 지도 또한 해당 필렛 처리를 수행.

추 신, 년 설치 된 1000 노래...

애플 2002

네비게이션 시스템 로고 색상 그레이로 대체 유리 텍스처 그라디언트 조정의 많은 했다. 또한 주목할 만한 텍스처 wiredrawing isync 패널 금속 이다.

애플 2004:

네비게이션 시스템의 시각적 디자인은 여전히 미세 남아 있습니다. 전체는 여전히 많이 변경 되지 않았습니다.

애플 2007 년:

탐색의 2007 년 완전히 변경 됩니다. 회색 질감 성능 시스템을 사용 하 여. 애플의 로고의 섬세 한 질감 원래 흑백 처리 기술을 대체합니다. 탭 수준 두 탐색 제거.

전체 화면을 강조 하는 배너 홈페이지 사용 하는 새로운 제품을 소개 합니다. 애플의 카피 라이팅 고전 이기도합니다.

애플 2010 년:

애플 2011 년:

애플 2012:

2010-2012 탐색을 통해 탐색 구조는 제품의 차원으로 나누어져 있습니다. 자체 제품의 이름, 그들이 알고 싶어 하는 제품에 직접 사용자는 사이트를 입력 될 수 있습니다.

크기, 레이블, 이름에도 순서 변경 되지 않습니다. 탐색 및 검색 상자의 시각적 차원에서 주요 변화.

시각: 1 본문에서에서 이동 단일 회색 그라데이션 어두운 회색 텍스처 그라디언트 어두운 회색 텍스처 그라디언트를 합니다.

2 반대로 간단한 회색 그라데이션으로 풍부한 질감에서 애플 로고 질감 이다.

3 글꼴 레이블 및 점차적으로 아이콘 안티 화이트 처리, 검색 및 레벨을 어두운 배경.

검색창: 1 검색 상자 및 전반적인 디자인의 조합의 시각적 수준에서 탐색. 더 간단한 화이트 바닥 처리입니다.

2)만 검색 아이콘을 유지, "검색"을 제거

3 폭 증가 탭, 검색 상자 너비를 압축. 마우스를 클릭 후 검색 상자 검색 상자 기본 및 입력의 사용 상태를 구분 하기 위해 자동으로 확장 합니다.

일반 사용자의 관점에서 apple.com를 사용할 때마다 신속 하 고 효율적인 느낌을 처음으로 느낄 수 있습니다, 그리고 그것을 변경 하는 내용을 최근 했다 그냥 당신이 알고 싶은 게 원하는 있다. 그것은 메모리에 뭔가 찾기 어려운, 검색은 마지막 예리한 무기. 각 색상 제어, 멋진의 각 복사본의 각 픽셀은 얇은 취향의 디자인 가치가 있다.

위의 나 디자인 탐색에서 몇 가지 맹점 이며 축적을 발견. 중국의 개정된 프로젝트의 무결성 가장 논의 비주얼 스타일을 대화형 양식에서 정보 수준에 구조에서 탐색입니다. 탐색의 개념의 끝에 토론을 흐리게, 종종 각 토론 끝에 스스로 게 물어: 탐색 이란 무엇입니까? 디자인 하는 과정에서 대화형 제어의 기본 개념은 종종 소스 추적 해야, 그것은 자체 더 명확 하 게 것입니다. 여기 그냥 넣어도 디자인 탐색 발생 의심과 아이디어를 요약 하면, 약간의 도움으로 탐색의 디자인에 있는 모든 사람에 대 한 희망 하는 과정.

좋은 네비게이션 키 문제를 해결할 수 있는지 여부입니다. 더 단단한, 명확 하 고 더 의미 있는 탐색을 만들기 위해 "명상" 탐색을 하지 마십시오.

리소스:

1. 일부 사진과 텍스트 참조 "웹 탐색 디자인" 저자: 제임스 Kalbach 번역: 리

2. 카드 분류-위키백과

찾아보기-> 블로그 링크 http://blog.163.com/lan_lan_321/blog/static/13787885720124915148408/

출처: http://www.aliued.cn