Tìm hiểu cách tạo một prototype trong Atomic

Prototyping - bản mô phỏng đầy đủ tính năng của sản phẩm, để dễ dàng và nhanh chóng nâng cao sự tin tin về thiết kế. Không còn được xem như một cách thuần tuý để tạo nên những chuyển động kỳ hiệu hoặc quá trau chuốt các thiết kế, prototyping chính một công cụ giao tiếp. Cho dù giao tiếp với các bên liên quan, người quản lý thiết kế hay người dùng, một prototype tốt đều giúp truyền đạt các quyết định thiết kế và ý tưởng thử nghiệm.

Prototype của chúng tôi

Trong hướng dẫn này, chúng ta sẽ tạo ra một prototype cơ bản “passing pass” trong Atomic, mà bạn có thể xem trước tại đây. Prototype bắt đầu với trạng thái loading (đang nạp) trước khi cho phép bạn duyệt các chuyến bay sắp tới và xem trước mã QR khi lên máy bay của bạn. Để tạo prototype này, chúng tôi sẽ sử dụng các thành phần tương tác, dữ liệu, biến và chuyển đổi trang. Không phải lo lắng! Tôi sẽ giúp bạn qua từng bước.

Dưới đây là bản demo về kết quả chúng tôi sẽ tạo ra:

Tài sản hướng dẫn

Có một vài điều bạn sẽ cần để theo dõi bài viết:

1. Tài khoản Atomic: Khởi đầu với bản dùng thử miễn phí (cũng có một plan miễn phí).
2. Những tài nguyên cho thiết kế: Đây là file mà bạn sẽ tìm thấy nội dung thiết kế và tạo prototype của bạn.
3. Nguồn dữ liệu: File Google Sheet với dữ liệu chúng tôi sẽ sử dụng trong prototype của mình.
4. Ứng dụng Atomic iOS: Tải xuống ứng dụng từ App Store để kiểm tra prototype trên điện thoại của bạn.

Nếu bất kỳ lúc nào trong quá trình hướng dẫn bạn có câu hỏi, vui lòng liên hệ với tôi (@femkesvs) hoặc nhóm hỗ trợ Atomic (@we_are_atomic) trên Twitter.

Làm thôi nào!

1. Copy các tài nguyên vào tài khoản của bạn

Tôi đã tạo một file mẫu với các nội dung bạn sẽ cần để tạo prototype của mình. File mẫu này hoàn chỉnh với các nội dung mà chúng tôi sẽ sử dụng, cũng như các thành phần được tạo sẵn.

Bạn có thể truy cập các tài nguyên đó ở đây. Để sử dụng chúng bạn cần phải copy bản prototype vào tài khoản của mình. Bạn có thể thực hiện việc này bằng cách nhấp vào Copy & Edit ở phía cuối bên phải và sau đó chọn một dự án bạn muốn copy vào. Tôi đề nghị tạo một dự án mới cho bài hướng dẫn này.

2. Upload dữ liệu lên Atomic

Trước khi bắt đầu tạo prototype, đầu tiên chúng ta cần thêm nguồn dữ liệu vào Atomic. Tôi đã kết hợp một Google Sheet với một số dữ liệu cơ bản mà chúng ta sẽ sử dụng trong prototype của mình.

Bạn có thể truy xuất các dữ liệu tại đây. Khi nguồn dữ liệu đang mở, hãy chuyển đến File > Add to My Drive (bạn sẽ cần tài khoản Google).

Tiếp theo, với dự án đang mở trong Atomic, hãy chọn tab Data. Từ đây hãy nhấp vào Import Data và tìm nguồn dữ liệu qua ô tìm kiếm. Khi đã tìm thấy, hãy chọn nguồn dữ liệu. Bạn sẽ thấy Atomic nạp dữ liệu vào dự án của bạn. Nguồn dữ liệu này bây giờ có thể được truy xuất và sử dụng cho bất kỳ prototype nào trong dự án.

Chúng ta sắn sàng!

3. Tạo trạng thái loading

Hãy bắt đầu cấu thành prototype của chúng ta bằng việc tạo trạng thái loading. Chúng ta sẽ thực hiện việc này bằng cách tạo cả hành động chuyển đổi và một action dựa trên thời gian trên trang.

Đầu tiên, chọn thành phần loadding từ trang Assets để copy (CMD-C và paste (CMD-V) vào trang 1. Nó sẽ khá lớn, và thay vì thay đổi kích thước nó, đặt nó vào vị trí bắt đầu.

Sau đó copy phần tử loading bạn vừa đặt trên trang 1, lần này paste nó lên trang 2. Tái định vị nó vào trạng thái sau cùng của nó (xoay theo chiều kim đồng hồ 75 ° sao cho mặt phẳng được đặt ở bên phải của canvas).

Để tạo ra chuyển tiếp, hãy quay lại trang 1. Trong bảng điều khiển thuộc tính nằm bên phải, bạn sẽ thấy một phần có tên là Page Actions. Nhấp vào nút dấu cộng và sau xét gúa trị như sau:

• Make something happen: After a set time
• Wait: 0
• Go to: Page 2
• Motion: Custom transition
• Easing: Ease in-out
• Duration: 2000

Hãy xem thử trước và thấy quá trình chuyển đổi của chúng ta đang hoạt động - bạn sẽ thấy chiếc máy bay lướt từ trái qua phải trong vòng 2 giây. Khéo léo thật!

Để tiếp tục, bạn cũng có thể copy và paste logo của Fly vào cả trang 1 và trang 2 (bên dưới thành phần loading trong bảng điều khiển trang và được đặt phía sau). Hãy chắc rằng bạn làm theo cùng một kỹ thuật đặt nó ở vị trí bắt đầu và kết thúc của nó trên mỗi trang. Bạn có thể phải điều chỉnh thứ tự các lớp của bạn để làm cho nó xuất hiện từ phía sau.

Sau cùng, chúng ta sẽ cần phải tạo một action tự động đưa người dùng từ trang 2 đến trang 3. Trên trang 2 bổ sung một page action theo thời gian khác. Lần này, chúng tôi sẽ sử dụng các thiết lập dưới đây:

• Thực hiện điều gì đó xảy ra: Sau một thời gian đặt
• Thời gian chờ: 1000
• Go to: Home
• Chuyển động: Trượt lên
• Tăng tốc: chậm dần đều
• Thời lượng: 300

Lời khuyên: nếu bạn muốn tách rời thời gian của hai yếu tố hoạt hình, bạn có thể thực hiện việc này bằng cách sử dụng Dòng thời gian chuyển động nâng cao.

4. Hiểu về các đối tượng

Tiếp đến, copy các yếu tố cần thiết cho trang 3 và paste chúng vào trang 3. Bạn sẽ cần phải sắp xếp lại một chút và điều chỉnh để phù hợp với các yếu tố trên trang khi cần thiết.

Hầu như tất cả các yếu tố cần thiết cho trang này là các đối tượng (components).

Giới thiệu về những đối tượng (components)

Các component trong Atomic giống như các biểu tượng. Bất kỳ thành phần nào cũng có thể được chỉnh sửa và tái sử dụng xuyên suốt dự án. Các chỉnh sửa bất kỳ được thực hiện cho một component sẽ được cập nhật trong từng trường hợp. Các component cũng có thể tương tác và mang nhiều trạng thái của một biểu tượng. Điều này giúp cấu trúc prototype của bạn thật sự dễ dàng.

Hãy bổ sung một số tương tác vào component boardingPasses. Để mở component này, nhấp đúp vào biểu tượng component trong bảng layers bên cạnh tên của layer. Khi mở, bạn sẽ thấy ba trang; một đại diện cho mỗi chuyến bay. Hiện tại, những đường chuyền này giống hệt nhau, chúng tôi sẽ sớm thay đổi điều này.

Chúng tôi biết rằng người dùng có 3 chuyến bay và chúng tôi muốn họ có thể vuốt chạm qua từng chuyến bay. Ngoài ra còn có một biểu tượng mã QR, khi tương tác với nó.

Nếu bạn nhìn vào bảng điều khiển layers, bạn sẽ thấy mỗi trang là một giá trị của một component được gọi là “boardingCard" (thẻ lên máy bay). Bây giờ chúng ta hãy mở component boardingCard để xem dữ liệu đã được áp dụng như thế nào.

5. Sử dụng các dữ liệu

Component boardingCard là một component được nhúng trong một component. Điều này giúp chúng ta tạo ra một biểu tượng thẻ lên máy bay có thể được tái sử dụng khi hiển thị các tập dữ liệu khác nhau.

Với component boardingCard, bạn sẽ thấy có hai trang; mặt trước và mặt sau của thẻ này. Đây là nơi gán dữ liệu cho từng phần tử văn bản.

Chọn văn bản ABC và nhìn vào các Text Properties. Bạn sẽ nhận thấy những điều sau:

• Nội dung: Xét từ cột dữ liệu
• Dữ liệu: Thừa kế từ cấp trên
• Cột: code khởi hành

Sau đó, nếu bạn nhìn vào Google Sheet nơi dữ liệu này đang được lấy ra, bạn sẽ thấy một cột có tiêu đề “departure-code” (mã khởi hành). Điều này có nghĩa là phần tử văn bản ABC sẽ hiển thị bất kỳ dữ liệu nào được hiển thị trong cột “mã khởi hành”.

Tất cả văn bản trong thành phần này đã được xét thành Inherit from parent. Điều này cho phép chúng tôi liên kết với bảng dữ liệu ở cấp nhóm và do đó hiển thị và sắp xếp thông qua hàng dữ liệu theo hàng. Chúng ta sẽ đến sớm thôi.

6. Bổ sung một tương tác flip (lật)

Tiếp đến, chúng tôi sẽ thiết lập một chuyển tiếp trên trang để flip chuyển đổi giữa thẻ và mã QR. Trên trang đầu của component boardingCard, nhấn H để mở công cụ hotspot. Sau đó, vẽ một hotspot trên biểu tượng mã QR trên trang chủ.

Hotspots cho phép bạn xác định các khu vực tương tác trong prototype của bạn. Với hotspot đã được chọn, trong interaction panel (bảng tương tác), hãy xét giá trị như sau:

• Gesture: Click or tap
• Go to: > Next page
• Motion: Flip
• Easing: Ease in-out
• Duration: 300MS

Sau đó, trên trang sau, tạo một hotspot khác (H) sẽ mang chúng ta trở lại trang đầu tiên. Lần này vẽ nó trên biểu tượng close và thiết lập như sau:

• Gesture: Click or tap
• Go to: > Previous page
• Motion: Flip
• Easing: Ease in-out
• Duration: 300MS

Đã đến lúc kiểm tra tương tác của bạn! Ở góc dưới cùng bên phải, nhấn nút Preview. Chế độ Preview cho phép bạn kiểm tra quá trình chuyển tiếp và tương tác với prototype của mình thông qua các hotspot. Hãy thử nhấp vào thẻ QR hoặc biểu tượng đóng; thẻ này nên flip giữa hai trạng thái. Bạn có thể đóng bản Preview bằng cách nhấn X.

Việc có thẻ lên máy bay là một thành phần tương tác cho phép chúng tôi chọn dữ liệu được hiển thị động, mà không phải tạo nhiều trạng thái và sự tương tác.

7. Kết nối dữ liệu với phụ huynh

Để quay lại, hãy nhấp vào nút back màu tím trên cùng bên trái. Bây giờ bạn nên trở lại đối tượng boardingPasses. Trong thành phần này, chúng tôi có ba thẻ hiện đang hiển thị cùng một dữ liệu. Hãy cập nhật ngay bây giờ.

Hãy nhớ cách bên trong thành phần thẻ lên máy bay, dữ liệu được xét giá trị thành Inherit from parent? Trong trường hợp này, parent là giá trị của thành phần.

Trên trang chuyến bay 1, chọn giá tri boardingCard. Trong component properties, hãy để nguyên giá trị State. Phần Data, chọn nguồn dữ liệu và đảm bảo Row được xét thành hàng 1. Ví dụ bây giờ sẽ hiển thị dữ liệu từ hàng đầu tiên của bảng dữ liệu.

Nếu bạn thay đổi row, bạn sẽ nhận thấy rằng dữ liệu đã hiển thị được cập nhật. Đặt nó trên hàng 1 bây giờ, tuy nhiên trên chuyến bay 2 và chuyến bay 3 xét để hiển thị dữ liệu từ hàng 2 và hàng 3 tương ứng.

8. Bổ sung các thao tác vuốt chạm

Để cho phép người dùng vuốt qua thẻ lên máy bay, chúng tôi cần thiết lập một số tương tác vuốt.

Tạo và vẽ một hotspot (H) ở phía bên tay phải của trang chuyến bay 1 (hãy nhớ chừa một khoảng trống ở phía trên cho hotspot nằm vượt trên biểu tượng đóng của trang back của component boardingCard và nó không che phủ mã QR trên trang front). Để tạo trạng thái swipe (vuốt chạm), hãy sử dụng các cài đặt sau:

• Gesture: Swipe left
• Swipe distance: 200
• Go to: > Next page
• Motion: Push Left
• Easing: Ease in-out
• Duration: 300MS

Làm tương tự trên trang chuyến bay 2 và thêm một hotspot thứ hai ở phía bên trái của chuyến bay 2 và chuyến bay 3 trang được đặt sang Push Right và Push Left để thay thế. Vui lòng nhấn Preview để kiểm tra và tương tác với đối tượng và điều chỉnh cài đặt swipe của bạn cho phù hợp.

9. Tạo một biến số

Để hoàn thành việc xây dựng prototype, chúng ta cần phải tạo và sử dụng một biến số. Biến này sẽ cho phép các thành phần của chúng ta giao tiếp với nhau khi đang tác động đến trạng thái của chúng.

Biến số chúng ta sẽ tạo sẽ được sử dụng để cập nhật các dấu chấm thể hiện tiến trình dựa trên đó thẻ lên máy bay được hiển thị.

Để tạo một biến, nhấn V để mở Variables Modal. Ở đây, nhấp vào Create New Variable và nhập “flightDisplayed” vào ô Name. Để trống giá trị mặc định.

Tuyệt, bạn đã thiết lập biến của mình! Đóng khung nhìn các biến bằng cách nhấn X hoặc Escape trên bàn phím của bạn.

10. Sử dụng các biến số

Điều hướng quay lại prototype. Nếu chúng tôi xem trước ngay từ trang Home, bạn sẽ có thể swipe giữa các thẻ và cũng tương tác với mã QR.

Mặc dù hiện tại chúng tôi có thể swipe các đường chuyền, có một vài thứ khác cần định cấu hình để tác động đến các progress dots để cập nhật dựa trên sự tiến triển của thẻ lên máy bay.

Để làm điều này, hãy mở đối tượng boardingPasses. Trên trang 1, tạo những hành động trang như sau:

• After a set time
• Wait: 0
• Set: flightDisplay (variable)
• To: value...
• Value: 1

Lặp lại điều này trên trang 2 và 3, đảm bảo giá trị được xét thành 2 hoặc 3 để xác định trang mà bạn đang truy cập.

Chúng tôi đã thông báo thật hiệu quả cho đối tượng boardingPass cập nhật giá trị của biến flightDisplayed, tùy thuộc vào chuyến bay (trang) được hiển thị. Bây giờ chúng ta có thể sử dụng giá trị này để tác động đến trạng thái của progress dots.

Cách thực hiện: quay trở lại prototype và mở thành phần progressDots.

Bạn sẽ nhận thấy 3 trang (các tiểu bang) có tên là 1, 2 và 3. Việc đặt tên này khớp với các giá trị được thiết lập trong biến flightDisplayed. Điều quan trọng là các tên trang này khớp với các giá trị được xét.

Trở lại prototype, chọn đối tượng progressDots và:

1. Trong mụch Component trong bảng thuộc tính, mở menu thả xuống State.
2. Chọn biến số flightDisplayed.

Bây giờ chúng ta đã kết nối thành phần progressDots với biến flightDisplayed. Điều này có nghĩa là khi giá trị của biến thay đổi thành giá trị, thành phần progressDots sẽ hiển thị trang khớp với giá trị biến.

Thử xem trước prototype của bạn ngay bây giờ, tương tác với thẻ lên máy bay bằng cách vuốt và xem liệu các dấu chấm tiến trình có cập nhật hay không.

Cuối cùng, bạn có thể xóa hoặc di chuyển trang Asset để đảm bảo bản xem trước được chia sẻ của bạn sẽ mở ra đúng trang bắt đầu. Để xóa trang, hãy chọn menu hamburger trên hình đại diện của trang và nhấp delete page.

Lời khuyên: hãy xem liệu bạn có thể tìm ra cách giúp cập nhật trạng thái của đối tượng promoCard dựa trên chuyến bay được hiển thị hay không. Bạn sẽ muốn tạo một biến mới gọi là cardDisplayed.

Ta-da!

Bạn đã xong rồi đấy! Ứng dụng lên máy bay của riêng bạn. Nếu bạn đã download ứng dụng iOS, thử bản mở prototype và tương tác với nó trên iPhone của bạn; sẽ có cảm giác như ứng dụng thật.

Chúc mừng bạn đã theo hướng dẫn này cho đến cuối cùng. Bây giờ bạn sẽ có một sự hiểu biết thấu đáo về cách tạo ra prototype của riêng bạn trong Atomic. Nếu bạn hiện đang có các tài nguyên hiện trong Sketch, bạn có thể import chúng bằng cách sử dụng Plugin Atomic cho Sketch hoặc thiết kế nguyên bản bằng Atomic nếu bạn muốn.

Có câu hỏi? Hay bình luận không? Hãy để lại bên dưới hoặc liên hệ với tôi trên Twitter (@femkesvs).