디자인에서는 긴 사진 레이아웃의 몇 가지 일반적인 방법에 대해 간략하게 설명합니다.

텍스트 |? I C E H? 사진 | 인터넷 및 각종 웹사이트의 스크린샷

화면 읽기 시대에 가장 직접적으로 사용되는 디자인입니다. 웹사이트 및 APP 페이지, 개인 포트폴리오용 긴 이미지 패키징, 긴 포스터, 전자상거래 제품 세부정보 페이지, Weibo 및 WeChat의 긴 이미지 광고 등도 있습니다. 따라서 인터페이스 디자이너는 긴 그림 디자인의 구성 방법을 이해할 필요가 있을 뿐만 아니라, 일반 디자이너로서 우리도 긴 그림과 긴 페이지의 디자인 기술을 어느 정도 이해할 수 있습니다.

독자의 관심을 유지하고 오래 머물기 위해서는 디자인이 보기에 좋을 뿐만 아니라 콘텐츠 경험이 처음부터 끝까지 일관될 수 있도록 특정 시각적 지침을 제공해야 합니다. 이 목표를 달성하려면 구체적으로 디자인해야 합니다.

이 글이 도움이 되셨으면 좋겠습니다. 그럼 긴 이미지와 긴 페이지 디자인에 일반적으로 사용되는 간단한 디자인 방법 중 일부를 살펴보겠습니다.

반복은 비전을 통일하고 사용자나 독자가 여전히 동일한 콘텐츠에 머물고 있음을 상기시키기 위한 것입니다. 반복은 글꼴, 색상, 크기, 공간, 형태, 프레임 등을 반복할 수 있습니다. 엄밀히 말하면 반복은 아닙니다. 동일한 요소를 복사하되 특정 규칙을 따라 페이지에 지속적인 변경을 생성합니다. 즉, 반복되는 요소를 사용할 때에는 규칙에 변화가 있어야 하고, 변화에도 규칙이 있어야 한다.

숫자, 문자, 영어, 조판 형태, 구조 등을 반복합니다. ▼

조판 형태, 구조 등을 반복합니다. ▼

도형, 기호, 조판, 기호 등을 반복합니다. ▼

색상의 반복, 컬러블럭 적용 등 ▼

강조된 반복 외에도 실제로는 다양한 반복 방식이 존재하지 않음을 발견하기 어렵지 않다 독립적으로 사용되며 다양한 방법과 혼합되는 경우가 많습니다. 물론, 나열된 것보다 훨씬 더 많은 반복 방법이 있습니다.

F자 레이아웃은 매우 전통적이지만 매우 과학적인 레이아웃 방법으로, 수많은 시선 추적 실험을 바탕으로 정리한 고전적인 레이아웃 방법입니다. 이는 대부분의 사람들의 탐색 습관과 일치합니다. 페이지를 볼 때 우리는 일반적으로 왼쪽 상단(예: 로고, 탐색, 제목 등)을 먼저 본 다음 가로 콘텐츠를 왼쪽에서 오른쪽으로 먼저 본 다음 전체 페이지를 위에서부터 탐색합니다. F자 모양의 시각적 경로를 형성합니다.

NNGroup의 시선 추적 연구 차트(빨간색과 주황색은 관심이 집중되는 부분, 파란색은 관심이 없는 부분을 나타냄) ▼

F자 레이아웃과 시선 추적 실험을 통해 다음과 같은 영감을 얻을 수 있습니다.

1. 가장 중요한 정보(예: 로고, 회사 이름, 제목, 탐색 등)를 상단에 배치하고(왼쪽 상단 모서리만큼 정확하더라도) 시도해 보십시오. 오른쪽에 배치하지 마세요.

2. 일반적으로 피드백, 상담, 광고, 추천 등과 같이 덜 중요한 항목은 오른쪽에 배치할 수 있습니다.

3. 언제 디자인할 때 왼쪽에 있는 정보에 더 주의를 기울여야 합니다. 주의가 집중되는 곳은 오른쪽이 일반적으로 비어 있는 경우입니다.

4. 여러 텍스트와 콘텐츠가 포함된 레이아웃의 경우(예: 뉴스, 커뮤니티, 이벤트 소개 페이지 등) F자 레이아웃을 우선시할 수 있습니다.

36Kr 웹페이지 F자 레이아웃▼

envato tuts+ 페이지 F자 레이아웃 ▼

게임 활동 페이지 F자 레이아웃▼

활동 페이지 F자 레이아웃▼

F자 레이아웃 외에 S자 레이아웃도 있습니다. 유형("Z" 유형, "Z 유형"이라고도 함)도 매우 고전적인 유형의 페이지 레이아웃입니다. 마찬가지로 인간의 탐색과도 일치합니다. 프로세스는 모두 시선 추적 실험을 통해 입증되었습니다.

페이지를 탐색할 때 우리의 눈알은 좌우로 움직여서 읽게 되고, 시선이 머무는 지점은 페이지 위에서 위에서 아래로 바뀌면서 왼쪽과 오른쪽으로 움직이는 'S'자 모양을 이루게 됩니다. 옳은 길. 이러한 레이아웃은 긴 페이지, 특히 특정 제품의 특정 그림을 소개할 때 널리 사용됩니다. S자 레이아웃을 사용하면 시각적인 가이드가 형성되어 전체 페이지를 읽기 쉽게 됩니다.

시선 추적 연구 차트 ▼

웹 페이지에 S자 레이아웃을 처음 적용한 것은 Apple 공식 웹사이트에서 시작되었을 수 있습니다. 왼쪽 그림에는 올바른 단어가, 오른쪽 그림에는 일관성을 위해 읽습니다.

예를 들어 아래 iPad 세부 정보 페이지의 첫 번째 화면에서 우리의 시각적 중심은 iPad 그림에 있고(텍스트보다 그림이 시각적 중심이 되기 더 쉽습니다) 왼쪽으로 읽습니다. 제품명과 소개를 읽은 후 페이지를 아래로 스크롤하다 보면 두 번째 화면에 나오는 아이패드 사진에 시선이 끌린다. 오른쪽 사진 소개를 계속 읽어보면... 이 시각적인 움직임을 여러번 반복하면, 전체 페이지를 매우 매끄럽게 읽었으며 매우 직관적인 S자형 시각적 탐색 경로를 형성했습니다. 읽기가 매우 쉽고 자연스러우며 정보를 얻기도 매우 쉽습니다.

애플 공식 홈페이지 초기 제품 상세 소개 페이지 ▼

이러한 배치는 애플 외에도 많은 홈페이지 페이지, 긴 이미지 광고, 포트폴리오 패키징 등에서도 널리 활용되고 있다.

유사한 S자 레이아웃 제품 세부정보 소개 페이지▼

기타 S자 레이아웃 페이지▼

이는 S자 레이아웃이 매우 인기가 있음을 보여줍니다. 긴 그림 조판 방법은 사람들의 잠재의식적인 독서 습관에 따릅니다.

카드 레이아웃은 그리드 시스템에서 파생된 레이아웃 방식으로, 텍스트, 그림 등 정보 요소를 중앙에서 카드로 나누고, 카드를 쌓아가며 카드를 구성하는 방식이다. 완전하고 간결하며 표준화된 페이지는 일반적으로 전자상거래(예: Taobao, JD.com), 플랫폼 웹사이트(예: Zoku, Behance, Pinterest, Youku) 및 기타 정보가 풍부하고 복잡한 페이지에서 사용됩니다. 물론 디자인에서 매우 복잡한 그래픽과 텍스트가 나타나면 이 레이아웃을 사용하여 디자인을 더욱 간결하게 만드는 것도 고려할 수 있습니다.

카드 레이아웃 페이지 ▼

페이지 레이아웃은 물론 위에 나열된 방법보다 훨씬 많지만 이는 더 고전적이고 일반적으로 사용되는 방법입니다. 동시에 이러한 방법은 단독으로 존재하지 않으며 애플리케이션 내에서 서로 혼합되어 공존하여 완전하고 아름다운 페이지를 공동으로 제공합니다. 이러한 레이아웃 방법을 완전히 이해하고 나면 긴 이미지 페이지를 디자인하거나 작품을 전시하기 위한 패키징을 디자인할 때 어떻게 시작해야 할지 혼란스러워하지 않을 것이라고 믿습니다.

먼저 여기에 공유합니다. 도움이 되셨으면 좋겠습니다.