UI 디자이너는 APP 를 설계할 때 먼저 색상, 문자, 아이콘, 구조, 레이아웃, 간격 등의 요소를 정의하는 등 완벽하고 실행 가능한 설계 사양을 개발해야 합니다. 하지만 많은 디자이너들은 그리드 시스템의 구축이라는 중요한 것을 간과하는 경우가 많습니다. 격자 시스템은 전체 페이지의 뼈대라고 할 수 있습니다. 페이지의 모든 디자인 요소를 효율적이고 질서 정연하게 구성하여 전체 APP 의 디자인이 높은 일관성과 규칙성을 갖도록 하여 디자이너의 생산성을 높이고 감각적인 디자인을 방지합니다. 그리드 시스템이란 무엇입니까?
격자 시스템은 일련의 세로 및 가로 안내선을 사용하여 페이지를 여러 규칙의 열이나 격자로 나눈 다음 이러한 격자를 기준으로 페이지 요소 간의 정렬 및 비율 관계를 제어하여 고도로 정렬된 페이지 프레임을 만듭니다. 예를 들어 구글의 소재 디자인은 전체 페이지를 하나의 격자로 간주하고 모든 페이지 요소는 그리드 선에 맞춰 정렬됩니다. 이 법칙은 전체 제품 설계를 관통한다.
왜 그리드 시스템을 연구해야 합니까?
1/ 팀 협업 설계의 효율성을 높입니다.
그리드 시스템은 여러 디자이너가 함께 APP 를 설계할 때 특히 중요합니다. 각 디자이너마다 자신의 설계 방법과 습관이 있다. 제약할 균일한 프레임이 없으면 유사한 구성 요소나 페이지를 디자인할 때 서로 다른 디자인 방법과 크기를 제공할 수 있으므로 전체 APP 의 페이지가 혼란스러울 수 있습니다. 예를 들어, 디자이너 A 와 B 는 각각 크기 사양에 따라 페이지를 만들었지만, 디자인 결과는 완전히 다른 느낌을 주었다.
따라서 통합 그리드 시스템을 갖추면 디자이너의 출력이 높은 일관성과 규칙성을 확보하고 협업이 더욱 효율적으로 이루어질 수 있습니다.
2/ 디자인이 더 합리적이다.
UI 디자인은 수학적 논리에서 이성, 객관적, 미관을 필요로 한다. 그리드 시스템을 교묘하게 사용하면 디자인이 더욱 질서 정연하고 리듬감 있고, 페이지 정보를 더 명확하게 전시하고, 읽기 효율을 높이고, 사용자에게 편안한 경험을 제공할 수 있다.
3/ 결정을 내리는 시간을 줄이다.
많은 디자이너들은 페이지 세부 사항을 처리할 때 더 나은 시각 효과를 위해 심사숙고하는 경우가 많으며 (나에 대해 말하는 것 같다), 아이콘을 20px 로 해야 할지 24px 로 해야 할지 걱정까지 해 디자인 효율성에 큰 영향을 미친다. 여러 페이지의 디자인이 모두 각자의 만족스러운 시각 효과를 얻더라도 다양한 크기 규칙을 사용했기 때문에 디자인이 균일하지 않을 가능성이 높습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)
정교한 그리드 시스템을 통해 디자이너는 페이지 레이아웃과 세부 사항을 보다 명확하고 자신감 있고 효율적으로 처리할 수 있습니다. 모든 디자인 동작은 근거가 있어 세부 사항으로 인한 불필요한 시간 비용을 줄이고 디자인의 머리를 찍는 것을 거부한다.
그리드 시스템의 기본 요소
셀당 1
그리드에서 가장 기본적인 요소 "셀"
2/ 외부 여백
APP 페이지에서 모든 내용은 가운데 내용 영역에 표시되므로 내용 영역과 화면 왼쪽 및 오른쪽 끝 사이의 빈 영역을 외부 여백이라고 합니다.
외부에서 보면 값이 클수록 페이지가 느슨해지고 값이 작을수록 "충만" 해 보입니다. 구체적인 수치는 자신의 실제 상황에 따라 결정해야 한다. 예를 들어 Airbnb 제품의 음조는 비교적 간단하고 전체 레이아웃은 느슨하기 때문에 외곽의 값은 48px 입니다. 예를 들어 넷이즈 클라우드 뮤직 들은 앨범 표지와 노래표에 집중한다. 페이지에서 그림의 시각적 충격을 확인합니다. 따라서 페이지 내용 영역의 비율은 비교적 크고 외부 여백 값은 32px 입니다.
3/ 기둥 및 수신기
페이지의 컨텐츠 영역은 n 열과 (N- 1) 수신자로 구성됩니다. 웹 디자인에서 N 의 값은 일반적으로 12, 16, 24 이지만, 휴대폰 디자인에서는 열 수가 너무 크면 안 됩니다. 왜냐하면 휴대폰 화면 폭이 제한되어 있고 열 수가 많을수록 페이지 분할이 "깨질" 수 있기 때문입니다. 일반적으로 6 개의 메시를 사용합니다.
함몰 폭 값이 페이지에 미치는 영향은 외부 여백과 유사합니다. 즉, 값이 클수록 페이지가 느슨해지고 그 반대의 경우도 마찬가지입니다. 예를 들어 Airbnb 는 24px 를, 넷이즈 클라우드 뮤직 선택은 16px 를 선택했다.
4/ 가로 간격
잡지의 디자인 조판에서는 텍스트와 그림의 가로 방향 리듬 관계를 조정하기 위해 가로방향으로 간격이 같은 안내선인 기준선 시스템을 자주 사용합니다. 그러나 그래픽 레이아웃의 크기는 상대적으로 고정되어 있으며 이동 터미널의 화면 폭과 요소 구성요소의 높이는 불확실합니다. 따라서이 기준선 시스템은 직접 복사 할 수 없으며 상황에 따라 사용해야합니다.
텍스트 단락에서 베이스라인 시스템을 사용하여 가로 간격을 지정하여 읽기 제품의 텍스트 페이지에 자주 나타나는 가로 방향의 텍스트 리듬 관계를 지정할 수 있습니다. 베이스라인의 거리 값은 해당 제품의 실제 상황에 따라 달라집니다. 예를 들어, 다음 그림의 기준선 간격이 4px 로 설정된 경우 글꼴 크기와 행간은 4px 의 정수 배수이므로 각 줄의 단어가 기준선에 정확하게 눌려 시각적 리듬의 일관성을 보장합니다.
그러나 구성 요소 간의 가로 및 세로 간격 사용 규칙은 동일합니다. 즉, 셀의 정수 배수가 가장 작은 일련의 값을 선택하여 구성 요소의 가로 방향 리듬 관계를 조정합니다. 예를 들어 다음 그림에서 최소 셀이 8px 로 설정된 경우 수평 간격 값은 8px, 16px, 24px, 32px 등이 됩니다. (중점)
앱 디자인에서 그리드 시스템을 어떻게 사용합니까?
1/ 가장 작은 셀을 정의합니다.
가장 작은 셀 값으로, 대부분의 app 는 4- 10 범위의 짝수를 선택합니다. 그럼 어떤 값이 제일 어울릴까요?
이것은 두 가지 측면에서 고려해야 한다. 한편으로는 이 수치가 대부분의 휴대폰 화면 너비로 나눌 수 있는지, 즉 적용성이 넓은지, 구체적 사용에는 유연성이 있는지 여부다. 적용성 측면에서 4,6,8, 10 네 가지 수치가 기본적으로 만족스럽다. 유연성 측면에서는 4px 가 가장 좋지만 페이지는 매우 조각화되어 디자인상 제어하기 어렵습니다.
따라서 app 의 실제 상황에 따라 적절한 값을 선택해야 합니다.
4px 또는 6px 셀은 타오바오, 코알라 등 전자업체 앱과 같이 콘텐츠 정보가 많고 레이아웃이 복잡한 제품에 더 적합합니다.
8pxcell 은 일반적인 디자인 시나리오, 대부분의 APP 제품에 더 잘 맞도록 추천할 수 있습니다.
2/ 어셈블리 간격의 증가 관계를 결정합니다.
최소 셀 값을 결정하기 때문에 모든 간격 (침몰, 외부 가장자리, 가로 간격 등) 이 결정됩니다. ) 및 페이지의 구성 요소 크기는 최소 셀의 정수 배수여야 균일한 시각적 리듬을 얻을 수 있습니다.
예를 들어 셀이 8px 인 경우 사용된 모든 공백은 8px, 16px, 24px, 32px, 40px (지식 포인트) 가 됩니다.
3/ 열 수 결정
APP 페이지를 디자인할 때 가장 일반적인 레이아웃 방법은 레이아웃을 나누는 것입니다. 즉, 페이지의 내용 영역을 n 등분하여 화면 너비에 맞게 각 부분의 너비를 조정합니다. 따라서 이러한 관점에서 볼 때, 다양한 동등한 레이아웃의 요구를 최대한 충족하기 위해 페이지의 그리드에 얼마나 많은 열을 설정해야 하는지 생각해 보십시오. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 평등명언)
다음은 일반적인 사례 (4 열, 10 열, 16 열 등) 입니다. ) 가 나열됩니다. 흥미가 있는 사람은 스스로 시도해 볼 수 있다. 여기서는 일일이 열거하지 않는다.) 12 열 및 24 열이 5 를 제외한 모든 조건을 충족한다는 사실을 발견했습니다. 6 열이 상대적으로 열악하여 결과는 12 열 =24 열 >; 을 눌러 섹션을 인쇄할 수도 있습니다 6 열 >: 8 열. 하지만 24 열은 한정된 휴대폰 화면을 너무 많은 블록으로 나누는 것이 분명하기 때문에 실제 사용 중 12 열과 6 열을 위주로 하고 있습니다.
4/ 스케치 배치 설정
Sketch 에는 그리드 시스템의 참조 배치를 신속하게 구성할 수 있는 배치 설정 기능이 포함되어 있습니다. L 바로 가기 키를 사용하여 설계 중 레이아웃 표시를 자주 전환할 수 있습니다 (지식 포인트: 1. 총 폭 = 총 화면 폭-외부 여백 x2; 2. 간격띄우기 = 외부 모서리 거리; 3. "바인딩 라인이 밖에 있습니다" 를 선택하지 마십시오. ) 을 참조하십시오
5/ 실제 적용
홈페이지 디자인 초기에는 완전한 그리드 시스템을 사용하여 표준화되지 않았습니다. 구성 요소 간 간격 규칙은 기본적으로 10px, 20px, 30px 입니다. 레이아웃 모듈 사이에는 내재적인 연관이 없고, 시각적 리듬이 원활하지 않고, 풍격이 일정하지 않다. 다음 두 페이지에서는 대부분의 요소가 그리드를 붙이지 않고 레이아웃이 불규칙하며 객관적인 참조가 없습니다.
이제 8px 및 12 열 그리드 시스템을 사용하여 홈 페이지 레이아웃을 최적화합니다. 아래 세 그림에서 맨 위 아이콘, 입구 아이콘, 세로 덮개 및 가로 덮개가 그리드 시스템에 의해 하나로 연결되어 있음을 알 수 있습니다. 그들은 더 이상 조직화되지 않고 독립된 개체가 아니기 때문에 읽기가 더 원활하다. 수평 간격도 8px 의 정수 배수를 사용하기 시작하여 사용자에게 더욱 리듬감 있는 브라우징 경험을 제공합니다.
그리드 시스템을 사용할 때 주의해야 할 문제는 무엇입니까?
1/ 그리드 시스템은 기계적으로 복제할 수 없습니다.
모든 요소를 격자선에 정렬할 필요는 없습니다. 이것은 너의 실제 수요에 달려 있다. 만약 당신이 그것을 그리드에 들어가도록 강요한다면, 페이지는 매우 이상하게 보일 것이다. 그림의 왼쪽 페이지에 있는 세 개의 탭 제목은 그리드의 표지와 정렬하려고 하지만 제목 사이의 거리가 너무 커서 불편해 보입니다. 여기서 세 탭 제목 사이의 간격은 고정 값이므로 화면 너비에 맞게 조정할 필요가 없습니다. 따라서 세 개의 탭 제목을 하나의 전체, 즉 하나의 탭 구성 요소로 간주해야 하며, 구성 요소의 왼쪽 끝을 격자에 붙일 수 있습니다.
2/ 그리드를 분리할 수 없는 경우 어떻게 합니까?
디자인 원고를 만들 때 가장 많이 사용되는 캔버스 크기는 아이폰 6/7/8 의 750* 1334px 일 수 있습니다. 8px 가 이 치수 중 가장 작은 셀이라면 캔버스는 분리할 수 없다는 것을 알 수 있습니다. 즉, 750px 의 폭이 모든 외부 거리와 침몰을 제거한 후 각 빨간색 기둥의 폭이 실제로 42.5px 라면, 그리드 시스템은 사용할 수 없다는 의미입니까?
사실 이것은 정상적인 현상이다. 어떤 화면 해상도도 완벽하게 나눌 수 있는 메쉬 체계가 없기 때문이다. 그리고 같은 8px 배터리로 750px 폰에서는 나눌 수 없지만 720px 폰에는 문제가 없습니다.
예를 들어 아래 표시된 크기에서 외부 가장자리와 침몰을 나타내는 파란색 값은 개발에 제공해야 하는 고정 값이고 빨간색 값은 화면의 실제 폭을 기준으로 계산됩니다. 따라서 개발에 제공된 값이 그리드 시스템의 규칙을 따르는지 확인하기만 하면 됩니다. 페이지의 계산값에 관해서는 0.5px 의 편차는 육안으로는 감지할 수 없다.
요약
그리드 시스템은 비주얼 디자이너의 강력한 보조 도구입니다. 보다 과학적인 방식으로 APP 인터페이스를 구축하도록 안내할 수 있습니다. 페이지 레이아웃 사양이 질서 정연하고 리듬이 균일하며 디자이너 효율성이 배가됩니다. 하지만 이 글에서 언급했듯이, 그리드 매개 변수에는 여러 가지가 있습니다. 우리는 자신의 필요에 따라 자신에게 맞는 제품 음조에 맞는 그리드 시스템을 구축해야 합니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)
원본 링크 Netease UEDC
Xd 소프트웨어에서 레이아웃 그리드를 만드는 방법은 무엇입니까?
가운데 분홍색 영역으로 마우스를 이동하면 마우스가 이중 화살표로 바뀌고 드래그하여 조정합니다.
그리드에서 작성 명령은 sketchup 소프트웨어에서 어디에서 찾을 수 있습니까?
지형, 스케치 마스터 8- 그리기-샌드박스-그리드에서 그리드 간격을 입력하고 세 번 클릭-완성을 의미합니다. 기타 문제, 창-매개변수 설정-바를 확장하여 샌드박스 도구를 봅니다.
IQOO 휴대 전화를 사용하여 체크 무늬 바탕 화면을 조정하는 방법?
OriginOS 에서 제공하는 디포머 기능을 한 번의 클릭으로 화용메시 인터페이스로 돌아갈 수 있어 편리합니다.
화융전력망은 새로운 OriginOS 시스템의 첫 번째 기능이다. 디자인은 어린 시절 장난감 화용도에서 영감을 받아 정식으로' 화용격' 으로 명명되었다. 하단 그리드의 간격을 재설계하고 데스크탑 요소의 순서를 재정렬하여 보다 깨끗하고 효율적인 사용 환경을 제공합니다. 책상 위에 새로운 구조를 만들었습니다. 사용자는 자신의 습관과 취향에 따라 바탕 화면의 요소 (예: 아이콘 애플릿) 를 조정할 수 있으며, 아이콘의 크기와 간격은 스스로 조정할 수 있습니다. OriginOS 는 기존 데스크톱 프레임워크에 구애받지 않고 자신의 개성에 따라 다양한 데스크톱 요소를 결합할 수 있는 자유를 제공합니다.
Cad 그리드의 면적을 어떻게 설정합니까?
Cad 소프트웨어에서 메쉬 크기를 조정하는 구체적인 단계는 다음과 같습니다.
1. 먼저 편집할 CAD 시트를 열고 편집 페이지로 이동합니다.
2. 그런 다음 아래의 그리드 열기 아이콘 버튼을 클릭합니다.
Id 그리드는 어떻게 설정합니까?
A: InDesign 을 열고 새 프로젝트를 만듭니다.
맨위 메뉴 모음에서 뷰를 찾은 다음 그리드 및 참조 라인을 누릅니다.
기준선 격자와 문서 격자를 모두 추가할 수 있습니다.
장면 내부를 마우스 오른쪽 버튼으로 클릭하여 선택할 수도 있습니다.
ID 는 전문적인 그래픽 조판 소프트웨어입니다. 책과 그림책은 조판할 때 일반적으로 세로줄만 설치한다. 새 파일을 작성할 때 페이지 여백과 열을 선택합니다.
대화상자에서 여백, 열 간격 및 열 수만 설정하면 됩니다.
그런 다음 레이아웃 생성 가이드를 수행합니다.
행 수, 열 수 및 열 간격을 개별적으로 설정합니다.
메쉬를 다음과 같이 설정합니다.
(w 키를 눌러 메쉬를 숨기거나 표시합니다.)
디자인 타임에 그리드를 설정하는 것은 페이지의 요소 레이아웃을 보다 규범적으로 통일시켜 사용자가 쉽게 이해할 수 있도록 하기 위함입니다. 그리드의 유연한 사용은 레이아웃 형식을 제한할 뿐만 아니라 레이아웃을 더욱 명확하고 생동감 있고 통일하며 조직적으로 만듭니다.