웹사이트 디자인 분석: 좋은 시각적 수준 설정

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

인터넷 폭발의 성장, 단일 페이지를 탐색 하는 사용자 하지 우리가 읽기 짐작할에서 문서 왼쪽에서 오른쪽, 위에서 아래로 하나씩 한 보기, 왜?

시각적 계층은 중요 한 이유

왼쪽에 디자이너는 사용자가 검색, 기대 하는 방법 이며 오른쪽은 t 나 좀 하 게 돈에서 사용자 발췌에 대 한 실제 검색 스타일

사용자 자신의 구체적인 목표는, 뉴스, 쇼핑, 보기 새 메시지, 같은 웹사이트 하지만 정보의 양이 너무 큰 경우, 많은 양의 시간을, 주류 사용자 특성을 탈취 하기 위하여 사이트를 필요, 집중할 것 이다 그, 그들의 자신의 목표 또는 재미 있는 포인트를 찾을 수 사용자에 그것은 다음 행동을 생성 하거나 검색 계속 또는 당신은 떠날 거 야.

제한 된 사용자 시간을 더한 인터넷 정보는 거 대 한,이 두 가지 이유로 사용자 대상 수를 신속 하 게 찾을 수 있도록 사용자에 게 좋은 시각적 수준 설정에 비주얼 디자이너를 테스트 하는.

둘째, 역할의 좋은 시각적 수준의 설립

1. 인식의 효율성 향상

2, 관객의 관심을 불러

몇 가지 예를 제공:

때 사용자가 거리 수준 검색, 필요한 정보, 사용자가 그들의 자신의 목표를 효율적으로 찾을 수에 도움이에 특정 한 경우에는 사용자를 표시에 동네에가 게 될 것입니다 왼쪽된 지도 장소 이름, 도시 수준 표시

우리 뉴스를 보고 처음으로 그날의 헤드 라인에 초점을, 편집자 추천, 타임 지 홈 아주 좋은 게 주요 뉴스 및 로고 첫눈에 우리 함께, 기본 및 보조 처리는 매우 분명 하다

쉰들러 리스트의 시각적 수준 사이 강한 대조를 통해, 영화에서 영화의 관객 깊은 인상을 남겼다 고 고전이 될

Iii. 시각적 레벨을 설정 하는 방법

나는 당신의 참고를 위한 3 방향 collated가:

1. 아무것도 표시 않기로 결정

페이지의 단순의 전제는 현재 콘텐츠 정보를 많이 시작 우선 순위를 필터링 하지 않고 디자이너는 제한 된 수의 중요 한 문제 해결에 집중할 수 있도록 주류 사용자에 필요한 가장 자주는

위의 이미지 이며 우리 집 일반적으로 사용 되는 원격 제어, 함수를 사용의 대부분은 거의 한번도 사용, 오른쪽 이미지 전에 간단한 삭제를 할 수 기능 키를 사용 하지 것입니다 후에 대비, 후자 더 편안 하 게-에서 보이는 "단순 처음"

다시 디자인 키의 나머지의 디자이너, 나 원격 제어 사용 하 여 더 간단한, 더 적은 방해 될 것입니다 믿습니다.

Outlook 메일 메시지에 대 한 작업 항목 기본적으로 웹 인터페이스, 숨겨지고 사용자가 메시지를 선택 하는 경우에 메시지의 작업 나타나지, 및 자주 사용된 하는 작업은 "전체 회신 전달" 같은 드롭 다운 메뉴에서 숨겨져 응답 메뉴 아래 그에 집중할 수 정보 및 주요 작업에 더 많은 초점을 사용자가 허용 하는 비-코어 콘텐츠를 숨기는의이 방법

2입니다. 깊은 정보 처리

에 정보 인식 될 수 있도록 주문 하 고 보다 신속 하 게 접수, 우리는 정보를 처리 하는 데 필요, 간단한 텍스트 목록 읽기, 사용자 필요 표면 분석 정보를 사용자에 게 보다 깊이 있는 분석 깊은 인상을 남겼다.

예: 내셔널 지오그래픽 푸른 고래 푸른 고래 및 현재 위협, 푸른 고래 및 다른 생물 및 인공 개체 비교, 파란색 고래, 그리고 비디오의 무게의 직관적인 전송의 이미지의 동적 통해 사이트의 특성을 이해 하는 사람들이 우선 푸른 고래 보호에 대 한 호출 하려면 웹사이트 사용자가 일반적으로 그들은 텍스트를 읽을 수가 없어 경우에 그들은, 전달 하고자 하는 메시지를 이해할 수 있다.

3. 구성 정보

1 식 정보 사이의 관계

정보 간의 관계는 나란히, 관련성, 포함, 원인 및 효과, 각 관계 다양 한 시각적 발현을 통해 전달 될 수 있습니다, 자세한 설명 될 수 있습니다, 몇 가지 실용적인 프로젝트 정보 전과 후 변화를 볼 수의 경우를 처리 하는 과정을 제공 하 고 싶습니다.

협회 정보

백색의 디자인에서 매우 중요 한 요소는, 그것은 매우 직접 영향을 미칠 수 위에서 같이 정보 사이 관계의 이해 하는 사용자의 부적절 한 백색, "추 교통"은 "린 큰 계란"로 이해 하기 쉽게 하기 때문에

정보 나란히

블록 조직에 동시에 소프트웨어의 많은 기능 블록에서 작은 덩어리에 대 한 사용자가 볼 수 있도록 효율성을 개선, 인식의 Excel 인터페이스 등 우리 글꼴 스타일을 편집 하 고 싶을 때 우리가 빨리 찾을 수 두 번째 모듈을 다른 모듈에서 간섭 없이 찾을

사례: 외국 무역 메일 인터페이스 최적화

위의 우리의 대외 무역 메일 인터페이스 현재 상태, 모든 작업이 나란히 배치 하는, 기능에서 증가 함께 사용자 id의 효율성은 크게 감소, 그룹의 작업 프로그램의 최적화와 관련, 그것은 관련성의 사용 및 디자인 정보 관계의 조정

인과 시퀀스 관계 정보

위의 이미지는 제품, 그리고 관계의 순서를 전달 하는 방향과 색상 대비를 통해 주로 우리의 웹 인터페이스에서 효능을 표현 하기 쉬운 캐릭터의 변화를 통해 다이어트 음료 광고

로 서 일반적인 단계 바, 현재 단계 가장 눈에 띄는 초점, 2 수준, 그래서 그 사람들이 느낌 활성화, 단계 통과 회색, 약한 수준에 대 한 실시 되었습니다.

다음 이미지는 페이팔 결제 페이지 최적화 과정, 시각의 오래 된 버전 차이의 계층 구조는 이지만 시력의 라인, 작업 전에 같은 방향, 관계의 순서에서에서 시각적 순서 분명, 사용자의 작업 완료 율을 향상 시킬 수 있는 행동 포인트에 초점의 최적화 작업을 중단

포함 관계 정보

유창 새로운 기업 팀 성공 하지 못했습니다, 하지만 제품 디자인은 아직도 가치가 학습 정보, 관계의 아주 명확한 표현 식의 인터페이스, 화살표 지점, 들여쓰기를 전자 메일.

정보 프레 젠 테이 션의 2 중요 한 수준

정보 간의 관계를 평탄, 초점을 잡고 전체 페이지 및 사용자 계층 여 보조 정보, 이것은 기술의 초점을 재생 하는 단일 페이지의 디자인에 비주얼 디자이너

일부의 경우를 보면, 말 별로:)

위의 그림은 친구나 임대 정보 세부 정보 페이지, 임차인 정보 임대에 대해 가장 우려에: 진짜, 가격, 집주인 정보;의 세부 정보를 보고, 거기 많은 종류, 하지만 세 가지 종류의 정보에 대해 가장 우려 사용자 위치, 점령된 지역의 크기를 한 눈에, 집의 기본적인 정보를 파악 하 고 관심 하는 경우 더 많은 세부 정보를 계속 거주자를 수 있습니다.

위의 다이어그램은 데이터 테이블 최적화 프로세스에 디자이너, 첫 번째 버전은 간단한 정보; 중복 복사본을 제거한 후 목록 및 테이블 자체의 디자인을 약화, 두 번째 버전입니다 상대적으로 분명 제 3 판 굵게, 배열 변경 다시; 복사본의 복제를 줄일 수 있습니다에 초점을 계속합니다 네 번째 버전은 사용자 데이터를 얻기 위해 오랜 시간에 대 한 폼을 사용 합니다 때문에 양식. 사용자 조사에 반영 되어 최고의 버전, 디자인 숨기기, 되는지이 양식을 더 이상 설명 복사 방해의 많은 수에 따라 사용자 후 데이터, 교육의 의미를 다시 한번 보여주는 사용자 마우스, 원하는 정보;에 대 한 액세스를 직접 복사에 초점을 하지 않습니다. 겉보기에 간단한 테이블 키 정보를 파악, 공간 최적화는 여전히 매우 큰.

우리 팀 개정 전에 디자인 레벨의 버전은 명확 하지 않다 Alibaba.com에 의해 제공 된 서비스 소개 페이지, 사용자가 입력 하는 페이지 이해할 수 없는 신속 하 게 정보, 사용자의 첫 인상을 포착 하 여 대조의 크기를 통해 개정 전후를 깊이 있는 이해를 계속 여부를 결정 하는 서비스의 개요 귀하의 요구를 충족 하는 초기 판단 및 사용자 검색 계속 됩니다.

3) 주위 사용자 동작 디자인 수준

이해 전체 페이지 초점 디자인, 하지만 열쇠를 판단 하는 방법의 전제는?이 사용자의 특성을 이해 하는 데 필요 합니다 그가 서는 페이지의 주요 작업에 다음 우리가 옳은 일을 할 그렇지 않으면 계층 감각의 디자인 아니다 반드시 사용자가 있도록 설계 되었습니다.

Alipay는 최근 홈 페이지의 새 버전을 테스트, 우리가 지불 하는 가장 일반적인 온 홈 페이지 작업은 로그인, 그리고 첫 번째 시각적 초점의 이전 버전 탐색 및 고정된 위치에서 목표를 달성 하는 데 필요한 경우 사용자가 찾을 수로 탐색 조금, 홍보 활동, 그것은 페이지의 시각적 초점 되지 해야 사용자는 종종 사이트에서 제공 하는 서비스를 이해 하는 탐색으로 전환, 하지 않는 한이 시점에서 새로운 홈 페이지 약화는 탐색 및 포털의 다른 응용 프로그램, 브랜드 커뮤니케이션 및 로그인 동작, 주류 사용자의 행동 습관과 매우 일치 Alipay 자체를 강화합니다

스타일의 개정의 배경 홍보 팀에서 최근 하지만 또한이 탐색 스타일의 몇 년 동안 계속 배경에 대 한 왼쪽된 이미지와 관련 된 운영 인터페이스, 사용자가 강한 목적, 탐색, 콘텐츠 효율성의 사용자의 인식의 향상에 방해가 됩니다

오른쪽 이미지 사용자 동작 특성, 사용자가 주요 콘텐츠 작업 영역에 집중할 수 있도록 탐색, 디자인을 약화를 기반으로 합니다.

온라인 연구 후 결과 보기: 시각적 약화, 하지만 작업 포털에 대 한 검색에서 네비게이션의 새로운 스타일은 기존 스타일 보다 높은 이며 시간을 찾고 옛 스타일 보다 약간 낮은, 비록 전체 새로운 스타일을 더 나은 성능.

반대로, 만약 우리가 사용자의 행동 특성, 원래 페이지에 새로운 기능을 추가 하는 등의 충분 한 지식이 없어 다음 강화 간과 될 수 쉽게, 예를 들어 우리의 실제 프로젝트에서:

아래 왼쪽된 그림 상자 추가 기능, 현재 조달 공급 업체를 문의에 구매자 그룹을 구축 하 고 지난 콘텐츠를 다시 사용 하는 희망, 내부 토론에서 모두이 옵션 강화, 다른 콘텐츠의 지도자가 될 느낌 이지만 조사 결과 매우 다르다, 사용자가 수 없습니다이 작품의 콘텐츠를 이해 또는 단순히 광고 내용에 붙어 생각과 무시;

조정 된 버전의 간단한 선택에 약하게 새로운 옵션, 멀티플렉스 조사의 기능 별도, 사용자 및 업계 전문가 의해 인정을 받고 있다

디자인은 사용자의 기대와 일치 하 고 시각적 계층 효과적 이다.

정리해 보면, 효과적인 시각적 레벨의 설립 다음 4 가지 측면에서 주로 이다:

1, 간단한: 정보, 선택 표시 제한 된 정보에 사용자가 초점에 발견 있도록

2, 조직: 정보, 우선 순위, 밖으로 정렬의 과학적인 분류 사전 더 나은 커뮤니케이션 효과 얻을 수 있습니다

3, 프레 젠 테이 션: 다양 한 최고의 시각적 레벨 효과 제시 하기 위해 결합 하는 식의 방법이 포인트 상세 많습니다 발굴, 여기에 몇 가지 포인트를 정리, 오신 것을 환영 합니다 계속 하

4, 가이드: 적절 한 지침 권고를 제공 하면서 사용자의 습관에 따라

일부 소견, 6 월 격려와 함께:

출처: http://www.aliued.com/2012/12/06/1355/