전자 상거래 웹 페이지 디자인 규칙

출처: 인터넷
작성자: 사용자
키워드: 만약 이동 해야 하 고

전자 상거래 사이트에 대 한 웹 페이지 디자인 규칙은 또한 많은 비-상업 사이트에 적용할 수 있습니다. 요약 웹 페이지 건축의 경험, 웹 디자인 다음과 같은 다섯 가지 규칙을 따라야 한다: 페이지는 읽기 쉬운, 탐색 하기 쉬운, 쉽게 찾기, 일관 된 스타일 레이아웃, 페이지 빠른 다운로드. 즉, 귀하의 사이트가 귀하의 타겟 고객 사용 하기 쉽게 만들어야 한다. 귀하의 타겟 고객에 의해 평가를 귀하의 사이트에 대 한 주문 및 라이센스 수 사이트 디렉터리 편집자에 의해 이러한 모든 규칙을 준수 해야 합니다. 이러한 규칙의 장점은 사이트 디렉토리 제출, 뿐만 아니라 귀하의 타겟 고객에 그들은 적용 될 수 있습니다.

하나 규칙: 읽을 수 있는 페이지

어쩌면 대상 사용자가 완전히 다른 컴퓨터, 모니터, 네트워크 연결, 브라우저 사용 하는. 사실, 아무도 정확 하 게 어떻게 잠재적인 소비자 볼 수 귀하의 사이트에, 그들은 노트북을 사용할 수 있습니다, 그리고 전화 접속 연결이 나 고속 연결을 사용할 수 있습니다 사이트 디자이너가 해야 최대한 많은 플랫폼, 브라우저 및 네트워크 속도 제공 하는 애플 컴퓨터를 사용할 수 있습니다. 따라서, 일반적으로 주요 사이트 디렉터리에 사이트를 제출 하기 전에 웹 페이지에 각 항목 있이 필요가 읽기 및 주요 브라우저 및 두 컴퓨터에서 읽을 수 있다. 다음은 페이지의 가독성에 대 한 세부 사항의 목록:

(하지 1) 귀하의 사이트 디자이너는 너무 작거나 너무 큰 텍스트의 글꼴 크기를 설정 해야 합니다. 사이트는 시각 장애인된 고객을 위해 특별히 설계 되었습니다, 문서의 글꼴 크기에 따라 조정 한다.

(그림에서 2) 모든 텍스트는 읽을 읽을 수 해야 한다. 고대비 색상 및 서체 및 서체 선택 그림의 가독성을 위해 매우 중요 하다.

(3) 텍스트의 색은 매우 중요 한, 또한 배경 색상 텍스트의 시각적 효과 희석 할 일반적으로 말하자면, 밝은 색 배경에서 어두운 텍스트 선호.

(4) 쉬운 또는 빠른 읽기 수 웹 사이트 디자인 및 시각 효과의 전체 페이지 보다도 두 열의 내용을 훨씬 더.

(5) 정확 하 고 적절 한, 수를 단어 문법 혼란의 사용 웹 사이트의 맞춤법 인기가 되지 않습니다. 전자 상거래 사이트도 계정 동기 부여와 매력적인 언어에 있다.

(6) 애니메이션 너무 빨리 움직여야 하지 귀하의 타겟 고객을 만들 것입니다 읽을 수 있습니다 없습니다. 대상 사용자가 모든 정보를 3 개 이상 시간을 순환 하는 애니메이션 너무 빨리 이동 합니다.

(7)에 있을 때 귀하의 사이트 디자인 또는 디자인 서식 파일 단계, 다른 브라우저, 서로 다른 플랫폼, 다른 네트워크 연결 보기를 사용 하려고 합니다. IE6.0, IE7.0, 파이어 폭스 웹 페이지의 표시 다 고 해상도에 차이 뿐만 아니라 와이드스크린 노트북 및 좁은 화면, 적응형는 note.

(HTML 문서를 검색 8) 때 그림은 고 사진을 판독 하 고 판독 되어야 합니다. 즉, 사진에 HTML 문서, 배경 그림 및 텍스트를 만들 때 대비 색을 사용 하 여.

(9) 사이트 디자이너 문서를 흐리게 만드는 배경 또는 읽기 어려운 있도록 색상을 사용 하지 마십시오.

규칙 2: 이동 하기 쉬운

"쉬운 검색"은 귀하의 타겟 고객 들은 언제 든 지 사이트를 방문할 때 알 것 이다. 만약 그들이 손실, 그들은 홈페이지 사이트맵, 도움말 섹션, 사이트 검색, 또는 모든 페이지에서 볼 수 있어야 합니다. 이 어디에 있는지, 그들이 원하는 곳, 그리고 그들이 왔다 뷰어를 드릴 것입니다.

사이트 디렉터리 편집기 일반적으로 계정에 귀하의 타겟 고객을 걸립니다. 전문 사이트 디렉터리 편집기, 일반적으로 경험 있는 네트워크 사용자에서 어려움을 많이 귀하의 사이트를 탐색할 때, 귀하의 사이트를 탐색할 때 대상 클라이언트 같은 문제 발생 가능성이. 탐색, 사용 하기 쉬운 명확한 방향 선택을 취소 합니다. 그것은 하단에 간단한 탐색을 설정 하는 데 필요한 주요 탐색 모음 더 이상 페이지에 대 한 페이지의 왼쪽에 배치 한다 그래서 사람들이 왼쪽에서 오른쪽, 위에서 아래로, 읽기에 익숙해 있기 때문에 (만큼 두 충분: 홈 페이지와 페이지의 상단). 당신이 만족 하는 패턴을 식별 한 후이 좋습니다 동일한 사이트의 모든 페이지에이 패턴을 적용 하는 뷰어 정보를 찾는 방법을 알고 있도록.

텍스트 링크의 색상은 귀하의 타겟 고객에 게 친숙 해야 합니다. 파란색 밑줄이 그어진된 텍스트는 일반적으로 아직 액세스 하지 않은 링크를 표시; 자주색 또는 적갈색 밑줄이 표시 된 텍스트는 일반적으로 이미 방문한 링크를 표시 합니다. 하이퍼텍스트 링크 또는 그림 링크를 사용 하 여 이동 하거나 항상 앞으로 또는 뒤로 단추를 사용 하 여 브라우저에서 그들이 하는 것 보다는 사이트에 자유롭게 되감기 사람들이. 연결 된 텍스트의 색상으로 기존의 사용 (파랑 액세스할 수 없습니다, 자주색 또는 적갈색에 클릭); 모든 그림에 alt 식별자 이름 또는 그림의 설명, 그림을 자동으로 로드 하는 그 사용자를; 각 그림의 의미를 이해할 수 있도록 페이지, 이전 페이지 "다음 페이지" "홈" 하위 디렉터리 돌아가기.

모든 당신의 하이퍼링크의 대상 고객에 게 명확 해야 한다. 이미지와 같은 버튼을 찾아보기 또는 파일 탭은 쉽게 읽기에 대 한 명확 하 게 표시 되어야 합니다. 사이트 디자인의 첫 번째 규칙으로, 귀하의 사이트 디자이너는 색상, 배경, 질감, 및 주요 브라우저, 컴퓨터 화면, 그리고 플랫폼에 대 한 명확 하 고 읽을 수 있도록 귀하의 사이트의 이미지의 특수 효과 선택 해야 합니다. 많은 사이트 디자이너 텍스트 하이퍼링크 밑줄 하지 선호 합니다. 숙련 된 네트워크 사용자에 대 한 사이트 디자인 하는 경우 하이퍼링크 텍스트는 독특한 설계 기법 잘 됩니다. 그러나, 귀하의 타겟 고객 네트워크 경험을 많이 없다면, 아래 하이퍼텍스트 링크 밑줄 최상 이다.

규칙 3: 쉽게 찾을 수

독특한 제품, 서비스 및 웹사이트에 의해 제공 된 정보를 대상 사용자가 사이트에 로그온 한 후 찾을 수 쉽게 한다. 일반적으로, 귀하의 타겟 고객 귀하의 홈 페이지에 로그온 할 때 사람들이 그들이 찾고 있는 정보를 직접 포함 하는 페이지를 탐색 하려는 정보에 대 한 주위를 둘러 봐 싶지 않아요. 만약 그들이 특정 정보를 포함 하는 그 페이지에 직접 갈 수 없어, 그들은 종종 정보를 찾기 위해 7 또는 8 클릭 사용 하기를 꺼려하고. 만약 그들이 한 번 이상 클릭, 그들은 마음을 잃게 하 고 귀하의 사이트를 떠날 수 있습니다.

귀하의 타겟 고객 그들이 찾고 있는 정보를 포함 하는 페이지를 발견, 그들은 화면 상단에 "배 위의" 정보를 볼 필요가 있다. 사람들이 귀하의 제품이 나 서비스 화면 상단에 즉시 볼 수 없습니다, 경우에 그들은 알아야 검색 콘텐츠 특정 페이지에는. 사람들이 반드시 있는지 확인 페이지를 스크롤 하지 때문에 그들은 검색 정보는이 페이지에 있습니다.

자주 묻는 질문 (Faq) 웹 페이지 "접어 위의" 전략을 잘 활용 하지 못한 사이트 디자이너의 예입니다. 예를 들어 당신이 10 질문 Faq 웹 페이지에 넣고 정보 대상 사용자에 대 한 질문 6 답변입니다. 답변에 문제가 있다면, 그것은 6 아니다는 것을 무시 하 고, 문제를 함께 넣어 하는 경우 사용자는 콘텐츠를 찾을 첫 눈에 될 수 있도록 다음 대답을 이동 하는 하이퍼링크를 제공 하기 쉬운 풀 다운, 최고의 필요에 있을 수 있습니다. 귀하의 모든 자주 묻는 질문 페이지는 같은 형식으로 배열 되어야 한다. 이 전략은 검색 엔진 친화적인 레이아웃에 대 한 최종 고객 들을 위해 뿐만 아니라 유리 하다.

위나 꼬리 관련 콘텐츠, 같이: "회사 소개" 페이지 또는 지역, "연락처" 페이지 또는 지역, "주소" 페이지 또는 지역. 귀하의 연락처 정보 및 회사의 올바른 맞춤법 검사를 잠재적인 소비자에 대 한 가장 가능성이 장소 "회사 소개" 페이지를 다른 연락처 정보를 제공 하는 경우 그것은 "소개" 섹션에 정보를 넣을 것이 좋습니다입니다. 특히, 꼬리에 귀하의 연락처 정보를 넣어 하지 많은 최종 사용자가 것입니다 그들은 참조 정보를 찾을 수 페이지의 하단 스크롤 됩니다.

규칙 4: 일관 된 스타일의 레이아웃

사이트의 레이아웃과 스타일은 일관 되어야 합니다. 레이아웃 배치, 탐색, 그림, 그리고 귀하의 사이트에 공백을 의미합니다. 이것은 텍스트, 사진, 및 검색 내용을 화면에 "부동산"을 배치 하는 위치 이다. 그들은 귀하의 사이트를 방문 하 고 편안 하 게 느낄 그 때 레이아웃 디자인의 일관성 귀하의 타겟 고객을 도울 수 있다 당신과 함께 사업을 하 고. 디자인 사진, 글꼴, 그리고 스타일의 special effects 및 귀하의 사이트의 색상 활용을 의미 합니다. 사이트 디자인 과정에서 여러 측면은 중복 됩니다. 웹에서 각 페이지는 동일한 글꼴, 스타일, 및 본문 텍스트, 하이퍼링크, 머리글에 사용 되는 색상 있다.

귀하의 사이트가 표시 되 면 제공 하는 제품의 사진, 사진의 크기는 작은 이어야 합니다. 가로 사진을 정확 하 게 동일한 크기 이어야 하며 세로 사진을 정확 하 게 동일한 크기 이어야 합니다. 제품 사진에 그림자 효과 사용 하는 경우 모든 제품 사진에 그림자 효과 사용 해야 합니다. 그림 및 텍스트 하지 수 무작위로 또는 임의로 배치 합니다 웹 페이지에. 다른 항목에 웹 페이지에 각 항목을 시각적으로 연결 한다. 그래서 그 클러스터 보다는 관련이 없는 항목으로 간주 됩니다 그들은 지배적인 탐색 모음과 보조 탐색 모음 등의 관련된 항목을 함께 넣어 되어야 합니다.

2 개의 탐색 바의 시각적 대비 어떻게 시각적으로 서로 관계를 보여 줍니다. 보조 탐색 모음 다른 색상 컬러 설정을 스크린과 좋은 기본 탐색 표시줄의 왼쪽에 설정 됩니다 예를 들어 주요 탐색 모음, 페이지의 상단에 특별 한 색으로 표시 됩니다. 끝 고객을 방문 하는 사이트의 부분에서 지배적인 탐색 모음 버튼의 색상 변경 됩니다. 최종 사용자가 링크를 클릭 하면 지배적인 탐색 모음 또는 자식 탐색 바의 보조 탐색 모음을 엽니다. 자식 탐색 모음의 텍스트 주요 탐색 모음, 추가 나타내는 왼쪽에 있는 탐색 버튼 최고의 바의 하위 집합에서에서 텍스트를 반복 합니다.

컨트롤 슬라이스 최종 고객 방문 웹 페이지를 보여 줍니다. 메인 타이틀 최종 사용자, 방문 하 고 사이트의이 부분의 주요 특징을 강조 하는 자막 페이지를 보여 줍니다. 자막에 뾰족한 팁 미묘 하 게 그들을 하이퍼링크를 표시 합니다.

페이지의 하단에 있는 텍스트 링크 대상 고객이 방문한 페이지를 나타내는 주요 탐색 모음 단추에 해당 합니다. 하이퍼링크의 색 때문에 그것은 대상 고객은 종종 네트워크에서 작업 하는 사람으로 네트워크로 실력을 믿지 않는 브라우저의 기본 컬러와 비슷합니다. 대상 고객 얻을, 또는 그들은 그들의 위치를 조정 해야 하는 경우 홈 페이지와 사이트 맵 페이지 전환 그림을 연결할 수 있습니다. 이 설정은 탐색 모음에는 모든 페이지에 동일 합니다.

5 규칙: 페이지 빠른 다운로드

우리 모두가 알다시피, 페이지 다운로드 속도 방문자의 사이트의 보존에 중요 한 요소 이다. 5 초 동안 웹 페이지를 열 수 없으면, 보통 사람들이 참을성이 있을 것입니다. 고객 사이트를 최대한 신속 하 게 액세스할 수 있도록 하려면 페이지 빠른 다운로드 합니다. 우리는 높은 템포 시대에 살고, 아무도 기다릴 용의가 있다, 인터넷도 예외는 아니다. 비록 인터넷 속도 보다 몇 년 전, 질적 도약 했지만 사실 기술적인 진도 빨리, 또한 수 없습니다 따라잡을 사람들의 요청. 그래서 당신의 방문자의 인내심에 도전 하려고 하지 마십시오.

먼저 플래시, 프로그램, 같은 일부 첨부 파일을 다운로드 해야 합니다 때문에 웹 페이지를 다운로드 하려면 시간이 오래 걸립니다 왜 충격파 또는 특수 효과, 그리고 사진. 당신이 "섬광" 귀하의 사이트, 그 눈부신 그림 하나 또는 두 개의 특수 효과의 최대를 제안 하 고이 그림의 다운로드 속도 더 느리게 하는 경우 아이콘 사이트의 관심의 콘텐츠를 방문자를 즐겁게 자주 것 이다, 그것은 가능성이 방문자 완전히 인내심을 위해 기다릴 수 없어. 웹 페이지의 위의 내용의 더 많은 사용 하 여 일반적으로 비디오 클래스 또는 게임 클래스 페이지 이다, 그래서 가장 좁은 페이지, 특히 홈 페이지 다운로드 시간을 대부분 페이지의 "비디오 게임" 범주에 속하지 않습니다.

당신은 항상 웹사이트의 홈페이지는 광고 판 처럼 자신을 상기 해야 합니다. 빌보드를 통해 운전, 자세한 내용은 위의 읽을 시간이, 그것은 디자인의 복잡 감사 수 광고 표지판, 플래시의 앞에서 사람들을 감동 하는 순간 되어야 합니다. 온라인 방문자는 또한 "점멸을 통해" 간단 하 고 빠르게, 크게 홈페이지를 감속 하는 모든 데이터를 주는 홈 페이지 인지 확인을.

페이지 다운로드 속도 유지 하는 주요 방법이입니다 간단 하 게 페이지, 홈 페이지에서 가장 중요 한 정보만 너무 큰 그림의 사용을 피하려고, 음악 또는 기타 멀티미디어 파일을 자동으로 다운로드 하는 것을 피해 야 한다. 이 홈 페이지는 안 된다는 KB 보다 큰 필요 합니다. 여기에 일반적으로 다운로드 시간을 줄이기 위해 원칙 중 일부입니다.

(가능한 조금 1) 사용 플래시 애니메이션: 애니메이션을 사용 하 여 귀하의 사이트의 가장 중요 한 부분에 주목 하는 경우에. 애니메이션을 사용 하려는 경우에 애니메이션에서 데이터의 양을 최대한 작게입니다.

(2) 간단한 규칙을 따르: 제품, 서비스, 및 귀하의 사이트의 절묘 한 디자인 보다는 귀하의 사이트에 제공한 정보를 고객이 원하는.

(3) 제품 사진 "미리 보기"로 알려진 작은 사진을 사용 하 여: 귀하의 제품 페이지, 다운로드 갤러리의 많은 작은 사진 보다는 더 빠른 전체 그림에서. 후 귀하의 타겟 고객 관심이, 그들에 게 큰 그림을 볼 수 있는 기회.

(4) 빠른 다운로드, 항상 만듭니다 별도, 독특한 작은 그림 큰 그림에서: HTML 언어에는 이미지 소프트웨어에서 모든 이미지 크기를 조정할 수 합니다.

(5) 사용 가능한 사이트의 여러 페이지에 동일한 그림: 그림을 사용 하 여 일관성 당신의 프레 젠 테이 션의 연속성을 향상 시킬 수 있습니다. 예를 들어 귀하의 사이트의 모든 페이지에 귀하의 로고를 넣어 검색 하 고, 브랜딩에 대 한 좋은 이며 그것은 또한 귀하의 타겟 고객 방문 했던 그들이 누구 인지 이해를 도울 수 있다. 브라우저의 캐시 메모리에 저장 될 것입니다 때문에 로고 이미지는 한 번만 다운로드 받이 필요가 있다. 방문자 귀하의 사이트를 찾을 때 각 페이지에서 새로운 사진을 다운로드 받이 필요가 있다.

다운로드 시간 뿐 아니라 검색 엔진의 가시성을 뿐만 아니라 귀하의 타겟 고객, 중요 하다. 때 검색 엔진 스파이더는 다운로드 시간이 너무 긴 경우 또는 서버를 신속 하 게 웹 페이지 거미를 제출할 수 없는 경우 웹 페이지를 서버에 적용, 검색 엔진 수 있습니다 하지에 추가 됩니다 페이지 인덱스.

소비자 타겟 고객에서의 다양성을 이해 하는 것은 다른 소비자 견딜 수 있는 다운로드 시간 다릅니다. 이미지 디자인 사이트 또는 온라인 게임 사이트의 경우 당신의 소비자는 창조적인 자원 경험을 귀하의 웹 페이지의 다운로드를 기다리는 것. 그러나, 바쁜 제조 업체에 기계 부품을 판매 하는 경우 중요 한 정보에 쉽게 접근할 당신의 1 차 관심사 이어야 한다.

이러한 지침은 상호 연관 그리고이 이해 하는 것이 중요 하다. 예를 들어 홈 페이지 먼저 귀하의 타겟 키워드에 대 한 주요 검색 엔진에서 순위는, 사람들이 귀하의 사이트를 방문 하 여 링크에 클릭 합니다. 경우 귀하의 사이트 디자이너 사진, 애니메이션 및 텍스트의 많은 귀하의 홈 페이지에 두고 느리게 다운로드 발생, 대부분의 사람들이 다운로드에 대 한 기다릴 싶지 않아요. 따라서, 사이트 디자이너가 되지 않는 경우 계정으로 다운로드 시간이 나 다른 디자인 규칙, 다음 검색 엔진이 매우 좋은 위치를 차지 하도록 너무 낭비입니다.

이 다이제스트 "네트워크 마케팅 비즈니스 성공" 이후 게시 되었습니다.

관련 문서

연락처

이 페이지의 내용은 인터넷에서 가져온 것이므로 Alibaba Cloud의 공식 의견이 아닙니다.이 페이지에서 언급 된 제품 및 서비스는 Alibaba Cloud와는 관련이 없으므로이 페이지의 내용이 골칫거리 인 경우 저희에게 알려주십시오. 우리는 5 일 근무일 이내에 이메일을 처리 할 것입니다.

커뮤니티에서 표절 사례를 발견한 경우 info-contact@alibabacloud.com 으로 관련 증거를 첨부하여 이메일을 보내주시기 바랍니다. 당사 직원이 영업일 기준 5일 내에 연락 드리도록 하겠습니다.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.