APP INVENTOR 2 - Mẹo phía trước sạch (+4 Ví dụ): 6 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:32

Chúng ta sẽ xem cách chúng ta có thể làm cho Ứng dụng của bạn trên AI2 trông thật thẩm mỹ:)

Không có mã lần này, chỉ có các mẹo để có một ứng dụng mượt mà như 4 ví dụ ở trên!

Quân nhu

Bước 1: Giới thiệu

Có thể hướng dẫn này dành cho tất cả mọi người đang học hoặc sử dụng App Inventor 2, phần mềm do MIT phát triển.

MIT AI2 là một phát triển ứng dụng điện thoại thông minh miễn phí, đơn giản và tuyệt vời, hoàn hảo cho mọi thiết bị điện tử hoặc Arduino DIY. Nhưng sự đơn giản của anh ấy cũng khiến anh ấy bị hạn chế khá nhiều, đặc biệt là khi bạn đang cố gắng làm cho ứng dụng của mình trông thẩm mỹ.

Mục đích của Tài liệu hướng dẫn này là cung cấp cho bạn một số mẹo để tạo một giao diện thú vị cho ứng dụng trong tương lai của bạn, giao diện này sẽ trông đơn giản và trang nhã, như mọi giao diện đều phải vậy.

Chúng ta sẽ xem những điều cơ bản để tạo một Ứng dụng trông giống như 4 Ví dụ đã hiển thị.

Bắt đầu nào !

Tái bút: Nếu yêu thích dự án này, bạn có thể bình chọn cho mình trong Cuộc thi Khoa học Lớp học. Cảm ơn bạn rất nhiều !!

PS2: Một số lỗi tiếng Anh sẽ được thực hiện, thứ lỗi cho tôi:)

Bước 2: BackGround

Tôi đã sáng tạo thêm trên Figma, một phần mềm miễn phí vectơ, giống như một loại sơn nâng cao, cho phép bạn dễ dàng tạo ra các hình dạng và màu sắc: Nó rất trực quan, tôi khuyên bạn nên sử dụng: www.figma.com!

Bạn không cần phải sử dụng Figma cho mặt trước của mình, nhưng tôi thích thiết kế trước khi tạo ứng dụng.

Như bạn thấy trên hình, nền cần phải rất mềm, vì chúng ta sẽ đặt một số nút, hình ảnh, v.v. trên đó…

Tôi đề nghị độ trong suốt 30% đối với màu bạn sử dụng và nền chỉ có 1 màu.

Bước 3: Màu sắc

Màu sắc bạn chọn và cường độ của chúng rất quan trọng trong một Ứng dụng.

Lời khuyên đầu tiên mà tôi đưa ra là chọn tối đa 3 màu (+ đen và trắng): chúng tôi vẫn đang cố gắng trở nên mềm mại:)

Đối với 4 ví dụ mà tôi đã đưa ra, đây là những lời khuyên mà tôi đã chọn (bạn cũng có thể xem chúng trên hình ảnh, dưới dạng tóm tắt):

Nền: nền mềm và sáng, không có hình dạng (độ trong suốt 30% của màu). Hãy nhớ màu này để tích hợp các nút của bạn!

Tiêu đề: Văn bản mỏng màu xám đậm trông đẹp! Đối với phụ đề và văn bản sau, hãy giữ nguyên màu đen, nhưng thay đổi màu đen (xám khi đó không phải là thông tin lớn), đồng thời sử dụng kích thước và thuộc tính mà bạn có thể (in đậm, nghiêng).

Nút: Một màu duy nhất, nói chung là màu nền của bạn với (độ trong suốt 80-100%), sau đó là màu đen hoặc trắng để hoàn thiện nó.

Thanh trượt: không sử dụng 2 màu cho chúng, chỉ sử dụng một màu ở phía bên trái và phía bên phải có màu đen.

Đó là nó !!

Càng đơn giản càng đẹp !!!! Đừng sử dụng quá nhiều màu sắc, hình dạng và kích thước, Hãy tinh tế!

Bước 4: Đặt thông số phù hợp của màn hình

Trên màn hình chính của phần Trình thiết kế nhà phát minh ứng dụng, bạn có thể chọn dấu hoa thị chính của màn hình.

Trên Screen1 -> Properties, hãy làm theo hành động sau để xóa khung phụ khỏi AI2 trông không thực sự đẹp ^ _ ^.

1 - Hướng của màn hình

Chỉ chọn một hướng vì ứng dụng không thích ứng lắm khi bạn xoay nó.

Tôi đã chọn hướng dọc.

2 - Vô hiệu hóa 'Tiêu đề hiển thị' và 3- Tắt 'ShowStatusBar'

Tôi tắt tiêu đề và thanh trạng thái, vì nó thêm một số thanh trên ứng dụng, không được thẩm mỹ cho lắm (theo ý kiến của tôi).

4 - Kích thước

Kích thước của ứng dụng phổ biến là 505x320 (cao x rộng). Hãy nhớ những kích thước đó để tạo nền và hình ảnh của bạn (ít nhất phải có cùng tỷ lệ)! Nếu bạn sử dụng Figma, bạn có thể tạo kích thước phù hợp cho ứng dụng của mình ngay lập tức.

5 - Định cỡ

Nếu bạn chọn Cố định, thì ứng dụng sẽ có kích thước 505x320. Nếu bạn chọn Responsive, thì ứng dụng sẽ phù hợp với điện thoại thông minh của bạn, nhưng hãy cẩn thận, bạn sẽ phải điều chỉnh hình ảnh của mình.

Bước 5: Cách thực hiện:)

Để tạo lại ví dụ đầu tiên, chúng ta sẽ làm theo 3 bước (như hình ảnh):

1 - Lấy kích thước

Điều thú vị trên figma là bạn có thể thấy kích thước của khung và đối tượng của mình, vì vậy bạn có thể biết kích thước nào sẽ là đối tượng của bạn và khoảng trống! Khoảng trống rất quan trọng trên App Inventor vì chúng tôi sẽ tạo ra chúng bằng cách đặt nhãn vô hình!

2 - Điền vào chỗ trống sẽ vô hình nhãn

Như bạn có thể thấy trên hình thứ hai, chúng tôi tái tạo mặt trước mà chúng tôi muốn bằng cách đặt nhãn với kích thước thích hợp. Sau đó, làm cho nó trông vô hình (bỏ bấm vào nút 'hiển thị').

Cũng sử dụng Bố cục -> Sắp xếp để đặt các mục của bạn

3 - Cố gắng tạo các Nút của bạn trên phần mềm

Khi có thể, hãy tạo các nút của bạn trên trang web AI2, chúng sẽ có chất lượng cao và hoạt ảnh nhỏ 'khi nhấp chuột' sẽ khá tuyệt:). Khi bạn không thể tạo các nút của riêng mình, bạn có thể tạo chúng trên một phần mềm khác, sau đó nhập nó dưới dạng hình ảnh.

Bước 6: Kết quả:)

Ở bên trái: ảnh chụp màn hình từ điện thoại thông minh của tôi trên AI2.

Bên phải: bản nháp được thực hiện trên Figma.

Tôi thực sự hy vọng có thể giúp bạn xây dựng ứng dụng tuyệt vời trên AI2.

Cảm ơn bạn rất nhiều vì đã xem. Nếu bạn cần thêm lời khuyên, vui lòng cho tôi biết…

Một hướng dẫn khác về phần phụ trợ của AI2 sẽ sớm được phát hành!

Trân trọng bạn, Thomas, từ Technofabrique