intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

Bài giảng Lập trình web toàn tập với HTML, CSS, Jquery, Responsive, Bootstrap - Chương 3: UI và UX trong thiết kế website

Chia sẻ: ViDoraemon2711 ViDoraemon2711 | Ngày: | Loại File: PDF | Số trang:17

Thêm vào BST
Báo xấu
104
lượt xem 18
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Lập trình web toàn tập với HTML, CSS, Jquery, Responsive, Bootstrap - Chương 3: UI và UX trong thiết kế website trình bày các nội dung chính sau: Khái niệm về UI và UX, thói quen trải nghiệm của người dùng, cách thiết kế giao diện tổng quan, cách thiết kế bố cục trang và cách thiết kế đồ họa. Mời các bạn cùng tham khảo để nắm nội dung chi tiết.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Lập trình web toàn tập với HTML, CSS, Jquery, Responsive, Bootstrap - Chương 3: UI và UX trong thiết kế website

  1. Download miễn phí gì cũng có tại ilook.asia CHƯƠNG 3: UI & UX TRONG THIẾT KẾ WEBSITE |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 32
  2. Download miễn phí gì cũng có tại ilook.asia CHƯƠNG 3: UI và UX trong thiết kế website ! Khái niệm về UI và UX ! Thói quen trải nghiệm của người dùng ! Cách thiết kế giao diện tổng quan ! Cách thiết kế bố cục trang ! Cách thiết kế đồ hoạ |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 33
  3. Download miễn phí gì cũng có tại ilook.asia Khái niệm về UI và UX (tt) ! UX (USER EXPERIENCE) là gì? ! UI (USER INTERFACE) là gì? |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 34
  4. Download miễn phí gì cũng có tại ilook.asia Think of it this way: When I’m looking at a page that doesn’t make me think, all the thought balloons Thói quen trải nghiệm người dùng But when I’m over my head looking havethat the thing at question a page that makes I want.” marks in them. me think, all the thought balloons over my head say things like “OK, there’s the _____. And that’s a _____. And there’s NOT THINKING THINKING Hmm. PrettyOK. This looks Is that the like the product busy. Where navigation? Or categories... should I start? is that it over there? ...and these are today’s Hmm. Why did special Whydeals. did they they call it put that there? Memory, that?Modems... There it is: Monitors. Click Those two links Can I click on seem like they’re that? the same thing. Are they really? |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 35
  5. Download miễn phí gì cũng có tại ilook.asia c h a pt e r 1 d o n’ t m a k e m e t h i n k ! Thói quen trải nghiệm người dùng Another example: On most bookstore sites, before I search for a book I first have to think about how I want to search.2 MOST BOOKSTORE SITES Amazon.com, on the other hand, doesn’t even mention the Let’s see. “Quick Search.” That must be the same as Author-Title-Keyword distinction. They just look at what you type and do whatever makes the most sense. “Search,” right? Do I have to click on that drop-down AMAZON.COM menu thing? OK. “Search books All I know about the book is that it’s for _____.” by Tom Clancy. Is Clancy a keyword? (What is a keyword, anyway?) I guess I have to use the menu. Clicks on the arrow Types “Tom Clancy” Clicks “Go” “ Title. Author. Keyword.” OK. I want “Author.” Clicks “Author” After all, why should I have to think about howTypes I want “Tom Clancy”to search? And even Clicks “Search” worse, why should I have to think about how the site’s search engine wants me to |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 36 phrase the question, as most Granted, though it were of this “mental chatter” some takes place ornery in a fraction troll guarding of a second, but a bridge? (“You
  6. of view, vaguely all he’s saying resembles isDownload the thing “blah blah they’re GINGER miễn phí gì looking for. blah cũng blah có tại There blah blah ilook.asia are usually GINGER large parts of theblah pageblah that blah.” they don’t even look at. Thói quen trải nghiệm người dùng What We’re we see“great thinking it’s usually reality whenliterature” is muchjust we look at(or a fraction closer a Web to “billboard page at least of what’s on by going dependsbrochure”), “product theatpage. on what we 60 miles an hour.” havethe while in mind, user’s but WHAT DESIGNERS BUILD… WHAT WE DESIGN FOR…WHAT THE USERS SEE… REALITY… Look around Read feverishly for I want to anything thatbuy a Read ticket. a) is interesting, Read or vaguely Read resembles what you’re looking for, [Pause for and reflection] b) is clickable. Finally, click on a carefully As soon as you Howfind do I chosen link a halfway-decent check my match, click.frequent flyer miles? If it doesn’t pan out, click the Back button and try again. Like Ginger, we tend |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| toTRƯỜNG focus onCAO words lập ĐẲNG trình and trực KỸphrases THUẬT tuyến tạiCAOthat seem to match (a) the THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Học itclass.vn 37
  7. Download miễn phí gì cũng có tại ilook.asia Thói quen trải nghiệm người dùng c h a pt e r 6 Here’s what the process looks like: Enter site > Feel like browsing? YES NO > > > Click on a section > Find a search box > > Click on a Type > > subsection your query > > NO YES Look for Credible whatever it is results? NO Think you’re in > the right section? > Devise a YES better query > Find it? > > NO Scan results for YES > likely matches NOT YET ALMOST > THOROUGHLY Check them out FRUSTRATED? NOT YET > > YES > YES Find it? NO > YES LEAVE HAPPY > HAD ENOUGH? > LEAVE UNHAPPY |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 38
  8. Download miễn phí gì cũng có tại ilook.asia Cách thiết kế Giao diện tổng quan ! Định hướng cho người dùng ! Trang không có liên kết tới các trang khác ! Hỗ trợ tìm kiếm |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 39
  9. Download miễn phí gì cũng có tại ilook.asia Giúp đỡ định hướng Định hướng cho người dùng rõ ràng ! Trang web cần !  Ngưởi dùnghỗcó trợthể người trả dùng nhưcâu lời các sau:hỏi: !  Đang ở đâu ? !  Có thể làm gì ? !  Có thể đi tiếp tới đâu ? ! !  Biểu tượng nhất quán, dễ hiểu, theo Sử dụng sự nhất quán trong thiết kế giữa các chuẩn qui định đối tượng trên các trang |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 40
  10. Download miễn phí gì cũng có tại ilook.asia end) Liên “dead-end” !  Trang kết đến các trang khác " thất vọng, mất khả năng đến với các trang khác. ! Trên mỗi trang cần có các liên kết tới các trang khác !  Mỗi trang có ít nhất một liên kết. Luôn có khả năng quay lại trang chủ hoặc các trang chủ chốt trên Website 8 |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 41
  11. Download miễn phí gì cũng có tại ilook.asia Hỗ trợ tìm kiếm ! Bất kì trang web nào cũng nên có công cụ tìm kiếm Hỗ#trợ#'m#kiếm# 10 |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 42
  12. Download miễn phí gì cũng có tại ilook.asia Cách thiết kế bố cục trang web Page Design !  Bố cục Layout !  Kích thước Khung nhìn !  Tính nhất quán !  Tính ổn định !  Tương thích trình duyệt |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 43
  13. Download miễn phí gì cũng có tại ilook.asia Bố cục layout Bố#cục#Layout# 13 |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 44
  14. Xác định kích thước khung nhìn Download miễn phí gì cũng có tại ilook.asia Kích thước khung nhìn !  Phải làm cho người dùng cảm nhận được Xác định kích thước khung kích thước của trang thông tin, biết họ nhìn Phải làm cho người đang ở đâu, có thể làm gì ? !  dùng cảm nhận được kích thước của trang thông tin, biết họ !  Lưu ý,đang hầuởhết các trang web đâu, có thể làm gì ? đều không vừa khớp với màn hình 14-15 inch. !  Lưu ý, hầu hết các trang web đều không vừa khớp với màn hình 14-15 inch. |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 45
  15. Download miễn phí gì cũng có tại ilook.asia Tính nhất quán ! Thiết kế phải tuân theo trang chủ ! Cấu trúc giữa các trang tương đối giống nhau |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 46
  16. Download miễn phí gì cũng có tại ilook.asia Tính tương thích trên các trình duyệt ! Trang web của chúng ta cần hiển thị được trên tất cả các trình duyệt, trên các thiết bị |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 47
  17. Download miễn phí gì cũng có tại ilook.asia Thiết kế đồ hoạ cho website Xác định kiểu chữ, màu sắc !  Phông chữ " phụ thuộc vào !  Đặc điểm thông tin !  Độc giả !  Trình duyệt, độ phân giải !  Ngôn ngữ sử dụng !  Font có chân, không chân… !  Gam màu ! thống nhất trong toàn bộ Website !  Font tiếng Việt: VNI, TCVN3, Unicode… |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TRƯỜNG Học CAO lập trìnhĐẲNG trực KỸtuyếnTHUẬT tạiCAO THẮNG |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| itclass.vn 23 48
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
2=>2