긴 글 주의, 읽기 전 저장을 권장합니다!
시각 디자이너로서 사용자의 가장 기본적인 미적 요구를 충족시키는 것 외에도 브랜드 커뮤니케이션, 정보 커뮤니케이션, 기능적 커뮤니케이션 등이 우리의 역할입니다. 그중에서도 사용자에게 정보를 효과적으로 전달하려면 , 사용자의 재량에 따라 모든 정보를 제공하기보다는 정보 계층 구조를 구축해야 합니다. 이를 달성하기 위한 시각적 방법은 무엇입니까? 이것이 이 기사의 주제입니다.
먼저 아래 두 사진을 보시면 왼쪽 사진은 카메라로 찍은 효과이고, 오른쪽 사진은 사람의 눈이 움직이지 않을 때 보이는 효과를 알 수 있습니다. 인간의 눈에 의한 정보는 한 번에 완성되지 않습니다. 눈이 더 많은 곳에 머무를 수 있도록 동시에 여러 개의 초점을 생성하는 것은 불가능합니다. 디자이너가 고려해야 할 것은 사용자가 특정 영역에서 정보를 얻을 수 있도록 하는 것입니다. 눈의 움직임을 통해 순서를 정하고, 습득과 이해의 과정이 효율적이고 자연스러울 수 있도록 도와줍니다.
이 설계 방법은 두 가지 주요 문제를 해결하기를 희망합니다.
1. 사용자가 정보를 얻고 이해하는 효율성
좋은 정보 계층 구조를 구축하면 사용자가 제한된 시간 내에 유용하고 흥미로운 정보를 빠르게 얻고 이해하여 다음 단계로 나아갈 수 있습니다.
2. 디자이너의 전문성
디자이너의 의식적 분석 정보 우선순위, 어떤 시각적 표현 기법을 확립할 수 있는지 이해합니다. 단지 느낌에 기반한 디자인이 아닌 정보 계층 구조와 각 방법의 이론적 기반을 살펴봅니다.
1. 초기 이해 및 분석
디자인을 시작하기 전에 프로젝트 자체의 배경 목표를 이해하는 것 외에도 시각 디자이너는 특정 페이지에 대한 일부 내용을 이해해야 합니다. . 페이지 위치 지정, 분위기 조성, 정보 우선순위 및 사용자 핵심 행동을 포함한 후속 디자인을 안내합니다.
1.1. 페이지 위치 지정은 페이지 정보의 우선순위와 핵심 동작을 분석하는 데 도움이 되는 전제 조건입니다.
일반적으로:
· 사용자는 누구입니까?
· 사용자가 어디에서 왔는지, 즉 어떤 채널을 통해 페이지를 방문했는지
· 페이지 콘텐츠 포지셔닝, 제공되는 것과 제공되지 않는 것
· 페이지 기능
예시 예시:
구매직거래시장의 새로운 홈페이지를 디자인할 때, 사용자의 서비스 친숙도를 인터랙티브하게 분석하여 핵심 타겟 사용자를 파악했습니다. 홈페이지는 신규 구매자였으며 페이지의 콘텐츠 포지셔닝은 시장의 가치 포인트를 보여주고 사용자가 생성한 데이터를 통해 신규 구매자가 구매에 대한 브랜드 인지도를 직접 형성할 수 있게 되었습니다.
1.2. 분위기는 콘텐츠 자체일 수도 있고, 시각적 요소의 디자인을 통해 만들어질 수도 있지만, 분위기 조성은 반드시 이루어져야 한다는 점에 유의해야 합니다. 사용자가 주목하는 콘텐츠 자체보다 강하지 않아야 합니다.
분위기에는 다음이 포함될 수 있습니다.
· 새해 테마 대규모 프로모션
· 낮은 할인
· 신선한 정보
· 활성 사용자 등
다음은 빅 프로모션 공식 페이지입니다. 왼쪽 사진은 훈훈한 분위기 속에서 카니발 분위기를 이어가고 있습니다. -up 기간이지만 이벤트가 시작될 무렵에는 더 이상 분위기가 중요하지 않습니다. 오른쪽 사진은 분위기 조성과 카테고리 사진을 결합한 조정을 보여줍니다. 분위기와 콘텐츠의 관계가 좋은 해결책입니다.
1.3. 정보 우선순위 분석
1) 사용자의 관심을 끄는 1차 정보: 사용자가 이 페이지에 머무는 시간이 3~5초라고 가정할 때, 사용자가 가장 관심을 갖는 것은 계속 탐색하는 것은 페이지입니다. 핵심 판매 포인트는 1차 정보로, 작지만 세련되어야 하며 디자인의 표시에 중점을 두어야 합니다.
2) 2차 정보는 이해를 돕습니다. 매력과 함께 1차 정보 중 사용자는 3~5분 동안 머무르면 콘텐츠를 더 잘 이해할 수 있습니다. 이때 2차 정보, 즉 정제된 콘텐츠가 표시되어 사용자가 최대한 짧은 시간에 정보를 이해할 수 있도록 도와줍니다. /p>
3) 3차 정보에 대한 자세한 이해: 처음 두 가지 정보는 기본적으로 도움이 될 수 있습니다. 사용자가 더 많은 정보를 얻기 위해 계속해서 더 오래 머무르면 정보의 양이 더 많아집니다. . 시각적 계층 구조는 디자인에서 더 낮거나 대화형으로 표시되어 진입점을 제공합니다.
1.4. 사용자 핵심 행동 분석
다양한 유형의 사용자가 다양한 단계에서 행동합니다. .우리는 이러한 행동의 궁극적인 방향이 무엇인지 결정해야 합니다.
예를 들어 제품 세부정보 페이지에서 일부 사용자는 구매를 결정하기 전에 사용자 리뷰, 거래 내역 등을 확인하지만 이러한 조회 행위는 궁극적으로 사용자가 이 제품을 구매할지 여부를 판단하는 데 도움이 됩니다. 핵심 행동은 궁극적으로 구매 유도입니다.
이러한 분석을 통해 아래와 같이 대형 모듈의 정보 우선순위와 사용자 행동 우선순위가 대화형 출력 문서에 제공됩니다.
세부적인 시각적 디자인을 수행하기 전에 다음이 필요합니다. 각 모듈 내의 구체적인 내용을 우선순위에 따라 분석하여 다음과 같은 도식을 제작하고 상호작용 및 비즈니스 당사자와 함께 확인합니다. 이는 시각적 디자인 프로세스가 방향을 벗어나지 않도록 돕는 중요한 출력입니다.
2. 정보 계층 구조를 확립하기 위한 시각적 방법
시각적 표현 기법에는 주로 다음과 같은 요소가 포함됩니다. 실제 디자인에서는 일차 효과와 이차 효과를 분리하기 위해 여러 가지 방법이 사용될 수 있습니다. 동시에 더 나은 결과를 얻으려면:
· 위치
· 크기
· 거리
· 콘텐츠 형식
· 색상
2.1 위치
위치는 디자인 초기에 고려되는 요소입니다. 규칙을 따르는 디자인은 사용자가 눈앞에 있는 사물을 더 쉽고 빠르게 보거나 이해할 수 있도록 도와줍니다. 위치 디자인 요소와 관련된 두 가지 규칙이 있습니다.
1) 눈이 시각적 중심에서 벗어날 때, 이탈 거리가 동일하다는 조건에서 사람의 눈은 왼쪽 상단을 가장 잘 관찰하고 그 다음은 오른쪽 위, 왼쪽 아래, 그리고 오른쪽 아래가 최악입니다. 따라서 왼쪽 상단과 중앙 상단 부분을 "가장 좋은 시청 영역"이라고 합니다. 예를 들어 웹사이트 로고, 제품명, 테마 등과 같은 중요한 정보는 일반적으로 가장 잘 보이는 영역에 배치됩니다. 물론 이 구분은 문화적 요인에도 영향을 받습니다. 예를 들어 아랍어 문자는 오른쪽에서 왼쪽으로 쓰여지므로 오른쪽 위 부분이 가장 보기 좋습니다. 다음 그림은 Zhang Fan, Luo Qi 및 Gong Xiaodong의 "웹 인터페이스 디자인 아트 튜토리얼"에서 발췌한 것입니다. 화면을 분할한 후 사용자는 위치에 따라 다른 주의를 기울입니다.
2) 두 번째 규칙은 다음과 같습니다. 눈 수평 방향의 움직임은 수직 방향의 움직임보다 빠르고 덜 피로합니다. 일반적으로 수평 방향의 물체가 먼저 보이고 수직 방향의 물체가 그 다음에 보입니다. 아래 그림에서 볼 수 있듯이 왼쪽과 오른쪽의 주의 차이는 위쪽과 아래쪽의 주의 차이보다 작습니다. 평행 관계를 반영하려면 왼쪽과 오른쪽 배열이 더 적합합니다. 간격을 넓히고 싶다면 위치를 통해서만 달성할 수 있습니다. 위아래로 정렬하면 목표를 달성하기가 더 쉽습니다.
예를 들어 아래 타임즈 홈페이지에서 보이듯 왼쪽의 큰 그림이 오늘의 핵심뉴스로, 정보 차원에서 1차 정보입니다. 시각적인 표현은 면적이 넓을 뿐만 아니라 콘텐츠 형태로 큰 그림을 사용하기도 합니다. 아마도 98%의 사용자가 이 부분에 주목하게 될 것입니다.
디자인 도안의 위치를 아래와 같이 조정하면 포커스 뉴스 사진이 1순위 정보라면 비록 큰 사진 형태이기는 하지만 충분히 넓은 면적을 차지하지만 위치가 1순위가 아니기 때문에 가장 좋은 보기 영역은 "최신 헤드라인"으로 인해 시선의 일부가 산만해집니다. 정보가 우선순위인 경우 60명의 사용자만 오른쪽을 먼저 볼 수 있습니다. 그러면 시각적 성능의 격차가 더 넓어져야 합니다. 평등에 가까운 상황.
3) 웹 디자인에서는 스크롤을 드래그하여 나타나는 두 번째, 세 번째 화면보다 첫 번째 화면의 정보가 더 높은 개념이 있습니다. bar.
사용자가 사용하는 화면 해상도가 다르기 때문에 첫 번째 화면의 높이가 달라집니다. 당사 웹사이트의 데이터에 따르면 현재 해상도 높이는 768로 대부분을 차지합니다. , 디자인은 768 높이를 벤치마크로 사용하고 브라우저 자체의 메뉴를 제거합니다. 높이가 점유되면 사용자에게 표시되는 평균 첫 화면은 600px입니다. 이 데이터는 향후 해상도 변경에 따라 조정됩니다. 이 값을 디자인 시 첫 번째 화면의 기준선으로 사용할 수 있습니다.
2.2. 크기
모듈의 위치를 결정한 후 이 모듈에 얼마나 많은 공간을 제공할지 고려합니다. 크기는 정보의 중요성을 직관적으로 반영합니다.
축구, 골프, 야구, 농구 등 4대 구기종목을 포함하는 스포츠 포스터 디자인의 경우 실제 크기에 맞춰 디자인하면 농구와 축구가 더 중요하게 등장하게 된다. 스포츠 평등을 위해 디자인에서 공의 크기가 조정되었습니다.
Giles Colborne의 저서 "Simplicity First"에 나온 결론은 크기를 통해 격차를 넓히는 데 도움이 될 수 있습니다.
1) 중요한 요소는 비율이 맞지 않더라도 더 커야 합니다.
2) 간격을 표시하는 방법을 찾으십시오. 요소의 중요도가 2이면 크기를 4로 만드십시오.
Time Magazine의 홈페이지를 예로 들어 보겠습니다. 현재 디자인 왼쪽의 초점 뉴스 사진이 차지하는 영역을 중앙의 뉴스 사진과의 대비를 통해 넓혀 사용자가 1단계 정보에 먼저 주의를 기울이고 주변 환경에 쉽게 주의를 끌지 않도록 했습니다. ;
두 뉴스 사진 비교 영역을 비교하면 약 4배 정도 차이가 나는 것을 알 수 있습니다;
인터페이스를 다음과 같이 조정하면: 포커스 뉴스 이미지 이후 2배로 감소하므로 시각적 수준의 구분이 명확하지 않음을 알 수 있습니다.
시각적 계층에 영향을 미치는 요소 자체가 차지하는 영역 외에도 요소의 세부 사항이 확대된 정도도 중요한 역할을 합니다. 요소가 더 명확하고 눈에 더 가까워서 먼저 주의를 기울이기 위해서는 정보를 이해할 수 있도록 하는 것이 전제입니다.
아래 사진은 모델회사 홈페이지이며, 홈페이지에 무작위로 등장하는 모델의 사진에는 얼굴 및 반신 사진이 포함되어 있어 사용자가 이해할 수 있도록 합니다. 이는 모델의 이미지이므로 사용자는 디테일이 확대된 사진을 우선시하게 됩니다.
2.3. 거리
앞서 언급한 것처럼 요소의 디테일을 확대하면 눈이 더 가까이 느껴지고 먼저 눈에 띕니다. 평면은 시각적 수단을 통해 3차원 효과를 반영할 수 있으며 크기 외에도 다음과 같은 다른 시각적 기법이 있습니다.
1) 3차원 거리를 확장합니다.
거리가 확장되는 효과를 얻으려면 다음을 수행하십시오. 나열된 방법은 다음을 포함하여 정보를 불분명하게 만들고 눈이 정보에 집중할 수 없는 것처럼 보이게 만드는 것입니다.
· 문자 뒤의 요소를 흐리게 합니다. 아래 사진의 배경은 흐리게 처리되어 있으며, 두 개의 동작 포인트가 결합되어 있으며 오른쪽 아이콘은 동일 평면에 있지 않고 눈에서 더 멀리 떨어져 있습니다. 동작을 식별할 때 배경이 흐려져 사용자가 방해받지 않습니다. 포인트와 텍스트.
·?투명도를 줄이는 것도 중요한 역할을 할 수 있습니다. 일부 배경 이미지가 흐려져 전체적으로 인식하기 어려운 경우 투명도를 낮추는 것도 거리를 연장할 수 있습니다.
·? 반투명 레이어를 추가합니다. 인터페이스에 색상이나 요소가 많을 경우 투명도를 줄이는 것만으로는 강조 표시를 할 때 아래 그림과 같이 거리를 만드는 것이 불가능할 수 있습니다. TV 쇼핑에서는 다른 4개 모듈의 투명도를 줄인 후 풍부한 색상으로 인해 눈에 띄는 간격이 없습니다. 회색 반투명 레이어를 추가하면 TV 쇼핑 이외의 모듈은 자연스럽게 시야에서 물러납니다.
2) 3차원 거리를 좁힙니다
· 그림자를 추가하는 것은 요소가 다른 콘텐츠와 동일한 평면에서 벗어나 있는 것처럼 보이도록 만드는 가장 일반적으로 사용되는 시각적 방법입니다. 팝업 상자나 마우스 움직임과 같이 나중에 나타나는 플로팅 레이어는 다른 정보 위에 배치되어야 하므로 프로젝션을 추가하면 사용자가 아래 정보에 방해받지 않고 프로젝션을 통해 모듈에 집중할 수 있습니다.
3) 3차원적인 것 외에도 2차원적인 거리는 시력에 부정적인 영향을 미친다. 게슈탈트 심리학의 근접 법칙에 따르면 서로 짧거나 가까운 부분이 전체를 형성하는 경향이 있다. ; 인간의 눈은 서로 가까운 정보에 먼저 주의를 기울일 가능성이 높습니다. 시각적 기술을 적용하면 요소가 이전 초점에 더 가까워집니다. 아래와 같이 1차 뉴스 포커스 사진과 오른쪽의 작은 사진이 상대적으로 가까워 시선이 오른쪽 상단으로 이동하기 쉽습니다.
거리를 조정한 후에도 사람이라는 글자보다 중앙에 있는 작은 그림 자체가 더 매력적이지만 초점이 맞는 이미지 아래의 제목이 더 가깝고 전체를 이루고 있기 때문에 시선이 먼저 아래로 내려가는 경향이 있다.
2.4. 콘텐츠 형식
모듈의 위치, 크기, 거리 관계를 결정한 후 동영상, 사진, 텍스트 등을 포함한 콘텐츠의 형식을 계속 고려합니다. 여기에서는 우리가 자주 사용하는 것에 대해 이야기합니다. 텍스트와 비교할 때 그림은 사용자의 관심을 끄는 데 없어서는 안 될 역할을 하며 동시에 사용자가 짧은 시간 내에 이미지 기억을 형성할 수 있게 해줍니다. 시각적인 측면에서 인간의 눈은 일반적으로 그림 다음의 텍스트에 주의를 기울입니다. 하지만 이것만으로는 사용자의 시선을 사진으로 포착해 다음 주의점으로 안내하는 것이 디자인에서 더 고려되는 점이다.
1 ) 방향 안내
사진 속 일부 이미지에는 사람의 시선 방향, 몸짓의 방향, 물체가 움직이는 방향, 조명의 방향 등 분명한 방향성이 있습니다. 이러한 특성은 인간의 눈이 우선순위와 순서가 있는 시각적 계층 구조를 달성하는 방향으로 이동하도록 안내합니다.
아래 그림은 가운데에 있는 캐릭터가 가장 먼저 사람들의 관심을 끄는 정보의 첫 번째 단계라고 가정합니다. 인간의 시선 방향은 오른쪽이므로 사용자가 주목하는 다음 타겟이 회전하게 됩니다. "코더" 텍스트는 두 번째 수준의 정보입니다.
아래 사진의 왼쪽 상단에 있는 WHAT WE DO 위치가 먼저 눈길을 끌기 쉬운 동시에, 오른쪽의 캐릭터 이미지가 더 큰 공간을 차지해 시선도 강탈할 예정이다. 다만, 캐릭터가 움직이는 방향에 대한 다른 정보가 없기 때문에 그림이 나오지 않는다. 안내 역할을 제대로 하게 되면 유저들이 원활하게 탐색을 할 수 없게 된다.
조정 후에도, 그래도 'WHAT WE DO'의 위치가 유리한 부분이 아닌데, 사진의 방향을 안내하는 모습이 문자 메시지에 시선이 집중됐다.
2) 기호 안내
그림 외에도 일부 기호 자체에는 순서와 방향이 있으며, 아라비아 숫자, 알파벳 등 기호에 따라 탐색하도록 눈을 효과적으로 안내할 수도 있습니다. 순서 및 연대순, 화살표 등.
아래 사진의 순위 중 상위 3개는 사용자들이 왼쪽에서 오른쪽으로 읽는 것에 더 익숙하지만, 숫자의 안내로 인해 시선도 영향을 받아 순서대로 읽게 됩니다. of 1gt; 2gt; 3. 원하는 경우 사진 크기를 1씩 확대하여 간격을 넓히고 다양한 시각적 방법을 결합하여 효과를 얻을 수 있습니다.
타임라인은 인터페이스에서도 널리 사용됩니다. 인간의 눈은 정보를 탐색하는 시간 순서에 영향을 받으며 아래 그림과 같이 기존의 탐색 습관을 깨뜨립니다. 2의 위치가 더 높지만 사용자에게 먼저 탐색하도록 안내하기는 쉽지만 타임라인이 정보에 미치는 영향은 더 분명합니다. 일반적으로 사용자는 모듈 1을 먼저 본 다음 오른쪽에서 왼쪽으로 모듈 2에 집중합니다. 시간.
2.5. 색상
색상은 사용자의 인터페이스에 대한 첫인상에 영향을 미치는 중요한 요소이기도 합니다. , 인간의 눈 색상에 대한 관심의 차이는 주로 다음 두 가지 점에 기인합니다.
1) 따뜻한 색상이 먼저고 차가운 색상이 먼저
현재로서는 이에 대한 절대적인 답은 없습니다. 그러나 인간의 눈에는 아래 그림과 같이 차가운 색과 따뜻한 색 사이에 분명한 수준의 차이가 있습니다. 일반적으로 인간의 눈은 왼쪽의 그림을 먼저 봅니다. 인간의 눈이 다양한 파장에 어떻게 반응하는지에 따라;
생리학적으로 말하면 인간의 눈 수정체의 조정은 매우 정확하고 거리 변화에 민감합니다. 파장의 작은 차이에 대해서는 일정한 한계가 있습니다. 올바르게 조정할 수 없습니다. 눈이 동일한 거리에서 서로 다른 파장의 색상을 관찰할 때 빨간색, 주황색과 같이 파장이 긴 따뜻한 색상은 망막에 내부 이미지를 형성하고 파란색, 보라색 등과 같이 파장이 짧은 차가운 색상은 망막에 이미지를 형성합니다. 망막의 외부 이미지. 따라서 따뜻한 색상은 앞으로 나아가는 것처럼 보이고, 차가운 색상은 후퇴하는 것처럼 보입니다.
미국의 디지털 마케팅 회사인 Hubspot은 사용자 클릭 전환에 따른 색상 차이를 테스트하기 위해 A/B 테스트를 실시한 적이 있습니다. 사진에서 왼쪽과 오른쪽 두 테스트 페이지의 내용은 완전히 동일합니다. 2,000명이 넘는 샘플 테스트에서 빨간색 구성표의 클릭률만 다릅니다. 친환경 계획의 클릭률을 21%나 초과했습니다. 테스트 전에 대부분의 연구자들은 녹색 솔루션이 클릭률이 더 높을 것이라고 추측했습니다. 직관적으로 말하면 녹색은 통과 및 허가를 나타내고 빨간색은 경고 및 예방을 더 많이 의미하기 때문입니다.
이 테스트는 따뜻한 색상이 사용자의 관심과 행동에 미치는 영향을 어느 정도 반영합니다. 물론 이는 클릭률을 높이기 위해 따뜻한 색상을 사용해야 한다는 의미는 아닙니다. 스타일은 여전히 제품 포지셔닝에 따라 디자인되어야 합니다.
2) 먼저 높은 대비, 그 다음 낮은 대비
차가운 색과 따뜻한 색이 눈에 다르게 자극하는 것 외에도 색상 대비는 주의력 차이를 유발할 가능성이 가장 높은 요소입니다. .동물들이 자연에서 생존하기 위해 사용하는 보호색은 대비와 관련이 있으며, 사진 속 올빼미는 자신이 살아가는 환경과 관련되어 있으며, 털색은 숨어서 보호하는 역할을 하도록 진화하였습니다. 반대로 큰 색상 대비는 특히 관심을 끌기 쉽습니다. 다음과 같은 노란색 튤립의 독특한 붉은 색
앞서 언급한 크기와 거리는 모두 색상 대비를 반영하는 시각적 수단입니다. 는 주로 다음과 같은 방법을 통해 이루어집니다.
· 색상 대비, 아래 사진에서 메인 색상은 파란색이며 파란색 액션 포인트는 전체 색상과 일치하며 레벨이 상대적으로 약한 반면 녹색 액션 포인트와 파란색 사이의 색상 대비가 레벨을 높여줍니다.
하지만 색상이 다양합니다. 대비의 크기를 어떻게 결정합니까? 아래 그림과 같이 색상 원을 통해 볼 수 있습니다. 색상 대비의 강도는 색상 원의 거리에 따라 달라지며, 그 반대의 경우도 마찬가지입니다.
· 채도 대비와 명도 대비는 비교적 이해하기 쉽고, 두 색상 간의 채도나 명도 값의 차이가 클수록 대비가 커진다는 수치를 가지고 있습니다. , 그 반대의 경우도 마찬가지입니다. 구체적인 예를 살펴보세요. 예를 들어 다음 내비게이션 지도에서 현재 문자 아이콘은 밝기가 높아서 낮은 밝기의 검정색 배경과 높은 대비를 이루며 먼저 쉽게 눈에 띕니다.
다음 원형 파이 차트는 전체 채도가 낮은 것과 대조적으로 채도가 높은 비율을 보여줍니다. 채도를 통해 동일한 색상을 비교하면 간격을 넓혀 시각적 계층을 형성할 수 있을 뿐만 아니라 시각적 효과도 전체적으로 볼 수 있습니다.
위에서 언급한 시각적 표현 기법을 요약하자면, 누구나 쉽게 기억할 수 있는 표를 구성합니다.
3. 페이지의 시각적 흐름을 검토합니다.
시각적 사용 후 정보 계층 구조를 설정하기 위한 표현 기술을 사용하려면 디자이너는 페이지의 큰 모듈과 모듈 내에서 탐색하는 것을 포함하여 사용자의 탐색 순서가 실제로 우리가 기대하는 수준인지 여부를 지속적으로 검토해야 합니다. 페이지에 시각적 흐름을 형성합니다.
페이지의 시각적 흐름을 조사하면 사용자가 페이지를 원활하게 탐색하고 있는지, 디자인이 효과적으로 안내할 수 없는지 여부를 판단하는 데 도움이 됩니다. 사용자의 시선, 사용자의 브라우징은 무작위적인 경향이 있으며, 우리가 표현하고 싶은 정보를 빠르게 전달하기 어려울 것입니다.
다음 콘텐츠는 주로 다음을 포함하여 보다 일반적인 시각적 흐름과 각 유형의 특징을 소개합니다.
· 선형 시각적 흐름
· 안내된 시각적 흐름
p>
· 점핑하는 시각적 흐름
· 방사적인 시각적 흐름
1) 선형적인 시각적 흐름
· 수평적인 시각적 흐름이 사용자의 시선을 안내합니다. 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로의 시각적 흐름은 사용자의 시각적 습관에 가장 적합하고 사람들에게 안정감과 신뢰성을 주는 탐색 방법입니다.
예를 들어, digg.com 홈페이지에서는 전체 페이지와 개별 모듈이 전형적인 수평적 시각적 흐름입니다. 사용자가 왼쪽에서 오른쪽으로 테두리를 탐색한 후 그의 눈은 다시 다음 줄로 훑어봅니다. 왼쪽에서 오른쪽으로 계속 읽으세요. 가로 탐색에 가장 적합한 영역에 대한 값이 있습니다. 예를 들어, digg에서 선택한 페이지 너비는 약 1000px이고 사용자 화면의 해상도가 3이 되면 각 줄에 3개의 항목이 표시됩니다. 더 커지면 이 두 값은 계속해서 증가해야 하며, 정보를 획득하는 데 인간의 눈이 가장 효율적인가요? 나는 이 질문에 대해 상응하는 이론적 또는 실험적 뒷받침을 찾지 못했기 때문에 나중에 정보를 찾아볼 것입니다.
·?세로적인 시각적 흐름은 사용자가 위에서 아래로 탐색하도록 안내합니다. 눈의 세로 움직임은 눈동자가 지속적으로 초점을 맞춰야 하기 때문에 페이지 모듈을 세로로 스캔할 때의 효율성은 크게 다르지 않습니다. 수평 브라우징이지만 세부 사항을 읽을 때 효율성이 떨어지게 됩니다. 예를 들어 세로로 정렬된 텍스트는 단어 하나하나 읽어야 하는 고대 시나 고대 텍스트에 더 적합합니다.
아래 그림 레이아웃을 수직 시각적 흐름으로 조정한 후 원래의 수평적 시각적 흐름을 보여줍니다. 사용자는 특정 대상 정보를 찾을 때까지 세 개의 열 중 하나를 선택하여 수직으로 탐색한 다음 세부 정보를 탐색합니다. 수평으로.
사용자가 더 많은 정보를 탐색하기 위해 위아래로 스크롤하는 데 익숙하기 때문에 웹 인터페이스의 세로 높이 제한은 가로 높이 제한보다 작습니다. 흐름은 사용자가 다시 스캔할 필요가 없도록 도와줄 수 있습니다. 아래와 같이 Facebook 캘린더 인터페이스에서 자세한 정보를 보려면 아래를 클릭하세요. 타임라인이 가로로 정렬되어 있으면 너비가 제한되어 있으므로 가로로 전환하거나 스크롤을 사용해야 합니다. 더 많은 날짜를 보려면 막대를 사용하세요.
타임라인 방향을 수직으로 조정하면 사용자가 위아래로 스크롤하여 해당 월의 모든 날짜를 더 효율적으로 볼 수 있습니다.
·?비스듬한 시각적 흐름은 움직임과 속도감을 느낄 수 있지만 기울어진 각도로 인해 많은 양의 텍스트 정보 배열은 적합하지 않습니다. 이러한 시각적 흐름을 위해 아래의 피트니스 클럽 포스터와 같이 정보가 상대적으로 적은 인터페이스나 디자인 장식에 자주 사용됩니다.
또한 웹 인터페이스에는 다음과 같은 작은 규모의 대각선 시각적 흐름이 있습니다. 운동감.
·?곡선의 시각적 흐름, 사용자의 시선은 리듬감과 생동감이 있는 개인화된 곡선을 형성하며 이러한 유형의 안구 운동 범위는 크고 장기적으로 대규모로 사용됩니다. 시각적 피로를 유발하므로 텍스트의 큰 단락에 적합하지 않습니다. 일반적으로 그래픽과 결합하여 곡선의 시각적 흐름을 만들어 사용자의 시선이 이미지 영역에 잠시 머무를 수 있게 합니다.
아래 그림과 같이 곡선의 시각적 흐름에 그림이 추가되어 시선이 그림의 노드에 위치하게 됩니다. 잠시 멈추고 이 노드의 내용을 탐색한 다음 선을 따라 탐색을 계속합니다.
2) 안내된 시각적 흐름
아래 그림과 같이 안내된 시각적 흐름은 사용자의 관심을 끌 수 있는 유도 요소를 디자인한 후, 다음을 통해 타겟 정보에 주의를 기울이게 됩니다. 공통 유도 요소는 선, 사람이나 사물을 포함한 이미지, 화살표, 문자 등의 표시 등으로 나눌 수 있습니다. 이러한 종류의 시각적 흐름은 유도 요소와 대상 정보 사이의 일차 및 이차 관계를 파악해야 합니다. 순수한 유도 요소는 너무 강하지 않아야 합니다. 그렇지 않으면 대상 정보의 일부가 유도에 포함될 수 있습니다. 요소로 인해 정보 전달의 효율성이 높아질 수 있습니다.
아래 사진과 같이 튜브 안의 붉은색 액체가 움직이며 그 이동 방향을 따라 사용자가 타겟 메시지에 도달하도록 유인합니다
위에서 언급한 콘텐츠 형태는 그림이나 기호에서 다음으로 안내되는 시각적 초점은 시각적 흐름의 관점에서도 방향성 유형입니다. 다음 두 가지 예는 페이지에서 로컬로 방향성 시각적 흐름을 사용하는 것입니다.
3) 시각적 흐름 점프
자연에서는 동일하거나 유사한 정보 중에서 눈에 띄는 정보나 흥미로운 정보를 탐색하는 것이 사람들에게 독립적인 선택을 할 수 있는 권리를 부여하지만, 디자인은 강도를 조정하여 흔적을 남기지 않고 우선순위를 전달할 수도 있습니다. 요소의.
예를 들어 앞서 언급한 모델 회사 웹사이트 인터페이스에서 모델 사진은 모두 동일한 성격의 정보입니다. 사용자 탐색은 어느 정도 임의성을 가지지만 확대 및 축소를 통해 우선순위도 전달됩니다. 초상화 중에서.
4) 방사능적인 시각적 흐름
시선은 페이지 중앙에서 시작되므로 중앙에 있는 요소가 가장 강한 임팩트를 주고 정보가 가장 명확하게 전달되며, 그런 다음 중앙에서 방사되는 시각적 움직임을 형성합니다.
예를 들어 많은 자동차 웹사이트에서는 중앙에 있는 메인 이미지가 정보의 핵심을 가장 잘 반영할 수 있으며, 그 정보는 위의 내비게이션이나 아래의 다른 서비스 입구에 배포됩니다.
위에서 소개한 네 가지 유형의 시각적 흐름은 비교적 일반적이지만 모든 것을 대표하지는 않습니다. 정보는 우선순위에 따라 정보를 전달하는 것이 우리가 항상 고수해야 할 목표입니다.
마지막으로 요약하자면:
1. 프로젝트 초기 단계에서는 페이지가 만들어내는 분위기와 콘텐츠 포지셔닝을 이해하고 정보의 우선 순위를 분석해야 합니다. 사용자의 핵심 행동과 상호작용, 준비는 시각적 디자인 프로세스를 원활하게 유지하는 데 도움이 됩니다.
2. 위치, 크기, 거리, 내용 형식, 색상 등 시각적 표현 방법을 통해 정보 계층 구조를 구축합니다.
3. 디자인 과정 및 종료 우리는 사용자가 원활하게 탐색하고 있는지 확인하기 위해 페이지의 시각적 흐름을 지속적으로 검토해야 합니다.
우리는 사용자가 관심을 갖는 정보의 우선 순위를 의식적으로 분석하고 이를 시각적으로 표현합니다. 이는 시각 디자이너의 매우 중요한 책임입니다. 이러한 방법이 이러한 책임을 더 잘 만드는 데 도움이 되기를 바랍니다. 여러분도 즐감하시고 모두 격려해주세요!
친구들과 함께 작은 프로그램 Theory Dock을 만들었습니다. 나만의 이론 라이브러리를 만들어보세요. 상호 작용, 심리학, 관리에 관한 많은 용어와 이론이 있습니다. WeChat Quick code 체험에서 다음 작은 프로그램을 스캔해 보세요!