Nghiên cứu thiết kế tương tác trong thiết kế ấn phẩm điện tử

Khái niệm thiết kế tương tác• Là thiết kế ra những sản phẩm có tính tương tác với các hành vi sử dụng hấp dẫn để trợ giúp con người trong cuộc sống hằng ngày và trong công việc của họ

Nghiên cứu thiết kế

tương tác trong thiết kế

ấn phẩm điện tử

Nhóm 6

I Khái niệm về tương tác đa

phương tiện và cách xây dựng kịch bản tương tác

1 Khái niệm thiết kế tương tác

• Là thiết kế ra những sản phẩm có tính

tương tác với các hành vi sử dụng hấp

dẫn để trợ giúp con người trong cuộc sống

hằng ngày và trong công việc của họ

• Người thiết kế phải hiểu được giao tiếp giữa người dùng và công nghệ Với sự hiểu biết

này họ có thể dự đoán người dùng sẽ

tương tác với sản phẩm như thế nào,

sớm tìm ra những vấn đề trong sử dụng cũng như sáng tạo ra cách thức mới để

làm việc

1 Khái niệm thiết kế tương tác

• Thiết kế tương tác đa phương tiện là thiết kế tương tác có sự kết hợp của các phương tiện truyền thông (văn bản, điện tử ,đồ họa, hình ảnh động và âm thanh) trong 1 môi trường kĩ thuật nhằm cho phép người

dùng có thể tương tác với dữ liệu để sử dụng vào mục đích nhất định

II Cách xây dựng kịch bản tương tác đa phương tiện

• Kịch bản là câu chuyện viễn tưởng Nó giúp người kỹ thuật, người thiết kế có thể chuyển từ tương tác này sang tương tác khác thiết kế khai thác ý tưởng và chia

quyết định thiết kế ra các tình huống cụ thể Câu chuyện là dãy các hình đơn,

tập trung vào các hành động chính trong một hoàn cảnh Bằng cách sử dụng

Ở giai đoạn này, ý tưởng chương trình cần được mở rộng bao gồm tiêu

đề, đối tượng mục tiêu, mục tiêu của chương trình, đề cương nội dung, v.v

Các yếu tố nội dung có thể là được hình ảnh hóa dưới dạng văn bản, âm thanh, video, hoạt ảnh đồ họa, v.v.

Xây dựng kịch bản theo từng mức,

đảm bảo các ý

5 Thiết kế và bố trí giao diện

Thiết kế giao diện là một trong những bước sáng tạo nhất các giai đoạn của kịch bản đa phương tiện Quan trọng nhất là phải nhất quán

bố cục ngay từ đầu

6 Chuẩn bị bảng phân

cảnh

Là sự mô tả từng màn hình của chương trình, cũng là một kế hoạch chi tiết cho hành động có thể xảy

ra khi sử dụng sản phẩm đa phương tiện

Xây dựng kịch bản theo từng mức, đảm bảo các ý

Phát triển bảng phân cảnh

- Trước khi bắt đầu phát triển bảng phân cảnh, chúng ta hãy xem xét các phương tiện khác nhau các thành phần của một chương trình đa phương tiện. Đa phương tiện được tích hợp nền tảng nó có thể cung cấp văn bản,

âm thanh, hình ảnh (video và đồ họa), hoạt ảnh và cả tính năng tương tác, được gọi là điều hướng. 

- Viết kịch bản cho đa phương tiện và chuẩn bị bảng phân cảnh là một công việc mang tính hệ thống cao xử lý và đòi hỏi một số kỷ luật nhất định để tổ chức

III Hyperlink

- Anchor text là văn bản, nội dung bao gồm

có siêu liên kết “Hyperlink”

- Hypertext là văn bản với các siêu liên kết

• Hyperlink giúp kết nối người đọc, bạn

có thể chuyển từ một trang này sang

3.3 Các loại liên kết

- Liên kết nội tuyến : Một liên kết nội

tuyến hiển thị nội dung từ xa mà không cần

nhúng nội dung Nội dung từ xa có thể được

truy cập có hoặc không có người dùng chọn liên kết

- Liên kết béo : Liên kết béo (còn được gọi

là liên kết "một-nhiều", "liên kết mở rộng" hoặc

"liên kết nhiều đuôi") là một siêu liên kết dẫn đến nhiều điểm cuối; liên kết là một hàm đa trị

- Neo (Anchor) : Siêu liên kết neo là một liên kết

được liên kết với một phần của tài liệu, có thể là văn bản, mặc dù không nhất thiết nó cũng có thể là một vùng nóng trong hình ảnh (bản đồ

hình ảnh trong HTML), một phần được chỉ định, thường là bất thường của hình ảnh Một cách để xác định nó là bằng một danh sách các tọa độ cho biết ranh giới của nó Ví dụ: một bản đồ

chính trị của Châu Phi có thể có mỗi quốc gia

được siêu liên kết để cung cấp thêm thông tin về quốc gia đó

3.4 Hyperlink sử dụng trong Website

Các siêu liên kết là một phần không thể thiếu trong việc tạo ra World Wide Web Các

trang web được viết bằng ngôn ngữ đánh dấu siêu văn bản HTML Việc sử dụng Hyperlink còn được coi như là định hướng các nội dụng trực tuyến

Cú pháp của Hyperlink trong HTML :

o Thẻ <a> định nghĩa 1 Hyperlink

o Thuộc tính quan trọng nhất của thẻ <a> là thuộc tính ‘href’ – chính là điểm đến của link

o Còn ‘Link text’ là thứ mà người đọc sẽ nhìn được

Ví dụ:

Trong Website, Hyperlink còn có vai trò rất quan trọng đối với SEO (Search Engine

Optimization – Công cụ tìm kiếm) và có thể chia ra 2 loại hyperlink là : Internal và

External  

1 Internal Links (Liên kết nội bộ) : là một liên kết giúp điều hướng người dùng đi đến một trang nào đó trong phạm vi website mà họ đang truy cập

 Những lợi ích của Internal Link :

 Tối ưu hóa SEO : Nâng cao nhận thức bằng cách cải thiện thứ hạng Website

 Khả năng sử dụng (Usability) : Hướng người dùng tới những trang mang lại giá trị cao và

tỉ lệ chuyển đổi cao

 Tối ưu hóa chuyển đổi (Conversion Optimization) : Thúc đẩy người dùng phản hồi các Call to action

 Cấu trúc của Internal links : Là sự sắp xếp các link trong 1 wesite Mục đích là để định

hướng Click paths của người sử dùng một cách có thứ tự khi sử dụng web Có 4 cấu trúc dưới đây :

2 External Links : là một liên kết giúp điều hướng người dùng đi đến một trang nào đó

khác, trang web bên ngoài domain của chúng ta

 Phân loại : Gồm 2 loại

 Inbound link : Là liên kết trỏ đến trang web của bạn từ các web khác (backlink)

 Outbound link : Là liên kết trỏ đến trang web khác từ web của bạn

 Khi là người vận hành website, cần phải thận trọng khi sử dụng external links vì bạn

có thể sẽ bị vi phạm luật copyright hay link tới các nội dung trái pháp luật

 Hơn nữa khi sử dụng external links sẽ dẫn tới việc người dùng qua trang web khác thay vì ở lại trang web của bạn Khi đó bạn có thể thay đổi bằng việc khi người dùng

ấn vào đường link đó thì sẽ mở 1 tab mới, và trang web của bạn vẫn còn ở trên browser

Ví dụ dưới đây sử dụng thuộc tính target để khi ấn vào link sẽ hiển thị 1 tab mới trên trình duyệt :

IV Animation

4.1 Một số công dụng của animation và motion trong thiết kế ấn phẩm điện tử

1 Giúp người dùng thư giãn khi ứng dụng đang loading

4.1 Một số công dụng của animation và motion trong thiết kế ấn phẩm điện tử

2 Thay đổi trạng thái uyển chuyển và không “giật cục”

4.1 Một số công dụng của animation và motion trong thiết kế ấn phẩm điện tử

3 Kết nối liền mạch giữa các phần tử giao diện

4.1 Một số công dụng của animation và motion trong thiết kế ấn phẩm điện tử

4 Làm nổi bật lỗi khi phản hồi cho người dùng

4.2 Nguyên tắc thiết kế chuyển động trong

APDT

1 Phong cách cá nhân

Trong các ứng dụng, các chuyển động cần truyền đạt một phong cách đa dạng, trong khi vãn giữ được sự thống nhất xuyên suốt.

4.2 Nguyên tắc thiết kế chuyển động trong

APDT

2 Định hướng

Chuyển động nên giúp người dùng dễ dàng thông qua các trải nghiệm Nó

sẽ tạo ra các "không gian vật lý" của ứng dụng bằng cách mà các vật thể xuất hiện và mất đi hoặc bắt đầu được nhìn thấy.

4.2 Nguyên tắc thiết kế chuyển động trong

APDT

3 Bối cảnh

Chuyển động nên cung cấp bối cảnh phù hợp với nội dung trên màn hình bằng cách liệt kê chi tiết các trạng thái vật lý của những hình sử dụng và môi trường mà chúng được dùng

4.2 Nguyên tắc thiết kế chuyển động trong

APDT

4 Linh hoạt

Chuyển động nên linh hoạt và trực quan Nó nên phản ánh theo một cách

mà trấn an người dùng hơn là khiến họ ngạc nhiên và làm họ rối mắt Các phản ứng của UI, với hành động người dùng nên dễ hiểu.

4.2 Nguyên tắc thiết kế chuyển động trong

APDT

5 Cảm xúc

Chúng nên gợi lên một phản ứng tích cực, có thể là một cảm giác thoải mái từ một hành động roll mượt mà hay gây sự phấn khích vì sự chuyển trang xảy ra.

V OBJECT STATE

Trước khi chúng ta có thể trình bày về cách thiết kế cho các trạng thái, chúng

ta nên xác định chúng là gì. Các states đề cập đến các dạng khác nhau mà một phần tử có thể sử dụng dựa trên ngữ cảnh mà phần tử đó đang được sử dụng

Ví dụ: công tắc đèn không làm mờ; công tắc có hai trạng thái, bật và tắt, và ở mỗi trạng thái, nó trông khác nhau. 

5.1 Khái niệm

5.2 Các loại trạng thái và cách thiết kế nút trong giao diện

Trạng thái mặc định : Nút trông như thế nào khi

nó không được tương tác, nhưng có sẵn để được

tương tác. Đây cũng có thể được gọi là trạng thái

'bình thường'

Trạng thái di chuột : Trạng thái di chuột dành

riêng cho thiết kế web vì các thiết bị di động

thường không hỗ trợ tương tác khi di chuột. Đây là

trạng thái mà một nút sẽ ở trong khi con trỏ chuột

cuộn qua nút trên màn hình. Đây là trạng thái hữu

ích trong việc chỉ ra rằng có thể tương tác với thứ

gì đó khi con trỏ di chuyển quanh màn hình

5.2 Các loại trạng thái và cách thiết kế nút trong giao diện

Trạng thái tiêu điểm : sự hiện diện của trạng thái này là rất quan trọng để làm nổi

bật các nút khi ai đó sử dụng 'tab' để điều hướng một trang web. Thường thì bạn sẽ thấy trạng thái này dưới dạng đường viền màu xanh nhạt xung quanh nút

Trạng thái hoạt động : Trạng thái hoạt động có thể được sử dụng cho 'nhấp chuột'

hoặc nhấn xuống một nút và thường có thể giống với giao diện của nút 'được nhấn'

5.2 Các loại trạng thái và cách thiết kế nút trong giao

diện

Trạng thái đã tắt : Trạng thái này biểu thị rằng một nút không có sẵn để tương tác. 

Trạng thái đang tải / xử lý : Trạng thái tải được sử dụng khi một hành động đã được

thực hiện và hệ thống đang 'làm việc' để xử lý hành động đó. 

Thanks for watching