Thiết kế web lớp giấy xếp các mảng nền như những tờ giấy chồng lên nhau. Trang có chiều sâu nhẹ mà không cần hiệu ứng mạnh. Phong cách Lớp giấy xếp có trật tự gom nội dung theo nhóm, mỗi nhóm nằm trên một lớp riêng.
Người cắt giấy luôn biết tờ nào nằm dưới, tờ nào nằm trên. Trang web cũng cần trật tự đó: lớp nền, lớp nhóm, lớp thẻ, lớp nút. Mẫu tham chiếu nằm trong kho mẫu giao diện Mạnh An AI.
Mẫu bao bì giấy xếp lớp như thế nào?
Mẫu Giấy Việt Xanh dùng các mảng giấy cong màu kem chồng lên nhau ở đầu trang, bóng rất mỏng. Phía sau các phần bên dưới là lớp nền giấy cong nhạt, mép mềm.
Tiêu đề “Gấp ý tưởng thành giá trị.” đặt trên lớp giấy sáng, cạnh vài chiếc lá cắt giấy. Ảnh túi giấy, hộp kraft và sổ tay nằm bên phải. Dưới đó là năm sản phẩm bao bì, năm loại giấy, sáu bước sản xuất có ảnh tròn và chân trang xanh rêu.
Ba con số và ba lời khách trong mẫu là minh họa. Điều đáng học là mọi thẻ đều nằm trên cùng một kiểu lớp, cùng độ bóng.
Lớp dưới cùng: nền giấy chỉ làm việc gì?
Lớp nền chỉ tạo bề mặt và chia trang thành vùng lớn. Lớp này không chứa chữ dài, không có bóng.
Nền nên là hai hoặc ba sắc kem, xám ấm hay hồng nhạt gần nhau. Mép cong có thể dựng bằng SVG nhẹ thay cho ảnh. Khi đổi sang phần mới, chỉ cần đổi sắc nền hoặc hướng mép cong.
Hộp quà: ba lớp hồng, xanh, kem sau tiêu đề
Tiệm giả định Hộp Quà Giấy Gấp đặt “Mỗi lớp giấy một lời chúc” trên lớp giấy hồng. Mép dưới lớp hồng cong, lẫn vào lớp xanh và lớp kem. Bên phải là chồng hộp kraft, hồng, xanh rêu buộc ruy băng.
Năm thẻ dịp tặng Sinh nhật, Tết, Cưới, Cảm ơn, Doanh nghiệp nằm trên một lớp giấy nổi chung. Bốn bước đặt hộp là bốn nhãn giấy treo dây: Chọn hộp, Chọn giấy, Viết thiệp, Nhận quà. Sáu loại hộp như hộp nắp rời, hộp quai xách, hộp ngăn xếp thành một hàng gọn.
Lớp giữa: thiết kế web lớp giấy gom nhóm ra sao?
Mỗi nhóm nội dung, như sản phẩm hoặc quy trình, nằm trên một tờ giấy riêng. Khách nhìn mép giấy là biết nhóm bắt đầu và kết thúc ở đâu.
Một tờ nhóm chỉ nên chứa một loại nội dung. Đừng đặt sản phẩm, quy trình và lời mời liên hệ trên cùng một tờ. Tiêu đề nhóm nằm ở góc trên trái tờ giấy, có thể kèm một hình cắt giấy nhỏ.
| Lớp | Chứa gì | Bóng | Màu |
|---|---|---|---|
| 1. Nền | Bề mặt, chia vùng lớn | Không có | Kem, xám ấm, hồng nhạt |
| 2. Nhóm | Một nhóm nội dung và tiêu đề nhóm | Rất mỏng hoặc chỉ viền | Sáng hơn nền một bậc |
| 3. Thẻ | Ảnh, tên, một dòng mô tả | Mỏng, cùng một kiểu | Trắng ngà |
| 4. Nút | Hành động chính | Không cần, dùng màu đậm | Màu nhấn duy nhất |
Lớp thẻ: bóng đổ bao nhiêu là vừa?
Bóng chỉ cần đủ để mắt thấy thẻ nằm trên tờ nhóm. Một bóng mờ, lệch xuống vài điểm ảnh là đủ.
Mọi thẻ trên trang nên dùng chung một kiểu bóng, cùng hướng, cùng độ mờ. Tài liệu MDN về box-shadow mô tả các giá trị lệch, độ nhòe và màu bóng. Bóng dựng bằng CSS không cần tải thêm ảnh, nên giữ trang nhẹ.
Hội thảo: lịch trình nằm trên hai tờ sáng, chiều
Hội thảo giả định Lớp Ý Tưởng đặt dòng “Một ngày, ba lớp kiến thức” trên những tờ giấy xếp chéo, viền vàng mù tạt. Bên phải là ảnh hội trường có màn hình xanh than.
Ba thẻ chủ đề Thương hiệu, Bán hàng, Vận hành nằm trên giấy nổi, mỗi thẻ một biểu tượng. Lịch trình chia hai tờ “Buổi sáng” và “Buổi chiều”, mỗi tờ ba mốc giờ. Bốn diễn giả có tên giả định, ảnh và vai trò. Ba bước đăng ký là Điền thông tin, Xác nhận tham dự, Nhận thẻ tham dự.
Lớp trên cùng: nút có cần nổi không?
Nút không cần thêm một lớp giấy riêng. Màu nhấn đậm đã đủ làm nút nổi bật trên mọi lớp.
- Giữ một màu nhấn cho nút chính trên toàn trang.
- Không thêm bóng cho nút khi thẻ đã có bóng.
- Nút phụ dùng viền cùng màu nhấn, nền trong suốt.
- Trên điện thoại, nút rộng gần hết chiều ngang thẻ.
Đồ chơi gỗ: cảnh đồi cắt giấy mở đầu trang
Cửa hàng giả định Đồ Chơi Gỗ Mầm mở trang bằng cảnh đồi, cây, mặt trời cắt giấy xếp nhiều tầng. Dòng “Chơi để hiểu, xếp để nhớ” nằm trên một đám mây giấy màu kem.
Bốn nhóm tuổi 1–2, 3–4, 5–6 và trên 6 tuổi có nhãn màu riêng và ảnh đồ chơi. Năm kỹ năng Màu sắc, Hình khối, Đếm số, Chữ cái, Khéo tay nằm trên các tấm giấy hình mây. Sáu sản phẩm như Tranh ghép gỗ, Bảng số gỗ, Tháp xếp vòng xếp thành lưới hai hàng.
Khi nào lớp giấy thành hiệu ứng nặng?
Lớp giấy thành nặng khi có quá ba tầng chồng nhau hoặc mỗi tầng một kiểu bóng. Mắt khách khi đó phải đoán thứ tự thay vì đọc nội dung.
Hãy dừng ở ba tầng nhìn thấy: nền, nhóm, thẻ. Tránh hiệu ứng thị sai khi cuộn, vì nó làm trang nặng hơn và khó dùng trên điện thoại. Trên màn hình hẹp, có thể bỏ bóng của tờ nhóm, chỉ giữ bóng thẻ.
Khi nào không nên chọn thiết kế web lớp giấy?
Phong cách này kém phù hợp với trang cần cảm giác kỹ thuật, sắc lạnh hoặc có rất nhiều bảng số. Mép giấy mềm sẽ lạc tông với nội dung đó.
Nếu cần khối nổi rõ hơn, hãy xem cách làm khối nổi có chiều sâu. Khi muốn chia lớp bằng màu thay vì bóng, các khối màu phân lớp gọn hơn. Trang chỉ cần chuyển mục nhẹ nhàng có thể dùng dải màu chuyển mục.
Câu hỏi thường gặp về giao diện xếp lớp
Ngắn gọn: ba tầng là đủ, bóng mỏng và thống nhất, mỗi tờ giấy một nhóm nội dung.
Mép giấy cong nên làm bằng ảnh hay bằng mã?
Nên dựng bằng SVG hoặc CSS. Cách này nhẹ, sắc nét trên mọi màn hình và dễ đổi màu theo thương hiệu.
Có nên thêm vân giấy thật cho từng lớp?
Chỉ nên dùng một vân rất nhẹ cho lớp nền. Thêm vân cho mọi lớp làm trang rối và tăng dung lượng ảnh.
Lớp giấy có hợp với trang bán hàng nhiều sản phẩm không?
Có, nếu mỗi danh mục là một tờ nhóm riêng. Khi danh mục quá nhiều, hãy giữ thẻ phẳng và chỉ tạo lớp ở cấp nhóm.
Bắt đầu từ đâu?
Hãy liệt kê các nhóm nội dung trên trang chủ, mỗi nhóm là một tờ giấy. Chọn ba sắc nền và một kiểu bóng, rồi mới dựng thẻ.
Bạn có thể xem quy trình dựng giao diện của Mạnh An AI và báo giá ba gói thiết kế. Mạnh An AI phục vụ khách hàng trên toàn quốc; hãy gửi danh sách nhóm nội dung để được tư vấn bố cục lớp.
Thông tin đơn vị
Đơn vị: Công Ty TNHH Mạnh An Service
Dịch vụ: Mạnh An AI – Thiết kế website
Phạm vi phục vụ: Khách hàng trên toàn quốc
Địa chỉ văn phòng: Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
Điện thoại: 083.5431.678
Email: info@manhan.vn
