Cách tạo mẫu một ứng dụng di động với Origami Studio

Feb 2, 2026

Cách

Trong một thế giới nơi người dùng có kỳ vọng cao về trải nghiệm của họ trên web và điện thoại di động, tạo mẫu và đánh giá người dùng là chìa khóa. Bây giờ là phổ biến để dần dần lặp đi lặp lại trên các nguyên mẫu với độ trung thực ngày càng cao, và một sự hưng thịnh Kinh nghiệm người dùng ngành công nghiệp đã phát triển xung quanh bộ hoạt động quan trọng này. Cuối cùng, nhận được phần mềm ngay tại giai đoạn tạo mẫu giúp bạn tiết kiệm thời gian và / hoặc tiền sau này.

[số 8]

10 công cụ tạo mẫu hàng đầu

Có nhiều cách tiếp cận bạn có thể thực hiện để tạo mẫu và nhiều công cụ ngoài kia để hỗ trợ. Một trong những người mới nhất trên khối là Studio Origami , Được phát triển bởi Facebook và có sẵn miễn phí cho MacOS.

Origami Studio, thực sự bắt đầu cuộc sống của mình như một plugin cho nhà soạn nhạc thạch anh (một ngôn ngữ lập trình trực quan trong môi trường phát triển xcode của macos) trước khi trở thành một công cụ độc lập, đã thu hút được rất nhiều sự chú ý trong năm qua.

Điều này không chỉ do nó được xây dựng bởi một nhà phát triển tên lớn mà còn vì sự kết hợp của sức mạnh và sự đơn giản mà nó mang đến để phát triển các nguyên mẫu tương tác cao, độ tương tác cao.

Thực hiện theo các bước sau để khám phá cách bạn dễ dàng sử dụng Origami Studio để xây dựng một nguyên mẫu.

01. Một nguyên mẫu mới

Start by creating a new iPhone 8 prototype — Bắt đầu bằng cách tạo một nguyên mẫu iPhone 8 mới

Chúng ta sẽ tạo một nguyên mẫu cho một ứng dụng di động sẽ cho phép chúng ta vuốt qua hình ảnh của những con mèo và 'như' một số trong số họ. Khi chúng tôi đã cài đặt Origami Studio, chúng tôi sẽ tạo một nguyên mẫu iPhone 8 mới từ màn hình giật gân.

02. Thêm các lớp

Chúng ta có thể bắt đầu thêm một số lớp vào nguyên mẫu của chúng ta ngay lập tức. Trong trường hợp này, chúng tôi sẽ thêm một logo được định vị ở trên cùng của màn hình. Chúng tôi thêm lớp bằng nút + ở trên cùng bên phải và chọn 'Lớp hình ảnh'. Sau đó chúng ta có thể thay đổi kích thước và định vị nó một cách thích hợp bằng cách tô sáng và sửa đổi các thuộc tính của lớp. Sau thương hiệu của chúng tôi, chúng tôi cũng sẽ thêm hình ảnh trái tim ở dưới cùng màn hình để phục vụ như là nút 'Like' của chúng tôi.

03. Tạo một tương tác

For interactions you'll need to create a patch — Đối với các tương tác, bạn sẽ cần tạo một bản vá

Chúng ta cần làm cho nút tim của chúng tôi phản ứng với các tương tác của người dùng. Bạn sẽ nhận thấy rằng trong cửa sổ xem trước, con trỏ sẽ thay đổi để thể hiện cảm ứng trên thiết bị di động. Để trả lời điều này, chúng ta cần tạo một 'bản vá', về cơ bản là một hàm trong origami lấy đầu vào và tạo ra đầu ra. Bấm đúp vào khu vực màu xám trống để hiển thị danh sách các bản vá mới và tìm kiếm 'Tương tác'. Đặt bản vá của bạn và nó sẽ xuất hiện trên màn hình.

04. Liên kết các tương tác với các lớp

Change the patch properties so that it only responds when you click in the right place — Thay đổi thuộc tính bản vá để nó chỉ phản hồi khi bạn nhấp vào đúng nơi

Hiện tại, bản vá của bạn sẽ phản ứng với việc chạm vào bất cứ nơi nào trên nguyên mẫu. Kiểm tra nó bằng cách nhấp và bạn sẽ thấy các thuộc tính 'Xuống' và 'Nhấn vào thời gian thực. Nếu bạn chọn thuộc tính 'Lớp' trong bản vá, bạn có thể liên kết nó với lớp chứa hình ảnh trái tim và giờ đây sẽ chỉ phản ứng với các nhấp chuột vào khu vực cụ thể đó.

05. Hoạt hình

A pop animation will give users a bit of visual feedback — Một hoạt hình pop sẽ cung cấp cho người dùng một chút phản hồi trực quan

Bây giờ chúng tôi muốn có một cái gì đó xảy ra khi tương tác của chúng tôi kích hoạt. Tạo một bản vá khác, lần này là một 'hoạt hình pop'. Điều này được sử dụng để tạo ra một hiệu ứng mùa xuân. Để lại các thuộc tính như bây giờ, nhưng chúng tôi sẽ tạo một liên kết giữa đầu ra chạm của sự tương tác mà chúng tôi đã tạo trước đó và đầu vào số của hoạt hình POP mới của chúng tôi. Chúng tôi làm điều này bằng cách nhấp và kéo giữa các vòng tròn nhỏ bên cạnh mỗi vòng tròn. Nếu bạn nhấp vào trái tim bây giờ, bây giờ bạn sẽ thấy sự tương tác kích hoạt thay đổi đầu ra 'tiến trình' của hoạt hình POP.

06. Chuyển tiếp

You can change the extent to which objects change size when they're clicked — Bạn có thể thay đổi phạm vi mà các đối tượng thay đổi kích thước khi họ nhấp vào

Điều tiếp theo chúng ta cần là một bản vá chuyển tiếp. Điều này sẽ cho phép chúng tôi chỉ định các giá trị thấp và cao để di chuyển giữa sự thay đổi đầu ra tiến trình của hoạt hình POP. Sau đó, chúng tôi có thể liên kết các giá trị đầu ra của quá trình chuyển đổi với thuộc tính tỷ lệ của lớp hình ảnh trái tim để nói với origami thay đổi kích thước nó khi nó nhấp. Bây giờ bạn sẽ thấy rằng nhấp vào trái tim khiến nó hoạt động để thay đổi kích thước ngắn gọn. Tuy nhiên, nó không hoàn toàn đúng, vì nó bật trở lại bình thường ngay lập tức.

07. Công tắc

Use switch patches to toggle objects between different states — Sử dụng các bản vá chuyển đổi để chuyển các đối tượng giữa các trạng thái khác nhau

Chuyển các bản vá là cách toggling của origami giữa hai tiểu bang. Đây là những gì chúng ta muốn cho nút 'Like' của chúng tôi. Một đầu vào được truyền cho một bản vá chuyển đổi có thể lật nó giữa các trạng thái 'trên' và 'tắt', sau đó có thể được truyền dưới dạng đầu ra cho các bản vá tiếp theo. Hãy tạo một công tắc mới và đặt nó giữa sự tương tác và hoạt hình POP. Sau đó, bạn nên có thể nhấp vào trái tim để chuyển nó giữa các trạng thái nhỏ và lớn.

08. Hành vi phức tạp hơn

By experimenting with patches you can add more complex behaviour to your prototype — Bằng cách thử nghiệm các bản vá, bạn có thể thêm hành vi phức tạp hơn vào nguyên mẫu của mình

Xin chúc mừng! Bây giờ bạn đã tạo tính năng tương tác đầu tiên của mình, sử dụng các bản vá phổ biến nhất mà bạn sẽ thấy bạn sử dụng hết thời gian và thời gian. Chúng ta có thể thêm nhiều bản vá để tạo ra hành vi phức tạp hơn. Hãy tạo một lớp trái tim màu khác ngay lập tức đằng sau cái hiện tại của chúng tôi, sau đó thêm các bản vá mới cho cả hai để chia tỷ lệ nó đồng thời và sửa đổi độ mờ của lớp ban đầu của chúng tôi để nó hiển thị. Bây giờ, khi bạn chạm vào trái tim, nó sẽ chuyển đổi lớn hơn và nhỏ hơn, nhưng cũng xuất hiện để thay đổi màu sắc.

09. Carousel.

It's time to bring on all the cats — Đã đến lúc mang đến tất cả những con mèo

Để hoàn thành nguyên mẫu của chúng tôi, hãy thêm một băng chuyền hình ảnh với những con mèo mà chúng tôi muốn cho phép người dùng 'thích'. Để làm điều này, trước tiên chúng ta cần thêm một nhóm các lớp. Mỗi hình ảnh sẽ là một lớp riêng biệt, với các khớp nối X ngày càng bù đắp để về cơ bản chúng nằm theo kích thước phụ liên tiếp với một hàng chỉ có một màn hình hiển thị tại bất kỳ một mục nào.

10. Xoay trái và phải

Follow these steps to add a classic swiping action to your carousel — Thực hiện theo các bước sau để thêm một hành động vuốt cổ điển vào băng chuyền của bạn

Điều cuối cùng chúng ta cần làm để làm cho nó hoạt động được phép quét trái và phải cuộn băng chuyền. Chúng tôi làm điều này bằng cách tạo một tương tác cuộn để liên kết đến nhóm lớp băng chuyền (không phải hình ảnh riêng lẻ). Tương tác đầu ra một phối hợp X mà sau đó chúng ta có thể liên kết đến thuộc tính X của băng chuyền để di chuyển nó. Ở giữa, chúng tôi sẽ thêm một bản vá clip, có thể được sử dụng để giới hạn các giá trị để đảm bảo chúng tôi không cuộn đến các phối hợp bên ngoài cạnh của băng chuyền.

11. Các bước tiếp theo

Now you've learned the basics you can add more advanced features — Bây giờ bạn đã học được những điều cơ bản, bạn có thể thêm các tính năng nâng cao hơn

Đó là nó. Bạn đã tạo một ứng dụng rất cơ bản. Bạn cũng có thể sử dụng 'Khung hình' được tích hợp của Origami Studio để đặt nó lên nền thiết bị, có thể giúp tạo ra một kết thúc chuyên nghiệp. Bây giờ bạn đã quen thuộc với những điều cơ bản của việc sử dụng các bản vá, bạn có thể bắt đầu tạo ra các hành vi nâng cao hơn. Có rất nhiều hướng dẫn trên trang web Origami Studio, giải thích cách thực hiện các chức năng phổ biến thường thấy trong các ứng dụng.

Bài viết này ban đầu được xuất bản trong số 270 của nhà thiết kế web thiết kế web sáng tạo. MUA VẤN ĐỀ 270 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

[số 8]

Xu hướng sẽ định hình thiết kế ứng dụng trong năm 2018

3 cách hàng đầu để xây dựng một nguyên mẫu trang web

Tất cả những gì bạn cần biết về mockup, khung dây và nguyên mẫu

Cách tạo mẫu một ứng dụng di động với Origami Studio

01. Một nguyên mẫu mới

02. Thêm các lớp

03. Tạo một tương tác

04. Liên kết các tương tác với các lớp

05. Hoạt hình

06. Chuyển tiếp

07. Công tắc

08. Hành vi phức tạp hơn

09. Carousel.

10. Xoay trái và phải

11. Các bước tiếp theo

Cách - Các bài báo phổ biến nhất

Cách vẽ phối cảnh

Cách tạo meme trong Photoshop

Sử dụng biểu đồ.js để biến dữ liệu thành sơ đồ tương tác

Tạo hiệu ứng kiểu chữ 3D tương tác

Cách tạo một dải truyện tranh Manga xác thực

Cách thêm hình nền CSS thú vị vào trang web của bạn

Cách mã hóa một điểm đánh dấu thực tế Augmented

Sơn ướt ướt trong dầu

Thể loại