반응 형 헤더 및 로고 - 팁 및 함정
반응 형 웹 디자인의 개념은 웹에 스며 들었고 프론트 엔드 개발자에게 필수품이되었습니다. 현대 세계에서 반응 형 디자인의 가치를 부인할 수는 없지만 반응 형 레이아웃을 올바르게 디자인하는 방법을 완전히 이해하는 데는 어려움이 있습니다..
웹 사이트의 고유 한 영역이 너무 많기 때문에 주제가 길어질 수는 있지만 개별 요소에 집중하면 사용자의 목표를 더 잘 이해하고 그 목표가 반응 형 디자인으로 어떻게 달성 될 수 있는지 파악할 수 있습니다.
내가 다루고 싶다. 헤더, 로고 디자인 팁, 과 탐색 메뉴, 응답 형 디자인과 관련이 있습니다. 자신의 작업에 적용 할 때 이러한 제안을하고 사용자 행동을 염두에두고 인터페이스를 설계하십시오..
더 얇은 Navbars
대형 화면에서는 큰 헤더가있는 것이 일반적이며, 다단계 링크 티어가있는 대형 헤더도 있습니다. 그러나 더 작은 화면은 동일한 공간을 가지지 않으므로 필요에 따라 제한해야합니다..
기본 모바일 앱은 일반적으로 고정 헤더, 이는 반응 형 디자인에서도 일반적인 관행입니다. 고정 헤더 축소해야한다. 더 작은 기기의 경우 : 콘텐츠에 더 많은 여유 공간이 있지만 독자는 헤더 및 탐색에 직접 액세스 할 수 있습니다..
전체 크기 모니터 및 휴대 장치에서 만화 브루 (Brew) 레이아웃을 예로 들어 봅니다..
600px 중단 점에서 탐색은 페이지의 거의 절반까지 줄어 듭니다. 이렇게하면 로고와 클릭 할 수있는 탐색 메뉴가 모두 작아 지지만 훨씬 더 비례적인 상대 스크린 공간으로.
또한 Cartoon Brew에는 모바일 화면의 응답 메뉴로 드롭 다운 상자가 있습니다. 이것은 그것을 의미합니다. 오버레이 콘텐츠 페이지를 열면이 공간을 충분히 확보해야합니다..
비슷한 예가 Jacksonville Art Walk 웹 사이트에서 찾아 볼 수 있습니다. 스크롤하는 동안 상단 네비게이션 막대가 고정되어 있지만 더 작은 장치에 축소. 더 얇은 네비게이션 도구 콘텐츠를위한 더 많은 공간을 남겨둔다. 더 작은 모바일 화면에서.
navbar의 각 링크에는 텍스트 링크에 연결된 아이콘이 있습니다. 와이드 스크린 모니터에서보기에는 좋지만 작은 화면에서는 너무 자세합니다..
아트 워크 탐색은 770px 중단 점 주변의 고정 링크가있는 드롭 다운 메뉴로 변경됩니다. 아이콘이 너무 작아서 더 작은 장치에서 너무 좁아지기 때문에 아이콘이 드롭 다운 메뉴에 숨겨져 있습니다..
반응 형 헤더를 디자인 할 때는 항상 전체 화면 공간 네비게이션을 스타일링하는 동안. 헤더가 고정 된 상태로 유지되는 것을 원하지 않는다면 완전히 좋지만 여전히 그래야 할 것입니다. 조금 줄이십시오. 페이지 상단에 공간 절약.
Iconify 로고
대부분의 로고는 브랜드를 나타 내기 위해 텍스트와 아이콘 또는 그래픽을 통합합니다. 즉, 항상 아이콘으로 표시하다 (네, 진짜 단어입니다) 이런 종류의 로고 상징에 이르기까지 가득 차있는 버전의.
전체 로고를위한 충분한 공간이 없기 때문에 이는 반응 형 헤더의 강력한 기술입니다. 전체 크기의 로고가 멋지지만 매력적입니다.하지만 이는 반응이 빠른 레이아웃을 위해 지불해야하는 가격입니다..
Web Designer News의 로고를 확인하고 브라우저 크기를 조정할 때 웹 디자이너 뉴스가 어떻게 변하는 지 확인하십시오..
처음에는 사이트를 방문 할 때 모든 사람들이 그 아이콘을 인식하지 못할 수도 있지만 감사합니다. 패턴 인식 이건 큰 문제가 아니야..
사람들은 일반적으로 페이지의 왼쪽 상단이 일반적으로 로고 용으로 예약되어 있다는 것을 알기에 인터넷에 오래있었습니다. 이 작은 분홍색 아이콘은 favicon에서도 사용되므로 너무 멀리 파고 들지 않고 결론을 내리기 쉽습니다..
이 응축 로고 기술에 항상 그래픽을 의지 할 필요는 없습니다. Young And Hungry의 머리글은 밝은 녹색 텍스트를 사용하여 결국 "Y & H"텍스트로 응축됩니다..
모든 사이트에서 브랜딩이 단일 문자로 인식하기 쉽지 않으면이 기능이 작동하지 않을 수 있습니다. 그러나 그것은 로고를 보여주기 위해 간다. 더 간단하게 만들 수있다. 그래픽 및 텍스트와 두 변형 모두 공간을 덜 차지하다. 작은 화면에서.
전체 화면 배경 처리
많은 방문 페이지가 전체 화면 배경을 사용하여 더 많은 관심을 유도합니다. 이것은 강력한 기술이지만 대형 모니터에서 가장 잘 작동하는 경우가 많습니다..
그러면 작은 화면에서 어떻게 처리할까요? 일반적으로 디자이너는 배경 이미지를 제거하십시오. 과거의 특정 중단 점 또는 이미지 자체 재결합하다 창문에 맞게.
Cap Radio Raffle은이 기술을 홈페이지에서 사용합니다. 배경 이미지 초점을 시야에 유지하다 화면의 크기가 아무리 작아도 항상.
일반적으로 이러한 종류의 솔루션 CSS 배치가 필요하다. 하지만 정말 간단합니다. 다만 초점을 시야에 두다 항상, 그리고 이미지 컨테이너의 크기를 조정한다. 장치에 비례하여 맞춰야한다..
심미적 인 이유로 큰 배경을 넘어 페이지 콘텐츠에 큰 이미지를 사용할 수도 있습니다. Mashable의 홈 페이지는 전체 레이아웃에 걸쳐있는 최고의 스토리에 대해 추천 이미지 배경을 사용합니다..
응답 성있는 레이아웃 이미지를 압축합니다. 동안 중심 초점 유지. 스토리가 변경되면 추천 이미지가 변경되므로 사진을 신중하게 관리해야하기 때문에이 작업을 수행하는 것은 어렵습니다. Mashable의 솔루션은 블로그 및 잡지 레이아웃을위한 전체 화면 사진을 올바르게 처리 할 때 여전히 훌륭한 방법입니다..
네비게이션 단순화
작은 화면의 경우 개정 할 때, 최대한 많은 링크 유지 내비게이션에서 쉽게 접근 할 수있게해라.. 즉, 다중 계층 드롭 다운 메뉴가있는 경우 몇 개의 링크를 버려야 할 수도 있습니다..
올바른 전략이 있다면 모든 드롭 다운을 그대로 유지하는 것이 가능합니다. 예를 들어 키즈 스크린은 작은 화살표 아이콘이있는 플라이 아웃 메뉴 응답 메뉴의 하위 링크를 나타냅니다..
많은 사람들이 햄버거 메뉴에 반대한다고 주장하지만 오랜 탐색 메뉴에 필요한 항목으로 받아 들여 왔습니다. 간단히 작동하며 대부분의 스마트 폰 사용자가 "메뉴 버튼"으로 널리 이해하고 있습니다..
사실 3 바 햄버거 메뉴에 의존하지 않는 반응이 좋은 사이트를 찾기 란 쉽지 않습니다. 사이버 침팬지는 훌륭한 예입니다. 수직 드롭 다운을 사용합니다. 슬라이드 인보다는 오히려.
CyberChimps의 탐색 구조가 페이지 상단으로 슬라이드되도록 재 배열됩니다. 메뉴가 위에서 아래로 떨어집니다. 링크 용 큰 블록 요소.
와 더 많은 클릭 영역 과 큰 링크 텍스트, 페이지를 탐색하는 프로세스가 훨씬 간단 해집니다. 전체 응답 헤더로이 철학을 따르고 디자인이 크게 향상 될 것입니다..
나만의 빌드
이러한 팁을 마음대로 활용하면 사용 가능한 응답 헤더를 작성하는 데 문제가 없어야합니다. 당신을 도울 수있는 많은 도구가 있지만 실제로 이해할 수있는 유일한 방법은 연습을 통해서입니다..
그래서 당신과 함께 이러한 기술을 가지고 웹 사이트를 구축 시작! 또한 아래에서 확인할 수있는 반응 형 헤더를위한 몇 가지 추가 리소스를 나열했습니다..
- 기본 모바일 CSS 반응 형 탐색 메뉴 만들기 (teamtreehouse.com)
- 반응 형 웹 사이트 헤더 모범 사례 (ux.stackexchange.com)
- 헤더 이미지의 반응을 적절하게 만들려면 어떻게해야합니까?? (stackoverflow.com)
