웹 디자인의 이미지 슬라이드 쇼 - 이점 및 우수 사례

부족한 점이 없다. 회전식 슬라이드 쇼 슬라이드 쇼 웹에서. 사실이 추세는 지난 5-10 년 사이에 성장하다 이전보다 더 많은 브라우저 지원을 제공합니다. 그러나 이미지 캐 러셀은 정말로 그럴만한 가치가 있습니까? 어떤 종류의 이익을 창출하며, 레이아웃에서 생산적으로 어떻게 사용해야 하는가??

나는 몇 가지 것을 나누고 싶다. 일반적인 경향, 실례 및 아이디어 이미지 캐 러셀에 관심이있는 웹 디자이너에게 적합합니다. 이 동적 슬라이더는 심하게 논쟁을 벌이고 있지만 올바른 컨텍스트에서 제작할 때 가치를 부여한다고 생각합니다..

전자 상거래 용 제품 회전식 구조

전자 상거래의 세계는 홈페이지 및 제품 페이지에서 회전식 회전식 메뉴로 가득합니다. 목표는 명확한 정보 밀도 유지 사진과 텍스트로 독특하면서도 귀중한 이야기를 전하십시오. 제품을 판매하는 데 도움이되는.

있다 두 개의 기본 게재 위치 전자 상거래 제품 슬라이더의 경우 :

1. 가게의 홈페이지에서
2. 제품 페이지에서

둘 다 다르게 작동하지만 같은 목표를 달성하다 - 제품을 시각적으로 판매하기.

예 1 : Au Lit Fine Lin - 홈 페이지

Au Lit Fine Linens의 홈 페이지를 살펴보십시오. 전체 화면 자동 회전식 회전식 슬라이드 쇼를 사용합니다. 이불, 베개, 침대 커버와 같은 다른 제품을 과시하기.

이미지들 전폭을 차지하다 홈페이지의 접히는 부분 위에 잘 나타난다.. 사실,이 슬라이더는 페이지에 처음 착륙 할 때주의를 끌기위한 가장 먼저해야 할 일입니다. 각 슬라이드는 사이트의 다른 페이지로 연결됩니다. 쇼핑 경험을 통해 고객을 안내.

이 슬라이더는 처음 방문했을 때 협박 할 수 있지만 버튼 링크 과 오버레이 텍스트 또한 다이빙을하고 쇼핑하기를 원하는 방문객에게 매우 고무적 일 수 있습니다..

예 2 : Eden 전화 사례 - 제품 페이지

Eden 전화 사례 제품 페이지에서보다 구체적인 예를 볼 수 있습니다. 그것은 자동 회전 슬라이더 제품의 이미지를 과시하기.

나는 이것들이 조금이라고 느낀다. “너무 많은” 전자 상거래의 세계에서 내가 원하는 제품을 볼 때 이미지 전환 제어.

더 나은 선택은 이미지 갤러리를 만드는 것입니다. 방문자에게 주어진 통제하에. 예를 들어, Design by Human 페이지에서는 각 사진의 미리보기 이미지 이는 훨씬 더 고무적이고 사용자에게 더 많은 제어 권한을 부여합니다..

웹 포트폴리오 회전 목마

온라인 웹 사이트 포트폴리오는 약간 다릅니다. 왜냐하면이 슬라이드 항상 다른 페이지로 클릭 연결되는 것은 아닙니다.. 사례 연구로 이어 지거나 프로젝트에 대해 글을 남기는 사례도 있지만 포트폴리오 웹 사이트의 많은 회전식 슬라이드는 시각적 작업을 과시하다.

예 1 : Biboun - 홈페이지

Biboun라는 이름으로 일하는 프랑스 예술가는 회전 목마 슬라이더 홈페이지에 삽화의 발췌 삽화를 특색으로 삼는다.. 개별 슬라이드는 포트폴리오의 내부 페이지로 연결됩니다. 전체 프로젝트 커버 여러 사진과 함께.

아마도 이것은 슬라이더를 만드는 가장 좋은 방법 포트폴리오 웹 사이트에. 그 특정 작품에 전시 될 이유가 없다면 작품의 무작위 목록을 보여주는 것만으로도 무의미합니다..

모든 조각은 절묘한 Biboun의 슬라이더에 방을 많이 차지하지 않아. 어느 한 쪽. 어떤 사람들은 자동 회전 슬라이드 쇼가 옳은 이유로 싫어한다는 것을 알고 있지만, 그런 미니멀리스트 레이아웃에서는이 디자인 기능에 대해 불평하기가 어렵습니다..

예 2 : Aaron Blaise의 웹 사이트 - 홈 페이지

Aaron Blaise의 웹 사이트에 나온 예가 정말 마음에 듭니다. 그의 작품을 포트폴리오로 소개하다., 주로이 웹 사이트를 사용하여 그의 미술 비디오를 팔다.. Aaron Blaise는 디즈니에서 일한 지 20 년이 넘었습니다. 그는 그것을 증명할 기술을 가지고 있습니다..

사이트의 홈 페이지 슬라이더가 자동 회전 기능을 수행하는 동안 나는 그 코드가 너무 짜증나거나 어색함을 발견하지 못합니다. 각 슬라이드 이미지와 관련된 약간의 콘텐츠가 있습니다., 아론에게 도움이된다. 최신 비디오 수업에 주목 젊은 예술가들에게 특정 기술을 습득하는 법을 가르쳐줍니다..

훌륭한 포트폴리오 회전 목마 비주얼에 중점을 둔다., 과 방문객을 더욱 유도합니다. 웹 사이트에. 이 두 가지를 얻을 수 있다면 개인 포트폴리오 웹 사이트에서 이와 같은 기능에 반대하지 않을 것입니다..

일반적인 디자인 동향

위 예제 중 일부를 보면 일반적으로 두 가지 유형의 슬라이더가 있음을 알 수 있습니다. 전체 화면 과 고정 너비.

이러한 문체 선택은 종종 레이아웃과 관련있다. 얼마나 많은 내용을 담을 수 있는지에 대한 정보를 제공합니다. 레이아웃이 페이지의 전체 너비에 걸쳐 있으면 슬라이더를 넓히는 것이 좋습니다. 하지만 이것은 또한 고품질 이미지 찾기 여전히 큰 해상도의 모니터에서 전체 화면을 잘 볼 수 있습니다..

저는 개인적으로 고정 된 너비 스타일을 선호합니다. 두 아트 포트폴리오 예제에서 보게 될 것입니다. 이것들은 제어하기가 훨씬 쉽다., 그들은 종종 키가 크지 않다. - 방문자가 더 쉽게 단순히 무시하십시오. 그들이 원한다면.

또한 자동 진행 슬라이드의 가치를 고려하십시오. 그것이 얼마나 어려울 수 있는지 사용자가이 콘텐츠를 잡을 수 있습니다. Nielsen Norman Group의 훌륭한 사례 연구 결과에 따르면 자동 전진 슬라이더를 가지지 않는다..

나는이 접근 방식에있어 메모리에 덜 집중 브라우저에서 애니메이션과 모션이 적어지고 대부분의 사람들은 자동 회전식 회전식 슬라이드를 좋아하지 않습니다. 청중을 보호하십시오..

그러나 자동 슬라이딩 슬라이더를 추가 할만한 가치가 없다고 말할 수는 없습니다. 특히 정적 슬라이더를 사용하면 만큼 많은 의견을 가지지 마라., 그리고 당신은 또한 첫 슬라이드를 가장 중요하게 만든다. 많은 사용자들이 다음 슬라이드로 진행하지 않을 것입니다. 슬라이더를 자동 회전할지 여부를 결정하는 것은 불행히도 시행 착오 영역.

어떤 대가를 치르더라도 피하는 방법

여기 내가 개인적으로 생각하는 중요한 것이있다. 아래에 떨어지다 “기꺼이 회피하다”. 아래 스크린 샷을 보거나 클릭 한 다음 그 화면이 무엇인지 추측 해보십시오..

Yozenn 카페 웹 사이트는 전체 화면 헤더 슬라이더를 사용합니다. 자동으로 회전하지는 않지만 슬라이드는 훌륭합니다. 장식 이외의 목적으로 봉사하지 말라..

이미지들 아무데도 연결하지 마라., 그들은 소수의 제품을 자랑합니다. 그들은 모두있을 수있다. 홈페이지 배경에 추가됨 슬라이더없이 JavaScript의 혼란과 여분의 킬로바이트를 절약 할 수 있습니다..

나는이 배경 슬라이딩 기능이 이미 비좁은 웹 사이트에 많은 가치를 추가하지 않는다고 주장 할 것입니다. 이미지에 링크가 있거나 첨부 된 텍스트가 있으면 관련성이 더 높습니다..

헤더 섹션에서 전체 페이지를 차지하는 이미지를 자유롭게 사용할 수는 있지만, 어디서나 연결하거나 진정한 정보를 제공하지 않는다. 회전 목마로 바꾸지 마라..

대화 형 기능

사용자가 회전식 슬라이드를 탐색하는 방식은 디자인 자체에 영향을 미칩니다. 거기에 다양한 탐색 스타일, 그러나 이들은 가장 인기가 있습니다 :

• 점 기반 탐색
• 화살표 탐색
• 미리보기 탐색
• 목록 링크 또는 광고 제목

가장 흔한 것은 도트 네비게이션 수백 개의 현대 웹 사이트에서 찾을 수 있습니다..

예 1 : Chic at Home - 홈 페이지

Chic at Home은 훌륭한 예입니다. 슬라이더 아래에 작은 점 3 개 탐색을 나타냅니다. 각 이미지는 자동으로 회전하고 시리즈의 관련 도트 검은 색으로 채워진다.. 다른 두 개의 빈 점 잠재적 인 슬라이드를 나타냄 사용자가 탐색 할 수 있도록.

이것은 인기있는 디자인 패턴 많은 사용자가 이미 인식하고 있습니다. 그것은 많은 디자이너들이 좋아하지 않는 햄버거 메뉴와 같은 범주에 속하지만 사용자는 이미 그것을 인식, 본능적으로 그것을 사용하는 방법을 안다..

예제 2 : Pure Cycles - 홈 페이지

Pure Cycles의 홈페이지에는 도트 및 화살표 탐색 조합. 이렇게하면 사용자는 앞으로 및 뒤로 탐색을 할 수 있지만 또한보십시오 “사무용 겉옷” 항해 하단의 도트 링크를 통해.

실제로이 예제에서 점 링크는보기가 어렵습니다. 비주얼 슬라이드의 어려움은 많은 요소들이 구별하기 쉽지 않기 때문에 화살표와 점들은 배경에 쉽게 결합.

예 3 : IGN - 홈 페이지

IGN의 홈페이지에서 자동 회전식 회전 목마 사용하는 네비게이션의 제목 링크. 이는 원하는 게시자에게 매우 일반적입니다. 헤드 라인 판매 제품보다는. 각 링크는 결국 개별 슬라이드로 이동합니다. 기사 페이지로 연결됩니다..

이 링크들 미리보기 이미지로 바꿀 수있다., 또는 각 스토리의 미리보기 이미지를 포함 할 수도 있습니다. 시각적 인 측면이 회전 목마에 표시됩니다., 엄지 손톱을 생략하면 실제로 공간이 절약됩니다..

다른 웹 사이트는 다른 이유로 여러 탐색 스타일을 사용합니다.. 방문자의 목표 고려, 최고의 사용자 경험을위한 디자인.

주요 테이크 아웃

당신은 목표로해야합니다. 진정한 가치를 창출하거나 추가 정보를 얻는다. 회전 목마. 이것은 방문자가 전에 가지고 있지 않은 정보 일 수도 있고 그렇지 않은 경우 방문자가 발견하지 못한 페이지로 이어질 수도 있습니다..

자동 회전식 회전식 가락을 피하십시오. 주요 방문 페이지에서만 사용하십시오. (홈 페이지의 한 예). 캐 러셀만큼 오래. 목적이있다, 과 광고처럼 보이지 않는다., 당신의 디자인은 잘해야합니다..

웹 캐 러셀에 대한 자세한 정보는 다음 게시물을 참조하십시오.

• Brad Frost의 회전식 메뉴
• 8 사용자 친화적 인 홈페이지 캐 러셀 설계를위한 UX 요구 사항
• 캐 러셀 사용성 : 콘텐츠 과부하가있는 웹 사이트를위한 효과적인 UI 설계