Thiết kế ấn phẩm điện tử ví dụ minh họa ngân hàng thương mại cổ phần tiên phong

▪ Mục tiêu của thiết kế tương tác là tạo ra các sản phẩm cho phép người dùng đạt được các mục tiêu của họ theo cách tốt nhất có thể.. 3, BỐI CẢNH ▪ Chuyển động nên cung cấp bối cảnh phù

Bài tập nhóm 3

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

đa phương tiện trong

ÂPĐT

▪ Tương tác ĐPT là sự kết hợp giữa Thiết kế ĐPT và Thiết kế

tương tác 

▪ Thiết kế tương tác là thực hành thiết kế các sản phẩm kỹ

thuật số tương tác, môi trường, hệ thống và dịch vụ. 

▪ Mục tiêu của thiết kế tương tác là tạo ra các sản phẩm

cho phép người dùng đạt được các mục tiêu của họ theo

cách tốt nhất có thể

▪ Thiết kế ĐPT là việc thiết kế tạo nên sản phẩm dựa trên

những văn bản, hình vẽ tĩnh, hoạt hình và âm thanh

-> Tương tác ĐPT trong APĐT là sự phản hồi từ 2 phía (cụ thể

là ấn phẩm điện tử và người dùng) 

Cách xây dựng

kịch bản tương

tác

Khi xây dựng tương tác, có những

yếu tố bạn cần quan tâm sau đây :

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.

▪ Nó sẽ hỗ trợ luồng hành động, cung

cấp hướng dẫn rõ ràng trước, trong và

sau khi sử dụng Nó nên phục vụ như

một người hướng dẫn, giữ người dùng

định hướng và ngăn ngừa họ mất

hứng, giảm nhu cầu về các yếu tố đồ

hoạ được thêm vào nhằm giải thích

nơi họ đang đứng (trong app) hoặc họ

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 Do không sử

dụng kiểu Skeuomorphism, thiết kế UI tự do để

hành xử theo bất cứ kiểu gì mà nhìn có vẻ trái

ngược với bối cảnh của nó.

▪ Thêm một nét hay biến dạnh thành một đối

tượng hoặc áp dụng tính quán tính cho một danh

sách kéo đơn giản có thể khiến trải nghiện thú vị

Chuyển động nên linh hoạt và

trực quan Nó nên phản ánh theo

6, Kiềm

chế

Có ý tưởng rõ ràng và tránh gây mất tập trung người

dùng quá nhiều với các chuyển động, tinh tế là chìa

khoá của vấn đề Cần dùng nó để duy trì sự tập trung

chứ không phải gây phiền nhiễu.

HYPERLINK

a Thuật

ngữ

hyperlink

- Khái niệm: Hyperlink là tên tiếng Anh của thuật ngữ siêu

liên kết “Liên kết”, theo đúng như tên gọi, nó có nghĩa là

một đường dẫn để chuyển từ một văn bản hoặc từ một

trang này sang một trang khác hoặc một vị trí nào đó trên

trang khác.

-Vai trò: Là nguồn dẫn tài liệu để khi người dùng click vào

đường dẫn đó thì sẽ được dẫn đến một trang khác hoặc

một vị trí nào đó trên trang web.

b Cách tạo

hyperlink trong

Word

Bước 1: Bôi đen đoạn văn

bản mà bạn muốn tạo liên

kết.

Bước 2: Click vào tab

insert, sau đó chọn mục

hyperlink

b Cách tạo

hyperlink trong

Word

Bước 3: Gắn địa chỉ cần liên kết

Text to display: Đoạn văn bản cần liên

kết

Address: Địa chỉ cần liên kết

*Lưu ý: Để link đến vị trí khác trong văn

bản, chọn mục “Place in This Document”

trong hộp thoại ở trên

Sau khi hoàn tất các bước, đoạn văn

bản đã được tạo hyperlink sẽ được gạch

dưới và tô xanh Tương tự, nếu muốn

tạo hyperlink cho email, ta chọn mục

“Email Address” trong hộp thoại và làm

lại tương tự các bước như trên

4

Animation

Khái niệm:

Thuật ngữ animation được tạm dịch là “hoạt hình”, rất

phổ biến trong các lĩnh vực hoạt động khác nhau của con

người Ngày này, animation đã giành được vị trí đặc biệt

trong thiết kế giao diện và là một công cụ quan trọng

nhất để tạo ra sự tương tác Animation là một cách rất

mạnh mẽ để làm cho sản phẩm trở nên đơn giản, rõ rang

và tập chung vào người dung, mang lại trải nghiệm tích

cực.

Các loại giao

diện

Animation

Animation để tương tác vi mô:

Thiết kế chuyển động hữu ích nhất trong mảng thiết kế giao diện

người dùng Là cách làm cho các sự tương tác nhanh chóng và rõ

rang cho người dùng Thường bắt trước các tương tác vật lí

thường thấy trong cuộc sống như bấm nút, mở hộp,… Animation

được áp dụng cho vi mô là những yếu tố nhỏ nhưng là một yế tố

then chốt để định hình 1 thiết kế chất lương.

Các loại giao

diện

Animation

Animation hiển thị tiến trình

Có thể kết hợp hoàn hảo với loại bên trên No bao gồm các cách

khác nhau để thể hiện giai đoạn của các quy trình cho người

dùng Ví dụ: các thanh tải khác nhau cho thấy quá trình xử lí diễn

ra nhanh hay chậm và giúp người dùng phần nào đó biết được

thời gian để nhận kết quả.

Các loại giao

diện

Animation

Animation làm rõ/giải thích:

Thông qua chuyển động của các chi tiết, kí tự, các mục

hoạt văn bản được minh hoạ, chúng tạo một hướng dẫn

cho người dùng về cách xử lí ứng dụng

Các loại giao

diện

Animation

Animation để trang trí:

là loại animation được sử dụng thường xuyên để thiết kế giao

diện người dung độc đáo và hấp dẫn, thu hút sự chú ý của người

dung Tuy nhiên cần được phân tích kĩ lưỡng thoe quan điểm giữ

chán người dung trong thời gian dài.

Lợi ích

· Tăng khả năng sử dụng

· Độc đáo

· Tương tác thuận tiện dễ dàng

· Khả năng thực hiện đồng thời nhiều chức năng

· Tiềm năng cao đẩy nhanh quá trình tương tác

· Cung cấp phản hồi rõ rang cho người dung.

Hạn chế

· Khá nặng để tải

· Quá tải màn hình/trang

· Xao lãng.

5 Object State

State ( các thuộc tính, hành vi ) là các thành phần

quan trọng để xây dựng nên một Object ( Đối tượng ).

Các đối Object ( đối tượng ) đều có những dữ liệu

( thuộc tính ), hành vi và định dạng riêng

Ví dụ:

Dữ liệu của một đối tượng – Dữ liệu hay các thuộc

tính là các đặc điểm được xây dựng trong một đối

tượng Ví dụ, một T.V có kích thước, màu sắc, kiểu

máy, v.v.

Hành vi của đối tượng - Hành vi hoặc

hoạt động của một đối tượng là các

chức năng được xác định trước của

Ngân hàng Thương mại Cổ phần Tiên Phong (gọi tắt là “TPBank”)

được thành lập từ ngày 05/05/2008 với khát vọng trở thành một tổ

chức tài chính minh bạch, hiệu quả, bền vững, mang lại lợi ích tốt

nhất cho cổ đông và khách hàng TPBank được kế thừa những thế

mạnh về công nghệ hiện đại, kinh nghiệm thị trường cùng tiềm lực

tài chính của các cổ đông chiến lược bao gồm:Tập đoàn Vàng bạc

Đá quý DOJI, Tập đoàn Công nghệ FPT, Công ty Tài chính quốc tế

(IFC), Tổng công ty Tái bảo hiểm Việt Nam (Vinare) và Tập đoàn Tài

chính SBI Ven Holding Pte Ltd.,Singapore

TP Bank là Tiên Phong Bank, là tên viết tắt của ngân hàng TMCP

Tiên Phong Tên tiếng Anh là Tien Phong Commercial Joint Stock

Bank Hiện nay ngân hàng có trụ sở chính tại 57 Lý Thường Kiệt,

Quận Hoàn Kiếm, Thành phố Hà Nội và nhiều chi nhánh trên cả

nước.

Ngân hàng TP Bank được cấp giấy chứng nhận đăng ký doanh

nghiệp lần đầu số 0102744865 ngày 12/05/2008.

Logo TP Bank lấy biểu tượng là hình tam giác cùng với tên thương hiệu khá nổi bật Hình tam giác là một hình khối khá cơ bản với 3 đỉnh, 3 chân được thể hiện trong logo TP Bank với ý nghĩa về sự chắc chắn, bền vững Hình tam giác

trong logo TP Bank không tĩnh mà như một đường xoắn bất tận tạo cảm giác về sự vận động không ngừng nhưng vẫn ổn định, chắc chắn Bên trong logo ngân hàng TP Bank còn là một hình tam giác trong suốt biểu tượng như một nút điều

khiển tượng trưng cho sự sẵn sàng, thích ứng của ngân hàng trước thị trường Màu trong suốt trong logo TP Bank mang

ý nghĩa về sự minh bạch, rõ ràng – điều cần thiết trong hoạt động của các ngân hàng Ngoài ra 3 đỉnh của hình tam giác

trong logo TP Bank cũng thể hiện 3 tiêu chuẩn trong phong cách mà TP Bank hướng tới đó là chuyên nghiệp, sáng tạo,

hướng đến khách hàng

Màu sắc chủ đạo trong logo TP Bank đó là màu cam và màu tím tạo ấn tượng về sự khác biệt trên thị trường Màu cam

mang đến sự sáng tạo, năng động không ngừng của thương hiệu Màu tím trong thiết kế logo này thể hiện sự tin cậy, sang trọng và hoàn hảo Màu tím cũng là gam màu lạ so với các ngân hàng khác

Tổng thế logo TP Bank mang đến một sự ấn tượng, khác biệt độc đáo so với các ngân hàng trên thị trường Ngoài nhận

diện thương hiệu phong cách độc đáo, thì các chiến lược tiếp cận thị trường luôn tiên phong với việc ứng dụng những công nghệ tiên tiến, mang đến rất nhiều tiện ích không nhỏ cho người dùng Giống với cái tên “Tiên Phong” của ngân hàng

“Vì chúng tôi hiểu bạn”

Khẩu hiệu mà thương hiệu đưa ra đã truyền tải một thông điệp khá rõ ràng, vì hiểu

khách hàng nên TP Bank luôn mong muốn đưa ra những giải pháp cho vấn đề của khách hàng Đó là định hướng chinh phục khách hàng, hiểu khách hàng để phục vụ khách hàng và ngược lại khách hàng sẽ tiếp tục gắn bó với thương hiệu Cũng chính nhờ slogan mang tính định hướng như vậy mà TP Bank đã đem đến cho khách hàng nhiều giải pháp mới mẻ, hiện đại, tiên tiến, góp phần nâng cao chất lượng cuộc sống của người dân.

Thank for watching