웹 사이트 회전 목마 슬라이더:왜,어떻게,언제(13 예 포함)를 사용하는

의 웹 사이트 회전 목마,일명 슬라이더,일명 슬라이드 쇼,일명 갤러리에 대해 이야기하자.

인터넷 전체가 그 자체의 변화를 가지고 있는 것처럼 보이지만,집합적으로 우리는 움직이는 콘텐츠와 함께 디자인 요소를 의미하고,종종 바닥에 세 개의 작은 점들을 표시한다.

회전 목마에 관해서,당신은 팀 또는 팀 중 하나에 있습니다. 첫 번째 팀은 일반적으로 클라이언트,두 번째 팀 웹 디자이너를 포함한다.

여기 이코드에서,우리는 스위스입니다. 우리는 캐 러셀은 웹 디자인이 더 매력적 중앙 장식품이 될 수 있다고 생각하지만,그들은 또한 아래로 웹 사이트의 유용성을 드래그 할 수있는 잠재력을 가지고있다.

이 기사에서는 캐 러셀 모범 사례(및 피해야 할 사항)를 살펴 보겠습니다. 캐 러셀은 많은 경우에 사용할 수 있기 때문에,우리는 당신에게 잘 슬라이더의 다른 예를 보여 드리겠습니다.

캐 러셀 디자인 모범 사례(또는 대부분 하지 말아야 할 것)

많은 웹 사이트에서 사용되지만 캐 러셀 디자인은 쉽게 마크를 놓칠 수 있습니다. 몇 가지 좋은 이유가 있습니다. 회전 목마 모범 사례에 대해 알려주기 전에 피해야 할 몇 가지 사항부터 시작하겠습니다.

👎Don’ts:회전 목마를 실수를 방지

1. 콘텐츠:면 회전하고 싶어 너무 너무 짧은 시간에,그것을 일으킬 수 있는 웹사이트 방문객의 눈을 회전하고 있습니다. 텍스트를 제대로 읽을 수 없으며 정보를 놓치고 방문자가 관심을 잃습니다.

2. 디자인:슬라이더가 가난하게 디자인되고 너의 웹사이트 디자인으로 혼합하지 않으면,광고로 틀리게 얻을 수 있는다. 그 결과,사람들은 바로 콘텐츠 과거 스크롤합니다. 그것은 배너 실명,사람들이 광고를 닮은 콘텐츠를 무시 웹 디자인 현상이라고—의식적으로 또는 무의식적으로.

3. 검색 엔진 최적화:검색 엔진 최적화의 관점에서,당신이 페이지에서 제일 먼저 슬라이더를 사용하는 경우 여러 헤더를 피하십시오. 각 웹 페이지에는 하나의 웹 페이지가 있어야합니다. 이 때문에 다른 슬라이드의 여러 수소를 사용하는 경우,구글은 해당 웹 페이지에 대한 가장 중요한 것들있는 키워드에 대해 혼동 될 수 있습니다. 또한 웹 사이트 구조가 명확하지 않을 수 있습니다. 두 요소 모두 순위에 부정적인 영향을 줄 수 있습니다.

4. 모바일:모바일 장치의 경우 수동 슬라이더를 사용하는 것이 가장 좋습니다. 제스처가 지원되는지(예:모바일 사용자가 다음 슬라이드를 표시하도록 스 와이프)화살표가 명확하게 표시되고 눌러야 할 정도로 큰지 확인하십시오. 슬라이드에 텍스트가 포함된 경우 모바일 화면에서 읽을 수 있는지 확인합니다.

5. 회전: 요즘 우리의 제한된 관심 지속 시간으로,그것은 몇 초 이상 사용자의 관심을 유지하기 어렵다. 우리 모두가 될 수있는 장소를 가지고 있기 때문에,낮은 슬라이더 양(이하 5)을 유지하고 방문자에게 슬라이더 컨트롤을 표시하여 회전 목마를 제어 할 수있는 기회를 제공합니다. 이것은 사람들이 앉아서 다음 슬라이드를 기다릴 필요가 없도록합니다.

👍 해야 할 일:캐 러셀 모범 사례

1. 정보가 초 이내에 소화 될 수 있도록 각 슬라이드를 간단하게 유지.

2. 너의 웹사이트의 나머지에 안으로 디자인 혼합을 만들십시요.

3. 사람들이 명확한 화살표로 회전을 제어 할 수 있습니다.

4. 슬라이드(5~10 초),또는 더 나은,모두 도랑 자동 재생 사이에 충분한 시간을 가지고있다.

5. 적은 것이 더 많습니다(디자인 및 슬라이드 양 모두).

6. 당신이 회전 목마를 삽입하기 전에,질문:이 정적 콘텐츠보다 더 많은 가치를 추가 할 것인가?

두 번째 생각이 있습니까?

의심 스러울 때 두 옵션을 모두 테스트하고 어떤 옵션이 더 높은 전환율을 생성하는지 확인하십시오. 때때로,클라이언트는 그들이 맨먼저 승진시키고 싶은 메시지에 명확하지 않기 때문에 슬라이드쇼를 요구한다. 왜 모든 것을 보여주지 않습니까? 그들은 생각한다.

이 경우 슬라이더를 사용하지 않고 더 집중된 메시지를 만드는 작업이 수행됩니다. 또는 중요한 판매 포인트(고유 판매 포인트)를 선택하고 다른 페이지를 더 아래로 언급하십시오. 사람들은 슬라이드를 넘기는 것보다 스크롤 할 가능성이 더 큽니다.

지옥이라고 결정하면 각 슬라이드를 의도적으로 선택하십시오. 그냥 모든 새로운 블로그 또는 제품을 추가 하지만 신중 하 게 사용자 로부터 가장 상호 작용을 생성할 수 있는 가장 중요 한 콘텐츠를 선택 하지 마십시오.

13 웹 사이트 회전 목마 예

이제 당신은하지 말아야 할 것을 알고,이제 그것을 못 박는 회전 목마 예제를 살펴 보자. 다음은 홈페이지에서 제품 및 이미지 슬라이드 쇼에 이르기까지 13 개의 웹 사이트 회전 목마 예입니다.

홈페이지 캐 러셀

캠프가 이미 충분히 나뉘어져 있다고 생각되면 홈페이지 슬라이더를 만난 적이 없습니다. 상단에 직접 배치에 대한 몇 가지 루트(종종 블로그 템플릿에서 볼 수),다른 사람들이 그들이 어디 배 위에 구현보고 싶어하지 않는 동안.

사람들이 홈페이지 회전 목마를 맨 위에 직접 놓는 것을 피하는 이유는 독자가 아래로 스크롤하여 더 많은 것을 배우도록 유도하는 명확한 메시지를 위해 공간을 예약해야한다고 생각하기 때문입니다. 캐 러셀을 사용하면 하나의 강력한 메시지를 전달하기가 어렵습니다. 사람들이 모든 슬라이드를보고 또는 오른쪽 과거를 스크롤하는 경우 또한,당신은 확실하지 않다.

그러나 홈페이지 회전 목마로 방문자에게 인사하는 것을 좋아하는 사람들이 많으므로 추천 기사 나 제품을 즉시 보여줄 수 있습니다.

예 1:니콜 기븐스 스튜디오

니콜 기븐스 스튜디오에서 홈페이지 회전 목마는 정말 잘 작동! 그것은 몇 가지 이유로 좋습니다.

• 그것은 좋은 기능을 가지고 있으며 가치를 추가합니다. 사람들이 그녀의 웹 사이트를 입력 할 때 디자이너 니콜은 신속하게 직접 다른 인테리어 예를 보여줍니다

• 슬라이드는 수동,그래서 사용자는 그들이 통해 플립 할 경우 어떤 속도로 결정합니다

• 이미지에서 벗어날 텍스트 겹침이 없습니다

예 2:도시 피부 수신

그것은 좋은 접근성을 가지고 우리는 도시 피부 수신에서이 소형 회전 목마를 사랑 해요.

이 두 개의 슬라이드를 통합,모두 매력적인 웹 사이트의 나머지 부분과 같은 스타일로 디자인. 회전 시간은 텍스트를 읽을 수있을만큼 충분히 길게 설정됩니다. 큰 글꼴 및 명확한 행동요청 단추는 활주가 이는 것에 관하여 소화한 것을 쉬운 한다.

참고:브랜드의 홈페이지를 스크롤하면 이미 도시 피부 수신에 익숙한 사람들에 맞게 조정 된 것을 볼 수 있습니다. 초점은 누군가가 처음에 그들을 필요로하는 이유를 설명하지 않고,제품을 전시하는 것입니다. 그 이유는 제품 슬라이더 페이지에 맞는-그들은 더 많은 것을 발견 하는 방문자를 동기를 부여 하는 하나의 명확한 메시지를 표시 하려면 헤더 공간이 필요 하지 않습니다.

예 3:메주리

보석 가게 메주리의 이 회전 목마에 대해 우리가 좋아하는 것은 압도적 인 느낌없이 한 번에 두 가지 다른 것을 보여주는 것입니다.

전체 회전 목마에는 세 개의 슬라이드가 있으며 각 슬라이드에는 캠페인을 보거나 보석을 쇼핑하는 두 가지 옵션이 있습니다. 이 자리 독수리 눈을해야 할 수도 있지만 진행 라인은 미묘하게 하단에 표시됩니다. 이 최적화를위한 포인트가 될 수 있습니다.

예 4:신선한 형제 피자

슬라이더가 페이지의 전체 너비에 걸쳐 있어야한다고 누가 말합니까? 또한 그리드로 섹션을 깨고 신선한 형제 피자의 홈페이지처럼,작은 슬라이더를 사용할 수 있습니다.

부여,이 웹 디자인 레이아웃,상황이 조금 많이 얻을 수 있습니다. 슬라이더는 방문자 정보를 표시 할 수 있지만,눈은 왼쪽에있는 큰 이미지에 그려집니다. 모든 사람이 슬라이더 정보를 볼 수 없습니다. 그러나,이 정보는 사람들이 주문을 할 때 어쨌든 보게 될 코로나 대책과 새로운 피자에 관한 것이기 때문에,이것은 큰 문제가 아닙니다.

제품 캐 러셀

제품 캐 러셀 제품에 대 한 자세한 학습에 시각적으로 사람들을 유혹 하 고 잘하면,그것을 구입!

이러한 유형의 캐 러셀은 일반적으로 전자 상거래 사이트의 두 지점 중 하나 인 홈페이지 또는 제품 페이지에 배치됩니다. 슬라이더는 다른 제품 또는 하나의 제품을 다른 방식으로 표시 할 수 있습니다(기능 표시).

예 5:키 소울 케어

이 키 소울 케어 제품 페이지에서,회전 목마는 하모니 의식 패키지에 포함 된 각 항목을 표시하는 데 사용됩니다. 이 방문자가 스크롤 할 필요없이 모든 관련 정보를 볼 수 있습니다로 슬라이더,완벽하게 웹 사이트 디자인에 맞는.

예 6: 킵 컵

킵 컵에서이 제품의 회전 목마는 전자 상거래 사이트의 중간에 배치하고 쉽게 브랜드의 가장 인기있는 투고 컵을 통해 검색 할 수 있습니다. 이름,가격,구매 버튼 및 화살표가 어떻게 배치되는지 기록하십시오-매우 매끄러운(그래픽 디자이너에게 소품).

예 7:향수병

향수병 회사는 전자 상거래 웹 사이트에 슬라이더 요소의 다양한 사용,자신의 촛불뿐만 아니라 브랜드의 리뷰와 따옴표를 전시.

홈페이지 중간에,이 슬라이드 쇼가있다-자신의 베스트셀러 촛불의 이동 갤러리(우리는 향기 개념을 사랑!). 이미지 슬라이더 위에 마우스를 올려 놓으면 중지되고 약간 다른 이미지가 표시됩니다(예:촛불이 켜지는 표시).

예 8:밀크 바

밀크 바의 제품 페이지는 스크롤 할 수있는 기쁨이며,사진이 군침이 물이기 때문에가 아닙니다. 왼쪽에있는 슬라이더 요소와 오른쪽에있는 모든 제품 정보와 함께,아래의 치어 리더 웹 페이지를 가지고,방문자는 첫 눈에 모든 것을 참조하십시오.

그러나 아래로 스크롤하면 대화식 배너와 배달,재료,유사한 간식 및 고객 리뷰를 표시하는 다른 캐 러셀과 같은 더 많은 제품 정보가 표시됩니다.

콘텐츠 회전 목마

웹 사이트에 콘텐츠 회전 목마를 추가하려면 가장 가치있는 콘텐츠가 첫 번째 슬라이드에 있어야 합니다. 초기 슬라이드는 항상 대부분의 노출을 얻을 것이다,노출은 모든 추가 슬라이드 후 감소.

예 9: 차의 예술

차의 예술에서 아래의 웹 사이트에,당신은 하나의 전체 화면 슬라이더에 많은 다른 것들을 볼 수 있습니다.

오프닝 슬라이더는 제휴 프로그램에 가입 할 수있는 협약이다. 다음은 새로운 차 통,가방,번들 및 셰이커를 보여주는 슬라이드입니다. 1 개의 활주는 또한 그들의 매달 차 클럽을 결합하기에 바친다.

이 캐 러셀 웹 디자인이 잘하는 것은 이미지가 각 슬라이드에 대해 무엇을 보여주고 지원 텍스트가 최소로 유지된다는 것입니다. 개선해야 할 것은 버튼입니다. 당신은 단지 개요가 버튼을 선택하면,그것은 이미지에 명확하게 볼 어렵다.

예 10: 칸바 디자인 학교

칸바의 디자인 학교 페이지는 회전 목마가 다른 웹 사이트 요소보다 더 효과적인 인스턴스의 좋은 예입니다.

랜딩 페이지에 표시 할 내용이 많기 때문에 회전 목마는 다른 코스를보다 컴팩트하게 표시하는 데 도움이됩니다. 예를 들어,아래의 튜토리얼 섹션은 슬라이드 쇼에 비해 더 많은 공간을 차지합니다.

블로그 회전 목마

블로그에 대한 여러 번 워드 프레스 템플릿은 자동으로 최신 기사를 보여줍니다 대화 형 슬라이더 요소와 함께.

이 기능은 훌륭한 기능이지만 어떤 기사가 표시되는지 알고 있어야합니다. 그들은 가장 최근에 게시하고 있기 때문에 일부는 클릭 가치로하지만 홈페이지 슬라이더에 먼저 표시되지 않을 수 있습니다. 이 경우 방문자가 클릭하도록 유도 할 것이라고 생각하는 블로그를 수동으로 선택하는 것이 좋습니다.

실시예 11: 코코 코지

인테리어 디자인 블로거 콜레트 쉘튼은 그녀의 블로그의 선택을 보여주는 슬라이더로 그녀의 블로그를 엽니 다. 당신이 위로 마우스를 가져 가면,블로그의 제목이 표시됩니다. 모바일에서는 아래 제목과 함께 사진이 표시됩니다.

이미지 회전 목마

이미지 회전 목마는 종종 작가의 작품의 조각을 표시하는 데 사용되는 포트폴리오와 같은 웹 사이트에서 볼 수 있습니다. 당신의 심상이 어떤 추가 원본든지를 위한 필요 없이 고품질 그들자신을 위해,말하는 다는 것을 확인하십시오.

예 12: 믹스 디자인 집단

믹스 디자인 집단은 디자인 회사입니다. 그들의 작업은 매우 시각적이기 때문에 탐색 및 바로 아래의 사진 슬라이더로 웹 사이트를 여는 것이 좋습니다.

이 슬라이드쇼에는 주방에서 욕실,거실에 이르기까지 다양한 이미지가 포함되어 있어 방문객들은 집단의 디자인 스타일과 서비스에 대한 아이디어를 얻을 수 있다.

비교 회전 목마

슬라이더는 사용자가 다양한 콘텐츠 또는 제품을 빠르게 스캔해야 할 때 잘 작동합니다. 이것은 정확히 사람들이 항목을 비교하는 경우입니다. 의 몇 가지 예를 살펴 보자.

예 13:아마존

틀림없이 가장 잘 알려진 비교 예는 아마존에서 나온 것입니다. 각 제품 페이지에서,당신은 당신이뿐만 아니라 살 수있는 모든 관련 제품과 회전 목마를 찾을 수 있습니다. 이 경우 슬라이더는 사용자가 많은 유사한 제품을 빠르게 탐색 할 수 있으므로 정적 이미지보다 효과적입니다.

웹 사이트 캐 러셀에 대한 귀하의 의견은 무엇입니까?

읽은 것처럼 웹 슬라이더는 예 또는 아니오 일 수 있습니다. 이 모든 요소는 웹 디자인에 사용되는 방법과 사용자 친화적 인 슬라이더가 이동하는 방법에 따라 달라집니다. 각 슬라이드가 명확한 목적을 달성하고 전반적인 사용자 경험이 훌륭한지 확인하십시오. 당신이 자신있게 슬라이더가 콘텐츠를 표시 할 수있는 가장 좋은 요소라고 말할 수 있다면,당신은 갈 수 있어요.