01 / 03
최신 Atomic.io 업데이트에는 스크롤 가능한 컨테이너가 포함되어 있습니다.
몇 달 전, 나는 atomic.io를 사용하여 동작을 프로토 타이핑하는 방법을 보여주었습니다 . 제가 작품에서 만든 핵심 포인트 중 하나는 클라이언트 또는 팀의 상상력에 남겨두기보다는 "동작 표시"였습니다. 실제로 이것은 완전히 새로운 범주의 UX / UI 도구가 등장하는 데 매우 중요합니다. 여기에는 Apple Keynote, Adobe의 Edge Animate, After Effects 및 UXPin 이 포함됩니다. 새로운 아이는 내가 제품에 대해 처음 쓴 때 오픈 베타 버전 인 Atomic.io입니다.
오픈 베타에 대한 깔끔한 점은 누락 된 기능을 포함하여 기능 세트에 대한 사용자 피드백을 수집 한 다음 응용 프로그램에 추가하고 상용 릴리스 전에 테스트하도록 할 수있는 기회를 소프트웨어 제조업체에 제공한다는 것입니다. 원자력의 경우, 필자가 정말로 놓친 한 가지 특징은 컨텐츠를 수직 또는 수평으로 스크롤하는 기능이었습니다. 여기에는 카드, 슬라이드 쇼 또는 앱이나 사이트 인터페이스의 경계 내에서 사용자가 스 와이프하거나 드래그하는 것과 같은 것들이 포함될 수 있습니다.
스크롤 가능한 컨테이너가 이번 달에 앱에 도입 되었기 때문에 많은 사용자가 요구하는 주제 였을 것입니다. 프로토 타입에 스크롤 가능한 콘텐츠를 만드는 것이 간단하고 간단합니다.
방법은 다음과 같습니다.
02 of 03
원자에서 세로 스크롤링 콘텐츠를 만드는 방법
먼저 무료 30 일 평가판에 가입해야하며 그 기간이 끝나면 세 가지 가격 책정 계획이 표시됩니다.
가장 먼저해야 할 일은 브라우저에서 수행되는 모든 작업과 앱이 Google 크롬을 대상으로하는 것입니다. 로그인하면 프로젝트 페이지로 이동합니다. 앱을 열려면 새 프로젝트 버튼을 클릭하십시오.
인터페이스가 나타나면 제한된 수의 도구, 페이지 및 레이어를 페이지, 대지 및 오른쪽에 상황에 맞는 속성 패널에 추가 할 수있는 기능이 있음을 알 수 있습니다.
이 예제에서는 320 x 568 크기의 iPhone 5 프리셋으로 시작했습니다. 그런 다음 스크롤 할 이미지가 포함 된 폴더를 열고 캔버스 위로 드래그합니다. 프로젝트에 자동으로 추가되었으며 레이어 탭 을 클릭하면 해당 레이어가 개별 레이어에 있음을 알 수 있습니다. 그런 다음 화살표 도구 (선택)를 선택하고 이미지를 선택한 다음 새 도구로 드래그하여 이미지 사이에 공간을 추가했습니다. 그런 다음 모든 이미지를 선택하고 툴바 에서 Vertulate Distribute 버튼 을 클릭했습니다 . 이렇게하면 이미지가 균등하게 배치됩니다.
다음 단계는 스크롤 할 모든 컨텐츠를 선택하고 컨테이너 버튼을 클릭하거나 그룹 버튼 팝업 에서 스크롤 컨테이너 생성을 선택 하는 것입니다. 컨테이너가 생성되면 레이어 패널에 표시됩니다 . 컨테이너를 클릭하고 아래쪽 핸들을 위쪽으로 캔버스의 아래쪽으로 끕니다 . 속성 패널의 아래쪽에 있는 미리보기 버튼 을 클릭하면 브라우저 창이 열립니다. 마우스 스크롤 휠을 사용하여 내용을 스크롤하십시오. 프로젝트로 돌아가려면 브라우저 창의 오른쪽 하단에있는 편집 버튼 을 클릭하십시오 .
03 of 03
원자에서 가로 스크롤링 콘텐츠를 만드는 방법
수평 스크롤링은 쉽게 수행 할 수 있습니다.
이 경우 일련의 이미지를 캔버스로 드래그하여 서로 대립 시켰습니다. 이미지를 선택한 상태에서 맨 위 정렬 버튼을 클릭하여 서로 정렬되도록합니다.
Shift 키를 누른 상태에서 [레이어] 패널에서 각 레이어를 선택했습니다. 이미지를 선택한 상태 에서 컨테이너 버튼을 클릭 하고 속성 패널 의 동작 영역에서 가로 로 선택 했습니다.
그런 다음 미리보기 단추를 클릭하여 브라우저 창에서 프로젝트를 테스트했습니다.
세로 및 가로 스크롤의 개별 버전을 만드는 방법을 보여 주었지만 스크롤 가능한 내용을 컨테이너에 넣으면 화면의 별도 영역에 이러한 컨테이너를 배치 할 수 있습니다. 예를 들어, 웹 페이지는 사이드 메뉴에서 수직 스크롤링 컨텐츠를 가질 수 있고 동일한 페이지에서 슬라이드 쇼의 컨텐츠를 수평 스크롤링 할 수 있습니다. 사실, 컨테이너에는 십여 가지 정도의 미리보기 이미지가있는 이미지 선택기와 같은 항목에 대해 세로 스크롤과 가로 스크롤이 모두있을 수 있습니다.
atomic.io에서이 기능에 대해 자세히 알아 보려면 다음을 확인하십시오.
- 블로그 발표
- 스크롤링 컨테이너 자습서
- 컨테이너를 사용한 마스킹
- 스크롤링 컨테이너 문제 해결