탐색 모음은 페이지 위쪽이나 측면, 제목 배너 이미지 위 또는 아래에 있는 가로 탐색 단추 행으로, 사이트 또는 소프트웨어의 페이지를 연결하는 데 사용됩니다. 웹 사이트 또는 응용 프로그램은 탐색 모음을 사용하여 방문자가 필요한 리소스 영역을 보다 명확하게 찾고 리소스를 검색할 수 있도록 합니다. APP 내비게이션 막대 디자인에 대해 자세히 분석해 보겠습니다. 관심 있는 파트너들이 함께 계속 내려다보겠습니다! APP 탐색 막대의 설계 요점을 충분히 분석합니다. 먼저 탐색 막대를 소개합니다. 탐색 모음은 어디에 있습니까? 탭 모음, 메뉴 모음, 탭 모음, 열, 제목 열, 탐색 열 등의 UI 디자인 구성 요소 ... 많은 새로운 디자이너들이 이러한 중복 이름을 해당 영역과 구분하기가 어렵습니다. 탐색 막대는 응용프로그램 맨 위, 상태막대 아래에 있습니다. 주로 페이지의 위치와 계층을 명확하게 하고 상위/하위 구조 페이지를 연결하는 데 사용되며, 현재 페이지의 모든 내용보다 가중치가 중요합니다. 사용자가 현재 위치를 모르고 이전 단계로 돌아가는 방법을 모르는 경우 탐색 막대에 문제가 있는 것이 분명합니다. IOS 시스템에서는' 탐색 표시줄' 이라고 하고 안드로이드 시스템에서는' 맨 위 애플리케이션 바' 라고 불리며 이름은 다르지만 지위와 역할은 거의 같다. 탐색 막대는 어떤 역할을 합니까? 먼저 내비게이션 막대는 사용자에게 현재 위치를 알려주고 사용자가 길을 잃지 않도록 이전 또는 다음 단계로 돌아가는 작업 포털을 제공합니다. 둘째, 현재 페이지의 내용은 위쪽 탭을 통해 정렬되며, 다양한 항목이 탐색 모음에 모여 사용자에게 글로벌 작업을 제공합니다. 마지막으로 컨테이너 브랜드 색상, 아이콘 브랜드 색상 등과 같은 브랜드 노출을 증가시킬 수 있습니다. , 필요한 경우 브랜드 로고도 배치합니다. 일부 페이지에 탐색 모음이 없는 이유는 무엇입니까? 시스템이 사용자에게 더 많은 정보를 제공하거나 사용자가 몰입할 수 있는 경험이 필요한 경우 탐색 막대를 약화시키고 숨겨서 더 많은 페이지 공간을 확보하여 단일 화면 페이지의 정보를 늘릴 수 있는 공간 리소스를 확보해야 합니다. 예를 들어, 온라인 읽기 및 지도 탐색 중에는 탐색 막대가 숨겨져 있습니다. 이 시점에서 사용자의 관심은 컨텐츠 자체에 오래 머물러 있을 뿐 잦은 운영은 필요하지 않기 때문입니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 온라인명언) 탐색 막대를 숨기면 공간을 확보하고 관련 없는 요소가 사용자에 미치는 간섭을 줄일 수 있습니다. 서비스 모드를 선택할 때 방울방울 이동을 사용하면 탐색 막대의 백그라운드 컨테이너가 일시적으로 숨겨지고 관련 아이콘만 입구를 조작합니다. 완전히 숨겨져 있지는 않지만 지도 공간 부족 문제를 어느 정도 완화할 수 있다. 위의 탐색 프로세스보다 장면의 운영 요구 사항과 빈도가 훨씬 높습니다. 둘째, 탐색 막대의 구조 탐색 모음은 왼쪽, 가운데, 오른쪽의 세 가지 구조로 나뉩니다. 주로 반환 버튼 (왼쪽), 제목 (가운데), 보조 작업 버튼 (오른쪽) 은 가장 일반적이고 가장 일반적인 레이아웃 방법을 기반으로 합니다. 실제 응용 프로그램에서는 다양한 제품 요구 사항과 사용자 목표를 충족하기 위해 탐색 막대의 레이아웃은 여러 가지가 있습니다. 스타일이 아무리 복잡하더라도 디자인 측면에서만 볼 수 있으며, 이를 통해 사용자의 작업을 보다 간단하고 편리하게 수행할 수 있습니다. IOS 의 이중 그림을 예로 들어 내비게이션 막대를 하나씩 분해하여 다양한 내비게이션 막대에서 볼 수 있는 요소와 구성 요소를 확인합니다. 컨테이너 1. 즉, 탐색 막대의 범위는 컨테이너를 제한하고 모든 요소는 컨테이너에 있어야 합니다. IOS 시스템 응용 프로그램에서 일반 탐색 모음의 고정 높이는 88px 입니다. 헤드 라인 탐색 스타일에서도 현재 높이에 관계없이 iPhone 인터페이스 및 제품 관리자 응용 프로그램과 같은 인터페이스의 스크롤에 따라 88px 의 정상 높이로 변환됩니다. 또한 일부 응용 프로그램은 더 많은 인터페이스 공간을 확보하기 위해 표면에 컨테이너가 보이지 않고 실제로 컨테이너의 불투명도를 0 으로 조정합니다. 논리적으로 컨테이너는 여전히 존재하며 각 요소는 여전히 컨테이너에 구속되어 있습니다 (예: 드립 택시 인터페이스). 2.Title Title 사용자의 현재 위치 또는 페이지의 특정 장면을 설명하는 데 사용됩니다. 아이폰이 전체 화면이 나타나기 전에 장치 화면 공간이 제한되어 있어 대부분 일반 제목인 34px~40px (그리드 요구 사항, 작성자는 일반적으로 36px) 를 사용하여 굵게 및 중간 제목을 만듭니다. 전면 화면 장치가 보급됨에 따라 화면 높이가 더욱 커지고 탐색 막대의 여유 공간이 늘어나고 헤드라인 스타일이 등장하기 시작하면서 디자인 플랫폼 사양이 등장하게 됩니다. (윌리엄 셰익스피어, 「깨어링」, 「킹」, 「킹」, 「킹」, 「킹」, 「킹」, 「킹」) 헤드 라인 탐색 모음은 디자인 스타일뿐만 아니라 제품 포지셔닝 및 기능의 영향에 중점을 둡니다. 제목이 머리말에 더 많은 공백과 호흡감을 줄 수 있다는 것은 의심의 여지가 없다. 제품 구조가 얕고, 기능이 단일하며, 볼륨 수준이 가벼운 어플리케이션에 적합하다. 바로 우리가 흔히 말하는 것이다. "작고 아름답다", 모두가 제품 매니저 플랫폼인데, 이 방면에서 잘 해냈다. 제목 탐색 막대의 컨테이너 높이는 192px 이고 글꼴 크기는 일반적으로 56px~68px 범위로 설정됩니다 (그리드 요구 사항, 작성자가 일반적으로 64px 사용). 페이지가 미끄러지면 88px 의 정상 높이로 돌아가고 제목 크기도 줄어듭니다. 3. 아이콘 홈 탐색 모음에 있는 아이콘은 왼쪽에서 흔히 볼 수 있는 포지셔닝 및 브랜드 로고와 같이 다양합니다. 서랍 메뉴 항목 등. , 오른쪽에 있는 탐색 아이콘 (예: 검색, 메시지, 스캔 등) ... 2 차 및 이후 페이지는 상대적으로 고정되어 있으며, 왼쪽에 뒤로 아이콘이 있어야 이전 페이지로 돌아갈 수 있습니다 (왼쪽 머리글, 아래쪽 머리글, 닫기 버튼 등). 어떤 스타일을 디자인하든 사용자가 당혹스럽지 않도록' 회귀' 스타일의 기대에 부합해야 한다는 점에 유의해야 한다. 기능 아이콘은 일반적으로 2 차 기능의 확장, 정보 제출, 삭제와 같은 오른쪽에 있습니다. , 기능 수준 혼동을 피하기 위해 연산자를 두 개 이상 사용하지 마십시오. 4. 버튼 탐색 모음의 왼쪽은 이미' 뒤로' 아이콘으로 채워져 있고, 버튼은 오른쪽에만 놓을 수 있으며, 대부분 문자 버튼이며, 주로 페이지의 보조 작업과 기능 입구를 호스팅하는 데 사용됩니다. 탐색할 수 있는 충분한 수직 공간이 있을 때 원, 사각형, 둥근 사각형 등의 컨테이너 버튼을 사용할 수도 있습니다. 페이지의 시각적 가중치는 단추의 모양, 크기, 채우기, 가장자리 등에 따라 결정되므로 1 차 및 2 차 관계를 유연하게 구분할 수 있습니다. 좋은 탐색 버튼은 항상 사용자의 주의를 끌 수 있다. 5. 검색 상자 검색 기능 가중치가 높고 아이콘과 버튼을 포털로 사용하여 사용자의 빈번한 검색 요구를 충족시킬 수 없는 경우 검색 기능을 강조하고, 사용자에게 검색 컨텐츠 탭을 추천할 수 있을 뿐만 아니라, 입력 상자를 통해 탐색 모음의 대부분의 영역을 차지하여 제품의 조작성을 높일 수 있습니다. 검색 상자의 면적이 확대됨에 따라 사용자는 정확한 클릭이 필요 없고 손끝에 닿을 수 있습니다. 내용이 많은 홈 페이지의 경우 탐색 모음은 제목, 범주, 아바타, 버튼 등 많은 정보를 호스팅해야 합니다. , 네비게이션 막대의 높이를 제때에 늘릴 수 있습니다. 두 번째 줄은 검색 상자를 표시하여 검색 상자가 JD.COM, 타오바오 등의 전자 상거래 응용 프로그램과 같은 사용자 작업에 미치는 영향을 과도하게 약화시키는 것을 방지합니다. 전체 페이지의 수직 공간을 절약하려면, 조건부로 페이지를 슬라이딩하고, 탐색 막대의 높이를 낮추고, 미국단 배달과 같은 검색 상자만 표시할 수 있습니다. 6. 사용자 프로필 많은 소셜 제품은 사용자의 프로필 정보를 탐색 모음의 왼쪽과 오른쪽에 배치하여 언제든지 사용자 관련 기능을 호출합니다. 예를 들어 개인 설정, 개인 정보 전시, 회원센터, 개인 홈페이지 등을 클릭하세요. 7. 레이블/분류 탐색 막대의 분류 메뉴에는 세그먼트 컨트롤 및 레이블 탐색이 포함됩니다. 세그먼트 컨트롤은 일반적으로 2~4 개의 레이블로 구성되며 왼쪽 및 오른쪽 슬라이딩을 지원하지 않습니다. 클릭 직접 콘텐츠 전환 레이블 탐색은 비교적 유연하여 더 많은 콘텐츠를 분류하는 데 적합합니다. 모든 분류는 좌우 슬라이딩을 통해 볼 수 있어 더욱 편리하게 탐색할 수 있습니다. 8. 더 많은 메뉴에 위에서 말한 라벨은 제품 내용의 분류이며, 여기서 더 많은 것은 제품과 시스템의 액세스 가능성을 가리킨다. 페이지의 일부 기능이 자주 실행되거나 현재 페이지 정보와 관련이 있지만 포털을 직접 표시하는 것이 편리하지 않거나 탐색 막대의 나머지 공간이 충분하지 않은 경우 사용자에게 적절한 조작 포털을 제공하고 제품의 다양한 숨겨진 요구 사항을 충족할 수 있는 추가 메뉴에 기능을 배치할 수 있습니다. 9. 분할선은 단순한 선이 아니라 탐색 막대와 컨텐츠 영역의 경계를 구분하는 선, 면 또는 투영이 될 수 있습니다. 사용자는 인식 컨텐츠 영역을 시각적으로 차단하여 페이지가 위아래로 미끄러진 후 맨 위 위치를 반복적으로 스캔하지 않도록 할 수 있습니다. 분할선은 탐색 막대와 컨텐츠 인터페이스의 계층 관계를 반영하기 위한 것입니다. 시각적 분할이 부족하면 사용자가 하나의 계층이라고 느끼게 되어 인식의 난이도를 높일 수 있다. 물론 모든 응용 프로그램이나 인터페이스에 시각적 분할이 필요한 것은 아닙니다. 예를 들어 인터페이스 내용이 적고 인터페이스 배경색이 탐색 모음 컨테이너와 크게 다릅니다. 다중/다중 카드 ... 셋째, 탐색 막대 스타일은 1 으로 분류됩니다. 2 차 및 후속 인터페이스의 95% 이상이 일반 탐색 모음이며 비교적 간단한 홈 페이지에서도 사용할 수 있습니다. IOS 의 이중 그림을 예로 들어 보겠습니다. 컨테이너의 높이는 88px 에 고정되어 있으며, 기본적으로 버튼과 제목으로 구성되어 있으며, 배경 색상은 대부분 흰색 또는 주 색상입니다. 2. 머리기사 iOS 1 1 시스템 출시 이후 머리기사 탐색 표시줄이 점차 유행하고 있다. 제목은 일반적으로 기본 사양을 자세히 설명하는 홈 페이지 (하단 라벨 기능 분류) 에만 나타납니다. 제목 내비게이션 막대는 강도 높고 투명한 공간감을 준다. 전체적인 스타일은 간단해져서 전자 상거래 응용에 적합하지 않다. 점유 공간이 커서 뉴스, 사교, 도구형, 기능이 단일한 어플리케이션에 적합합니다. 3. 검색 상자 유형 검색 기능의 가중치에 따라 제목 표시 대신 일반 탐색 모음에 검색 상자를 추가합니다. 공간 제한으로 인해 검색 상자의 높이는 일반적으로 56px 에서 64px 사이로 설정되며 폭은 다른 기능 아이콘의 수에 따라 달라집니다. 아이콘이 많으면 검색 상자를 두 번째 줄에 놓을 수 있습니다. 특별한 필요가 없다면 검색 상자 전체를 중앙에 배치하여 양쪽의 거리가 같거나 양쪽의 아이콘 수가 같도록 하면 시각적인 아름다움을 높일 수 있습니다. 4. 탭 탐색 탭 표시줄에는 세그먼트 제어와 다중 탭 탐색의 두 가지 유형이 있으며, 선택한 탭은 명확하게 강조 표시되어야 합니다. 위에 상세한 규격이 있으니 당분간 군말을 하지 않겠습니다. 5. 열 탐색 막대 열 탐색은 시각적 레이어에 컨테이너가 없거나 불투명도가 0% 라는 점을 제외하면 위 유형 중 하나일 수 있습니다. 초기 상태에서는 배경/그림과 조화를 이루며 헤드 공간과 렌더 분위기를 절약하는 데 큰 역할을 하며 탐색 막대와 컨텐츠 영역의 분리감을 줄일 수 있습니다. 이는 전자 상거래 응용 프로그램에서 흔히 볼 수 있습니다. 페이지가 배경으로 미끄러져 사라지면 점차 일반 스타일로 되돌아갑니다. 배경색과 내비게이션 막대 요소 색상의 대비에 특히 주의해야 합니다. 예를 들어 아이콘은 어둡고 배경은 연한 색이어야 합니다. 배경을 제어할 수 없는 경우 탐색 막대 아래에 검은색 투명 그라데이션 마스크를 추가하여 정보를 인식할 수 있도록 하는 것이 좋습니다. 6. 애플릿은 어느 플랫폼의 애플릿이든, 우리는 임베디드' 자식' 앱으로 이해할 수 있다. 탐색 모음의 오른쪽 위 부분은 "상위" app 의 기본 기능이며 수정할 수 없습니다. 이것은 딱딱한 규정이다. 또한 어떤 원소를 넣었는지, 어떤 타입으로 마음대로 발휘할 수 있다. 넷째, 컨텐츠 영역 간의 상호 작용. 탐색 막대의 주요 역할은 사용자가 언제든지 특정 기능의 이전 또는 다음 작업을 수행할 수 있도록 하여 사용자가 길을 잃지 않도록 돕는 것으로 잘 알려져 있습니다. 그러나 탐색 모음을 사용하면 신속하게 작업을 완료하고 상호 작용 후 컨텐츠 관리 및 정보 계층을 재정의할 수 있습니다. 1. 탐색 모음의 버튼을 클릭하여 상호 작용합니다. 사용자가 탐색 모음의 문자/아이콘 버튼과 상호 작용할 때 페이지를 떠나지 않고도 추가, 삭제, 공유 등의 내용을 즉시 관리할 수 있어 사용자가 신속하게 작업을 완료할 수 있습니다. 2. 인터페이스를 위로 슬라이딩하여 탐색 막대의 내용을 줄입니다. 인터페이스가 위로 미끄러지면 검색 기능이 있는 큰 제목이나 두 줄을 차지하는 큰 탐색 막대가 정상 크기로 복원되고 정보량과 계층이 다시 구분되어 탐색 막대의 흡인력을 약화시키고 사용자에 대한 간섭을 줄일 수 있습니다. 3. 인터페이스를 위로 슬라이딩하고 탐색 막대 내용을 추가합니다. 인터페이스가 상호 작용을 위로 슬라이딩하면 원래 일반 스타일의 내비게이션 막대에 정보 내용이 자동으로 추가됩니다. 예를 들어, 첫 번째 화면이 반으로 미끄러지면 사용자가 신속하게 결정을 내릴 수 있도록 탐색 모음에 특수 레이블과 필터링 항목이 걸려 있습니다. 4. 탐색 표시줄과 컨텐츠 영역의 정보 분할은 대부분 구분 선으로 직접 구분되지만, 인터페이스의 깔끔함을 유지하고 관련 없는 정보의 간섭을 줄이기 위해 탐색 표시줄과 컨텐츠 영역의 요소는 멀리 떨어져 있어 상호 작용이 없습니다. 시각적 분할은 공백을 사용하여 자동으로 형성됩니다. 스크롤 상호 작용이 발생하면 공백을 제어할 수 없으며 탐색 막대 아래에 그림자, 구분선 또는 젖빛 유리 효과가 추가되어 시각적으로 분할됩니다. 다섯째, 내비게이션 막대의 유사점과 차이점 1. 동일한 응용 프로그램의 유사성 동일한 응용 프로그램에서 내비게이션 막대의 높이와 위치 및 일부 속성 (글꼴 크기, 아이콘 크기 및 색상 사양) 은 일정해야 합니다. 이는 형식 타워 심리학 중 하나입니다. 일관성 UI 설계의 하드 요구 사항. 맨 아래 탭 모음에 해당하는 페이지 탐색 모음 (주요 구조 및 기능) 은 제목 스타일도 일관성 요구 사항을 따릅니다. 물론, 첫 페이지에만 제목 스타일을 설정하는 응용 프로그램을 제외하고. 이름에서 알 수 있듯이 탐색 막대에도 탐색 기능이 필요합니다. 사용자가 고개를 들 때마다 (탐색 표시줄 스캔) 자신이 어디에 있는지, 어디에 있는지 명확하게 알 수 있습니다. 이는 주로 제목 정보에서 빠르게 얻을 수 있습니다 (제목 디자인에 대한 별도의 문장 뒤에 있습니다). 현재 페이지에 제목이 없는 경우 사용자는 머리글의 일부 주요 정보에서 몇 가지 중요한 정보를 얻어야 합니다. 페이지가 중요한 정보를 덮어쓰는 위치로 미끄러지면 혼동을 피하기 위해 제목을 렌더링해야 합니다. 여기서 다른 플랫폼의 차이점은 주로 iOS 를 의미합니다. 비율과 폭이 같은 경우 Android(MD 설계 사양) 시스템 제목이 왼쪽으로 정렬되고 컨테이너 높이가 iOS； 보다 높습니다. 일반적으로 iOS 시스템에서는 제목과 제목 스타일의 왼쪽 정렬만 허용합니다. 또한 Android 는 일반적으로 탐색 막대와 컨텐츠 영역을 구분하기 위해 컨테이너 아래쪽에 투영을 추가합니다. 위 (2-9) 에서 언급한 구분 요소 외에도 iOS 는 가우스 흐림과 불투명도를 통해 유리 효과의 맛을 구분할 수 있습니다. 탐색 모음은 거의 모든 인터페이스에 존재해야 하는 컨트롤입니다. 자주 쓰지만 모든 디자이너가 잘 디자인 할 수있는 것은 아닙니다. 기본 설계 사양과 기능에 더 큰 제품 가치를 부여해야 합니다. APP 탐색 막대가 잘 디자인되어 예상치 못한 이점이 있을 수 있습니다. APP 탐색 모음의 설계 요점에 대해 자세히 설명합니다. 이 몇 가지를 근거로 자신의 APP 탐색 표시줄 디자인에 적용할 수 있습니다 ~ 물론 APP 디자인과 학습에 대한 수요가 있다면 지금 자습서를 받을 수 있습니다!