| |
본 장은 아이덴티티의 기준이 되는 헤더, 푸터, 네비게이션 채널에 대한 설명을 다루고 있습니다. 주의할점은 네비게시션
채널의 구성 시 본 장의 3개 방식의 혼용을 금지한다는 것입니다. 사용자가 인터페이스에 익숙해지는 학습과정은 일반적이고
직관적인 방식을 사용할 때, 쉽고 빠르게
이루어질 수 있습니다. 서로 다른 항해원칙을 하나의 사이트에서 제공한다면 사용자는 상당한
장애를 느끼게 될 것입니다.
이는 사용자로 하여금 사이트를 일탈하게 하는 큰 요인이기도 합니다.
아래 항목들은 베이직 프레임의 근간이 되는 영역의 정의와 각 영역별 정의를 다루고 있습니다.
이미지 영역을 클릭하거나 하단의 상세보기를 누르면 보다 자세한 내용을 참조할수 있습니다.
|
|
Header - 헤더의 영역은 Basic Frame의
주요 요소입니다. 네비게이션 기능을 포함한 영역입니다.
자세한 내용은 하단의 헤더의 사용정의를 참조하시기 바랍니다. |
|
|
Footer - 새창띄우기를 제외하고는, 헤더와
같이 모든 페이지에 공통적으로 적용 되는 페이지 하단부의 아이덴티티 요소입니다. 자세한 내용은 푸터의
사용정의를 참조하시기 바랍니다. |
|
|
Navigation Channel - 사이트 항해의
중심기능을 담당하고 있는 보조 Identity영역으로 본 LGE B2B Web Style Guide에서는 3가지의
기능성을 다루고 있습니다. 자세한 사항은 네비게이션 채널의 사용정의를
참고하시기 바랍니다. |
|
|
Content Area - 컨텐츠를 다루는 영역으로,
본 가이드에서는 다양한 디자인 구성을 제공하고 있습니다. 구성의 이해에 대한 내용은 Layout
Guide를, 그에 따른 다양한 템플릿은 Layout Guide>Template을
확인하시기 바랍니다.
추가로 본 가이드의 Applications에서는
다양한 응용화면의 디자인을 제공하고 있습니다. |
|
|
LGE Symbol &Logotype - 본
가이드에서 제공하는 사이즈와 색상규정외에는 사용할수 없습니다. 자세한 사항은 Using Logo Type을
참고하시기 바랍니다. 조정불가항목 |
 |
기업슬로건 - 기업전략에 맞춰 사용이 가능한영역입니다. 조정가능항목 |
|
|
Header Bar - 아이덴티티의 중요한 기준이 되는 부분입니다. 사이즈의
조정과 색상은 본
가이드가 제공하는 규정 이외에는 사용할 수 없습니다.조정불가항목 |
 |
Site Name - 각 사이트의 이름을 기재할
수 있는 영역입니다. 조정가능항목 |
|
|
대메뉴 - 지정 간격의 원칙을 제외하고는 변형 사용이 가능한영역입니다.
사이트의 구조에 맞게 조정하여 사용하시기 바랍니다. 조정가능항목 |
|
|
기능메뉴 - 사이트의 기능적 도움을 줄 수 있는 메뉴입니다. 사이트의
성격에 맞게 조정하여
사용하시기 바랍니다. 조정가능항목 |
|
|
보안표시 - 사이트의 보안성을 표시해 줄 수 있는 기능 요소입니다. 보안상태,
비보안상태, 보안표시 없음 등의 선택사용이 가능합니다. 자세한 사항은 Design Rule을 참조하시기 바랍니다.
선택사용항목 |
|
|
Roll Over 메뉴 - 본 장에서는 하위메뉴를 사용할 수 있는 다양한
원칙을 제공하고 있습니다. 자세한 사항은 Design Rule을 참조하시기 바랍니다. 선택사용항목 |
|
|
메뉴 영역 - 사이트의 기능에 맞게 추가적으로 구성하실 수 있는 영역입니다.
필요에 따라 대메뉴를 사용하시거나 보조메뉴의 구성에 사용, 혹은 사이트의 성격에 따라 사용을 하지 않을 수도
있습니다. 단, 제한요소로 폰트와 폰트색상은 조정하실 수가 없습니다. 조정가능항목 |
|
|
Footer Bar - 웹 아이덴티티의 중요 영역입니다. 본 가이드가
안내하고 있는 사이즈와 생상, 폰트 색상을 준수하시기 바랍니다. 조정불가항목 |
|
|
Legal Information - 법률적 저작권의 공고와 기타 지적제산의
내용을 표시하실 수 있는 영역입니다. 사이트의 성격에 맞게 조정, 사용이 가능합니다. 조정가능항목 |
헤더 영역의 메뉴항목을 주항목으로 본다면 그 하위단계를 구성하는 메뉴영역입니다. 본 LGE B2B VI Guide에서는
크게 세 가지 방식의 기능적 구성을 제공합니다.
주의! : 아래의 3가지 메뉴구성 방식은 한 사이트 내에서 서로 혼용 사용할 수 없습니다.
1 - 자바스크립트를 이용한 헤더와의 연동방식
자바스크립트를 이용하여 하위메뉴를 구성하는 방식으로 상단과 좌측의 영역활용으로 이상적인 화면 설계를 제공합니다. 컨텐츠의
사용과 하위 구성이 많은 사이트에 적합한 구성방식입니다.
주의사항에는 플래시무비의 사용 시 스크립트의 처리와 3차 이상의 구성 시 사용될 스크립트의
처리 문제가 있습니다. 개발자는 반드시 플래시무비의 사용과 프로그래밍 작업 시 충돌성에
대하여 사전에 점검하시기 바랍니다.
자세한 사항은 HTML Rule을 참조하시기 바랍니다.
2 - 좌측 영역을 사용한 구성방식
이 구성은 일반적인 인터페이스 형태로 편리한 사용자 사용방법을 제공합니다.
상단부의 하위메뉴 구성을 사용하기 어려울 때 선택할 수 있는 메뉴구성으로 2-4차 메뉴의 항목이 많을 시에는 사용이 부적합한
구성방식 입니다. 가급적 4차의 메뉴는 페이지 내로 분산 처리하는 효과적입니다. 구체적인 사용설명은 Design Rule을,
자세한 화면설계의 원칙에 대해서는 Information Architecture를 참조하시기 바랍니다.
3 - 상단 영역만을 사용한 구성방식
다음의 구성방식은 좌측에 네비게이션 채널의 영역을 확보할 수 없는 구조에서 사용할 수 있습니다. 일반적인 예는 아니나
페이지 상에 정보의 영역을 전면 사용해야 할 경우 쓸 수 있는 구조입니다. 하위 메뉴의 수가 많아지거나 메뉴 글줄이 길어질
경우 구성상 복잡해질 수 있습니다. 계층설계 시에 기능성 메뉴는 가급적 화면내부의 컨텐츠 영역을 활용하시기 바랍니다.
|
