Bài Giảng Responsive Web Design UI / UX Design

UI/UX Desgin MOBILE AND WEB APPLICATION DEVELOPMENT RESPONSIVE DESIGN UI/UX Design 1 UI/UX Desgin 1 Nội dung môn học:  Chương trình học cung cấp cho học viên công nghệ phát triển Website trên thiết bị di động dùng HTML5, CSS3, tối ưu hóa hình ảnh và nội dung, thiết kế giao diện chuyên cho màn hình cảm ứng  Kết thúc môn học, học viên sẽ sử dụng các kiến thức đ~ học để thực hiện đồ án phát triển Website cho phép chạy trên cả PC và thiết bị di động  Thông qua việc sử dụng thành thạo các công cụ thiết kế như: Photoshop, Dreamweaver, PHP, My SQL 2 Kết quả đạt được sau khóa học:  Kết thúc khóa học, sinh viên có thể ho{n to{n đủ khả năng lập dự án thiết kế Website bao gồm khảo sát thông tin khách hàng, phác thảo Layout, thiết kế giao diện, lập trình HTML, CSS, nhúng Jquery v{o trang Web… 3 Phương pháp đánh giá:  Bài tập quá trình học: 15%  Bài thi cuối khóa: 35%  Thuyết trình: 15%  Đồ án môn học: 35% 2 UI/UX Desgin MỤC LỤC CHƯƠNG 1: GIỚI THIỆU & QUY TẮC THIẾT KẾ WEB MOBILE 6 I GIỚI THIỆU 6 1 Thiết kế web linh hoạt (Responsive Web Design) 6 2 Xu hướng thiết kế web 7 2.1 Thiết kế giao diện phẳng 7 2.2 Xu thế cảm ứng 8 2.3 Chuyển động và tương tác 8 2.4 Menu nhưng lại không có menu 9 3 Một số tính năng lưu ý khi thiết kế Web linh hoạt 10 3.1 Nhất quán về thương hiệu (Consistent) 10 3.2 Tính tiện dụng (Usability) 10 3.3 Không có chuyển hướng (link) 10 3.4 Thời gian tải trang 11 4 Thách thức dành cho Web linh hoạt 11 4.1 Thời gian phát triển 11 4.2 Các thiết bị khác nhau duy trì sự khác biệt 11 4.3 Thiết bị kh|c nhau cho phép tương t|c kh|c nhau 12 4.4 Sự giới hạn của media queries (phương thức nhận biết thiết bị) 12 4.5 Hình ảnh thu nhỏ có thể mất đi chi tiết 12 4.6 Menu điều hướng 13 5 Những điều để cân nhắc web linh động 14 5.1 Sự chuẩn bị là chìa khóa 14 5.2 Bắt đầu từ lúc sơ khai 14 5.3 Đừng phát minh ra quy luật 14 5.4 Kiểm tra, kiểm tra, và kiểm tra lần nữa 14 CHƯƠNG 2: CÁC KỸ THUẬT TRONG RESPONSIVE DESIGN 15 1 CSS Transitions và Media Queries 15 2 Responsive Navigation Menus: Menu sang Dropdown 15 3 CSS Media Queries and Using Available Space 16 4 Các kỹ thuật về Responsive Images 17 4.1 Fluid Images 17 4.2 Responsive Image: Thử nghiệm với việc thay đổi kích cỡ ảnh theo ngữ cảnh 17 5 Responsive Design Tools 18 5.1 Respond.js 18 5.2 Debugging CSS Media Queries 18 3 UI/UX Desgin 5.3 Responsive Design Testing 19 6 Responsive Design Frameworks 19 6.1 1140 CSS Grid 19 6.2 inuit.css 20 6.3 FluidGrids 20 6.4 Less Framework 4 21 7 Quy trình và chiến lược phát triển Responsive Web Design 23 7.1 Quy trình làm việc của các Responsive Designer 23 7.2 Phương ph|p tiếp cận Goldilocks cho Responsive Web Design 23 7.3 Hãy chú ý tới nội dung có tính cấu trúc đầu tiên (Structured Content First) 23 7.4 Thiết kế hướng về kinh nghiệm của người sử dụng trước (Design for a Target Experience First) 24 7.5 Phát triển chiến lược cho các thiết bị Mobile hiện đại 25 CHƯƠNG 3: THIẾT KẾ ICON .26 I THIẾT KẾ ICON APP 26 1 Kích thước icon iOS app 26 2 Kích thước icon Google Play 26 II KÍCH THƯỚC MÀN HÌNH (SCREEN SIZE) 27 1 Kích thước chuẩn Smartphone 27 2 Kích thước screen iOS app 27 3 Kích thước screen Android Play 28 CHƯƠNG 4: THIẾT KẾ WEB MOBILE 30 Chủ đề 1: Thiết kế web-mobile dạng “One Page” 30 1 “On Page” layout TOP-BOTTOM 30 2 Cấu trúc trang 30 3 HLML Layout 30 4 CSS layout 31 5 Các thành phần section 31 6 Các thành phần 32 6.1 Cấu trúc JavaScript trong trang Web 32 6.2 Nhúng javaScript vào trang Web 32 7 Cách tạo CSS dropdown menu 32 7.1 Bạn tạo một trang HTML như sau: 32 7.2 Dropdown Menu trong Web-Mobile 33 1 “On Page” layout LEFT - RIGHT 34 Chủ đề 2: Thiết kế web2mobile “dạng phẳng” 36 MỘT SỐ MẪU WEB2MOBILE THAM KHẢO .38 1 Coffee Shop 38 4 UI/UX Desgin 2 Food 38 3 Car/Bike 39 4 Travel 39 5 Photo Art 39 6 Bán hàng 40 NGUỒN THAM KHẢO 42 5 UI/UX Desgin CHƯƠNG 1: GIỚI THIỆU & QUY TẮC THIẾT KẾ WEB MOBILE I GIỚI THIỆU 1 Thiết kế web linh hoạt (Responsive Web Design) Cứ mỗi năm qua đi, xu hướng thiết kế web lại có sự biến động v{ thay đổi Trước đ}y, thiết kế web thường có xu hướng tập trung vào khả năng truyền đạt đến người xem thì ngày nay nó lại tính đến hiệu quả, tính khả thi Trong tháng 8/2011, 7.12% các trang web trên thế giới được truy cập các thiết bị cầm tay Và sau hai năm 8/2013, con số n{y đ~ l{ 21.78% Khi các thiết bị di động ồ ạt ra đời thì khái niệm "Responsive web design" được mọi người quan tâm Responsive web design là một giải pháp thiết kế website tiên tiến, giúp trang web của bạn tự động thay đổi theo độ phân giải của thiết bị như PC, laptop, smartphone… Chúng ta có thể thực sự xem máy tính bảng v{ điện thoại thông minh trở thành một lựa chọn thông thường để kết nối internet Nó là một sự dịch chuyển chiều ngang từ m|y tính để bàn tới những yêu cầu cho thiết bị di động khiến những người thiết kế web phải để ý Có nhiều c|ch để tiếp cận với sự hiện diện của thiết bị di động, như một trang web dành riêng cho mobile hay mobile app Thiết kế web linh hoạt giải quyết vấn đề lớn cho các nhà thiết kế web về việc hạn chế tầm nhìn và giải quyết nó 6 UI/UX Desgin 2 Xu hướng thiết kế web 2.1 Thiết kế giao diện phẳng Tiêu biểu Google đ~ có những giao diẹn phẳng trên các sản phẩm của google, việc tạo một giao diện phẳng giúp cho tận dụng hết các khoảng trống trên m{n hình v{ đó chính l{ mục tiêu mà các nhà thiết kế và nhắm tới các sản phẩm trên di động, không chỉ kể ra đ}y l{ Google, m{ tiếp theo giao diện phẳng có thể khá nội bật nếu bạn n{o đ~ dùng win8 để có thể cảm nhận thay đổi dõ dệt của microsoft 7 UI/UX Desgin Và một công ty đang dẫn đầu trên thị trường smartphone và hoạt động độc lập về giao diện và đ~ thực hiện thiết kế thay đổi giao diện hướng đến phẳng hơn, đó chính l{ Apple với sản phẩm hệ điều hành IOS7 các bạn có thể thấy giao diện phẳng được mọi công ty hướng đến như thế nào Từ hình trên để tay có thể so sánh một c|ch đơn giản về giao diện phẳng mà các công ty hay tập đo{n hướng tới, chính vì vậy thiết kế website cũng không nằm ngoài quy luật đó, v{ cũng hướng tới những website có giao diện phẳng giúp đ|p ứng được những người yêu giao diện phẳng 2.2 Xu thế cảm ứng Có thể nói, việc smart phone đang l{ những sản phẩm luôn luôn mang theo bên mình của mọi người và việc sử dụng của nó cũng cần có những tiện ích cho việc lượt webs, việc thiết kế website dành cho máy tính thì việc tối ưu hóa những gì mong muốn v{ điều hướng khách hàng bằng những click chuột, còn trên máy tính bảng v{ điện thoại thông mình thì lại phải tối ưu nó giúp cho việc thực hiện trên các sản phẩm một cách dễ dàng trên các sản phẩm smart phone đó là việc có những nút cực ít thay vao đó l{ c|c tính năng căm ứng giúp cho khách chỉ sử dụng cảm ứng để lướt web, đó chính l{ su hướng của tất cả chúng ta 2.3 Chuyển động và tương tác Affordance là từ dùng để chỉ một vật thể mà khi nhìn nó bạn có thể đo|n ra việc sẽ phải tương tác nó thế nào Ví dụ nhìn thấy quai ở cặp sách bạn biết nó được dùng để x|ch, d}y để đeo, nút để khoá xoay hay kho| kéo… Xu hướng làm các chuyển động như dấu hiệu tương t|c đ~ được nêu ra ở các dự b|o xu hướng trước đó Khi bạn không có một nút để bấm hoặc một icon để chọn, bạn có thể mất phương hướng khi cần hoàn thành nhiệm vụ đang mong muốn Có không ít những ứng dụng với rất ít chuyển động, có thể được sử dụng để hướng điều người dùng l{m theo c|c bước để hoành thành nhiệm vụ mong muốn 8 UI/UX Desgin 2.4 Menu nhưng lại không có menu Bình thường khi bạn viếng thăm trang web bao giờ cũng hiện c|c thanh menu để bạn điều hướng truy cập tốt hơn, thường c|c menu được thiết kê bên phải hoặc bên trái và ở trên đầu, tuy vậy với su hướng cảm ứng hóa, v{ hướng người dùng đến những chiễc điện thoại thông minh, vì vậy người ta cố gắng không hiển thị các menu giúp cho việc website chuyền tải được thông tin đối với người dùng nhiều hơn Th 9 UI/UX Desgin 3 Một số tính năng lưu ý khi thiết kế Web linh hoạt 3.1 Nhất quán về thương hiệu (Consistent) Với một trang web được sử dụng với cả m|y để b{n v{ m{n hình điện thoại, bạn sẽ thấy nó dễ dàng khi duy trì sự thống nhất về nhận diện thương hiệu Không cần một quy định chung để có sự liên lạc giữa các khách hàng trong thiết kế của bạn Vẻ bên ngoài và cảm giác của web linh hoạt luôn nhất qu|n trên c|c kích thước màn hình Spigotdesign.com duy trì một trải nghiệm độc đ|o trên c|c thiết bị Nó khiến cho người dùng dễ dàng nhận ra trang web dù họ truy cập bằng bất cứ thiết bị nào 3.2 Tính tiện dụng (Usability) Thiết kế web linh hoạt rất thân thiện với người dùng Không chỉ rằng người dùng thấy sự liên hệ tốt hơn với thương hiệu, dễ dàng nhận thấy nó trên thiết bị di động, họ còn quen với việc sử dụng nó Một kiểu thiết kế thống nhất với nội dung thống nhất l{ điều quan trọng vì người dùng không mong đợi sự khác biệt khi họ truy vập bởi các thiết bị khác nhau.Smashingmagazine đ~ giúp người truy cập luôn cảm thấy thoải mái khi họ sử dụng bất cứ thiết bị nào, duy trì những trải nghiệm tốt l{m tăng cơ hội người dùng quay lại trang web 3.3 Không có chuyển hướng (link) Thực tế khi bạn chỉ có 1 trang web cho mọi thiết bị, nó còn có nghĩa l{ bạn có URL giống nhau để đem nội dung tới người dùng Bạn không phải lo chuyển hướng do sự xung đột giữa các thiết bị.Khi quảng cáo một liên kết, bạn có thể chắc chắn l{ người dùng có thể truy cập trực tiếp vào nó, không quan trọng là họ ở đ}u, v{ c|ch họ truy cập vào trang web Ví dụ, khi bạn gửi email, nhiều khả năng người đọc sẽ mở email của bạn trên một thiết bị di động Bạn không muốn họ phải chuyển từ m{n hình để b{n hay m|y tính s|ch tay để họ có thể mở liên kết Mọi nội dung bạn quảng cáo nên sẵn sàng dù là trên mobile hay không Th.sỹ Nguyễn Hữu Phát 10