반응 형 디자인을위한 콘텐츠 배열 계획 방법
최근 게시물에서 나는 시각적 내용 ~에 관련된다 레이아웃 디자인. 그러나이 주제는 매우 자세하며 많은 하위 주제로 분리됩니다. 그 중 하나는 반응 형 레이아웃을위한 시각적 조직.
이 게시물에서 필자는 반응 형 컨텐트를보다 깊이있게 분석하여 작은 화면의 콘텐츠 재정렬. UI & UX 디자인에서 모든 프로젝트에 대한 정답은 하나도 없지만 잘 작동하는 경향, 이러한 추세를 통해 자신 만의 아이디어를 개발할 수 있습니다..
격자를 목록으로 재정렬
모든 웹 사이트 표시되는지 여부에 관계없이 일부 유형의 표를 사용합니다.. 단단한 격자의 내용은 더 넓은 모니터에서 가로로 그룹화되는 경우가 있지만 작은 장치에서는 이해가되지 않습니다. 가장 좋은 방법은 작은 화면에서이 그리드를 분해하는 것입니다. 항목을 목록으로 변환.
예 1 : 웰링턴 시의회
웰링턴 시의회의 웹 사이트를 살펴보십시오. 그리드 스타일 섹션 홈페이지에.
정사각형 링크로 구성된 작은 슬라이드 쇼가 있습니다. 감소하다 브라우저 창 크기가 조정됩니다. 꼬리말 섹션 작아지다, 결국 링크의 수직 목록으로 변환.
320px 너비의 매우 작은 휴대 전화에서는 장치 크기를 디자인해야합니다. iPhone의 경우 장치의 너비가 넓어 지므로 콘텐츠를 이렇게 배열하는 것이 좋습니다..
예 2 : 무이 야 버거
Mooyah의 홈 페이지를보고 레이아웃의 크기를 조정 해보십시오. 데스크톱 화면에는 3 개의 항목이 포함 된 작은 슬라이드 쇼 영역이 있지만 축소하다 모바일에 하나의 항목 만 표시 (더 많은 숨겨진 슬라이드를 위젯에 추가).
Mooyah 앱 및 메뉴를 광고하는 두 개의 프로모션 상자는 나란히 고정되어 있습니다. 화면이 충분히 작아 질 때까지 수직으로 재배 열하다..
그만큼 “우리와 접촉!” 섹션은 또한 콘텐츠를 재정렬하여 각 소셜 포스트 가능한 한 많은 공간을 확보한다.. 일반적으로 와이드 스크린 모니터가 가장 넓고 스마트 폰 화면이 가장 높습니다..
예제 3 : 테마 시장
격자가있는 레이아웃을 디자인 할 때는 넓고 높은 레이아웃 스타일 한 줄의 코드를 작성하기 전에 이렇게하면 의미있는 중단 점 작성.
전체 그리드 레이아웃이있는 페이지는 상자의 크기를 줄이십시오. 새 줄을 긋기 전에. 예를 들어 Theme Market에는 최대 너비 고정 1240, 그리드에 포함 된 행당 4 개의 블록.
화면이 작아짐에 따라 이러한 블록 너비를 줄이십시오., 그러나 결국 무너 뜨리다 에 행당 3 개의 상자를 남겨 두십시오.. 가장 작은 크기에서 행 당 하나의 상자가 생기고 충분한 공간이있다. 텍스트와 이미지가 빛나는.
항상 균형이 잡혀 있습니다. 가능한 한 많은 정보를 유지한다. 필요성과 결합 텍스트를 읽을 수있게 만들기. 그리드 레이아웃을 많이 만들수록 더 쉽게 찾을 수 있습니다. 콘텐츠 배열의 균형.
열 숨기기 또는 제거
넓은 모니터 과 더 많은 브라우저 지원 개발자는 엄청나게 복잡한 레이아웃을 만들 수 있습니다. 나는 종종 블로그를 볼 수있다. 3 열 또는 4 열 화면의 좋은 부분을 차지하는.
그러나 더 작은 장치는 수직으로 이해하다. 나는 두 가지 옵션을 발견했다. 과도한 사이드 바 처리:
- 주요 콘텐츠 아래에 버려라.
- 모두 숨기기
예 1 : 보도 중지
Stop Press 웹 사이트를보십시오. 그것은있다 네 개의 세로 열 바탕 화면 모니터에서.
왼쪽 열은 수직 탐색 메뉴이고 다음 열은 최근 기사가있는 주 콘텐츠 열입니다. 그런 다음 두 개의 다른 사이드 바 열이 추가로 오버플로됩니다. “곁에” 함유량.
브라우저 창 크기가 조정되면이 열 천천히 크기를 줄이다.. 맨 처음가는 것은 햄버거 메뉴 아이콘 뒤에 숨겨진 왼쪽 탐색입니다..
다음 중단 점은 최상위 소셜 공유 버튼과 함께 중간 열을 숨 깁니다. 마지막으로 가장 작은 화면에서 맨 오른쪽 사이드 바가 완전히 사라집니다. 기본 중심 열만 남기고 내용.
메인 콘텐츠 아래에는 사이드 바 콘텐츠가 나타나지 않습니다. 그 보기에서 완전히 숨겨진, 그리고 이것은 완전히 받아 들일 수있는 선택입니다. 페이지로드 줄이기 스크롤 바 높이를 알맞은 크기로 유지하려면.
반면에 많은 블로그 메인 콘텐츠 아래의 사이드 바 이동하기 사이드 바에 관련된 포스트를 특징으로하는 Concept Art Empire와 같은 내용 아래로 떨어지다.
예 2 : 위시 블로그
위시 블로그 사이드 바를 완전히 제거합니다. 더 작은 뷰포트의 화면에서. 이 사이드 바 영역에는 일반적으로 광고, 가입 양식 및 관련 게시물 링크가 포함됩니다. 이 콘텐츠는 중요하지 않지만 방문자에게 가치를 더할 수 있습니다..
나는 혼성 접근법 여기서 콘텐츠 아래에 세로 막대를 이동하지만 특정 중단 점을지나 사이드 바에있는 몇 가지 항목을 숨 깁니다.
예를 들어 전체 레이아웃에 3 개의 광고 블록이있는 경우 휴대 기기에 해당 광고 공간 중 2 개를 숨길 수 있습니다. 이 사이드 바 콘텐츠를 액세스 가능하게 만든다. 그러나 페이지를 어지럽히 지 않는다. 과도한 내용.
예 3 : Gautier 부인
나도 Gautier 여사가 그들의 “최근 소식” 홈 페이지의 사이드 바. 결국 내용 아래로 떨어진다., 과 전체보기 위치를 차지합니다. 페이지에.
거의 모든 웹 사이트에는 디자인에 적어도 하나의 사이드 바가 있습니다. 사이트 전반의 사이드 바이든 아니면 페이지 템플릿에 나타나는 것일까는 side-by-side 디자인 스타일 그것 때문에 인기가있다. 더 많은 내용을 담은 화면에.
너의 선택이야. 내용 처리 방법. 사이드 바를 아래로 떨어 뜨리거나 완전히 숨기거나이 두 가지 기술의 하이브리드를 사용할 수 있습니다. 하지만 너는 너의 선택을해야 해. 사이드 바의 관련성에 기반하여, 그리고 그것의 필요성 페이지로.
여백 조정 및 축소
항상 포인트가있을 것입니다. 콘텐츠를 짜낼 수 없다. 더 이상, 그리고 하나의 섹션이 필요합니다. 다른 것 아래에 떨어 뜨리다..
으로 여백 조정 페이지의 콘텐츠를 낮추기 전에 독자는 선택할 수있는 콘텐츠의 폭이 넓어집니다..
예제 1 : 하나의 세계
One World의 바닥 글은 좋은 예입니다. 그것은있다 sitewide 바닥 글 링크 떠 다니기 오른쪽에 이메일 가입 양식 왼쪽에.
레이아웃 크기가 조정되면 이러한 요소 간의 여백과 안쪽 여백이 줄어 듭니다. 링크 열 더 가까워지다, 가입 양식 조금 작아지다., 너무.
특정 시점을 지나서, 그것은 단지 의미가 있습니다. 가입 양식 아래에 링크 놓기, 꼬리말을주고 호흡 할 수있는 충분한 공간.
네, 페이지를 더 길게 만들었습니다. 그렇습니다. 그 아래로 스크롤하려면 더 많은 노력이 필요하지만,이 작은 중단 점에서는 사용자가 수직 지향 장치에서.
예 2 : 골든 아일 즈
제가 좋아하는 또 다른 예는 Golden Isles 홈페이지입니다. 독특한 탐색 스타일. 브라우저 창 크기를 조정하면 탐색 링크 함께 짜내다. 결국 그들은 한 줄에서 끊다 두 개의 행으로, 그리고 가장 작은 크기의 열로.
페이지의 다른 항목들 같은 패턴을 따른다.. 이 예제는 여백 크기 조정 레이아웃을 완전히 재정렬하기 전에.
작은 화면의 수직 흐름
페이지 콘텐츠는 자연스럽게 흐르다, 과 수직 정렬 모바일에서 의미가 있습니다. 즉, 인 페이지 콘텐츠 블록을 그에 따라 콘텐츠 스타일을 업데이트하십시오.. 여기에는 단락, 머리말, 인용구, 정렬되지 않은 목록 및 사용자 정의 내용 상자가 포함됩니다..
예 1 : BodyBuilding.com 단일 우편
예를 들어이 BodyBuilding 포스트를 작은 상자를 사용합니다. 다른 둔기 운동을 과시하다.
이 상자에는 다음이 포함됩니다. 오른쪽의 미리보기 이미지 운동을 시연 해. 작은 화면에서이 썸네일 새로운 라인으로 분해하다, 결국 서로의 위에 쌓다.
반응 형 CSS는 웹 사이트의 모든 페이지에 대해이 작은 세부 사항을 고려해야합니다..
예 2 : 허영심의 박람회
더 큰 예를 들어 보시려면 Vanity Fair 홈 페이지를 확인하십시오. 추천 스토리 슬라이더를 완전히 재정렬합니다.. 전체 화면의 바탕 화면은 헤드 라인을 나열하고 하나의 특색있는 이미지가 측면에 표시됩니다. 브라우저의 크기가 작아지면서이 최고 기사 섹션 슬라이딩 회전 목마가된다..
인터페이스 자체 완전히 바뀐다. 화살표 탐색, 화살표 및 각 스토리의 추천 이미지를 목록에 추가합니다. 그들의 전체 화면 목록은 “수직선”, 그러나이 레이아웃은 모바일 화면에서 작동하기 까다 롭습니다. 따라서 슬라이딩 회전식 컨베이어로 바꾸는 것이 더 좋은 방법입니다.
생각한다 사용자의 흐름에 대한 추가 정보 콘텐츠 흐름보다는 함유량 반드시 수직 레이아웃으로 강요받을 필요는 없다. 작은 화면에. 콘텐츠를 구성하는 방법에 대해 생각해보십시오. 수직 탐색 경험을 지원한다..
폐회 생각
요즘 반응적인 디자인이 필수적이며 모든 웹 디자이너와 개발자는 어떻게 작동하는지 이해해야합니다. 방문자는 모든 웹 사이트가 모바일 친화적 인. 내가 응답하지 않는 웹 사이트에 비틀 거릴 때마다 나는 그 수평 스크롤바가 보이지 않는 곳에 움츠러 듭니다..
에 대한이 게시물의 도움말을 따르십시오. 내용 재정렬을위한 설계 전략 수립 모든 기기에서 최상의 사용자 환경 제공.
