Đang tải... (xem toàn văn)
Tổng quan, thiết kế web
Tổng quan thiết kết WEB Chương Tổng quan thiết kế Web Phần – Xác định mục đích, yêu cầu Website cần thiết kế l l l Mục tiêu, yêu cầu WebSite Đối tượng phục vụ Chủ để WebSite Lâm Quang Vũ Vũ Tổng quan thiết kế Web 1.1 Mục tiêu, yêu cầu l l l Đề mục tiêu khái quát, ngắn gọn, rõ ràng Website cần thiết kế Là công cụ để đánh giá thành bại Website Mục tiêu phải dài hạn, bao trùm toàn kế hoạch phát triển Lâm Quang Vũ Vũ Tổng quan thiết kế Web 1.2 Đối tượng phục vụ l l Xác định loại đọc giả Website Tìm hiểu về: – – – – l Sự hiểu biết Trình độ Sở thích Kinh nghiệm duyệt Web … Thiết kế tốt = thích hợp cho dải rộng loại đọc giả có trình độ nhu cầu khách Lâm Quang Vũ Vũ Tổng quan thiết kế Web 1.3 Chủ đề l Giúp định hướng cho nhà thiết kế – – – – – – l Giáo dục Huấn luyện (online trainning) Tin tức Giải trí Diễn đàn trao đổi thảo luận Mua bán, quản lý… Xem ví dụ Lâm Quang Vũ Vũ Tổng quan thiết kế Web Ví dụ - Diễn đàn Lâm Quang Vũ Vũ Tổng quan thiết kế Web Ví dụ - Online training Lâm Quang Vũ Vũ Tổng quan thiết kế Web Ví dụ - tin tức Lâm Quang Vũ Vũ Tổng quan thiết kế Web Ví dụ Lâm Quang Vũ Vũ Tổng quan thiết kế Web Ví dụ - Online Shopping 10 Lâm Quang Vũ Vũ Tổng quan thiết kế Web Phần - Thiết kế giao diện l l l 11 Điểm khác biệt tài liệu thông thường trang WEB Một số vấn đề liên quan đến việc thiết kế giao diện Thiết kế giao diện WebSite Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website Logo Menu 12 Lâm Quang Vũ Vũ Header Content Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website x Layout 13 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website Table within a table 14 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website The outer table 15 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website The inner table 16 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website Centered with three columns 17 Lâm Quang Vũ Vũ Tổng quan thiết kế Web Really complicated design! 18 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.1 Điểm khác biệt tài liệu thông thường trang WEB l l 19 Giống nhau: phải trải qua phát triển chuẩn hóa Khác nhau: mối liên kết siêu văn bản, multimedia… cho phép người đọc truy nhập đến trang đơn lẻ mà khơng cần đến lời tựa đề Tìm kiếm nhanh đơn giản Có thể quay lại loạt liên kết Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.2 Một số vấn đề liên quan đến việc thiết kế giao diện l l l l l l l l 20 Thiết kế hướng tới người sử dụng Các giúp đỡ định hướng rõ ràng Khơng có trang cuối (dead-end) Băng thơng ảnh hưởng Đơn giản tính quán Tính ổn định trang Web Phản hồi đối thoại Tính tương thích trình duyệt khác (thay thế) Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.2.1 Thiết kế hướng tới người sử dụng l l l l 21 Người sử dụng đối tượng định thành bại Website Yêu cầu mức độ hoàn hảo thiết kế giao diện đồ họa Xây dựng kịch mẫu cho loại đối tượng sử dụng khác Cách tốt nhất: thử nghiệm nhận phản hồi từ đọc giả Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.2.2 Các giúp đỡ định hướng rõ ràng l Đọc giả trả lời câu hỏi: – – – l l 22 Đang đâu ? Có thể làm ? Có thể tiếp tới đâu ? Biểu tượng quán, dễ hiểu, theo chuẩn qui định Ln có khả quay lại trang chủ, trang chủ chốt Website Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.2.3 Khơng có trang cuối (deadend) l l l 23 Mỗi trang có liên kết Trang “dead-end” thất vọng, khả đến với trang khác Nên để liên kết trang chủ trang Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.2.4 Băng thông ảnh hưởng l l l 24 Sự kiên nhẫn đọc giả có giới hạn Tốc độ đơi yếu tố định đến việc lựa chọn Website Phân biệt thiết kế cho Internet Intranet Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.2.5 Đơn giản tính quán l l l 25 Tùy vào loại ứng dụng Đọc giả không ấn tượng phức tạp không lý Đặc biệt đọc giả phục thuộc vào thời gian thơng tin xác Các biểu tượng đơn giản, quen thuộc, quán tất trang Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.2.6 Tính ổn định trang Web l l l 26 Ổn định cấu trúc nội dung Cấu trúc: thành phần đặt chỗ hoạt động nhịp nhàng Nội dung: mối liên kết đảm bảo có đích đến, nội dung ln đảm bảo thích hợp phải cập nhật cho phù hợp với ngữ cảnh thời điểm đọc giả duyệt Web Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.2.7 Phản hồi đối thoại l l l 27 Chuẩn bị trước cho việc trả lời, đáp ứng đòi hỏi, góp ý đọc giả cách nhanh Ln có cung cấp địa để liên kết với “Webmaster” Lên kế hoạch nhân phụ trách lâu dài Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.2.8 Tính tương thích trình duyệt khác (thay thế) l l l 28 Không phải trình duyệt hiển thị trang web giống Lưu ý có đọc giả sử dụng web browser khơng có khả hỗ trợ đồ họa Sử dụng nhãn (tag) ALT HTML để thay Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website l l l l l l 29 Xác định kiểu chữ, màu sắc Xác định kích thước khung nhìn Xác định kỹ thuật, cơng cụ thiết kế Cắt đoạn, tóm lược thơng tin Hệ thống Menu điều khiển, liên kết trang Xác định cấu trúc WebSite Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3.1 Xác định kiểu chữ, màu sắc l Phông chữ phụ thuộc vào – – – – – l l 30 Đặ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 toàn Website Font tiếng Việt: VNI, TCVN3, Unicode… Lâm Quang Vũ Vũ Tổng quan thiết kế Web 10 2.3.2 Xác định kích thước khung nhìn l l 31 Phải làm cho đọc giả cảm nhận kích thước trang thơng tin, biết họ đâu, làm ? Lưu ý, hầu hết trang web không vừa khớp với hình 14-15 inch Lâm Quang Vũ Vũ Tổng quan thiết kế Web Ví dụ: 32 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3.3 Xác định kỹ thuật, công cụ thiết kế l Phụ thuộc nhiều yếu tố: – – – – – Môi trường hosting Đội ngũ thiết kế Chi phí thiết kế Băng thơng đường truyền … è Chi phí 33 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 11 2.3.4 Cắt đoạn, tóm lược thơng tin l Ln có số lợi điểm: – – – – l 34 Đọc giả có thời gian để đọc tài liệu hình Ln có nhu cầu muốn tìm phần thông tin chủ định, không nên chia cắt nhỏ, tóm lược q ngắn gây thất vọng Hình thức cách tổ chức đồng kinh nghiệm tìm kiếm, khám phá Thơng tin ngắn gọn, súc tích thích hợp với hình máy tính (bị giới hạn tầm nhìn) Việc áp dụng phải linh động, quán Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3.5 Hệ thống Menu điều khiển, liên kết trang l l l l 35 Hệ thống đk đồ họa phong phú, quán, mang tính gợi nhớ Hệ thống phím ấn đồng nhất, logic Có thể liên kết đến site khác quay lại site trước Các liên kết đến site có giá trị tăng giá trị website Lâm Quang Vũ Vũ Tổng quan thiết kế Web Ví dụ 36 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 12 2.3.6 Xác định cấu trúc WebSite l l l l 37 Hệ thống phân cấp Hệ thống trang nối tiếp Ô Lưới Mạng nhện Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3.6.1 Phân cấp 38 Lâm Quang Vũ Vũ Tổng quan thiết kế Web Hệ thống Phân cấp Dùng để tổ chức khối thông tin phức hợp l Là hệ thống dùng thơng dụng l Gần với mơ hình tổ chức giới thực l Dễ hình dung tổ chức website è Cái nhìn tổng quan từ trang chủ l 39 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 13 2.3.6.2 Nối tiếp 40 Lâm Quang Vũ Vũ Tổng quan thiết kế Web Hệ thống trang nối tiếp l l l 41 Biểu diễn thông tin tuần tự, bảng tường thuật nối thời gian Các thông tin tra cứu tham khảo: tự điển báck khoa, tự điển thuật ngữ Thích hợp cho hệ thống website nhỏ Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3.6.2 Ô lưới 42 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 14 Hệ thống Ô lưới l l l l 43 Danh sách khóa học, biến cố, kiện Từng đơn vị cấu trúc phải có cấu trúc cho chủ đề lớn nhỏ Khó hiểu xác định mối liên quan loại thông tin Rất tốt đọc giả có kinh nghiệm, có sẵn kiến thức hệ thống, chủ đề hệ thống Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3.6.4 Mạng nhện 44 Lâm Quang Vũ Vũ Tổng quan thiết kế Web Hệ thống mạng nhện l l l l 45 Tố chức hạn chế cho việc sử dụng mẫu thơng tin Mơ hình tự khám phá, khai thác triệt để ưu điểm hyperlink Cấu trúc phi thực tế nhất, khó hiểu, khó dự đốn cho đọc giả Thích hợp với site nhỏ, đọc giả chuyên nghiệp trình độ cao, tìm kiếm kiến thức chuyên sâu Lâm Quang Vũ Vũ Tổng quan thiết kế Web 15 Phần – Các thành phần Website l l l 46 Trang chủ (HomePage) Hệ thống Menu, Logo, định danh Các trang thành viên Lâm Quang Vũ Vũ Tổng quan thiết kế Web 3.1 Trang chủ l l l 47 Mọi website thiết lập quanh Homepage Điều kiện để website thành công Lưu ý sử dụng hệ thống đồ họa Lâm Quang Vũ Vũ Tổng quan thiết kế Web 3.2 Hệ thống menu,logo, định danh l l l 48 Hệ thống menu phải rõ ràng, đầy đủ giúp đọc giả hình dung cấu trúc, tổ chức website Cần quan tâm đến vị trí, thể (có hay khơng có hiệu ứng) Vị trí logo, định danh cơng ty phải cố định quán Lâm Quang Vũ Vũ Tổng quan thiết kế Web 16 3.3 Các trang thành viên l l 49 Xây dựng theo cấu trúc website Nhất quán, phù hợp với thuộc tính định dạng trước Lâm Quang Vũ Vũ Tổng quan thiết kế Web Phần – Một số vấn đề cần quan tâm l l l l 50 Thời gian quản lý Liên kết trang Web, quảng cáo Phụ lục, nguồn thông tin, trang giúp đỡ, FAQ Thiết kế trang Web cho mạng Interanet Lâm Quang Vũ Vũ Tổng quan thiết kế Web 4.1 Thời gian quản lý l l l l 51 Website cần cập nhật thông tin để đọc giả cảm nhận Nếu phần cập nhật thêm ký hiệu “New” Ghi thời gian cập nhật, số người truy cập… Nếu website phức tạp thêm trang “What new ?” Lâm Quang Vũ Vũ Tổng quan thiết kế Web 17 4.2 Liên kết trang web, quảng cáo l l Tạo liên kết đến trang thông tin (đối tác, khách hàng…) tăng uy tín Khi ổn định chuyển đổi hình thức kinh doanh, thu phí: – – – 52 Thuê đặt logo, quảng cáo Thu phí thành viên … Lâm Quang Vũ Vũ Tổng quan thiết kế Web 4.3 Phụ lục, nguồn thông tin, trang giúp đỡ, FAQ l l l 53 Thông tin báo cáo thường cô đọng web có thêm phụ lục FAQ (Frequently Asked Questions) lý tưởng cho việc thiết kế website hỗ trợ FAQ giảm thiểu nhân chi phí cho việc hỗ trợ, tư vấn khách hàng Lâm Quang Vũ Vũ Tổng quan thiết kế Web 4.4 Thiết kế trang web cho mạng Intranet l l l 54 Một số site thiết kế riêng cho tổ chức, sử dụng mạng LAN Mục tiêu : nâng cao thời gian truy cập, dẫn dắt vào sâu cấu trúc website địi hỏi thơng tin phải hấp dẫn, có giá trị Đừng để ý tới băng thông tốc độ trọng đến nội dung có giá trị hấp dẫn cho website Lâm Quang Vũ Vũ Tổng quan thiết kế Web 18 LAB2 – Khảo sát Website l l Khảo sát trang Web rút nhận xét cách thiết kế trang Web Làm quen với cách sử dụng số công cụ tiện ích hỗ trợ q trình thiết kế Web – – – l 55 Swish Frontpage Dreamweaver Sử dụng FTP Server Lâm Quang Vũ Vũ Tổng quan thiết kế Web 19 ... Tổng quan thiết kế Web Ví dụ - Diễn đàn Lâm Quang Vũ Vũ Tổng quan thiết kế Web Ví dụ - Online training Lâm Quang Vũ Vũ Tổng quan thiết kế Web Ví dụ - tin tức Lâm Quang Vũ Vũ Tổng quan thiết kế. .. Content Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website x Layout 13 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website Table within a table 14 Lâm Quang Vũ Vũ Tổng quan thiết. .. thiết kế Web 2.3 Thiết kế giao diện Website The outer table 15 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3 Thiết kế giao diện Website The inner table 16 Lâm Quang Vũ Vũ Tổng quan thiết kế Web 2.3 Thiết
