Tổng quan về trình thiết kế giao diện người dùng
Giải thích chi tiết về giao diện của AppMaster UI Designer để xây dựng ứng dụng web.
Sau khi tạo thành công ứng dụng, bạn sẽ được chuyển đến Tab UI Designer.
Trình thiết kế giao diện người dùng trong AppMaster được thiết kế thân thiện với người dùng, cho phép bạn tạo các trang ứng dụng web tuyệt đẹp một cách dễ dàng.
Thông qua giao diện kéo và thả trực quan, bạn có thể thiết kế các trang web và đưa nội dung vào chúng một cách liền mạch, loại bỏ nhu cầu về kỹ năng viết mã nâng cao.
Trình thiết kế giao diện người dùng được chia thành bốn phần chính để người dùng tương tác:
- Thanh công cụ bên trái
- Bảng trên cùng
- Bảng điều khiển phía dưới
- Khu vực vải
- Bảng thuộc tính
Thanh công cụ bên trái
Thanh công cụ ở phía bên trái cung cấp các công cụ để cấu trúc trang web của bạn. Bằng cách nhấp vào các biểu tượng nằm ở đầu thanh bên này, các bảng sau sẽ hiển thị:
- Danh sách thành phần giao diện người dùng
- Cây nguyên tố
- Cây trang
- Cây bố cục
- Người quản lý tài sản
Danh sách thành phần giao diện người dùng (phím tắt: 1 )
Danh sách thành phần giao diện người dùng cung cấp tất cả các thành phần có thể được thêm vào vùng canvas bằng cách kéo từ bảng điều khiển.
Các thành phần giao diện người dùng được sắp xếp thành các danh mục dựa trên mục đích của chúng, giúp điều hướng và tìm tiện ích phù hợp cho ứng dụng của bạn dễ dàng hơn.
Để truy cập nhanh phần tử, bạn có thể sử dụng thanh Tìm kiếm ở đầu bảng điều khiển.
Cây phần tử (phím tắt: 2 )
Từ Cây phần tử , bạn có thể quản lý và sắp xếp tất cả các thành phần được đặt trên trang đã chọn trong ứng dụng web của mình.
Tại đây, bạn có thể tương tác với các yếu tố sau:
- di chuyển các mục giữa cây bằng cách kéo,
- đổi tên các thành phần,
- thay đổi trạng thái hiển thị của các thành phần trên khung vẽ (ẩn/hiển thị).
Sử dụng thanh Tìm kiếm ở đầu bảng điều khiển cho phần tử tìm kiếm nhanh trong cây.
Cây trang (phím tắt: 3 )
Cây trang cho phép bạn sắp xếp và quản lý các trang trên trang web của mình. Bạn có thể tạo trang hoặc thư mục mới tại đây.
Trong Cây trang, bạn có thể sao chép hoặc xóa các trang hoặc thư mục.
Sử dụng thanh Tìm kiếm ở đầu bảng để tìm kiếm nhanh trang hoặc thư mục trong cây.
Danh sách bố cục (phím tắt: 4 )
Cây bố cục giúp quản lý bố cục trang của bạn. Giống như trong Cây trang, bạn có thể sao chép hoặc xóa bố cục.
Sử dụng thanh Tìm kiếm ở đầu bảng để có bố cục tìm kiếm nhanh trong cây.
Trình quản lý tài sản (phím tắt: 5 )
Trình quản lý nội dung tạo điều kiện thuận lợi cho việc tải lên và sắp xếp nội dung (chẳng hạn như tài liệu, hình ảnh và hoạt ảnh) để trang web của bạn sử dụng.
Tất cả nội dung bạn tải lên trong quá trình phát triển sẽ được lưu giữ trong Trình quản lý nội dung và có thể được sử dụng lại mà không cần tải lên lại.
Bạn cũng có thể xóa bất kỳ tài sản nào mà bạn không cần nữa.
Thanh trên cùng
Thanh trên cùng cung cấp một bộ cài đặt chế độ xem bổ sung. Bắt đầu từ phía bên trái, bên cạnh nút menu và kéo dài sang bên phải, bạn có bộ công cụ sau:
- Tài liệu hiện tại: hiển thị trang hoặc bố cục bạn hiện đang làm việc.
- Điểm dừng: biểu tượng điểm dừng cho phép bạn chuyển đổi giữa các điểm dừng khác nhau để xem trước và sửa đổi cách trang web của bạn xuất hiện trên các kích cỡ thiết bị khác nhau.
- Hoàn tác và Làm lại: các nút Hoàn tác và Làm lại cho phép bạn đảo ngược hoặc áp dụng lại các hành động bạn đã thực hiện trong Trình thiết kế, chẳng hạn như áp dụng kiểu hoặc xóa phần tử. Ngoài ra còn có các phím tắt: để hoàn tác hành động -
CRTL/⌘+Zvà để làm lại hành động -CTRL/⌘+SHIFT+Z.
Thanh dưới cùng
Bảng dưới cùng cho phép bạn phóng to hoặc thay đổi kích thước chế độ xem trang.
Ở phía bên trái của bảng điều khiển, bạn có thể đặt độ phân giải trang tùy chỉnh bằng cách đặt chiều cao và chiều rộng của khung vẽ.
Ở phía bên phải, bạn có thể điều khiển thang đo:
- Phóng to hoặc thu nhỏ
- Đặt tỷ lệ theo tỷ lệ phần trăm
- Đặt kích thước thực tế
- Điều chỉnh cửa sổ hiện tại vừa với khu vực hiển thị
Tranh sơn dầu
Canvas là không gian làm việc tương tác của bạn. Đây là nơi bạn có thể tương tác với các thành phần trang. Bạn có thể chọn các thành phần, định vị lại chúng và chỉnh sửa nội dung trực tiếp trên trang.
Ngoài ra, bạn có thể sao chép các phần tử ( CRTL/⌘+C ) và dán ( CRTL/⌘+V ) giữa các trang và ứng dụng hoặc các phần tử trùng lặp trong trang hiện tại ( CRTL/⌘+D ).
Bảng thuộc tính
Bảng Thuộc tính ở phía bên phải của Trình thiết kế cho phép bạn tùy chỉnh giao diện và hoạt động trực quan của thành phần, bố cục hoặc trang đã chọn.
Bảng Properties gồm có 4 bảng chính:
- Bảng điều khiển ngoại hình
- Bảng tùy chọn bổ sung (tùy chọn)
- Bảng truy vấn phương tiện
- Bảng logic nghiệp vụ
Trên tiêu đề của bảng điều khiển, bạn có thể đổi tên mục đã chọn bằng cách nhấp vào tên mục, đọc mô tả hoặc xóa mục bằng cách nhấp vào biểu tượng Thùng rác.
Bảng điều khiển ngoại hình
Bảng điều khiển Giao diện cho phép bạn truy cập vào nội dung và thuộc tính tĩnh được hiển thị của phần tử đã chọn. Bạn có thể nhập hoặc chọn các giá trị này trong các trường tương ứng và kiểu sẽ được áp dụng ngay lập tức cho các thành phần của bạn trên khung vẽ.
Nếu không có thành phần nào được chọn trên khung vẽ, bảng này sẽ hiển thị cài đặt của trang hoặc bố cục hiện tại.
Bảng tùy chọn bổ sung
Bảng tùy chọn bổ sung dành cho các thành phần yêu cầu dữ liệu hoặc tùy chọn cài đặt bổ sung.
Bạn có thể đặt nguồn dữ liệu hoặc nhập tùy chọn theo cách thủ công tùy thuộc vào thành phần đã chọn.
Bảng truy vấn phương tiện
Bảng truy vấn phương tiện cho phép bạn ghi đè các thuộc tính mục cho từng điểm dừng được xác định.
Bảng logic nghiệp vụ
Bảng logic nghiệp vụ cung cấp tất cả các trình kích hoạt cho một phần tử và cho phép bạn thiết lập tương tác phần tử khi trình kích hoạt kích hoạt.