NCKH: Nghiên cứu và ứng dụng Keyframe để nâng cao trải nghiệm người dùng

NCKH keyframe là gì? Tìm hiểu tất tần tật về NCKH keyframe, từ định nghĩa, vai trò đến cách tạo keyframe hiệu quả cho nghiên cứu khoa học.

• Tác giả: Nguyễn Anh Quân
• Người hướng dẫn: Gv. Vũ Thị Tú Anh
• Trường học: Học Viện Công Nghệ Bưu Chính Viễn Thông
• Chuyên ngành: Đa Phương Tiện
• Đề tài: Nghiên Cứu Keyframe Ứng Dụng Keyframe Trong Thiết Kế Giao Diện Người Dùng Trên Website
• Loại tài liệu: Báo cáo đề tài nghiên cứu khoa học
• Năm xuất bản: 2022
• Địa điểm: Hà Nội

Tóm tắt

I. NCKH Keyframe Tổng quan vai trò trong thiết kế giao diện

Nghiên cứu khoa học (NCKH) về keyframe là một lĩnh vực quan trọng, tập trung vào việc cải thiện trải nghiệm người dùng (UX) thông qua hoạt ảnh giao diện (UI Animation). Trong bối cảnh công nghệ thông tin phát triển nhanh chóng, một phần mềm tốt không chỉ cần đáp ứng về mặt chức năng mà còn phải mang lại sự tương tác trực quan và hiệu quả. Báo cáo NCKH về "Nghiên cứu keyframe và ứng dụng trong thiết kế giao diện người dùng trên website" của Học viện Công nghệ Bưu chính Viễn thông đã nhấn mạnh tầm quan trọng của yếu tố con người trong phát triển sản phẩm số. Giao diện người dùng (UI), theo định nghĩa của Michat Malewicz & Diana Malewicz, là "điểm liên kết giữa người dùng và chức năng của sản phẩm", bao gồm văn bản, đồ họa và các yếu tố tương tác. Một giao diện người dùng hiệu quả phải đảm bảo kiến trúc thông tin hợp lý, thiết kế tương tác chủ động và thiết kế trực quan hấp dẫn. Trong đó, việc ứng dụng keyframe để tạo ra các hoạt ảnh trở thành công cụ đắc lực. Hoạt ảnh không chỉ làm đẹp giao diện mà còn có chức năng dẫn dắt, cung cấp phản hồi và giảm tải nhận thức cho người dùng. Nó biến một giao diện tĩnh thành một trải nghiệm sống động, mô phỏng tương tác vật lý ngoài đời thực. Nghiên cứu này tập trung vào việc khai thác sức mạnh của keyframe trong CSS Animation và CSS Transition, hai công nghệ nền tảng cho phép tạo ra các chuyển động mượt mà và hiệu suất cao ngay trên trình duyệt mà không cần đến các thư viện phức tạp như jQuery trước đây.

1.1. Khái niệm và tầm quan trọng của giao diện người dùng UI

Giao diện người dùng (User Interface - UI) là cầu nối trực tiếp giữa con người và các thiết bị số. Nó là tập hợp các yếu tố thị giác, xúc giác và thính giác mà qua đó người dùng tương tác với một ứng dụng hoặc website. Một giao diện người dùng được thiết kế tốt sẽ giúp trải nghiệm của người dùng trở nên dễ dàng, trực quan và hiệu quả. Theo tài liệu nghiên cứu, mục tiêu cuối cùng của thiết kế giao diện là hướng đến yếu tố con người và nâng cao trải nghiệm của họ. Ba yếu tố cốt lõi của một UI tuyệt vời bao gồm: Kiến trúc thông tin (Information Architecture - IA) giúp tổ chức nội dung một cách logic; Thiết kế tương tác (Interaction Design - ID) biến người dùng từ bị động thành chủ động tham gia; và Thiết kế trực quan (Visual Design) sử dụng màu sắc, phông chữ, hình ảnh để thu hút và tạo luồng chức năng hợp lý. Tầm quan trọng của UI ngày càng được khẳng định khi các doanh nghiệp phụ thuộc nhiều vào ứng dụng web và di động để tiếp cận khách hàng.

1.2. Vai trò của hoạt ảnh UI Animation trong trải nghiệm người dùng

Hoạt ảnh trong giao diện người dùng (UI Animation) là quá trình thêm chuyển động vào các thành phần giao diện để nâng cao khả năng tương tác. Nó không chỉ là yếu tố trang trí. UI Animation đóng vai trò như những biển chỉ dẫn tinh tế, giúp người dùng định hướng, nhận biết sự thay đổi và hiểu mối quan hệ giữa các yếu tố. Một ví dụ điển hình là hoạt ảnh tải (loading animation). Nghiên cứu cho thấy hơn 40% người dùng rời đi nếu một trang web tải quá 4 giây. Hoạt ảnh tải như thanh tiến trình giúp thông báo cho người dùng rằng hệ thống đang hoạt động, giảm bớt sự bực bội khi chờ đợi. Như trích dẫn từ Framework Zurb: “Chúng ta không còn chỉ thiết kế màn hình tĩnh nữa. Chúng tôi đang thiết kế để người dùng cảm nhận sống động khi dùng ứng dụng.” Do đó, việc nghiên cứu và ứng dụng keyframe để tạo hoạt ảnh là một phương pháp hiệu quả để tăng cường sự gắn kết và cải thiện đáng kể trải nghiệm người dùng.

II. Thách thức trong NCKH và tạo hoạt ảnh trên website hiện đại

Việc tạo hoạt ảnh trên website không phải là một kỹ thuật mới. Tuy nhiên, các phương pháp truyền thống tồn tại nhiều thách thức, thúc đẩy sự cần thiết của các nghiên cứu khoa học như NCKH keyframe. Trước đây, các nhà phát triển thường phụ thuộc vào các thư viện JavaScript, đặc biệt là jQuery, để thao tác DOM và tạo hiệu ứng. jQuery cung cấp các hàm như hide(), show(), slideDown() giúp tạo ra các chuyển động cơ bản. Mặc dù hữu ích ở thời điểm ra mắt, phương pháp này bộc lộ nhiều nhược điểm. Thứ nhất, nó yêu cầu tải một thư viện bên ngoài, làm tăng dung lượng trang web và có thể ảnh hưởng tiêu cực đến tốc độ tải trang – một yếu tố quan trọng trong SEO và trải nghiệm người dùng. Thứ hai, các hoạt ảnh dựa trên JavaScript có thể không mượt mà bằng các giải pháp được xử lý bởi GPU của trình duyệt. Việc thực hiện các hoạt ảnh phức tạp đòi hỏi mã lệnh cồng kềnh, khó bảo trì và tối ưu. Đây chính là bối cảnh mà NCKH keyframe trở nên cần thiết. Nghiên cứu này hướng đến việc tìm kiếm một giải pháp hiệu quả hơn, tận dụng sức mạnh của CSS thuần túy. Mục tiêu là tạo ra các hoạt ảnh hiệu suất cao, dễ viết, dễ bảo trì và được hỗ trợ nguyên bản bởi các trình duyệt hiện đại, từ đó giải quyết các thách thức về hiệu năng và sự phức tạp của các công cụ cũ.

2.1. Hạn chế của các phương pháp hoạt ảnh truyền thống jQuery

Trong tài liệu nghiên cứu, jQuery được đề cập như một công cụ phổ biến trong quá khứ để tạo hoạt ảnh. Nó cho phép lập trình viên dễ dàng tác động đến các phần tử trên trang web. Tuy nhiên, sự phụ thuộc vào jQuery và các thư viện JavaScript khác mang lại những hạn chế đáng kể. Vấn đề lớn nhất là hiệu suất. Việc thao tác DOM bằng JavaScript thường tiêu tốn tài nguyên CPU, có thể gây ra hiện tượng giật, lag, đặc biệt trên các thiết bị di động có cấu hình thấp. Thêm vào đó, việc phải tải toàn bộ thư viện chỉ để sử dụng vài hiệu ứng đơn giản là một sự lãng phí tài nguyên. Điều này đi ngược lại với xu hướng tối ưu hóa tốc độ tải trang hiện nay. Hơn nữa, cú pháp có thể trở nên phức tạp và khó quản lý khi quy mô dự án lớn dần, làm chậm quá trình phát triển và bảo trì.

2.2. Nhu cầu về một giải pháp tối ưu và hiệu suất cao hơn

Từ những hạn chế của phương pháp cũ, một nhu cầu cấp thiết đã nảy sinh: cần một giải pháp tạo hoạt ảnh được tích hợp sẵn trong trình duyệt, nhẹ, hiệu suất cao và có cú pháp đơn giản. CSS Animation và CSS Transition ra đời chính để đáp ứng nhu cầu này. Chúng cho phép trình duyệt tối ưu hóa quá trình render chuyển động, thường là bằng cách tận dụng tăng tốc phần cứng (GPU), mang lại kết quả mượt mà hơn nhiều so với các hoạt ảnh điều khiển bằng JavaScript. Việc nghiên cứu khoa học keyframe trong CSS trở nên quan trọng để các nhà phát triển có thể khai thác tối đa tiềm năng của công nghệ này, tạo ra những giao diện người dùng không chỉ đẹp mắt mà còn đáp ứng nhanh và thân thiện với mọi thiết bị.

III. Phương pháp NCKH Phân tích sâu về keyframes và CSS Animation

Trọng tâm của báo cáo NCKH keyframe là việc phân tích sâu về cơ chế hoạt động của CSS Animation. Đây là một module của CSS cho phép tạo ra các chuyển động phức tạp cho các phần tử HTML. Để tạo một animation, yếu tố cốt lõi không thể thiếu chính là quy tắc @keyframes. Quy tắc này cho phép định nghĩa các trạng thái của một phần tử tại các thời điểm khác nhau trong dòng thời gian của hoạt ảnh. Bằng cách chỉ định các thuộc tính CSS ở các mốc phần trăm (từ 0% đến 100%) hoặc sử dụng từ khóa from (tương đương 0%) và to (tương đương 100%), nhà phát triển có thể kiểm soát chính xác quá trình chuyển đổi của phần tử. Ví dụ, một keyframe có thể định nghĩa rằng tại 0%, phần tử có màu đỏ và ở vị trí bên trái, và tại 100%, nó chuyển sang màu xanh và ở vị trí bên phải. Trình duyệt sẽ tự động nội suy các trạng thái trung gian để tạo ra một chuyển động mượt mà. Bên cạnh @keyframes, nghiên cứu cũng đi sâu vào các thuộc tính đi kèm để kiểm soát animation như animation-name (liên kết đến một @keyframes cụ thể), animation-duration (thời gian hoàn thành một chu kỳ), animation-iteration-count (số lần lặp lại) và animation-timing-function (đường cong gia tốc của chuyển động). Việc nắm vững các thuộc tính này là chìa khóa để tạo ra những hoạt ảnh có hồn và phục vụ đúng mục đích trong thiết kế giao diện người dùng.

3.1. Cấu trúc và cú pháp của quy tắc keyframes trong CSS

Quy tắc @keyframes là nền tảng của CSS Animation. Cú pháp của nó bao gồm từ khóa @keyframes theo sau là một tên định danh cho animation. Bên trong khối lệnh là một chuỗi các bộ chọn keyframe (keyframe selectors), có thể là giá trị phần trăm từ 0% đến 100%, hoặc các từ khóa from và to. Mỗi bộ chọn này xác định một điểm trong dòng thời gian của hoạt ảnh. Tại mỗi điểm, một khối các thuộc tính CSS được định nghĩa để xác định trạng thái của phần tử tại thời điểm đó. Ví dụ: @keyframes slidein { from { transform: translateX(-100%); } to { transform: translateX(0); } }. Quy tắc này định nghĩa một animation tên là slidein di chuyển một phần tử từ ngoài màn hình bên trái vào vị trí ban đầu. Sự linh hoạt của @keyframes cho phép tạo ra các chuỗi chuyển động phức tạp và đa dạng.

3.2. Các thuộc tính chính điều khiển CSS Animation chi tiết

Để áp dụng một @keyframes, cần sử dụng thuộc tính animation hoặc các thuộc tính con của nó. Tài liệu NCKH đã liệt kê và giải thích chi tiết các thuộc tính quan trọng: animation-name để gọi tên keyframe đã định nghĩa; animation-duration để xác định thời lượng của một chu kỳ animation; animation-delay để tạo độ trễ trước khi animation bắt đầu; animation-iteration-count để thiết lập số lần lặp (hoặc infinite để lặp vô hạn); animation-direction để kiểm soát hướng chạy (normal, reverse, alternate); animation-timing-function để điều chỉnh tốc độ chuyển động (linear, ease-in, ease-out); animation-fill-mode để xác định trạng thái của phần tử trước và sau khi animation kết thúc; và animation-play-state để tạm dừng hoặc tiếp tục animation. Việc kết hợp các thuộc tính này mang lại khả năng kiểm soát toàn diện cho nhà phát triển.

IV. Hướng dẫn ứng dụng CSS Transition trong NCKH giao diện web

Bên cạnh CSS Animation, báo cáo NCKH cũng đề cập đến một công cụ mạnh mẽ khác là CSS Transition. Transition cung cấp một cách đơn giản hơn để tạo hoạt ảnh khi một thuộc tính CSS của phần tử thay đổi giá trị. Khác với Animation cần định nghĩa các keyframe tường minh, Transition hoạt động dựa trên sự thay đổi trạng thái, thường được kích hoạt bởi các pseudo-class như :hover, :focus hoặc thông qua JavaScript. Về cơ bản, Transition cho phép trình duyệt tạo ra một hiệu ứng chuyển đổi mượt mà từ giá trị cũ sang giá trị mới của một thuộc tính trong một khoảng thời gian nhất định. Ví dụ, khi người dùng di chuột qua một nút bấm, thuộc tính background-color của nó thay đổi. Nếu không có Transition, sự thay đổi này diễn ra ngay lập tức. Nhưng với CSS Transition, màu sắc sẽ chuyển đổi dần dần, tạo ra một hiệu ứng tinh tế và dễ chịu hơn cho mắt. Các thuộc tính chính của Transition bao gồm: transition-property (chỉ định thuộc tính nào sẽ được áp dụng hiệu ứng), transition-duration (thời gian chuyển đổi), transition-timing-function (đường cong tốc độ), và transition-delay (độ trễ). CSS Transition đặc biệt hữu ích cho các tương tác nhỏ, phản hồi tức thời trong giao diện người dùng, làm cho website trở nên sinh động và chuyên nghiệp hơn.

4.1. Nguyên lý hoạt động và các thuộc tính cơ bản của CSS Transition

CSS Transition hoạt động bằng cách theo dõi sự thay đổi giá trị của các thuộc tính CSS được chỉ định. Khi một thay đổi xảy ra (ví dụ, từ width: 100px sang width: 200px), thay vì áp dụng giá trị mới ngay lập tức, transition sẽ tạo ra một loạt các giá trị trung gian trong khoảng thời gian được xác định bởi transition-duration. Bốn thuộc tính cốt lõi điều khiển quá trình này là: transition-property (tên của thuộc tính CSS cần tạo hiệu ứng, ví dụ width, color, hoặc all), transition-duration (thời gian hiệu ứng, tính bằng giây hoặc mili giây), transition-timing-function (cách tốc độ thay đổi, ví dụ ease-in), và transition-delay (thời gian chờ trước khi hiệu ứng bắt đầu). Việc sử dụng cú pháp viết tắt transition cho phép khai báo tất cả các giá trị này trên một dòng, giúp mã nguồn gọn gàng hơn.

4.2. So sánh giữa CSS Animation và CSS Transition trong thực tế

Mặc dù cả hai đều dùng để tạo chuyển động, CSS Animation và CSS Transition có những điểm khác biệt và trường hợp sử dụng riêng. Transition đơn giản hơn, được thiết kế cho các thay đổi trạng thái từ A đến B và thường cần một tác nhân kích hoạt (như :hover). Nó lý tưởng cho các hiệu ứng tương tác nhỏ như nút bấm, menu, hay các thẻ thông tin. Ngược lại, CSS Animation mạnh mẽ và phức tạp hơn. Với @keyframes, nó có thể tạo ra các chuỗi chuyển động qua nhiều giai đoạn (A -> B -> C -> ...), lặp lại vô hạn mà không cần tác nhân kích hoạt. Do đó, Animation phù hợp cho các hoạt ảnh phức tạp như biểu ngữ chuyển động, hiệu ứng tải trang, hoặc các nhân vật hoạt hình. Một NCKH keyframe hiệu quả cần chỉ ra khi nào nên sử dụng công cụ nào để đạt được kết quả tối ưu trong thiết kế website.

V. Kết quả NCKH Ứng dụng keyframe vào website thực tiễn

Phần quan trọng nhất của một báo cáo NCKH là khả năng ứng dụng lý thuyết vào thực tiễn. Nghiên cứu này đã minh họa rõ ràng điều đó qua việc xây dựng trang web giới thiệu nhân sự và môn học cho khoa Đa phương tiện. Việc ứng dụng keyframe không còn là những dòng mã khô khan mà đã biến thành các trải nghiệm tương tác sống động trên sản phẩm thật. Các nhà nghiên cứu đã áp dụng cả CSS Animation và CSS Transition để giải quyết các bài toán thiết kế cụ thể. Ví dụ, phần banner trang chủ sử dụng @keyframes để tạo một slideshow ảnh tự động chạy, lặp lại liên tục và có hiệu ứng thu phóng nhẹ nhàng, thu hút sự chú ý của người dùng ngay từ cái nhìn đầu tiên. Dòng chữ "Multimedia" được tạo hiệu ứng đặc biệt bằng cách sử dụng background-clip và một animation thay đổi background-position, tạo cảm giác các họa tiết màu sắc đang chảy bên trong con chữ. Các nút bấm, thanh tìm kiếm và thẻ thông tin nhân sự đều được trang bị các hiệu ứng tương tác tinh tế, phản hồi lại hành động của người dùng như di chuột hoặc cuộn trang. Những ứng dụng này cho thấy việc nghiên cứu khoa học keyframe đã mang lại kết quả cụ thể, giúp nâng cao tính thẩm mỹ và khả năng sử dụng của một thiết kế website thực tế.

5.1. Triển khai hoạt ảnh cho banner và các yếu tố chính

Trong sản phẩm thực tế, phần banner được áp dụng hai animation riêng biệt từ @keyframes. Một animation kiểm soát sự xuất hiện và biến mất của các bức ảnh theo chu kỳ 12 giây, tạo hiệu ứng trình chiếu. Animation thứ hai có chức năng thu nhỏ bức ảnh từ 120% về 100% kích thước màn hình trong 3 giây, tạo ra một chuyển động zoom-out tinh tế. Các thuộc tính như animation-timing-function: linear và animation-iteration-count: infinite được sử dụng để đảm bảo chuyển động đều và lặp lại vô hạn. Đây là một ví dụ điển hình về việc ứng dụng keyframe để tạo ra một yếu tố thị giác năng động và thu hút trên trang.

5.2. Tạo tương tác cho các nút bấm và thanh tìm kiếm

Để tăng tính tương tác, các phần tử như nút chọn chuyên ngành và thanh tìm kiếm đã được thêm hoạt ảnh. Khi người dùng cuộn trang đến vị trí nút bấm, một animation được kích hoạt để thu nhỏ nút từ tỷ lệ 1.5 về kích thước ban đầu. Tương tự, thanh tìm kiếm ban đầu có độ rộng bằng 0, khi người dùng cuộn đến, một animation sẽ tăng dần chiều rộng của nó, kèm theo hiệu ứng gõ chữ cho văn bản placeholder. Các kỹ thuật này không chỉ làm cho giao diện người dùng trở nên thú vị hơn mà còn hướng dẫn người dùng một cách trực quan về các chức năng có sẵn trên trang.

5.3. Hiệu ứng thẻ thông tin nhân sự và bảng chi tiết

Phần hiển thị thông tin giảng viên là một ví dụ xuất sắc về việc ứng dụng keyframe và transition. Mỗi thẻ (card) giảng viên sử dụng CSS Transition để tạo hiệu ứng khi người dùng di chuột vào: ảnh đại diện hình tròn sẽ phóng to và chuyển thành hình vuông, phủ kín toàn bộ thẻ. Khi người dùng nhấp vào thẻ, một animation dựa trên @keyframes được kích hoạt để hiển thị bảng thông tin chi tiết. Bảng này xuất hiện với hiệu ứng tăng dần chiều cao và các thông tin bên trong cũng lần lượt hiện ra với độ trễ khác nhau. Sự kết hợp giữa các hiệu ứng này tạo ra một luồng tương tác mượt mà, chuyên nghiệp và cung cấp thông tin một cách hiệu quả.

VI. Kết luận NCKH keyframe và định hướng phát triển tương lai

Báo cáo NCKH keyframe đã hoàn thành xuất sắc mục tiêu đề ra: nghiên cứu sâu về lý thuyết và ứng dụng thành công keyframe vào thiết kế giao diện người dùng trên website. Kết quả không chỉ dừng lại ở hai trang web demo mà còn là những kiến thức và kỹ năng quý báu được tích lũy. Nghiên cứu đã hệ thống hóa một cách chi tiết các khái niệm, thuộc tính và cách thức hoạt động của CSS Animation và CSS Transition. Qua đó, khẳng định đây là những công cụ hiện đại, hiệu quả để thay thế các phương pháp cũ, giúp tạo ra các hoạt ảnh mượt mà, hiệu suất cao và dễ bảo trì. Sản phẩm thực tế đã chứng minh được tính ứng dụng cao của lý thuyết, từ việc tạo các hiệu ứng thị giác phức tạp cho banner đến các tương tác vi mô trên từng thành phần giao diện. Hướng phát triển trong tương lai có thể mở rộng nghiên cứu sang các lĩnh vực mới như WebGL, SVG animation, hoặc kết hợp keyframe với các thư viện JavaScript hiện đại như GreenSock (GSAP) để tạo ra các hoạt ảnh phức tạp hơn nữa. Đồng thời, việc nghiên cứu tối ưu hóa hiệu năng của animation trên các thiết bị khác nhau cũng là một định hướng quan trọng, đảm bảo trải nghiệm người dùng luôn tốt nhất trên mọi nền tảng.

6.1. Tổng kết những kết quả chính đạt được từ nghiên cứu

Nghiên cứu đã gặt hái được nhiều thành quả đáng kể. Về sản phẩm, đã hoàn thiện hai trang web chức năng giới thiệu nhân sự và môn học của khoa Đa phương tiện với các hoạt ảnh phong phú. Về kiến thức, nhóm nghiên cứu đã lĩnh hội và làm chủ các kỹ thuật liên quan đến keyframe, CSS Animation, và CSS Transition. Quan trọng hơn, nghiên cứu đã nâng cao được kỹ năng làm việc nhóm, tư duy tìm kiếm thông tin và giải quyết vấn đề. Báo cáo này không chỉ là một tài liệu học thuật mà còn là một minh chứng cho năng lực ứng dụng kiến thức vào thực tiễn, góp phần nhỏ vào việc cải thiện chất lượng thiết kế website trong cộng đồng.

6.2. Gợi ý các hướng phát triển và nghiên cứu tiếp theo

Tương lai của hoạt ảnh web là vô cùng rộng mở. Dựa trên nền tảng của NCKH keyframe này, các hướng nghiên cứu tiếp theo có thể tập trung vào các công nghệ tiên tiến hơn. Ví dụ, nghiên cứu về thư viện Animation API của JavaScript để kiểm soát animation một cách linh hoạt hơn, hoặc tìm hiểu về Lottie để tích hợp các animation phức tạp từ Adobe After Effects vào web. Một hướng khác là nghiên cứu về "performance animation", tập trung vào việc chỉ sử dụng các thuộc tính CSS có thể được tăng tốc bởi GPU (như transform và opacity) để đảm bảo hoạt ảnh luôn đạt 60fps, ngay cả trên các thiết bị yếu. Việc tiếp tục khám phá và ứng dụng các kỹ thuật mới sẽ giúp nâng cao hơn nữa chất lượng trải nghiệm người dùng trên môi trường số.

Trích đoạn nội dung tài liệu

HOC VIEN CONG NGHE BUU CHINH VIEN THONG KHOA DA PHUONG TIEN C1 ma. BAO CAO ĐÈ TÀI NGHIÊN CỨU KHOA HỌ D tai: NGHIEN CUU KEYFRAME UNG DUNG KEYFRAME TRONG THIET KE 6&0 DIEN NGUOI DUNG TREN WEBSITE Giảng viên hướng dẫn : Gv. Vũ Thị Tú Anh Sinh viên thực hiện : Nguyễn Anh Quân - B20DCPT160 Nguyễn Hoang Duong — B20DCPT048 Hoàng Bá Thanh — B20DCPT192 Hà Nội. 2022 cả LOI NOI DAU Chúng ta đang sống trong một kỷ nguyên mà mọợi thành tựu khoa học và công nghệ đ`ầi xuất hiện một cách hết sức mau lẹ và cũng được đổi mới một cách cực kỳ nhanh chóng, đặc biệt trong lĩnh vực v êCông nghệ thông tin. Xây dựng, thiết kế phần mầm là công cụ hỗ trợ mạnh trong chiến lược phát triển trong lĩnh vực này. Một phần m`ân tốt đáp ứng được yêu câi của người sử dụng g ôn các chức năng: tính chính xác, tính m`ần dẻo, tình an toàn, khả năng sử dụng,. Một trong các chức năng rất quan trong nhằm đem lại cho người sử dụng đạt được hiểu quả cao trong công việc, đó là thiết kế giao diện người dùng, và mục tiêu hướng đến cuối cùng đó là yếu tố con người và tăng trải nghiệm sử dụng của đối tượng này. Một trong những phương pháp hiểu quả để nâng cao trải nghiệm sử dụng đó chính là sử dụng hoạt ảnh trong giao diện người dùng (User interface animation). Chính vì vậy, bài nghiên cứu khoa học đưa ra việc nghiên cứu các khải niệm, ý nghĩa chung v `êhoạt ảnh trong giao diện người dùng và mô hình, cũng như cách thức ứng dụng keyframe trong xây dựng hoạt ảnh trong giao diện người dùng trên website. Bài nghiên cứu này được trình bày thể hiện dưới góc nhìn của người phát triển hiện thống ph ân m`ân. Bài nghiên cứu được viết dưới nhu ci đòi hỏi thực tế đến việc ứng dụng keyframe vào nâng cao trải nghiệm người sử dụng trong thiết kế giao diện cụ thể. Với những quan điểm như trên, bài NCKH được trình bày với nội dung như sau: Chương Ï trình bày khái quát v`êgiao diện người dùng và hoạt ảnh trong giao diện người dùng để đưa ra cho người đọc thấy được vai trò, cũng như t Ân quan trong của việc ứng dụng hiệu ứng trong thiêt kế giao diện người dùng. Chương II nghiên cứu v`ềsử dụng keyframe trong hoạt ảnh giao diện người dùng. Chương tiếp theo chúng ta đi vào ứng dụng vào sản phẩm thực tế của keyframe trong việc xây dựng trang nhân sự khoa đa phương tiện. Phần cuối cùng là kêt quả đạt được: Sản phẩm, kiến thức v`ê keyframe, Javascript,. cùng như cải thiện kỹ năng làm việc nhóm, tìm kiếm thông tin và định hướng phát triển sau này. Bài nghiên cứu khoa học này hi vọng sẽ góp phần nhỏ cho người đọc trong việc thiết kế giao diện người sử dụng khi thực hiện phát triển phn m`ân. Xin chân thành cảm ơn GV. Vũ Thị Tú Anh đã đóng góp cho chúng tôi những ý kiến quí báu trong quá trình hoàn thiện bài NCKH. Mặc dù đã có nhi `âi cố gắng, nhưng bài NCKH này không tránh khỏi những sai sót. Chúng tôi xin chân thành cảm ơn những ý kiến đóng góp cho nghiên cứu này ! MUC LUC CHUONG I. GiGi thi€u ChUng. TH no nh. Hoạtảnh trong thiết kế giao diện người dùng 1. Hoạt ảnh trong giao diện ngươi đÙng.ss- àxv nà kề TH T HHTkTHhhiHhHkryryy 1. Tần quan trọng của U AniimatiOH.- s1 nề BH HT TH HT HH HT HT ki re 6 1. Tạo hoạt ảnh trên trang web, sử dụng JQU€rV.- cành nà HH HH rêp 7 CHUONG II. Keyframe trong CSS Animation và CSS 'TransifiOn.`À ao co nh cố. Animation-iteration-COUMt. Animation-plaY-SfAf€. - L> nh HH HH HH HH HH HH HH HH HH HH HH HH 1 PA So oi. 'TransifIon-fiimInB-fUTCfIOH,. 3113 1131 HT HT TH TH TH Hà họ r v vh 24 2. + 2 2 3 1n HH HH HH HH HH HH HH HH HH HH HH HH 2: CHUONG III. Ung dung keyframe vao website nhan sự khoa Đa phương tiỆn. Áp dụng keyframe trong CSS animation và CSS transition vào sản phẩm. St St TT TH H121 1 K111111E-. Giới thiệu chung Người sử dụng trở thành mối quan tâm hàng đẦi trong suốt quá trình phát triển giao diện đ ôhoa người sử dụng. Muốn phát triển một ứng dụng tốt, thì c3n phải có phẦn mm tốt, một phì mần tốt là đem đến cho người sử dụng kết quả cao trong công việc. Vì vậy thiết kế giao diện người sử dụng có tmn quan trọng rất lớn đem lại lợi ích cho người dùng. Chúng ta có thể đưa ra mô hình hướng đối tượng với sự phối hợp tích cực của người dùng, mục đích của sự hoạt động này là đem lại cho người dùng kết quả, vai trò, sự khéo léo tỉnh xảo trong các quá trình và ứng dụngnhư thế nào đạt hiệu quả cao nhất. Giao diện người dùng 1. Định nghĩa Theo tac gia Michat Malewicz & Diana Malewicz, giao dién nguoi dùng (tiếng Anh: User Interface, viét tat: UD là hình ảnh đại diện của một sản phẩm kỹ thuật số. Nó là điểm liên kết giữa người dùng và chức năng của sản phẩm. Nó giúp đạt được kết quả mong muốn thông qua một loạt các tương tác giữa ngươi và máy. Đó là một loạt văn bản, hình dạng, đ`ôhọa và ảnh được kết hợp theo cách cho phép tương tác tự nhiên, trôi chảy. Nhu vay, giao dién người dùng là điểm tương tác và giao tiếp giữa người và các thiết bị số. Đi`âi này có thể bao ø ân màn hình hiển thị, bàn phim, chuột và máy tính để bàn. Đó cũng là cách mà người sử dụng tương tác với một ứng dụng hoặc trang web. Bên cạnh đó, sự phụ thuộc ngày càng nhi `âi của doanh nghiệp vào các ứng dụng web, ứng dụng di động, mạng xã hội đã khiến nhi `âi công ty đặt ưu tiên cao hơn cho UI trong nỗ lực cải thiện trải nghiệm chung của người dùng của họ. Mục tiêu của giao diện người dùng hiệu quả là giúp cho trải nghiệm của người dùng dễ dàng và trực quan. Giao diện người dùng được tạo ra trong các lớp tương tác, thu hút các giác quan của con người, đó là thị giác, xúc giác, thính giác và hơn thế nữa. Các thiết bị tương tác với nhi ôi giác quan được gợi là “giao diện người dùng đa phương tiện (multimedia user interfaces)”. Ví dụ, giao diện người dùng hằng ngày sử dụng kết hợp đâi vào xúc giác (bàn phím và chuột) và đi ra thị giác và thính giác (màn hình và loa). Vai trò Giao diện người dùng rất quan trọng để đáp ứng mong đợi của người dùng và hỗ trợ chức năng hiệu quả của trang web của bạn. Giao diện người dùng được thực hiện tốt tạo điâi kiện cho sự tương tác hiệu quả giữa người dùng và chương trình, ứng dụng hoặc máy tính thông qua hình ảnh tương phản, thiết kế và phản h ä. Khi thiết kế giao diện người dùng cho trang web, đi âi quan trọng là phải xem xét kỳ vọng của người dùng v`êkhả năng truy cập, thẩm mỹ thị giác và dễ sử dụng. Một sự pha trộn tối ưu của hình ảnh hiệu quả và khả năng đáp ứng hiệu quả sẽ cải thiện tỷ lệ chuyển đổi của trang web của bạn, vì nó dự đoán nhu c`ầi của người dùng và sau đó đáp ứng các nhu c3 đó. Cụ thể hơn, đây là các yếu tố bao quát quan trọng nhất của một giao diện người dùng tuyệt vời: - Kiến trúc thông tin: Chức năng của một trang web được xây dựng theo IA (Information Architecture). Cấu trúc và tổ chức nội dung trang web của bạn một cách hợp lý là rất quan trọng để giúp người dùng đi âi hướng trang web với nỗ lực tối thiểu. Các thành phần của LA bao g ôn ba loại cấu trúc tổ chức chính: phân cấp (mức độ quan trọng), tu ân tự (thứ tự logic của các bước) và ma trận (trong đó người dùng chọn tổ chức nội dung họ xem). Ví dụ: Các yếu tố đi ât hướng (nút, tab, biểu tượng), nhãn (thuật ngữ), tính năng tìm kiếm (thanh tìm kiếm) và hệ thống tổ chức (danh mục). - Thiết kế tương tác: Các yếu tố của ID (Interaction Design) nhằm mục đích biến người đọc thụ động thành người tham gia tích cực bằng cách trình bày các trưởng hợp đẦi vào của ngươi dùng. Giữ cho người dùng trong tâm trí trong khi tạo giao diện người dùng sẽ giúp cải thiện tính tương tác và thực hiện các hành vi cụ thể đáp ứng nhu ci của người dùng. Ngoài ra, giao diện người dùng tương tác được thiết kế hiệu quả có thể 'học hỏi' để dự đoán và khắc phục bất kỳ vấn đ `ềnào có thể xảy ra trước khi chúng tác động tiêu cực đến trải nghiệm của người dùng. Ví dụ: Tính năng chia sẻ trên mạng xã hội, nút bật, nút tất. - Thiết kế trực quan: Không thể đánh giá thấp t 4m quan trọng của giá trị thẩm mỹ trang web của bạn. Thiết kế hiệu quả sử dụng các yếu tố màu sắc, độ tương phản, phông chữ, video và ảnh để thu hút khách truy cập và giúp họ dễ dàng đọc và làm việc với nội dung, thay vì xung quanh nó, để tạo ra một lu ông chức năng trực quan, hợp lý. Ví dụ: Độ tương phản, màu sắc, khoảng trắng, kiểu chữ, tối ưu hóa thiết bị di động. Hoạt ảnh trong thiết kế giao diện người dùng 1. Hoạt ảnh trong giao diện người dùng User interface animation, viét tat: UI animation hay hoat anh trong giao dién người dùng là quá trình thêm chuyển động vào các ph %n tử giao diện người dùng nhằm nâng cao khả năng tương tác của sản phẩm. Các nhà thiết kế UX (User experience) và UI sử dụng hoạt ảnh để hướng dẫn người dùng xung quanh giao diện, cảnh báo họ v`êsự thay đổi, ảnh hưởng đến quyết định của người dùng và chỉ ra mối quan hệ giữa các yếu tố — trong số các mục đích sử dụng khác. Hoạt ảnh giao diện người dùng cũng làm giảm cảm giác máy móc của một trang web hoặc ứng dụng, tạo ra trải nghiệm trực quan và tự nhiên hơn nhỉ ôi. Tần quan trọng của UI Animation Với số lượng trang web và ứng dụng tăng gấp 10 lì mỗi ngày, người dùng đã mong đợi giao diện mạnh mẽ, chức năng và độc đáo, dễ đi âi hướng. Các sản phẩm kỹ thuật số ngày nay phải lấy cơn người làm trung tâm, trực quan và đáp ứng. Một trong những cách mà các nhà thiết kế đạt được tất cả những đi`âi trên (và hơn thế nữa) là với hoạt ảnh. Animation bổ sung thêm một liên lạc quan trọng của con người vào giao diện kỹ thuật số bằng cách mô phỏng trải nghiệm tương tác với một đối tượng vật lý trong cuộc sống thực.