Thiết kế ấn phẩm điện tử ví dụ minh họa dell

Tránh thiết kế các yếu tố giao diện khiến cho mọi người thắc mắc không biết để làm gì, bởi vì sẽ chẳng ai bận tâm tìm hiểu 1.. Mặc định o Người dùng sẽ luôn mong đợi nhìn thấy các yếu tố

Thiết kế APDPT

Phân thích thiết kế giao diện người

dùng

Quy trình thiết kế giao diện người

Nguyên tắc thiết kế giao diện người dùng

01.

o Đảm bảo rằng thông tin có thể được

truyền tải chính xác đến người dùng

và ngăn người dùng mắc lỗi

o Mọi người thường tránh và bỏ qua

những điều họ không thể hiểu được

– đó là bản chất tự nhiên của con

người Tránh thiết kế các yếu tố giao

diện khiến cho mọi người thắc mắc

không biết để làm gì, bởi vì sẽ

chẳng ai bận tâm tìm hiểu 

1 Rõ ràng

tiên

o Người dùng sẽ cảm thấy thoải mái khi

họ hiểu những hành động ưu tiên là gì

o Không nên để người dùng thắc mắc phải làm gì tiếp theo

3.Nguyên tắc bối cảnh

4 Mặc định

o Người dùng sẽ luôn mong đợi nhìn thấy

các yếu tố giao diện trong bối cảnh của

đối tượng mà họ muốn kiểm soát

o Giữ mọi thứ thuận tiện cho người sử

dụng – nếu cái gì đó có thể được chỉnh

sửa, thay đổi hoặc kiểm soát, hãy đặt

các điều khiển ngay bên cạnh nó

o Người dùng sẽ ít khi thay đổi các thiết lập mặc

bước nhỏ hơn

6 Thông tin phản hồi

Người dùng sẽ cảm thấy tin tưởng

và dễ chịu hơn khi bạn cung cấp thông tin phản hồi một cách rõ ràng

và liên tục

5 Hành động hướng

dẫn

Quy trình thiết kế giao diện người

dùng.

02.

Quy trình thiết kế giao diện người dùng

Xác định yêu cầu của

Quy trình thiết kế giao diện người dùng

Thiết kế đồ họa bản

đơn sắc

Bước 4

Phối màu cho giao diện Web

Quy trình thiết kế giao diện người dùng

Mục tiêu

● Hiểu được quy trình thiết kế

giao diện người dùng

● Nắm được chi tiết từng hoạt động trong quy trình thiết kế giao diện người dùng

● Với mỗi hoạt động, chúng ta có rất nhiều cách để thực hiện Do

đó, phải có khả năng lựa chọn phương pháp nào là thích hợp nhất cho từng hoàn cảnh cụ thể

● Yêu cầu phải bao quát giao diện, chức

năng, cấu trúc nội dung, đối tượng xem

Website

● Trao đổi thông tin dựa trên các yêu cầu đã

xác định trước khi tiếp cận khách hàng

● Nghiên cứu về yêu cầu chung của khách

hàng

● Xây dựng bảng câu hỏi logic phác thảo mô

hình hệ thống web đơn giản và tối ưu nhất

● Đặt độ ưu tiên, lọc và theo dõi các yêu

Bước 2 Phác thảo ý tưởng lên giấy

Bước 3 Đánh giá mẫu phác thảo

Mẫu thiết kế có đáp ứng các yêu

cầu của khách hàng không?

Khách hàng thích mẫu nào?

Tìm thông tin, chức năng

có dễ không?

Mục tiêu: -Đánh giá mẫu phác nào phù hợp với yêu cầu, mong muốn của khách hàng

- Để tìm hiểu sâu hơn về thiết kế Web và Thương hiệu bạn.

Bước 4 Thiết kế Wireframe

Mục tiêu: đánh giá bản phác trên giấy khi chuyển sang đồ hoạ vi tính bố cục

có phù hợp với yêu cầu và mong muốn của khách hàng hay không?

Bước 5 Phối màu cho giao diện

Phối màu đơn sắc (Monochromatic)Quy tắc phối màu

Phối màu tương đồng (Analogous)tPhối màu bổ túc trực tiếp (Complementary)

Phối màu bổ túc bộ ba (Triadic)Phối màu bổ túc xen kẽ (Split-complementary)

Phối màu bổ túc bộ bốn (Rectangular Tetradic hay Compound

Complementary)

Whisk the egg whites

until they are stiff Add

the rest except the color

additives

Once frosting is done, split it evenly and then add a little bit of color additive to each

Let everything cool down and finally decorate them with a pastry bag

ảnh, folder cho trang Web

Mục đích: giúp Website dễ bảo trì, giảm mã, nội dung hiển thị tốt hơn với tỉ lệ mã thấp,

linh động trong định nghĩa kiểu Và quan trọng hơn, nó giúp cả quy trình sản xuất, triển

khai, bảo trì ít rủi ro hơn

Mục đích: giúp Website dễ bảo trì, giảm mã, nội dung hiển thị tốt hơn với tỉ lệ mã

thấp, linh động trong định nghĩa kiểu Và quan trọng hơn, nó giúp cả quy trình sản xuất, triển khai, bảo trì ít rủi ro hơn

site script, ảnh, folder cho trang

Web

Mục đích: thiết kế Web bằng HTML, CSS ( Flash, JS, AJAX, … nếu có) và chuyển tải giao

diện đồ hoạ sang trang Web

dấu, lập trình để thiết kế giao diện

Mục đích: kiểm soát việc hiển thị chính xác trang Web như giao diện đồ hoạ trên các

trình duyệt Web khác nhau

trình duyệt

Mục đích: chuyển các trang Web hiển thị tốt trên các trình duyệt chính cùng với các

thành tố của trang Web tới bộ phận lập trình

trình duyệt

Sơ lược về DELL

● Thành lập năm 1984 tại Mỹ

● Là một hãng máy tính nổi tiếng và lâu đời

● Các sản phẩm của thương hiệu Dell được

người dùng ưa chuộng vì có độ bền và

chất lượng cao , ngoại hình đẹp , đa dạng

phân khúc, mẫu mã

● Có dịch vụ bản hành, chăm sóc khách

hàng tốt

- Đây là một thương hiệu mang lại

niềm tin, sự tin tưởng cho người

dùng

- sản phẩm khá đa dạng: laptop, màn

hình, giải pháp công nghệ, phần

mềm,

- Thị trường hiện nay có sự cạnh

tranh khá gắt gao với các hãng :

Asus, MSI, Acer ,

Phân tích Giao diện

● Đã cũ không update giao diện cho phù hợp với xu hướng hiện tại web nhìn khá dễ gây nhàm chán cho khách hàng , trang chủ bị lãng phí diện tích

● Thêm số liệu thống kế (PR hãng tạo độ tin tưởng của khách hàng về sự yên tâm khi mua hàng)

● Thêm chính sách, promotion, bảo hành, những gì nhận được khi order hoặc mua trực tiếp

● Các layout thiết kế cho hầu hết các dòng sản phẩm, chưa phù hợp, chưa làm nổi bật, tách bạch được các dòng sản phẩm :

Phân tích Tương tác

● Web không có nhiều tương tác với khách hàng, có khá ít sản phẩm có video

để giới thiệu một cách trực quan hơn với người dùng

● Cần thêm motion graphic để giúp khách hàng có thể dễ dàng tiếp nhận và tạo tương tác với khách hàng ⇒ giữ khách hàng ở lại lâu hơn với website

Phân tích Sản phẩm

● Không có gợi ý các phẩm laptop liên quan

● Nội dung thông tin còn trình bày dàn trải khiến người dùng nắm bắt thông tin chưa tốt

● Thiếu sự so sánh giữa các máy cùng giá ( đẩy sự hứng thú mua hàng và so sánh về các sản phẩm nhằm thúc đẩy khách hàng hiểu rõ được sản phẩm của hãng )

● Thông tin sản phẩm chi tiết chưa làm nổi bật được ưu điểm

THANK FOR WATCHING !