Văn bản & hình ảnh
Các thành phần Tiêu đề, Đoạn văn bản và Mô tả là những không gian mà quản trị viên có thể nhập thông tin và trình bày nó trên màn hình của khách hàng. Khách hàng không thể điền thông tin vào các phần này. Ba thành phần này khác nhau ở nhu cầu trình bày trang và cài đặt thông số. Admin có thể sử dụng linh hoạt 3 thành phần này để phân loại theo các mức độ quan trọng của nội dung.
4.1. Tiêu đề
Thành phần Tiêu đề thường được sử dụng để phác thảo chủ đề chính, tóm tắt tiêu đề của một mẫu đánh giá hoặc làm điểm nổi bật cho một phần quan trọng của nội dung lớn, giúp người đọc dễ dàng hiểu và tập trung vào điểm cốt yếu của tài liệu.
4.2. Đoạn văn bản
Thành phần Đoạn văn bản thường được sử dụng ở vị trí tiêu đề của các mục, nhằm tóm tắt nội dung của phần nội dung dài, giúp người đọc nắm bắt được ý chính và quan trọng của phần tiếp theo.
4.3. Mô tả
Thành phần Mô tả thường được sử dụng để cung cấp một giới thiệu chi tiết về nội dung.
👉Ví dụ, một trang web bán hàng có thể sử dụng các thành phần tiêu đề, đoạn văn bản, mô tả để trình bày theo các mức độ nhấn mạnh các mức độ quan trọng khác nhau
[1] Tiêu đề: "Danh sách các sản phẩm có tại cửa hàng"
[2] Đoạn văn bản để cụ thể tên sản phẩm: "Sữa rửa mặt "
[3] Mô tả để cung cấp thông tin cụ thể về sản phẩm như: thông số sản phẩm, thành phần, hướng dẫn sử dụng.
Bảng so sánh thông số của từng thành phần
Thông số có thể cài đặt
Nội dung
Căn lề
Kiểu chữ
Tiêu đề
⭕
⭕
⭕
Đoạn văn bản
⭕
⭕
Văn bản
⭕
Cài đặt thông số
[1] Nội dung: Nội dung thông tin admin muốn truyền đạt đến khách hàng. Nội dung ở tiêu đề và đoạn văn bản không thể xuống dòng, trong khi đó nội dung ở mô tả có thể xuống dòng.
[2] Căn lề: Cách thức sắp xếp văn bản theo những đường thẳng dọc tương ứng trên một trang. Việc căn lề này ảnh hưởng đến cách hiển thị và trình bày nội dung, tạo ra các hiệu ứng thẩm mỹ và dễ đọc khác nhau. Có ba kiểu căn lề: trái, giữa, phải
[3] Kiểu chữ: Kích thước của chữ được sử dụng ở nội dung. Kích thước của kiểu chữ ảnh hưởng đến độ dễ đọc và tính thẩm mỹ của tài liệu và đặc biệt là ẩn ý vai trò của văn bản. Có ba loại kích cỡ: lớn, bình thường, nhỏ
Kiểu chữ to: Thường được sử dụng cho các tiêu đề chính, tiêu đề phần, hoặc các đoạn văn bản cần nổi bật. Nhằm mục đích thu hút sự chú ý, giúp nhấn mạnh các phần quan trọng của tài liệu.
Kiểu chữ bình thường: Sử dụng cho phần lớn nội dung văn bản, đoạn văn, hoặc các phần mô tả chi tiết. Được thiết kế để dễ đọc và không gây mỏi mắt khi đọc trong thời gian dài.
Kiểu chữ nhỏ: Thường được sử dụng cho các chú thích, ghi chú, nguồn gốc tài liệu, hoặc các thông tin phụ. Kiểu chữ nhỏ giúp không chiếm nhiều không gian của trang nhưng vẫn đảm bảo cung cấp đủ thông tin và dễ đọc.
4.4. Hình ảnh
Không gian để admin thêm hình ảnh vào form DynamicAction để gửi đến màn hình của người dùng, người dùng sẽ không thể thêm hình ảnh ở đây. Hình được thêm vào giúp cải thiện trải nghiệm người dùng và làm cho mẫu DynamicAction.
Giải thích hai khái niệm: hình và khung
Hình là hình ảnh mà admin thêm vào. Ví dụ: hình ảnh sữa rửa mặt
Khung là một phần giới hạn xung quanh, nó quy định phần nào của hình ảnh được hiển thị trên màn hình. Kích thước của khung phụ thuộc vào tỷ lệ ảnh mà admin đã thiết lập. Ví dụ: nếu admin đặt tỷ lệ ảnh là 4:3, thì sẽ tạo ra một khung có tỉ lệ chiều dài và chiều rộng là 4:3.
Hai khái niệm "ảnh" và "khung" là độc lập với nhau. Ảnh có thể trùng khớp với khung, hoặc nhỏ hơn hoặc lớn hơn khung.
+ Nếu ảnh nhỏ hơn khung, thì ảnh sẽ được hiển thị hết trên màn hình, và phần còn lại của khung sẽ được điền bằng khoảng không gian trống.
+ Nếu hình lớn hơn khung, chỉ một phần của hình sẽ được hiển thị trong khung, phần còn lại sẽ bị cắt bỏ và không được hiển thị trên màn hình.
+ Nếu hình bằng khung thì hình sẽ được hiển thị hết lên màn hình và không tạo ra không gian trống
Tỷ lệ ảnh: Co giãn chiều rộng của hình để phù hợp với khung được cấu hình
Tự động: hình được giữ nguyên kích thước gốc
1:1: Khung có tỉ lệ chiều dài:chiều rộng = 1:1, nghĩa là chiều dài bằng chiều rộng, lúc này hình sẽ ở dạng hình vuông.
4:3: Khung có tỉ lệ chiều dài:chiều rộng = 4:3
16:9: Khung có tỉ lệ chiều dài:chiều rộng = 16:9
3:1: Khung có tỉ lệ chiều dài:chiều rộng = 3:1
Kích cỡ: kích cỡ hình lớn hay nhỏ.
Lớn: phóng to hỉnh để sát đến hai lề điện thoại
Nhỏ: thu nhỏ ảnh để hình có kích cỡ vừa phải, phù hợp với văn bản
Object-fit: Cách điều chỉnh hình để phù hợp với khung đã chọn. Các phương pháp có thực hiện như phóng to, thu nhỏ hoặc co giãn chiều dài, chiều rộng
Contain: phóng to, thu nhỏ hình nhưng vẫn giữ nguyên tỉ lệ hình và vẫn đảm bảo hình được nằm hoàn toàn trong khung, đến lúc chiều dài hoặc chiều rộng của hình vừa với chiều dài hoặc chiều rộng của khung. Phần hình thiếu hụt so với khung sẽ được điền bằng khoảng không gian trống màu trắng.Cover: phóng to, thu nhỏ hình nhưng vẫn giữ nguyên tỉ lệ hình và hình phải lấp đầy khung. Phần hình dư ra ở chiều dài hoặc chiều rộng sẽ được cắt bỏ và không hiển thị lên màn hình.
Fill: co giãn chiều dài và chiều rộng của hình để vừa với khung. Phương pháp này có thể làm biến dạng hình.
None: giữ nguyên kích thước ban đầu của hình. Phần hình thiếu hụt so với khung sẽ được điền bằng khoảng không gian trống màu trắng.
Object position: vị trí của hình sẽ với khung
Top: Hình ảnh sẽ được căn chỉnh từ chính giữa của mép trên của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Bottom: Hình ảnh sẽ được ưu tiên căn chỉnh từ chính giữa của mép dưới của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Left: Hình ảnh sẽ được ưu tiên căn chỉnh từ chính giữa của mép trái của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Right: Hình ảnh sẽ được ưu tiên căn chỉnh từ chính giữa của mép phải của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Center: Hình ảnh sẽ được ưu tiên căn chỉnh từ chính giữa của hình của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Radius: Bo bốn góc theo tỉ lệ được cấu hình.
Last updated