다음 4가지 사항에 주의해야 합니다.
1. 시각적 효과 향상
2. p>
3. 통일된 비전
4. 신선함과 개성이 최고의 레이아웃 영역입니다.
홈페이지 디자인의 첫 번째 단계는 레이아웃 디자인입니다.
전통적인 신문, 잡지 편집자들처럼 우리는 웹페이지를 레이아웃과 레이아웃에 있어서 신문이나 잡지로 간주합니다.
동적 웹페이지 기술의 발전으로 인해 장면 시나리오 작성을 배우는 경향이 있지만 고정된 웹페이지 레이아웃 디자인의 기본은 여전히 배우고 숙달해야 합니다. 그들의 기본 원칙은 매우 일반적이며, 하나의 예를 통해 핵심 사항을 이해하고 추론을 이끌어 낼 수 있습니다.
레이아웃은 브라우저에 표시되는 전체 페이지를 의미합니다(프레임 및 레이어를 포함할 수 있음). 사람마다 모니터 해상도가 다르기 때문에 같은 페이지라도 640*480픽셀, 800*600픽셀, 1024*768픽셀 등 다양한 크기로 나타날 수 있습니다. 레이아웃은 탐색에 가장 적합한 방식으로 페이지의 다양한 위치에 그림과 텍스트를 배열하는 것입니다.
'가장 적합한'은 불확실한 형용사라는 점을 눈치채셨을 것입니다. 가장 적합한 것은 무엇입니까? 죄송합니다. Ajie는 귀하에게 완전하고 정확한 답변을 드릴 수 없으며 드릴 수도 없습니다. 누군가가 성공의 비결이 무엇인지 알고 싶어 하는 것처럼, 성공한 사람은 어떤 방법을 사용해야 할지, 어떤 경로가 가장 쉬운지 조언만 할 수 있을 뿐, 성공의 '비밀'을 한 번에 말해 주는 것은 불가능하다. .
디자인 싱킹 시리즈 네 번째 기사에서 사이트의 전반적인 창의성에 대해 이야기했습니다. 레이아웃도 창의적인 문제이지만 사이트의 전반적인 창의성보다 더 쉽고 규칙적입니다. 먼저 레이아웃 단계를 이해해 보겠습니다.
1. 초안
새 페이지는 표, 프레임워크 또는 규칙이 없는 빈 종이와 같습니다. 가능하다면 상상력을 발휘하여 생각하는 "장면"을 그려보세요. (백지와 연필을 사용하는 것이 좋습니다. 물론 Photoshop과 같은 그리기 소프트웨어를 사용할 수도 있습니다.) 디테일이나 기능에 신경 쓸 필요 없이 대략적인 선만 사용하여 아이디어의 윤곽을 그리는 창의적인 단계입니다. 가능한 한 많은 그림을 그리고 마지막으로 만족스러운 그림을 스크립트로 선택하여 계속 만듭니다.
2. 대략적인 레이아웃
초안을 기반으로 페이지에 배치해야 한다고 판단되는 기능 모듈을 배열합니다. (참고: 웹사이트 로고, 메인 메뉴, 뉴스, 검색, 친숙한 링크, 광고 배너, 메일링 리스트, 카운터, 저작권 정보 등을 주로 포함하는 "홈페이지 디자인-소개"에서 기능 모듈을 언급했습니다.) 여기서는 핵심 강조, 균형, 조화의 원칙을 준수해야 하며, 웹 사이트 로고, 메인 메뉴 등 가장 중요한 모듈을 가장 눈에 띄고 눈에 띄는 위치에 배치한 다음 보조 모듈의 배출을 고려해야 합니다.
3. 마무리
대략적인 레이아웃을 다듬고 구체적으로 만듭니다. (자신의 지혜와 경험에 의지하고 암시와 연상을 해야만 창의적인 레이아웃을 만들 수 있습니다.)
레이아웃 과정에서 우리가 따를 수 있는 원칙은 다음과 같습니다.
1. 정상적인 균형 --- "균형이 잘 잡힌"이라고도 알려져 있습니다. 주로 질서를 강조하고 안정성, 정직성 및 신뢰의 효과를 얻을 수 있는 좌우, 상하 대비 형태를 나타냅니다.
2. 비정상적인 균형---즉, 대비가 없는 형태일 뿐만 아니라 균형과 리듬도 모두 불균일합니다. 높은 관심.
3. 대비---소위 대비는 표현을 위해 색상이나 톤 등의 기법을 사용할 뿐만 아니라 고대와 현대, 새 것과 오래된 것, 가난한 것과 부유한 것 등을 비교하는 것을 포함합니다. 콘텐츠.
4. 시선---소위 시선은 페이지에 등장하는 인물의 시선을 사용하여 시청자를 따라가는 심리를 모방하여 일반적으로 페이지를 응시하는 효과를 얻는 것입니다. , 별 시선이 사용됩니다.
5. 여백---여백은 두 가지 기능을 가지고 있으며, 한편으로는 다른 웹사이트에 비해 뛰어난 우수성을 표현하며, 다른 한편으로는 웹페이지의 맛의 우수성을 표현하기도 합니다. 이러한 표현 방법은 웹 페이지의 스타일을 효율적으로 강조하는 데 매우 중요합니다.
위의 디자인 원칙은 지루하더라도 이를 이해하고 페이지 레이아웃에 적용할 수 있다면 효과는 매우 달라질 것입니다.
예를 들어
○웹페이지의 흰색 배경이 너무 흐릿한 경우 색상을 추가할 수 있습니다.
○레이아웃이 분산된 경우 선과 기호를 사용하여 연결하세요;
○ 왼쪽에 텍스트가 너무 많아서 균형을 유지하기 위해 오른쪽에 그림을 삽입하세요;
○테이블이 너무 규칙적이니 시도해 보세요 대신 앞쪽 모서리를 사용합니다.
지속적인 시도와 개선을 통해 귀하의 웹페이지는 분명 더욱 아름다워질 것입니다 :)
우리가 자주 사용하는 레이아웃 형식을 살펴보세요:
1. "T" 구조 레이아웃. 소위 "T" 구조. 페이지 상단의 가로형 웹사이트 로고 + 광고 스트립, 하단 왼쪽의 메인 메뉴, 오른쪽의 콘텐츠 레이아웃을 의미합니다. 메뉴바의 배경이 어두워서 전체적인 효과는 비슷합니다. 영어 문자 "T"이므로 "T" 모양이라고 합니다. 웹 디자인에서 가장 널리 사용되는 레이아웃 방법입니다. 이 레이아웃의 장점은 페이지 구조가 명확하고 우선순위가 명확하다는 것입니다. 초보자가 사용하기 가장 쉬운 레이아웃 방법입니다. 단점은 규칙이 엄격하고, 디테일과 색상에 주의를 기울이지 않으면 쉽게 "지루"해질 수 있다는 점입니다.
2. "입" 레이아웃. 이는 그림 문자 설명입니다. 즉, 일반적으로 페이지 상단과 하단에 광고 배너가 있고 왼쪽에는 기본 메뉴, 오른쪽에는 친숙한 링크 등이 있고 중앙에는 주요 콘텐츠가 있습니다. 이 레이아웃의 장점은 레이아웃을 최대한 활용하고 정보의 양이 많다는 것입니다(내 홈페이지가 이 레이아웃에 속합니다). 단점은 페이지가 복잡하고 유연성이 부족하다는 것입니다. NetEase 벽지 웹사이트처럼 네 면을 비워두고 가운데만 사용하는 창형 디자인도 있습니다.
3. "3"형 레이아웃. 이런 레이아웃은 해외 사이트에서 주로 사용되며, 중국에서는 많이 사용되지 않습니다. 특징은 페이지에 두 개의 가로 색상 블록이 있으며 전체 페이지를 네 부분으로 나누는 것입니다. 대부분의 색상 블록에는 광고 배너가 포함되어 있습니다.
4. 대칭 대비 레이아웃. 이름에서 알 수 있듯이 좌우 대칭 또는 상하 대칭 레이아웃을 채택하고 반은 어둡고 반은 밝으며 일반적으로 디자인 사이트에 사용됩니다. 시각적인 임팩트가 강한 것이 장점이지만, 두 부분을 유기적으로 결합하기 어렵다는 단점이 있다.
5.POP 레이아웃. POP는 광고 용어에서 유래되었습니다. 즉, 페이지 레이아웃이 홍보 포스터와 같고, 아름다운 그림을 페이지 디자인 중심으로 한다는 뜻입니다. ELLE.com과 같은 패션 사이트에서 흔히 사용됩니다. 장점은 분명합니다. 아름답고 매력적입니다. 단점은 느리다는 점이다. 레이아웃으로서 배울 가치가 있습니다.
위 내용은 인터넷의 일반적인 레이아웃을 요약한 것입니다. 사실, 독특한 레이아웃이 많이 있습니다. 핵심은 창의성과 디자인에 있습니다.