데이터

변수를 사용하여 자주 사용하는 스타일을 저장하고 관리하세요.

데이터를 사용하면 치수, 색상, 텍스트 형식을 저장하여 통일된 디자인 환경에 재사용할 수 있습니다. 변수 값이 수정되면 이 조정은 웹사이트에서 활용되는 모든 곳에 반영됩니다. 또한 사이트 형식에 대한 가시성을 높이기 위해 중앙에서 액세스할 수 있습니다.

이 강의에서 여러분은 다음을 발견하게 될 것입니다:

  1. 데이터 요소란 정확히 무엇입니까?
  2. 데이터 요소를 생성, 수정, 삭제하는 프로세스
  3. 캔버스에 데이터 요소를 적용하는 방법
  4. 항목에서 변수를 분리하는 방법
  5. 클러스터에서 데이터 요소를 구성하는 방법
  6. 다른 용어를 대표하는 용어를 효과적으로 사용
  7. 상호 작용에서 데이터 요소 구현

데이터 요소 정의

데이터 요소에는 3가지 종류가 있습니다.

  • 측정 데이터 요소
  • 색상 데이터 요소
  • 텍스트 스타일 데이터 요소

측정 데이터 요소

다음에 대한 측정 데이터 요소를 지정할 수 있습니다.

  • 주위와 내부의 공간 — 위쪽, 아래쪽, 왼쪽, 오른쪽
  • 배치 — 위쪽, 아래쪽, 왼쪽, 오른쪽
  • 전시 구성 및 Quick Stack을 위한 열과 행 분리
  • 높이 및 너비 치수(최소 및 최대도 포함)
  • 그리드 열 및 행 비율
  • 인쇄상의 특징 — 글꼴 크기, 줄 간격, 문자 간격
  • 테두리 곡률 및 너비
  • 필터 및 배경화면 필터 안개 반경

색상 데이터 요소

다음에 대한 색상 데이터 요소를 지정할 수 있습니다.

  • 텍스트 색상
  • 배경 색상
  • 테두리 및 텍스트 윤곽선 색상
  • 그라데이션 색조 종료
주의: 색상 견본이 색상 데이터 요소로 이동되었습니다. 이전에 생성된 견본은 데이터 요소 패널에서 찾을 수 있습니다.

텍스트 스타일 데이터 요소

  • 글꼴 category

데이터 요소를 설정, 수정 및 삭제하는 프로세스

데이터 요소를 시작하려면 데이터요소 패널, 누르다 새로운 데이터 요소을 클릭하고 설정하려는 데이터 요소 유형을 선택합니다(예: 색조, 측정하다, 또는 글꼴군).

기본 데이터 요소 제목을 변경하려면 이름 위에 마우스를 놓고 구성 '을 클릭하세요.기어” 아이콘입니다.

콘텐츠를 클릭하면 데이터 요소의 콘텐츠를 수정할 수 있습니다. 색조 데이터 요소를 사용하면 선택기에서 색조를 선택할 수 있습니다. 측정 데이터 요소를 사용하면 숫자 값과 단위를 선택할 수 있습니다. 텍스트 스타일 데이터 요소를 사용하면 드롭다운에서 글꼴 category를 선택할 수 있습니다. 사이트나 작업 공간에 업로드된 모든 사용자 정의 글꼴(Google 및 Adobe 글꼴 포함)은 글꼴 모음 데이터 요소를 선택할 때 액세스할 수 있습니다.

데이터 요소의 값이 변경되면 데이터 요소 패널, 링크된 모든 항목이 자동으로 업데이트됩니다.

메모: 데이터 요소의 이름과 값은 다음에서 직접 조정할 수도 있습니다. 형식 패널. 현재 데이터 요소에 연결된 섹션 위로 마우스를 이동한 다음 '편집하다” 아이콘을 클릭하여 데이터 요소 편집 모달을 시작합니다.

데이터 요소 값이 변경된 경우 데이터 요소 패널 아니면 그 형식 패널을 사용하면 링크된 모든 항목에 자동으로 수정 사항이 반영됩니다.

데이터 요소는 다음으로 이동하여 삭제할 수 있습니다. 데이터 요소 패널, 이름 위로 마우스를 가져간 다음 구성 '을 탭합니다.기어” 아이콘입니다. 나중에 선택하세요. 삭제.

캔버스의 데이터 요소 활용

데이터 요소 패널에서 데이터 요소를 설정한 후 디자인하는 동안 해당 요소를 사용할 수 있습니다. 데이터 요소는 형식 패널과 상호 작용 패널에서 사용할 수 있습니다.

  • 신청하려면 색조 데이터 요소 - 견본의 왼쪽 상단 모서리에 있는 보라색 점을 탭합니다.
  • 신청하려면 측정 데이터 요소 — 측정 입력 필드의 왼쪽 상단 모서리에 있는 보라색 점을 탭합니다.
  • 구현 폰트 데이터 요소 — 왼쪽 상단 모서리에 있는 보라색 점을 탭합니다. 폰트 내의 필드 인쇄상의 부분
주의: 형식 패널에서 데이터 요소를 활용하면 해당 요소의 값이 보라색으로 강조 표시됩니다.
전문가 추천: 또한 다음에서 직접 데이터 요소를 통합할 수도 있습니다. 형식 패널. 항목을 선택하고 데이터 요소 입력 필드(예: 견본, 측정 입력 필드, 글꼴 필드)의 왼쪽 상단 모서리에 있는 보라색 점을 탭하고 "...을 더한” 아이콘을 사용하여 데이터 요소를 설정합니다. 제목 그리고 콘텐츠, 그런 다음 구하다. 값을 기존 데이터 요소에 연결하려면 왼쪽 상단 모서리에 있는 보라색 점을 클릭하세요. 콘텐츠 필드를 클릭하고 연결할 기존 요소를 선택하세요.

항목에서 데이터 요소를 분리하는 방법

항목에서 색상 또는 글꼴 데이터 요소의 연결을 해제하려면 현재 요소(예: 배경 색조, 글꼴 등)에 연결된 형식 패널의 콘텐츠를 누릅니다. 그런 다음 풀리다.

항목에서 측정 데이터 요소의 연결을 해제하려면 현재 데이터 요소에 연결된 형식 패널의 콘텐츠를 선택하고 메뉴에서 데이터 요소 제목을 누른 다음 풀리다.

클러스터의 데이터 요소 관리

당신은 데이터 요소를 클러스터로 배열하는 능력을 가지고 있습니다. 이를 통해 그룹의 디자인 선택 및 시스템에 대한 더 많은 통찰력을 얻을 수 있습니다.

데이터 요소를 클러스터링하려면 그룹 제목/요소 제목 구조로 제목을 제공합니다. 예를 들어, "Shades"라는 레이블이 붙은 클러스터를 원하는 경우 "Shades/Scarlet" 및 "Shades/Sapphire"라는 이름의 2개 요소를 설정할 수 있습니다. 이러한 항목은 "Shades" 조각으로 그룹화되어 표시됩니다. 데이터 요소 패널.

클러스터에서 요소를 분리하려면 요소 제목에서 그룹 제목(예: "색조")을 제거하세요.

대체 이름 사용

대체 이름을 사용하면 기존 요소의 값을 참조하는 새 요소를 생성할 수 있습니다. 이후에 연관된 요소 중 하나가 변경되면 모든 대체 이름이 자동으로 업데이트됩니다. 대체 이름을 설정하려면 '' 아이콘이 새 요소 오른쪽에 표시됩니다. 참조하기 위해 선택할 수 있는 기존 요소가 포함된 목록이 나타납니다.

주의: 동일한 종류의 요소만 대체 이름을 생성하는 데 사용할 수 있습니다(예를 들어, 색상 요소를 사용하여 색상 요소의 대체 이름을 생성할 수 있지만 측정 요소를 가리키는 색상 요소는 사용할 수 없습니다).

대체 이름의 연결을 해제하려면 분리하려는 요소 값을 탭한 다음 풀리다.

상호 작용에서 데이터 요소 활용

색조, 측정 및 글꼴 데이터 요소는 사용자 정의된 애니메이션 내에 적용될 수 있습니다. 사용자 정의 애니메이션에 대한 작업을 선택할 때 다음을 선택할 수 있습니다. 데이터 요소 값 설정. 이를 통해 기존 데이터 요소를 사용하여 상호 작용에서 항목 색상, 치수 또는 글꼴 스타일을 수정할 수 있습니다.

애니메이션에서 데이터 요소 값을 설정하려면 다음 단계를 진행하세요. 데이터 요소 값 설정 > 요소 목록에서 데이터 요소 값을 선택하세요.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)