01/03
Bản cập nhật Atomic.io mới nhất bao gồm vùng chứa có thể cuộn
Một vài tháng trở lại tôi đã cho thấy làm thế nào atomic.io có thể được sử dụng để nguyên mẫu chuyển động . Một trong những điểm mấu chốt mà tôi tạo ra trong tác phẩm là “thể hiện chuyển động” thay vì để nó vào trí tưởng tượng của khách hàng hoặc của nhóm là rất quan trọng. Trong thực tế, điều này đã trở nên rất quan trọng đến mức một danh mục hoàn toàn mới của các công cụ UX / UI xuất hiện trên hiện trường. Chúng bao gồm - Apple Keynote, Adobe Animate Edge, After Effects và UXPin , để đặt tên một vài. Đứa trẻ mới trên block là Atomic.io, phiên bản beta mở khi tôi viết về sản phẩm.
Điều gọn gàng về betas mở là chúng cung cấp cho nhà sản xuất phần mềm cơ hội thu thập phản hồi của người dùng trên tập hợp tính năng, bao gồm các tính năng bị thiếu, sau đó thêm chúng vào ứng dụng và thử nghiệm trước khi phát hành thương mại. Trong trường hợp nguyên tử, một tính năng tôi thực sự bỏ qua là khả năng cuộn nội dung theo chiều dọc hoặc chiều ngang. Điều này có thể bao gồm những thứ như thẻ, trình chiếu hoặc thực tế mọi thứ mà người dùng sẽ vuốt hoặc kéo trong giới hạn giao diện của ứng dụng hoặc trang web.
Điều này phải là một chủ đề mà nhiều người dùng đã yêu cầu vì các vùng chứa có thể cuộn được giới thiệu vào ứng dụng trong tháng này và tôi phải thừa nhận rằng việc tạo nội dung có thể cuộn trong nguyên mẫu đã chết đơn giản để kích hoạt.
Đây là cách…
02/03
Cách tạo nội dung cuộn dọc trong nguyên tử
Trước tiên bạn sẽ cần phải đăng ký dùng thử 30 ngày miễn phí và vào cuối giai đoạn đó, bạn sẽ được cung cấp ba gói giá.
Điều đầu tiên bạn cần biết là tất cả công việc bạn sẽ làm là trong trình duyệt và ứng dụng được nhắm vào Google Chrome. Khi bạn đăng nhập, bạn sẽ được đưa đến trang Dự án . Để mở ứng dụng, hãy nhấp vào nút Dự án mới .
Khi giao diện xuất hiện, bạn sẽ thấy có một số công cụ hạn chế, khả năng thêm các trang và lớp vào các trang, bảng vẽ và, ở bên phải, một bảng thuộc tính nhạy cảm theo ngữ cảnh.
Trong ví dụ này, tôi bắt đầu với một cài đặt trước iPhone 5 là 320 x 568. Tôi sau đó mở thư mục chứa các hình ảnh sẽ được cuộn và kéo chúng vào khung vẽ. Chúng được tự động thêm vào dự án và bạn có thể thấy chúng nằm trên các lớp riêng lẻ nếu bạn nhấp vào tab Lớp . Sau đó tôi chọn công cụ Arrow (Selection), chọn một hình ảnh và kéo nó đến một vị trí mới để thêm một số khoảng trống giữa chúng. Sau đó tôi đã chọn tất cả hình ảnh và nhấp vào nút Phân phối theo chiều dọc trên thanh công cụ. Điều này đồng đều khoảng cách giữa các hình ảnh.
Bước tiếp theo là chọn tất cả nội dung sẽ được cuộn và nhấp vào nút Vùng chứa hoặc chọn Tạo vùng chứa cuộn từ nút Nhóm bật xuống. Khi vùng chứa được tạo, bạn sẽ thấy vùng chứa trong bảng điều khiển Lớp - nhấp vào vùng chứa và kéo thanh điều khiển phía dưới lên dưới cùng của canvas . Nhấp vào nút Xem trước ở cuối bảng Thuộc tính và điều này sẽ khởi chạy cửa sổ trình duyệt. Sử dụng bánh xe cuộn của chuột để cuộn nội dung. Để quay lại dự án của bạn, hãy nhấp vào nút Chỉnh sửa ở dưới cùng bên phải của cửa sổ trình duyệt.
03/03
Cách tạo nội dung cuộn ngang trong nguyên tử
Cuộn ngang cũng dễ thực hiện.
Trong trường hợp này, kéo một loạt các hình ảnh vào khung vẽ và húc chúng lên với nhau. Với những hình ảnh được chọn, tôi sau đó nhấp vào nút Căn chỉnh trên cùng để đảm bảo tất cả đều được căn chỉnh với nhau.
Sau đó, tôi giữ phím Shift và chọn từng lớp trong bảng điều khiển Lớp. Với những hình ảnh được chọn, tôi nhấp vào nút Container và , trong bảng Thuộc tính, được chọn theo chiều ngang trong khu vực Hành vi.
Sau đó, tôi đã thử nghiệm dự án trong cửa sổ Trình duyệt bằng cách nhấp vào nút Xem trước.
Mặc dù tôi đã chỉ ra cách tạo các phiên bản cuộn dọc và ngang riêng lẻ, miễn là bạn đặt nội dung có thể cuộn trong vùng chứa, bạn có thể có các vùng chứa này trong các vùng riêng biệt của màn hình. Ví dụ: một trang web có thể có nội dung cuộn theo chiều dọc trong menu bên và nội dung cuộn ngang trong một trình chiếu trên cùng một trang. Trên thực tế, một vùng chứa có thể có cả cuộn dọc và ngang cho các mục như bộ chọn hình ảnh có hàng tá hình thu nhỏ.
Để tìm hiểu thêm về tính năng này trong atomic.io, hãy xem:
- Thông báo trên blog
- Hướng dẫn vùng chứa cuộn
- Mặt nạ bằng cách sử dụng vùng chứa
- Xử lý sự cố