Thiết kế giao diện

Bạn có thể thiết kế nội dung cho Digital Signage bằng cách sử dụng các công cụ thiết kế đi kèm của phần mềm quản lý nội dung hoặc bằng cách sử dụng các ứng dụng khác như PowerPoint, Photoshop hay Adobe Flash. Bạn cũng có thể sử dụng các biểu mẫu đã được thiết kế sẵn (signage templates) để tiết kiệm thời gian và công sức.

Các mẫu thiết kế thường được phần mềm Digital Signage làm sẵn theo lĩnh vực, theo mục đích, theo nội dung cần hiển thị, ...

 

Thiết kế giao diện màn hình Digital Signage (viết tắt DS) gần giống với việc Bạn làm một slide trong MS Power Point, hay Bạn trình bày bố trí nội dung của một trang website.

Giao diện màn hình Digital Signage, tiếng Anh gọi là template hay layout, là cách thức sắp xếp các nội dung khác nhau trên màn hình để đem lại hiệu quả thị giác và thông tin cao nhất.

Màn hình được chia thành các vùng (tiếng Anh là area hay zone), mỗi vùng hiển thị một loại nội dung: dòng chữ (text), hình ảnh (image), phim (video clip, ảnh động GIF), hoặc là bảng dữ liệu (data table), biểu đồ hay đồ thị (chart, diagram). Vùng có thể là hình vuông, chữ nhật, hình tròn, elip, hay hình bất kỳ (nếu phần mềm hỗ trợ). Các vùng có thể chồng lấn lên nhau. Ví dụ vùng chứa hình nền thường nằm dưới cùng, chiếm diện tích toàn màn hình, trên đó có các vùng nhỏ hơn mang nội dung.

Giao diện màn hình có thể nằm ngang, nằm dọc hay theo hướng bất kỳ để tạo các hiệu ứng hình ảnh khác nhau. Kích thước điểm ảnh (pixel) của giao diện thường chọn đúng bằng độ phân giải màn hình. Ví dụ với màn hình HD 16:9 thì độ phân giải của giao diện nên chọn là WxH là 1920 x 1080 pixels, tương ứng của màn hình 4K sẽ là 3840 x 2160 pixels. 

Mỗi màn hình Digital Signage thường có giao diện hiển thị trong một khoảng thời gian rồi chuyển sang giao diện khác (có thể với nội dung khác). Do đó cần có nhiều giao diện khác nhau cho mỗi màn hình. Với một hệ thống DS có nhiều màn hình đặt ở nhiều vị trí khác nhau, có chức năng khác nhau (đối thượng người xem khác nhau) thì sẽ rất cần thiết kế nhiều giao diện. Ngược lại nếu Bạn chỉ có 1 -2 màn hình DS thì nhu cầu thiết kế giao diện sẽ ít hơn rất nhiều.

Thiết kế giao diện cho Digital Signage (viết tắt DS) là một quá trình lên ý tưởng sáng tạo và làm thử nghiệm, điều chỉnh để tạo ra những nội dung có hình ảnh hấp dẫn và chuyển tải được thông tin - thông điệp của Bạn đến người xem. Dưới đây là một số nguyên tắc thiết kế giao diện chính dành cho màn hình Digital Signage:

  • Đơn giản: Bạn nên giữ giao diện DS của bạn sạch sẽ, đơn giản, thu hút, phù hợp và ngắn gọn, với tối đa 10-20 từ trên mỗi khung hình (slide). Bạn có thể sử dụng chạy nhiều ảnh liên tiếp để truyền đạt nội dung mong muốn. Bạn cũng nên tránh sử dụng quá nhiều màu sắc, hình ảnh hoặc hiệu ứng không cần thiết.
  • Rõ ràng và dễ đọc: Bạn nên chọn phông chữ, kích thước chữ và màu chữ phù hợp với khoảng cách và góc nhìn của khán giả. Bạn cũng nên tạo ra sự tương phản cao giữa chữ và màu/hình nền để dễ nhìn hơn. Bạn cũng nên căn chỉnh văn bản theo chiều ngang hoặc chiều dọc để tăng tính thẩm mỹ. Và chú ý tạo các khoảng trắng đủ lớn để phân cách giữa các vùng nội dung.
  • Viết văn bản: Bạn nên viết văn bản ngắn gọn, rõ ràng và gây tác động mạnh. Bạn có thể  viết theo kiểu câu đối đáp, cảm thán hoặc câu hỏi để thu hút sự quan tâm của người xem. Bạn cũng nên kiểm tra lại chính tả và ngữ pháp của văn bản trước khi đưa lên màn hình DS.
  • Tập trung vào đối tượng người xem: Bạn nên xác định được đối tượng người xem, vị trí và hướng của màn hình, và thông điệp bạn muốn hiển thị. Bạn cũng nên thiết kế giao diện và nội dung theo thời gian hiện thời dự kiến của người xem, ví dụ như thời tiết trong ngày, thời gian hay các sự kiện đặc biệt khác.
  • Mục tiêu kinh doanh của bạn là gì? Bạn nên xác định rõ những gì bạn muốn đạt được với giao diện DS, ví dụ như tăng doanh số bán hàng, cải thiện thương hiệu, cập nhật thông tin, kết nối mạng xã hội hay tăng sự hài lòng của khách hàng.
  • Xác định thời lượng hiển thị: Màn hình DS thường chạy hàng giờ mỗi ngày. Do đó mỗi giao diện, mỗi nội dung cụ thể chỉ nên xuất hiện trong một khoảng thời gian nhất định thì được chuyển sang giao diện/nội dung khác, tránh để quá lâu quá gây nhàm chán.
  • Dung lượng hợp lý: Bạn cần phải lưu file thiết kế giao diện cùng các thành phần nội dung của nó (văn bản, hình ảnh, video, data,...) ở bộ nhớ media player trước khi phát lên màn hình. Và Bạn cũng cần truyền các chúng từ máy tính thiết kế (là máy tính của bạn, máy chủ cài phần mềm quản lý, máy chủ trên cloud,...) đến nhiều media player cùng lúc, nên tổng dung lượng các file cần truyền càng nhỏ thì truyền càng nhanh chóng và ít bị lỗi hơn.  Giới hạn số lượng hình ảnh và video (thường là một video cho mỗi giao diện), định dạng file, độ phân giải ảnh, số khung hình và thời gian trình chiếu video phù hợp, áp dụng các thuật toán nén file,... sẽ giúp bạn nhiều trong việc làm giảm dung lượng này.

Trên đây là một số nguyên tắc thiết kế giao diện DS để Bạn tham khảo. Bạn cũng có thể tìm kiếm các tài liệu hướng dẫn thiết kế tài liệu trình chiếu Power Point, thiết kế đồ họa poster, banner, website,... để học hỏi thêm. Chúc Bạn sớm thành công.

Tạo ra một giao diện màn hình cảm ứng Digital Signage (DS) hấp dẫn và sử dụng thân thiện (hay có tính tương tác cao, hay có UX/UI tốt) là một cách hiệu quả để thu hút và giữ chân người xem hay khách hàng, giúp Bạn tương tác rất có hiệu quả với người xem. Vì vậy đây là yêu cầu bắt buộc khi thiết kế giao diện dành cho màn hình cảm ứng, kiosk, tablet, ... Yêu cầu này cũng áp dụng được một phần cho việc thiết kế màn hình DS nói chung. Để làm được điều này, bạn cần chú ý đến một số yếu tố sau:

  • Nội dung giao diện: Bạn cần lên kế hoạch cho nội dung giao diện cảm ứng của Bạn một cách chi tiết và hợp lý. Bạn cần xác định các mục tiêu, đối tượng, thông điệp và hiệu ứng chuyển động mong muốn của giao diện. Bạn cũng cần phân loại nội dung giao diện thành các nhóm và tạo ra các đường dẫn cho người xem có thể truy cập nội dung mong muốn.
  • Thao tác giao diện: cảm ứng: Bạn cần thiết kế các thao tác giao diện cảm ứng một cách dễ dàng và nhanh chóng. Bạn nên áp dụng quy tắc ba lần chạm, tức là người xem chỉ cần chạm vào màn hình ba lần để đến được nội dung cần xem. Bạn cũng nên đặt các menu ở vị trí thuận tiện và rõ ràng cho người xem.
  • Thiết kế giao diện cảm ứng: Bạn cần thiết kế giao diện một cách bắt mắt và thân thiện. Bạn nên sử dụng các màu sắc, hình ảnh, video, âm thanh và hiệu ứng phù hợp với thương hiệu và thông điệp của bạn. Bạn cũng nên thiết kế các nút bấm rõ ràng, lớn và có hiệu ứng phản hồi ngay khi được chạm vào, ví dụ đổi màu hay đổi hình dạng, ...
  • Phân tích giao diện cảm ứng: Bạn cần phân tích hiệu quả của giao diện trên khách hàng. Bạn có thể sử dụng các công cụ khác nhau để thu thập và phân tích các dữ liệu về số lượng, thời gian, vị trí, hành vi và ý kiến của người xem. Bạn có thể sử dụng các dữ liệu này để đánh giá và điều chỉnh thiết kế của Bạn.
  • Thử A/B: Bạn nên có  1-2 thiết kế giao diện cảm ứng khác nhau, rồi đưa vào dùng thử trong một khoảng thời gian để đánh giá thiết kế nào mang lại hiệu qua cao hơn, từ đó chỉnh sửa để có một thiết kế tốt nhất được áp dụng rộng rãi.
  • Thử nghiệm trên thiết bị thật: Bạn thiết kế trên máy tính, khi chạy giả lập màn hình cảm ứng có thể chạy rất tốt, nhưng khi cài đặt lên thiết bị cảm ứng sẽ dùng thật sự thì có khi kết quả khác hẳn do độ nhạy, độ trễ. độ sáng, độ phân giải, bộ nhớ, CPU, đường truyền, ... của thiết bị, do vị trí đặt máy bị chói sáng, và do nhiều lý do không tên và có tên khác nữa ;-(

Bạn có thể tham khảo thêm các bài viết về thiết kế UX/UI của website hay ứng dụng di động có nhiều trên internet. Chúc Bạn thành công với thiết kế cho màn hình cảm ứng của mình.

Trong quá trình phát triển của lĩnh vực thiết kế đồ họa hay làm video cho các lĩnh vực khác nhau, các tổ chức thiết kế chuyên nghiệp cùng với các tổ chức công nghệ, tổ chức tiêu chuẩn hóa, .. dần dần xây dựng được một hệ thống các tiêu chuẩn hay quy định để các nhà thiết kế làm theo. Tuân thủ các quy định và tiêu chuẩn về thiết kế này là một việc quan trọng để đảm bảo tính chuyên nghiệp, hiệu quả, tiết kiệm thời gian và chi phí, đảm bảo bảo mật, và tính pháp lý (nếu cần) của một thiết kế giao diện. Bạn cần chú ý đến một số tiêu chí và quy định sau:

  • Tỉ lệ và độ phân giải của màn hình: Bạn nên thiết kế giao diện theo tỉ lệ 16:9 cho màn hình ngang và 9:16 cho màn hình dọc. Hoặc theo đúng tỷ lệ khác (4:3, 3:2, 20:9, ...) của màn hình Bạn sẽ dùng. Bạn cũng nên thiết kế giao diện với độ phân giải cao nhất có thể để đảm bảo chất lượng hình ảnh.
  • Kích thước và định dạng của hình ảnh: Bạn nên sử dụng các hình ảnh có kích thước nhỏ để tối ưu tốc độ tải và hiển thị. Bạn cũng nên sử dụng các định dạng hỗ trợ nén như JPG/JPEG, PNG, GIF, WebP, ... Ảnh nên có dung lượng tối đa 2 -3 MB, còn video cỡ 10 - 20 MB.
  • Bố cục và khoảng trống của giao diện: Bạn nên sử dụng các bố cục giao diện phù hợp với mục tiêu, thông điệp và thương hiệu của bạn. Bạn cũng nên sử dụng khoảng trống để tạo ra sự cân bằng, rõ ràng và thoáng đãng cho giao diện. Áp dụng tỷ lệ vàng (Golden Ratio) vào thiết kế của Bạn. Tránh lạm dụng quá nhiều ảnh nền, màu nền phức tạp rối mắt.
  • Phông chữ và kích thước chữ: Bạn nên sử dụng các phông chữ rõ ràng, đơn giản, phổ biến và dễ đọc. Bạn cũng nên sử dụng kích thước chữ phù hợp với khoảng cách đứng nhìn của người xem. Tranh sử dụng quá ba phông chữ cho một giao diện.
  • Màu sắc và độ tương phản: Bạn nên sử dụng các màu sắc có ý nghĩa, thu hút, có phối màu phù hợp và giống màu với thương hiệu của bạn. Bạn cũng nên sử dụng độ tương phản cao giữa chữ và nền để tăng khả năng nhận biết. 
  • Quy luật chữ "F": Nghiên cứu cho thấy khi chúng ta nhìn vào một bảng biển hay màn hình, đầu tiên chúng ta nhìn từ trên xuống, tiếp đến là nhìn vào đoạn giữa, và nhìn xuống từ đây. Do đó các yếu tố nội dung quan trọng cần được bố trí theo xu hướng nhìn này.
  • Quy luật 3x5: Một giao diện nên chỉ có nhiều nhất 3 hàng, mỗi hàng không quá 5 từ. Nó sẽ giúp người xem không bị rối mắt rồi bỏ qua không xem nữa. 
  • Âm thanh và hiệu ứng hình ảnh: Bạn nên sử dụng âm thanh và hiệu ứng khi cần thiết để thu hút, làm sống động và tăng tính tương tác cho giao diện. Bạn cũng nên kiểm tra âm lượng, chất lượng âm thanh và tuân thủ các quy định về tiếng ồn.
  • Một số ngành nghề đặc thù có các tiêu chuẩn và quy định riêng, ví dụ như ngành y tế, ngành sản xuất, giao thông vận tải, xây dựng, ... thì Bạn cần tuân thủ thêm các yêu cầu này, ví dụ yêu cầu về độ sáng, độ ồn, về điện, về an toàn cháy nổ, an toàn lao động,  ...

Có cầu thì có cung. Do Digital Signage (DS) là một lĩnh vực đang phát triển mạnh trên thế giới nên có nhiều công ty chuyên thiết kế và bán các mẫu thiết kế này cho chúng ta, những người sử dụng hệ thống DS. Hoặc họ tổ chức chợ bán giao diện, trong đó các nhà thiết kế đưa giao diện của mình lên bán cho người có nhu cầu, giống như một Lazada hay Tiki dành cho mặt hàng là các thiết kế mẫu.

Dưới đây là danh sách một số trang chueyen bán mẫu thiết kế cho Digital Signage:

  • Canva.com
  • Template.net
  • Elements.Envato.com
  • Postermywall.com

Ngoài ra Bạn cũng có thể tham khảo các trang cung cấp và bán mẫu thiết kế dành cho MS Power Point tại:

  • Phần mềm Power Point
  • Slidesgo.com
  • SlidesCarnival.
  • PowerSlides.com
  • PoweredTemplate.com

Playlist trong thiết kế nội dung Digital Signage (DS) là danh sách các nội dung được trình chiếu theo tuần tự thời gian, mỗi nội dung được hiển thị trong một khoảng thời gian nhất định (tính bằng giây hay phút). 

Ví dụ bạn có một vùng để hiển thị lần lượt 10 hình ảnh, mỗi ảnh trong 10 giây. Như vậy Bạn có một playlist kéo dài trong 100 giây, và gồm danh sách  10 tên file ảnh, có thứ tự xuất hiện từ 1 đến 10. Playlist có thể được cho chạy lặp lại một vài lần hay mãi mãi là tùy Bạn. Tương tự là playlist dành cho video, audio,... hay playlist trộn giữa ảnh và video, ... 

Bạn có thể sử dụng các công cụ thiết kế giao diện của phần mềm quản lý DS để tạo playlist. Bạn cũng có thể chỉnh sửa thứ tự, thời lượng và hiệu ứng của các nội dung trong playlist.

Vậy ta thấy Playlist gắn liền với một vùng hay với một giao diện DS cụ thể. Những phần mềm DS miễn phí hay giá rẻ có thể chỉ hỗ trợ lập lịch phát theo playlist cho toàn bộ vùng màn hình hay cho 2 -3 vùng tối đa, còn các phần mềm mạnh mẽ hơn thường hỗ trợ chạy nhiều playlist trong một giao diện màn hình, chạy playlist và giao diện theo từng thời điểm trong ngày, ngày trong tuần, tuần trong tháng,... Khi đó ta có chương trình hay lịch trình (schedule, timelines, plan,...) của DS. 

Như phần trả lời về playlist ở trên đã đề cập, lịch phát nội dung hay còn gọi là chương trình, lịch trình (schedule, timelines, plan,...) là một danh sách Bạn lập ra để quy định hệ thống Digital Signage phát nội dung gì vào lúc nào, ở tại màn hình nào.

Bạn sử dụng các công cụ lập lịch của phần mềm quản lý DS để lập các lịch phát này. Sau đó Bạn truyền file lịch phát dành riêng này cùng với các file nội dung đến đúng media player (màn hình) mà Bạn mong muốn nó thực hiện (hoạt động này còn gọi là đồng bộ trong DS). Media player cứ chiếu theo các mốc thời điểm trong ngày, lôi các file nội dung đã lưu ở bộ nhớ của nó lên để trình chiếu theo đúng thứ tự và thời lượng được quy định trong playlist của lịch phát.

Như vậy có thể thấy mỗi lịch phát có thể dùng cho một hay nhiều màn hình có cùng mục đích ứng dụng, hay cùng vị trí lắp đặt. Hệ thống càng lớn, phức tạp thì số lịch phát càng nhiều và việc lập lịch, chuyển lịch phát đến từng media player cần được lên kế hoạch cẩn thận để tránh sai sót hay nhầm lẫn.

Lịch phát có thể lập trước cả tuần, cả tháng hay làm cho nguyên một năm.  Tuy nhiên không nên làm lịch phát quá dài (trừ các trường hợp đặt biệt) vì có thể làm nội dung của Bạn trở lên kém linh hoạt và nhàm chán.

Lưu ý là có một số phần mềm DS cho phép chúng ta có thể lập lịch phát mặc định để dự phòng. Vì lý do nào đấy, ví dụ mất đường truyền, file bị lỗi, bộ nhớ bị đầy, ... media player (màn hình) sẽ tự động lấy lịch phát dự phòng (hoặc lịch phát cũ gần nhất) và các nội dung liên quan để trình chiếu, từ đó giảm thiểu tác động của việc không đồng bộ được lịch phát hay nội dung kèm theo.

Một số phần mềm DS cũng cho phép chèn tức thời các thông báo khẩn cấp hay thông điệp quan trọng vào giữa một lịch phát đang chạy trên màn hình. Sau khi thông điệp - thông báo kết thúc, màn hình sẽ tiếp tục chạy theo lịch phát hiện hành.

Một số phần mềm DS khác lại có tính năng đồng bộ được các file hình ảnh, video, data, ... lấy từ máy chủ trên các dịch vụ điện toán đám mây (cloud) như DropBox, OneDrive, Google Drive, AWS, ... Khi đó chúng ta có thể giữ nguyên lịch phát cho mỗi media player, chỉ thay đổi các file nội dung, giữ nguyên tên của chúng, và đưa vào các thư mục chọn sẵn từ trước trên cloud. Các media player được lập trình định kỳ (thường là vào các giờ ngừng phát trên màn hình như là vào  ban đêm) vào các thư mục nói trên để đồng bộ nội dung và phát theo chương trình gán cho nó vốn không thay đổi.

Nếu Bạn có chuyên môn về thiết kế hay đã có kinh nghiệm thiết kế Power Point, thì Bạn sẽ dễ dàng có được nhưng thiết kế tốt dành cho hệ thống Digital Signage. 

Tuy nhiên, các công cụ thiết kế của các phần mềm Digital Signage phổ biến đều rất dễ học, dễ làm quen và có giao diện trực quan, hỗ trợ kéo thả file. Bên cạnh đó, các nhà cung cấp phần mềm còn chú ý xây dựng tài liệu hướng dẫn sử dụng chi tiết và đầy đủ, kèm theo nhiều video hướng dẫn từng bước một. Do đó nếu Bạn đầu tư thời gian thì quá lắm là 1 tuần Bạn có thể tự thiết kế được giao diện DS. Về chất lượng thiết kế thì còn phụ thuộc vào mức độ tìm tòi học hỏi, độ kiên nhẫn hay... năng khiếu của Bạn ;-). Và chúng tôi luôn hỗ trợ Bạn trong quá trình thiết kế này nên Bạn an tâm nha.

Bản thân tác giả bài này cũng là dân thiết kế... amateur thứ thiệt ;-), 

Scroll to Top