07 년 1 월
Visual Flow 란 무엇입니까?
시각적 흐름은 모든 중요한 요소가 눈에 띄는 방식으로 문서를 통해 시청자의 시선을 전달하며 시력을 방해하거나 시청자가 감각을 잃지 않게합니다. 화살표 나 숫자와 같은 명백한 흐름 요소를 사용하는 것은 웹 디자이너가 흐름을 사용하는 가장 일반적인 방법이지만 독자가 특정 경로를 따라 이동하도록 지시하고 사용하는 데 사용할 수있는 다른 유형의 요소가 있습니다. 이 자습서의 단계는 좋은 흐름과 나쁜 흐름의 예를 보여주고 시각적 흐름의 어휘를 디자인하는 데 도움을줍니다.
시각적 흐름은 여러 가지 방법으로 얻을 수 있습니다.
- 화살
- 순차 이미지 또는 텍스트 요소
- 원근법
- 그라디언트
- 크기 변경
- 곡선
- 이미지의 움직임
- 얼굴 - 특히 눈
다음 이미지는 웹 페이지의 일반적인 실수와이를 수정하는 방법을 보여줍니다.
07 년 2 월
왼쪽에서 오른쪽으로 서쪽 텍스트 흐름
당신이 서구 언어를 읽고 자란다면 텍스트가 왼쪽에서 오른쪽으로 움직여야한다고 생각하는 것입니다. 따라서 눈이 텍스트 줄을 따라 이동하면 왼쪽에서 오른쪽으로 이동합니다.
위의 그림에서 폭포는 오른쪽에서 왼쪽 방향으로 흐르고 텍스트는 폭포 위로 흘러 나옵니다. 우리 모두는 폭포가 무너지는 것을 알고 있기 때문에 텍스트 흐름에 따라 물의 흐름 방향이 끊어집니다. 텍스트를 읽기 위해 시청자의 눈이 잘못된 방향으로 움직입니다.
03 / 07
텍스트가 이미지와 함께 흐르게해야합니다.
이 경우 텍스트가 물과 같은 방향으로 흐르도록 이미지가 반전되었습니다. 모든 요소는 물의 흐름과 텍스트의 흐름에 따라 시청자의 시선을 이끌어냅니다.
04 / 07
왼쪽에서 오른쪽으로 빠르게 동등
이 사진의 말은 오른쪽에서 왼쪽으로 진행되지만 텍스트는 영어이므로 왼쪽에서 오른쪽입니다. 한 방향으로 경주하는 시각적 효과는 텍스트와 다른 방향으로 진행되기 때문에 전체 문서의 속도를 늦 춥니 다.
서양 문화권에서는 언어가 왼쪽에서 오른쪽으로 움직이기 때문에 시각적 방향을 왼쪽에서 오른쪽으로 앞뒤로 연결시키고 오른쪽에서 왼쪽으로는 더 뒤로, 느리게 연결합니다. 속도의 의미를 가진 레이아웃을 만들 때 이것을 기억하고 텍스트와 같은 방향으로 이미지를 움직 이도록하십시오.
07 년 5 월
뷰어의 눈을 감속시키지 마십시오.
말과 텍스트가 모두 같은 방향으로 갈 때, 묵시적인 속도가 증가합니다.
07 년 6 월
웹 포토의 눈보기
사진이있는 많은 웹 사이트에서는 실수를 범합니다. 즉, 사람의 사진을 페이지에 올려 놓으면 사람이 내용을 보지 못합니다 . 이것은 이전 디자인의 About.com Web Design 사이트에서도 볼 수 있습니다.
보시다시피 내 사진은 텍스트 옆에 배치됩니다. 그러나 나는 그 본문을 바라 보면서 거의 등을 돌렸다. 그룹의 두 사람 사이에서 신체 언어를 본다면 내가 옆에있는 사람 (이 경우 텍스트 블록)이 마음에 들지 않는다고 쉽게 추측 할 수 있습니다.
많은 시선 추적 연구에 따르면 사람들은 웹 페이지에서 얼굴을 보았습니다. 그리고 관련 연구에 따르면 사진을 볼 때 사람들은 무의식적으로 눈을 따라 사진이보고있는 것을 볼 것입니다. 사이트의 사진이 브라우저 가장자리를 바라보고 있으면 고객이 보게 될 위치이며 뒤로 버튼을 누릅니다.
07 년 7 월
모든 사진의 눈은 내용을보아야합니다.
About.com에 대한 새로운 디자인에서 사진이 조금 나아졌습니다. 이제 내 눈은 앞으로 나아가고 있으며, 왼쪽에 텍스트가있는 곳을 찾고 있다는 약간의 힌트가 있습니다.
그 위치에 대한 더 좋은 사진은 내 어깨가 텍스트쪽으로 기울어 진 모습 일 것입니다. 그러나 이것이 첫 번째 사진보다 훨씬 나은 해결책입니다. 이미지가 왼쪽뿐만 아니라 내용의 오른쪽에있는 상황에서는 좋은 타협이 될 수 있습니다.
사람들의 얼굴 이미지가 가장 많은 관심을 끌지 만 동물 사진에서도 마찬가지입니다. 예를 들어,이 샘플 레이아웃에서는 강아지를 왼쪽으로 보았지만 이미지는 바로 플러시되었습니다. 그래서 그들은 그 페이지를 보았습니다. 이 레이아웃은 강아지의 방향을 변경하여 화면의 중심을 들여다 보면 개선 될 것입니다.