반응 형 디자인 : 처음으로 올바르게 얻는 방법

폭로: 귀하의 지원은 사이트 운영을 유지하는 데 도움이됩니다! 이 페이지에서 권장하는 일부 서비스에 대한 추천 수수료가 발생합니다.


그의 1939 회고록에서, 바람, 모래와 별, 프랑스 작가이자 귀족 앙투안 드 생 텍쥐페리는“설계자는 남은 것이 없을 때가 아니라 남은 것이 없을 때 완벽 함을 얻었음을 알고있다”고 말했다. 저명한 비행가와 어린 왕자 작가는 정보화 시대를 보려고 살지 않았지만, 사이버 공간이 혁신의 경계로 하늘을 대체 한 세계에서 그의 말은 계속 공명합니다..

실제로, 이용 가능한 풍부한 컨텐츠가 기하 급수적으로 확장 되더라도주의를 기울이는 범위 내에서 Saint-Exupery의 “더 적은 것”접근 방식이 그 어느 때보 다 중요합니다. 모바일 방문자가 웹 사이트를 방문하는 평균 기간이 5 초 미만인 경우 기업은 더 이상 잠언을 피할 수 없습니다. 1 달러당 5 센트 이상이 온라인으로 소비된다는 점을 고려하면 1 초마다 계산해야합니다..

단순히 평판 좋은 호스팅 제공 업체를 찾고 기본 웹 사이트를 업로드하는 것 이상의 의미가 있습니다. 모든 방문자의 요구에 응답하는 사이트를 작성해야합니다. (웹 사이트 및 웹 호스팅의 작동 방식을 이해하는 데 도움이 필요한 경우 호스팅에 대한 그림 가이드를 참조하십시오).

방문자의 시선을 사로 잡아 그 창을 넓게 열고 페이지를 가리킬 수있는 열쇠는 반응 형 디자인. PC 시장은 PC 사후 세계에서 빠르게 중요한 부분을 차지하고 있으며, 더 많은 사용자가 뉴스를 받고, 엔터테인먼트를 즐기고, 태블릿 및 스마트 폰으로 구매함으로써 웹 사이트가 끊임없이 진화하는 요구를 충족하도록 설계되어 있습니다. 위독한. 방문자가 원하는 기능을 유지하는 것과 그렇지 않은 것은 없습니다..

복잡한 그래픽, 혼란스러운 탐색 또는 데스크톱 전용 해상도로 잠긴 페이지를위한 공간이 없습니다. 모바일 사용자는 인터넷을 간결하고 깨끗하며 화면 크기에 맞추기를 원합니다. 따라서 반응이 빠른 디자인을 지원하는 호스트 (및 플랫폼)를 선택하십시오.

더 적은 것을 최대한 활용함으로써 얻을 수있는 잠재적 인 보상은 상당합니다. 잠재 고객으로 21 억 명 이상의 모바일 광대역 가입자를 보유하고 있으므로 표현의 경제성과 최대의 상호 작용이 가장 중요합니다. 최고의 디자인은 가장 큰 상호 작용 성과 가장 적은 “디자이너 터치”를 자랑하는 것일 수 있습니다.

우승 디자인

반응 형 디자인 : 올바른 디자인

오늘날의 혁신적인 환경에서 웹 브라우징에 사용되는 장치의 수는 느려지지 않고 계속 증가하고 있습니다. 반응 형 디자인은 데스크탑에서 스마트 폰에 이르기까지 모든 기기에서 최적의 사용자 경험을 제공하여 소비자가 빠르고 교육적인 구매 결정을 내릴 수 있도록합니다..

반응 형 디자인이 중요한 이유?

21 억 개의 모바일 광대역 가입이 있습니다.

미국 성인의 87 %가 휴대 전화를 가지고 있습니다.

55 %는 휴대 전화를 사용하여 온라인에 접속합니다. 그 중 31 %는 주로 컴퓨터 나 다른 장치가 아닌 휴대 전화를 사용하여 온라인에 접속합니다.

미국 성인의 45 %는 스마트 폰을 사용하고 90 %는 휴대 전화를 사용하여 온라인에 접속합니다.

미국 소비자는 하루 평균 1.4 시간을 모바일 장치에서 웹 서핑을합니다..

휴대 전화 소유자의 37 %와 스마트 폰 소유자의 64 %가 휴대 전화를 사용하여 온라인으로 뉴스를 얻습니다..

태블릿 사용자의 60 %가 앱을 통한 것보다 모바일 웹에서 뉴스를 읽는 것을 선호합니다.

스마트 폰 사용자의 79 %가 쇼핑을 돕기 위해 휴대 전화를 사용합니다.

71 %의 사용자가 모바일 사이트가 데스크톱 사이트보다 빠르지 않더라도 빠르게로드 될 것으로 기대합니다.

다운로드하는 데 5 초 이상이 걸리면 모바일 방문자의 74 %가 사이트를 포기합니다..

반응 형 사이트의 해부학

개발 단계에는 반응 형 웹 사이트 디자인의 3 가지 기술 요소가 있습니다.

  1. 유동 격자 – 그에 따라 화면 크기에 맞는 백분율 기반 디자인.
  2. 유연한 이미지 – 포함 된 요소 외부에 표시되지 않도록 상대 단위 크기의 이미지.
  3. 미디어 쿼리 – 표시 브라우저의 크기에 따라 페이지에 CSS 규칙을 적용하는 방법.

5 가지 주요 디자인 요소 반응 형 전자 상거래를 통해 최고의 사용자 경험을 보장.

마스트 헤드

헤더

핵심 내용에 초점을 맞추기 위해 작고 단순해야하지만 쉽게 볼 수 있습니다..

배경 이미지 대신 선형 CSS 그라디언트를 사용하여 디자인 유연성을 높이고 HTTP 요청을 줄이십시오..

로고

더 커지고 최종 크기로 축소되어야합니다..

기본 탐색

또는 작은 전화기 화면에서 제공하는 공간이 제한되어 반응 형 디자인으로 작업 할 때 주 메뉴가 까다로울 수 있습니다..

다음을 포함하여 선호하는 메뉴 옵션의 수에 따라이를 극복하기위한 많은 옵션이 있습니다.

  • 작은 화면에서 기본 탐색을 전환하는 헤더의 간단한 메뉴 앵커.
  • 바닥 글에 배치 된 탐색으로 사용자를 이동시키는 헤더 앵커.
  • 메뉴 아이콘으로 액세스하는 왼쪽 슬라이드 탐색 (Facebook과 같은), 왼쪽에서 미끄러 져 메인 컨텐츠를 오른쪽으로 이동시키는 트레이가 나타남.
  • 페이지의 주요 내용을 오버레이하는 탐색.

검색 창

검색 창을 사용하면 방문자가 원하는 내용으로 바로 이동할 수 있습니다..

이미지 갤러리

이미지 탐색

텍스트 기반 이미지 탐색 대신 다른 제품보기의 미리보기 표시.

이미지는 더 큰 이미지와 연결되어야합니다.

제품 이미지

제품 이미지를 페이지의 초점으로 삼으십시오.

Swipe.js라는 간단한 스크립트를 사용해 터치 친화적 인 이미지 회전식 메뉴를 만들어 사용자가 터치 방식으로 제품 사진을 스 와이프 할 수 있습니다..

제품 설명

제품 개요

방문자에게 제품 이름, 가격 및 인기도 또는 등급을 제공하여 이미지 위에 (이미지 컨테이너 앞의 마크 업에) 표시되어야합니다..

이렇게하면 나머지 페이지가로드 될 때까지 기다리지 않고도 원하는 제품인지 확인할 수 있습니다..

검토 횟수

리뷰 수는 제품 세부 정보 아래의 리뷰로 이동합니다..

이 작은 세부 사항은 쇼핑을 돕기 위해 휴대 전화를 사용하거나 판매를하거나 중단하는 스마트 폰 소비자의 79 %에게 매우 가치가 있습니다..

수량 필드, 크기 드롭 다운 및 장바구니에 추가 버튼

공유 버튼

소셜 네트워크에서 컨텐츠와 제품을 공유하면 노출을 늘리는 좋은 방법이 될 수 있습니다. 하나의 버튼으로 간단하게 유지하십시오..

바닥 글

바닥 글 탐색

기본 사이트 탐색에 대한 액세스를 제공하는 것은 사용자가 다른 섹션으로 이동하여 막 다른 곳에 두지 않도록하는 좋은 방법입니다..

고객 서비스 번호 및 이메일

전화는 전화를 걸 것을 기억하십시오! 방문자가 제품에 대한 질문을 할 수 있으며 고객 서비스 담당자에게 신속하게 연락 할 수있는 능력은 구매 결정을 내리는 데 필요한 것일 수 있습니다..

맨위로 링크

다시 한번, 그것은 사용자 경험과 편의에 관한 것입니다!

출처

  • 모바일 기술 자료 – pewinternet.org
  • 모바일 인터넷 사용 및 사용자 행동 동향 – madmobilenews.com
  • MobiForge – mobithinking.com
  • 응답 성이 뛰어난 웹 디자인의 해인 2013 년 – mashable.com
  • 모바일 우선 반응 형 웹 디자인의 분석 – bradfrostweb.com
  • 반응 형 웹 디자인에서 유동 격자가 작동하는 방식 – 1stwebdesigner.com
  • 미디어 쿼리를 넘어서 : 적응 형 웹 디자인 분석 – slideshare.net
  • 응답 성이 뛰어난 웹 디자인은 무엇입니까? – johnpolacek.github.io
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map