긴 그림 디자인은 독서 화면 시대에 널리 사용되었습니다. 가장 직접 생각하는 사이트와 앱 페이지 외에도 개인 작품의 장문백, 긴 포스터, 전자상인의 제품 상세 페이지, 웨이보 위챗 장문광고 등이 있다. 따라서 인터페이스 디자이너는 긴 그래픽 디자인의 구도 방법을 알아야 할 뿐만 아니라, 일반 디자이너도 긴 그래픽 페이지의 디자인 기교를 알 수 있다.
독자들이 흥미를 유지하고 더 오래 머물도록 하기 위해, 우리의 디자인은 보기 좋을 뿐만 아니라, 내용의 체험을 처음부터 끝까지 일관되게 할 수 있도록 시각적인 지도도 제공해야 한다. (윌리엄 셰익스피어, 윈스턴, 독서명언) 이 목표를 달성하기 위해서, 우리는 용도에 맞는 디자인을 해야 한다.
이 문장 께서 당신에게 약간의 도움을 주실 수 있기를 바랍니다. 그런 다음 몇 가지 일반적인 긴 페이지 디자인의 간단한 디자인 방법을 살펴 보겠습니다.
반복은 시야를 통일하고, 사용자나 독자에게 그들이 여전히 같은 내용에 머물러 있다는 것을 상기시키기 위한 것이다. 반복은 반복되는 글꼴, 색상, 크기, 공백, 표, 프레임 등이 될 수 있습니다. 동일한 요소를 엄격하게 복사하는 것이 아니라 특정 규칙에 따라 페이지에 지속적인 변화를 일으킵니다. 즉, 반복 요소를 사용할 때 변화에는 규칙과 규칙의 변화가 있어야 합니다.
숫자, 단어, 영어, 조판 형식, 구조 등의 반복
반복 조판 형식, 구조 등
모양, 기호, 피쳐 등을 반복합니다
반복 색상, 색상 블록 응용 프로그램 등
지적한 반복 외에도, 여러 가지 반복 방법은 독립적으로 존재하는 것이 아니며, 종종 여러 가지 방법을 혼합하여 적용한다는 것을 발견하기는 어렵지 않다. (윌리엄 셰익스피어, 햄릿, 반복명언) 물론, 반복되는 방법은 열거된 몇 가지보다 훨씬 더 많다.
F-layout 은 매우 전통적이지만 매우 과학적인 레이아웃으로 대량의 안구 추적 실험을 기반으로 한 고전적인 레이아웃입니다. 대부분의 사람들의 브라우징 습관에 부합한다. 페이지를 볼 때 일반적으로 왼쪽 위 모서리 (예: 로고, 탐색, 제목 등) 를 봅니다. ) 를 누른 다음 왼쪽에서 오른쪽으로 가로 내용을 우선시하고 위에서 아래로 전체 페이지를 탐색하여 F 자형 시각적 경로를 형성합니다.
NNGroup 의 안구 추적 연구도 (빨간색 주황색은 집중력의 핫스팟을 나타내고 파란색은 관심 없는 부분을 나타냄)
F 자형 레이아웃과 안구 운동 추적 실험에서 다음과 같은 계시를 얻을 수 있습니다.
1. 가장 중요한 정보 (예: 로고, 회사 이름, 제목, 탐색 등). ) 는 오른쪽이 아니라 맨 위 (왼쪽 위 모서리까지) 에 놓아야 한다.
2. 일반적으로 피드백, 상담, 광고, 추천 등 몇 가지 부차적인 물건을 오른쪽에 둘 수 있습니다.
3. 디자인 할 때 왼쪽에 있는 정보는 더 많은 노력을 기울여야 합니다. 이것은 집중력이 집중되는 곳이며 오른쪽은 보통 공백으로 취급됩니다.
4. 다중 텍스트 다중 콘텐츠 페이지 (예: 뉴스, 커뮤니티, 이벤트 소개 페이지 등). ) f 레이아웃을 우선적으로 고려할 수 있습니다.
36Kr 웹 페이지의 f 형 레이아웃 ▲
Envato tuts+ page 의 f 형 레이아웃 π
게임 활동 페이지 f 형 레이아웃 π
활성 페이지의 f 자 레이아웃
F 형 레이아웃 외에도 S 형 (Z 형 및 Z 형이라고도 함) 은 매우 고전적인 페이지 레이아웃입니다. 마찬가지로, 그것은 인간의 브라우징 과정과 일치하는데, 이것은 안구 추적 실험을 통해 증명된 것이다.
한 페이지를 탐색할 때, 우리의 눈은 좌우로 이동하며, 시각적 정지점은 위아래로 변하여 좌우로 움직이는' S' 모양의 경로를 형성한다. 이 레이아웃은 긴 페이지, 특히 제품 사진을 소개할 때 널리 사용됩니다. S 자 레이아웃을 사용하면 전체 페이지를 매끄럽게 읽을 수 있는 시각적 가이드가 형성됩니다.
안구 추적 연구도
S 자 레이아웃이 홈페이지에 처음 적용된 것은 공식 홈페이지에서 시작된 것으로 보인다. 애플은 왼쪽 글자와 오른쪽 글자로 읽기 일관성을 형성했다.
예를 들어' 접기 위' 에서는 아이패드의 상세 페이지가 아이패드의 사진 (그림이 텍스트보다 시각적 중심이 되기 쉽다) 에 떨어진 다음 제품 이름과 소개를 왼쪽으로 읽습니다. 다 읽은 후 페이지를 아래로 스크롤하면 두 번째 화면에서 아이패드의 그림에 시각이 끌리고, 계속해서 그림의 소개를 오른쪽으로 읽습니다. 이런 시각적 운동을 여러 번 반복하면 전체 페이지가 매끄럽게 읽혀져 S 자 모양의 시각적 탐색 경로를 형성하게 됩니다. 매우 분명합니다.
조기 애플 공식 홈페이지의 제품 상세 소개 페이지
사과를 제외하고 이런 배열 방식은 많은 사이트 페이지, 장편 광고, 조합포장에 광범위하게 응용된다.
유사한 s 형 레이아웃 제품 상세 정보 소개 페이지 π
기타 s 형 레이아웃 페이지
S 자 모양의 레이아웃은 긴 그림 조판에 인기가 많아 사람들의 무의식적인 독서 습관에 부합한다는 것을 알 수 있다.
카드 레이아웃은 컨테이너 스타일 디자인이라고도 하는 그리드 시스템에서 파생된 레이아웃 방법입니다. 문자, 그림 등의 정보 요소를 카드로 분할하여 카드 축적을 통해 완전하고 간결하며 규범적인 페이지를 형성하며, 일반적으로 타오바오, 징둥 등의 전자 상거래에 사용됩니다. COM), 플랫폼 사이트 (예: 전쟁 쿨, behance, Pinterest, Youku) 등 정보량이 많은 페이지. 물론, 우리가 디자인에서 복잡한 그림을 만난다면, 이 레이아웃을 사용하여 우리의 디자인을 더욱 간결하게 만들 수도 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 디자인명언)
카드 레이아웃 페이지
물론, 페이지의 레이아웃은 위에 열거된 방법보다 훨씬 더 다양하지만, 이러한 방법들은 모두 비교적 고전적이고 자주 사용된다. 동시에, 이러한 방법들은 단독으로 존재하는 것이 아니라, 응용 프로그램에서 서로 혼합되어 공존하며, 완전하고 아름다운 페이지를 제공한다. 이러한 조판 방법을 충분히 이해한 후, 우리는 장편 페이지나 포장 전시 작품을 디자인할 때 혼란스럽지 않고 어떻게 시작해야 할지 모를 것이라고 믿는다. (윌리엄 셰익스피어, 햄릿, 독서명언)
먼저 여기까지 나누자, 너에게 도움이 되었으면 좋겠다.