Giới thiệu
Nếu bạn đi đến một trung tâm mua sắm, quán cà phê hoặc sân bay hiện đại, bạn sẽ thấy các bảng hiệu kỹ thuật số đã thay đổi. Không còn đồ họa đơn lẻ, không thay đổi. Thay vào đó, các màn hình được chia thành nhiều khu vực. Một bên phát video về sản phẩm, một bên hiển thị-giao dịch theo thời gian thực và bên thứ ba hiển thị phản hồi của khách hàng. Đây là điểm mạnh của bố cục màn hình chia đôi: chúng cho phép bạn làm được nhiều việc hơn với một biển hiệu kỹ thuật số, khiến mỗi inch không gian màn hình trở nên hữu ích hơn.
Bố cục màn hình chia-giải quyết được hai khó khăn đáng kể cho những người tạo hoặc quản lý bảng hiệu kỹ thuật số: nội dung đơn-chỉ có một nốt nhạc và lãng phí không gian màn hình. Điều này bao gồm các nhà tiếp thị cửa hàng đang tìm cách nâng cao doanh số bán hàng, chủ quán cà phê cập nhật thực đơn và đội ngũ CNTT thiết lập các quầy trưng bày của công ty. Nhưng với rất nhiều cách chia màn hình, thật khó để biết bố cục nào phù hợp với mục tiêu của bạn.
Chúng tôi đã tổng hợp 10 bố cục màn hình phân chia-có tác động cao,-có tác động cao, phổ biến nhất, cùng với đối tượng sử dụng, cách thiết kế chúng và các ví dụ thực tế-về cách chúng mang lại kết quả. Không cần bằng cấp thiết kế-chỉ cần những mẹo thiết thực để làm nổi bật nội dung của bạn.
1. 2:1 Phân chia cổ điển – Công cụ "Tập trung + thông tin"
Nó là gì
Chia màn hình thành hai phần: phần lớn giảm 2/3 và phần nhỏ giảm 1/3. Phần lớn hiển thị cho bạn nội dung chính của bạn, như câu chuyện thương hiệu hoặc video sản phẩm. Phần nhỏ cung cấp cho bạn thông tin nhanh chóng, hữu ích như giá cả, mã QR hoặc nhãn "có giới hạn thời gian".
Dành cho ai: Cửa hàng bán lẻ, cửa hàng điện tử hoặc bất kỳ doanh nghiệp nào muốn giới thiệu sản phẩm nổi bật và truyền đạt thông tin quan trọng mà không làm cản trở thông điệp chính.
Mẹo thiết kế
Sử dụng các màu giống nhau xuyên suốt: ví dụ: nếu phần chính của trang web của bạn có màu xanh nước biển (như cửa hàng quần áo), phần nhỏ có thể sử dụng màu nhấn màu trắng nhẹ nhàng để thu hút mắt. Không sử dụng nhiều hơn hai kiểu chữ cùng một lúc.
Ví dụ thực tế
Một cửa hàng điện thoại thông minh đã sử dụng bố cục này: phần 2/3 phát video về các tính năng camera của điện thoại mới của họ và phần 1/3 hiển thị "Giảm giá $100 + Tặng ốp lưng" cùng với mã QR có thể quét được để đặt hàng trước. Cửa hàng báo cáo số lượng đơn đặt hàng trước tăng 22% so với việc chỉ sử dụng một màn hình video.
Tại sao nó hoạt động
Nó cân bằng giữa "yếu tố gây ngạc nhiên" (video) với "sự khẩn cấp" (thỏa thuận) để khách hàng không chỉ xem{0}}mà họ hành động.
2. Chia ba cột-bằng nhau – Sức mạnh "Đa-thông tin"
Nó là gì
Chia màn hình thành ba cột dọc bằng nhau, mỗi cột có thông tin riêng được liên kết với các cột khác. Đối với một cửa hàng quần áo, hãy nghĩ đến "Hàng mới về", "Mặt hàng giảm giá" và "Bản đồ cửa hàng". Đối với quán cà phê, hãy nghĩ đến "Thực đơn bữa sáng", "Ưu đãi đặc biệt cho bữa trưa" và "Sự kiện hôm nay".
Nó dành cho ai
Các doanh nghiệp có nhiều thông điệp cần chia sẻ cùng một lúc-như trung tâm thương mại, sân bay hoặc nhà hàng đông đúc, nơi khách hàng cần truy cập nhanh vào thông tin đa dạng.
Mẹo thiết kế
Sử dụng các đường mảnh, màu xám nhạt làm dải phân cách giữa các cột để giữ cho màn hình trông gọn gàng và không bị lộn xộn. Để hỗ trợ người mua đọc tài liệu trong vòng hai giây hoặc ít hơn, hãy thêm một dấu hiệu nhỏ vào mỗi cột, chẳng hạn như áo sơ mi dành cho hàng mới đến hoặc thẻ giá dành cho sản phẩm đặc biệt.
Ví dụ trong đời thực
Mười bảng hiệu kỹ thuật số tại một khu ẩm thực đông đúc ở sân bay đã áp dụng cách sắp xếp này. Mỗi cột hiển thị một nhà hàng khác nhau (chẳng hạn như Burger King, Starbucks hoặc Subway), những món ngon nhất trong thực đơn của họ và thời gian mọi người phải chờ đợi. Hành khách cho biết họ tìm thấy nhà hàng họ mong muốn nhanh hơn gấp 3 lần so với khi biển hiệu hiển thị-quảng cáo một nhà hàng.
Tại sao nó hoạt động
Nó tôn trọng thời gian của khách hàng-họ không phải đợi nội dung được quay; tất cả thông tin đều có thể nhìn thấy trong nháy mắt.
3. Phân chia tiêu điểm hình chữ L – Bố cục "Hướng dẫn mắt"
Nó là gì
Tạo hình chữ L{0}}có hai phần: một bên là cột cao, hẹp và bên kia là một hàng rộng, ngắn. Hình chữ L-dẫn sự chú ý một cách tự nhiên từ phần dọc (như hình ảnh sản phẩm) sang phần ngang (như lời kêu gọi hành động, như "Mua ngay").
Dành cho ai: Các doanh nghiệp làm đẹp, cửa hàng trang sức hoặc bất kỳ doanh nghiệp nào khác muốn giới thiệu các tính năng của sản phẩm và thu hút mọi người hành động ngay lập tức.
Mẹo thiết kế
Đặt nội dung bắt mắt nhất của bạn-trong phần dọc (ví dụ: cận cảnh-màu son môi hoặc vòng cổ kim cương) và thông tin khẩn cấp nhất của bạn trong phần ngang (ví dụ: "Chỉ giảm giá 20% trong hôm nay"). Sử dụng nền tối cho phần dọc để làm nổi bật màu sắc.
Ví dụ thực tế
Một thương hiệu mỹ phẩm đã sử dụng cách bố trí này trong các cửa hàng của họ: phần dọc hiển thị một người mẫu đang sử dụng kem nền mới của họ và phần ngang hiển thị "Mẫu miễn phí khi mua bất kỳ" cùng với bản đồ tới quầy hàng mẫu. Yêu cầu mẫu tăng 35% sau khi chuyển sang bố cục này.
Tại sao nó hoạt động
Hình chữ L{0}} tuân theo "mẫu chữ Z" tự nhiên mà mắt chúng ta sử dụng để quét màn hình, nhờ đó khách hàng không bỏ lỡ thông điệp chính của bạn.
4. Phân chia tương tác hình ảnh-trong-hình ảnh (PiP) – Bố cục "Tương tác + giáo dục"
Nó là gì
Có một "cửa sổ" nhỏ có thể di chuyển được ("hình ảnh-trong-hình ảnh") phía trên nền toàn màn hình. Nền phát một video dài, giống như hướng dẫn và PiP hiển thị tài liệu tương tác, chẳng hạn như nút "Tạm dừng", chi tiết sản phẩm hoặc lời nhắc trò chuyện "Hỏi chuyên gia".
Dành cho ai: Các nhà bán lẻ đồ điện tử, cửa hàng đồ gia dụng hoặc các doanh nghiệp cần hướng dẫn khách hàng cách sử dụng một thiết bị mới hoặc cách lắp đặt TV.
Mẹo thiết kế
Giữ PiP ở mức nhỏ (15-20% màn hình) để nó không chặn video nền. Đặt nó trong suốt một phần-nếu cần và đặt nó ở một góc (trên cùng-bên phải hoặc dưới cùng bên trái) để nó không làm xao lãng nội dung chính.
Ví dụ thực tế
Một cửa hàng cải thiện nhà cửa đã sử dụng bố cục này cho phần máy khoan điện của họ: video nền cho thấy cách sử dụng máy khoan cho các nhiệm vụ khác nhau (khoan vào gỗ, kệ treo) và PiP cho phép khách hàng nhấn để xem "Khả năng tương thích của mũi khoan" hoặc "Thông tin bảo hành". Doanh số bán dụng cụ trong phần đó tăng 18%.
Tại sao nó hoạt động
Nó biến việc xem thụ động thành hoạt động học tập tích cực-khách hàng có được thông tin họ cần mà không cần dừng video.
5. Phân chia lưới động – Bố cục “linh hoạt” cho nhu cầu thay đổi
Nó là gì
Một lưới gồm 4-6 phần nhỏ bằng nhau có thể cập nhật độc lập. Không giống như bố cục cố định, bạn có thể hoán đổi nội dung trong một phần (ví dụ: thông báo "Giảm giá mới") mà không thay đổi phần còn lại (ví dụ: hình ảnh sản phẩm, giờ cửa hàng).
Nó dành cho ai
Tính năng này đặc biệt hữu ích cho các cửa hàng tạp hóa, cửa hàng tiện lợi hoặc các công ty thường xuyên cập nhật nội dung của họ, chẳng hạn như giao dịch hàng giờ và thay đổi hàng tồn kho.
Lời khuyên cho thiết kế
Để giữ mẫu cùng nhau, hãy sử dụng cùng một kiểu đường viền (chẳng hạn như các góc tròn) cho tất cả các phần lưới. Đặt đường viền màu rực rỡ (như màu đỏ hoặc màu cam) xung quanh phần chứa thông tin nhạy cảm về thời gian, chẳng hạn như "1 giờ qua: Sữa giảm giá 50%".
Ví dụ thực tế
Một cửa hàng tạp hóa đã sử dụng bố cục 4-lưới: một phần dành cho các giao dịch nông sản, một phần dành cho các món thịt đặc biệt, một phần dành cho giờ làm bánh và một phần dành cho "Súp hôm nay". Họ cập nhật các phần sản phẩm và thịt hàng giờ - khách hàng cho biết họ nhận thấy các ưu đãi mới thường xuyên hơn gấp 2 lần so với khi cửa hàng sử dụng các quảng cáo luân phiên đơn lẻ.
Tại sao nó hoạt động
Thật linh hoạt-bạn có thể thích ứng với những thay đổi-vào phút cuối (ví dụ: đột ngột có quá nhiều táo) mà không cần phải xây dựng lại toàn bộ bố cục.
6. Phần trên cùng{1}}Phần dưới cùng – Bố cục "Điều hướng + Nội dung"
Nó là gì
Chia màn hình theo chiều ngang: phần trên cùng ngắn (1/4 màn hình) để điều hướng hoặc cảnh báo và phần dưới cao (3/4) dành cho nội dung chính (video, hình ảnh hoặc công cụ tương tác).
Nó dành cho ai
Hành lang công ty, bệnh viện hoặc trường đại học-là những nơi mà khách truy cập cần cả thông tin định hướng và nội dung hấp dẫn.
Mẹo thiết kế
Giữ phần trên cùng đơn giản: sử dụng văn bản lớn, in đậm để điều hướng (ví dụ: "Tầng 3: Phòng Nhân sự" hoặc "Phòng khám A: Chăm sóc Nhi khoa") hoặc cảnh báo (ví dụ: "Diễn tập cứu hỏa lúc 2 giờ chiều"). Phần dưới cùng có thể năng động hơn-phát video công ty hoặc hiển thị thư mục kỹ thuật số.
Ví dụ thực tế
Một bệnh viện đã sử dụng cách bố trí này ở sảnh chính của họ: phần trên cùng hiển thị "Đỗ xe cho khách: Tầng B" và "Thời gian chờ: ER – 15 phút" và phần dưới cùng phát video về trung tâm ung thư mới của bệnh viện. Du khách cho biết họ cảm thấy "ít căng thẳng hơn" khi tìm đường và số câu hỏi tại quầy lễ tân giảm 40%.
Tại sao nó hoạt động
Nó tách biệt "thông tin chức năng" (điều hướng) khỏi "nội dung hấp dẫn" (video), vì vậy khách truy cập không phải lựa chọn giữa hai nội dung đó.
7. Dữ liệu-Chia tách trang tổng quan theo hướng – Bố cục "Số + Câu chuyện"
Nó là gì
Kết hợp biểu đồ/đồ thị (dữ liệu) với nội dung mô tả (câu chuyện) trong màn hình chia nhỏ. Ví dụ: phần bên trái hiển thị biểu đồ thanh "Tăng trưởng doanh số bán hàng hàng tháng" và phần bên phải giải thích ý nghĩa của dữ liệu (ví dụ: "Nhờ chương trình khách hàng thân thiết mới của chúng tôi, doanh số bán hàng đã tăng 12%!").
Nó dành cho ai
Văn phòng công ty, trụ sở bán lẻ hoặc bất kỳ doanh nghiệp nào muốn chia sẻ số liệu nội bộ với nhân viên hoặc các bên liên quan bên ngoài.
Mẹo thiết kế
Sử dụng biểu đồ đơn giản,{0}}dễ-đọc (tránh biểu đồ 3D-chúng khó diễn giải). Ghép nối dữ liệu với văn bản đàm thoại ngắn (ví dụ: "tăng trưởng 12%=tiền thưởng cho nhóm nhiều hơn!") để làm cho các con số trở nên dễ hiểu, không đáng sợ.
Ví dụ thực tế
Một chuỗi bán lẻ đã sử dụng cách bố trí này trong phòng nghỉ dành cho nhân viên của họ: phần bên trái hiển thị biểu đồ đường "Doanh số hàng tuần của Cửa hàng 5" và phần bên phải đánh dấu "Người biểu diễn hàng đầu: Sarah-25% doanh số bán hàng từ những người mới đến". Điểm động lực của nhân viên tăng 20% khi các nhóm cạnh tranh để xem cửa hàng của họdữ liệu trên màn hình.
Tại sao nó hoạt động
Chỉ riêng dữ liệu thôi đã nhàm chán-việc ghép nó với một câu chuyện sẽ khiến nó trở nên có ý nghĩa, vì vậy nhân viên hoặc các bên liên quan thực sự quan tâm đến các con số.
8. Ngày lễ-Phân chia không đều theo chủ đề – Bố cục "Lễ hội + tập trung"
Nó là gì
Thoát khỏi các đường thẳng-sử dụng các phần có hình dạng ngày lễ-(ví dụ: quả bí ngô cho Halloween, bông tuyết cho Giáng sinh) để chia đôi màn hình. Một phần là hình ngày lễ (hiển thị nội dung lễ hội như "Happy Halloween!"), Và phần còn lại là phần tiêu chuẩn dành cho các chương trình khuyến mãi.
Nó dành cho ai
Các cửa hàng bán lẻ, nhà hàng hoặc bất kỳ doanh nghiệp nào khác muốn khai thác tinh thần nghỉ lễ và tăng doanh số bán hàng đều có thể hưởng lợi từ chiến lược này.
Mẹo thiết kế
Đừng lạm dụng chủ đề ngày lễ-giữ phần không đều đặn (25% màn hình) để tạo cảm giác lễ hội chứ không hỗn loạn. Sử dụng màu sắc ngày lễ (ví dụ: cam và đen cho Halloween, đỏ và xanh lá cây cho Giáng sinh), nhưng hãy bám sát bảng màu thương hiệu của bạn cho phần chính.
Ví dụ thực tế
Một cửa hàng quần áo đã sử dụng bố cục này cho Giáng sinh: phần không đều là bông tuyết hiển thị "12 ngày ưu đãi" và phần chính phát video về bộ sưu tập ngày lễ của họ. Doanh số bán hàng trong kỳ nghỉ lễ của cửa hàng cao hơn 15% so với năm trước, trong đó khách hàng nhắc đến "màn hình bông tuyết vui nhộn" là lý do khiến họ dừng lại duyệt qua.
Tại sao nó hoạt động
Nó bổ sung thêm các hình dạng-ngày lễ cá tính khiến màn hình của bạn không giống một quảng cáo mà giống một phần của lễ kỷ niệm hơn.
9. Chia đôi màn hình liên kết – Bố cục "Mở rộng câu chuyện"
Nó là gì
Sử dụng hai bảng hiệu kỹ thuật số liền kề (cạnh nhau) làm một màn hình chia nhỏ lớn. Biển hiệu bên trái hiển thị một phần câu chuyện (ví dụ: khách hàng đang sử dụng sản phẩm của bạn) và biển báo bên phải hoàn thành câu chuyện đó (ví dụ: lợi ích của sản phẩm hoặc nút "Mua ngay").
Nó dành cho ai
Trung tâm thương mại, cửa hàng điện tử hoặc doanh nghiệp có không gian cho nhiều màn hình (ví dụ: một hàng 2-3 biển hiệu trên cửa sổ mặt tiền cửa hàng).
Mẹo thiết kế
Đảm bảo cả hai màn hình đều có cùng độ phân giải (4K hoạt động tốt nhất) và được lắp thẳng hàng hoàn hảo-ngay cả một khe hở nhỏ cũng sẽ phá vỡ ảo giác "màn hình đơn". Sử dụng công cụ CMS (như HDFocus) cho phép bạn đồng bộ hóa nội dung trên cả hai màn hình chỉ bằng một cú nhấp chuột.
Ví dụ thực tế
Một thương hiệu điện thoại thông minh đã sử dụng hai màn hình liên kết trong ki-ốt trung tâm thương mại của họ: màn hình bên trái hiển thị khách hàng đang chụp ảnh bằng điện thoại và màn hình bên phải phóng to ảnh, làm nổi bật chất lượng của camera. Sau đó, màn hình bên phải chuyển sang "Đặt hàng ngay" kèm theo mã QR. Đơn đặt hàng trước từ ki-ốt tăng 28%.
Tại sao nó hoạt động
Nó tạo ra cảm giác "điện ảnh"-hai màn hình giống như một màn hình lớn, khiến nội dung của bạn trở nên sống động hơn.
10. Phân chia thích ứng được hỗ trợ bởi AI{1}} – Bố cục "Cá nhân hóa" của tương lai
Nó là gì
Sử dụng AI để tự động điều chỉnh bố cục màn hình chia-dựa trên người đang xem. Ví dụ: nếu camera phát hiện cha mẹ có con, bố cục có thể tách ra để hiển thị "Sản phẩm dành cho trẻ em" ở một bên và "Giảm giá dành cho cha mẹ" ở bên kia. Nếu phát hiện một thanh thiếu niên, nó có thể chuyển sang "Mục thịnh hành" và "Bài đánh giá trên mạng xã hội".
Nó dành cho ai
Các cửa hàng bán lẻ, trung tâm mua sắm có lưu lượng truy cập cao hoặc bất kỳ doanh nghiệp nào muốn cung cấp nội dung siêu cá nhân hóa.
Mẹo thiết kế
Bắt đầu bằng cách tiếp cận đơn giản bằng cách tập trung vào 1-2 phân khúc đối tượng (ví dụ: "phụ huynh so với thanh thiếu niên") thay vì cố gắng nhắm mục tiêu đến tất cả mọi người. Sử dụng dữ liệu ẩn danh (không có thông tin cá nhân) để tránh những lo ngại về quyền riêng tư và đảm bảo rằng AI chuyển đổi bố cục một cách mượt mà (không bị lag hoặc trục trặc).
Ví dụ thực tế
Một cửa hàng đồ chơi đã thử nghiệm cách bố trí này bằng camera AI: khi phụ huynh đi ngang qua, màn hình sẽ tách ra để hiển thị "Đồ chơi giáo dục" (trái) và "Giảm giá 20% cho phụ huynh" (phải). Khi thanh thiếu niên đi ngang qua, nó sẽ tách ra để hiển thị "Phụ kiện chơi game" (trái) và "Bài đánh giá về người có ảnh hưởng của thanh thiếu niên" (phải). Cửa hàng báo cáo doanh số bán hàng tăng 30% cho các đối tượng mục tiêu.
Nó hoạt động như thế nào
Đó là vấn đề cá nhân vì khách hàng nhìn thấy tài liệu đáp ứng yêu cầu của họ, điều này khiến họ sẵn sàng tương tác hơn.
3 điều bạn không nên làm với bố cục màn hình chia đôi{1}}
- Quá nhiều phần: quá nhiều phần khiến vật liệu trở nên lộn xộn. Đối với hầu hết các tình huống, 2–3 phần là tốt nhất.
- Độ phân giải khác nhau: màn hình sẽ có vẻ mờ nếu một phần là 1080p và phần còn lại là 4K. Tất cả các phần phải có cùng độ phân giải.
- Không chú ý đến đồng bộ hóa thiết bị di động: Đảm bảo rằng thông tin được liên kết hoạt động trên thiết bị di động nếu màn hình chia đôi của bạn có mã QR. Không ai muốn quét mã và kết thúc trên một trang chỉ hoạt động trên máy tính để bàn.
Công cụ giúp tạo bố cục màn hình chia đôi{0}}một cách dễ dàng
Bạn không cần phần mềm thiết kế cầu kỳ-những công cụ này giúp việc chia đôi màn hình trở nên đơn giản:
- Canva: Sử dụng mẫu "Bảng hiệu kỹ thuật số" của họ để kéo-và-thả các phần được chia nhỏ.
- HDFocus CMS: Các công cụ chia đôi màn hình-được tích hợp sẵn với các bố cục được tạo sẵn-cho ngành bán lẻ, chăm sóc sức khỏe và sử dụng cho doanh nghiệp.
- ScreenCloud: Đồng bộ hóa nội dung màn hình chia-trên nhiều thiết bị và lên lịch cập nhật.
Phần kết luận
Vấn đề không chỉ là "điều chỉnh nhiều nội dung hơn" khi nói đến bố cục màn hình chia đôi; đó còn là việc điều chỉnh nội dung phù hợp cho khán giả và mục tiêu của bạn. Thiết kế màn hình chia-tốt nhất giúp thông điệp của bạn rõ ràng hơn, hấp dẫn hơn và có nhiều khả năng khuyến khích người tiêu dùng làm điều gì đó hơn. Điều này đúng cho dù bạn đang sử dụng tỷ lệ phân chia 2:1 thông thường để giới thiệu sản phẩm hay bố cục được hỗ trợ bởi AI-để làm cho thông tin mang tính cá nhân hơn.
Chọn một hoặc hai bố cục từ danh sách này, thử nghiệm chúng với khán giả của bạn và thực hiện bất kỳ sửa đổi nào cần thực hiện. Với một chút nỗ lực, bạn có thể biến bảng hiệu kỹ thuật số trở thành một phần quan trọng trong thành công của doanh nghiệp thay vì chỉ là "tiếng ồn xung quanh".
