utphuong_18
New Member
Download miễn phí Quy trình thiết kế GUI cho Web site
Mục đích của giai đoạn này giúp Web site 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.
Các chuẩn bao gồm:
• Định nghĩa vùng của site, trang Web, các vùng trong một thẻDIV
•Chuẩn đặt tên cho nhãn CSS, ảnh
•Chuẩn đặt tên cho các thưmục chứa các thành phần của trang Web
•Chuẩn đặt tên cho tệp tin CSS, HTM, JS, XML
Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí
Tóm tắt nội dung tài liệu:
Địa chỉ: Phòng 1708, Toà nhà 18T1, Lê Văn Lương, Hà Nội, Việt Nam Điện thoại: 84-4-2513636Fax: +84-4-2513638
Email: [email protected]
Web site:
Bảo mật - © Bản quyền thuộc về iGURU Việt Nam 2008 Trang 1 4/30/2008
Quy trình thiết kế GUI cho Web site
Viết bởi: iGURU Việt Nam
Đăng tại: Blog’s iGURU
Ngày phân tích : 30/4/2008
Quy trình thiết kế GUI cho Web site dựa trên quy trình IWP 1.1 của iGURU Việt Nam.
Web là một kênh media mới, một kênh kinh doanh mới nhưng trong bài viết này iGURU Việt
Nam chỉ đề cập khía cạnh kỹ thuật của thiết kế giao diện Web. Khi thiết kế Web như một
media mới, quy trình thiết kế sẽ khác nhiều.
Bài viết của iGURU được đăng dưới dạng bản quyền Creative Commons Some Rights
Reserved, theo Attribution-NoDerivs 2.5.
Xem Creative Commons tại
commons
Thiết kế Giao diện dành cho Người sử dụng là một công việc trong quy trình phát triển một Web
site. Tại Việt Nam, nhiều doanh nghiệp vừa và nhỏ không quan tâm chất lượng phần mềm, dịch
vụ sau bán hàng mà thường quan tâm đến giao diện Web có đẹp hay không. Tuy nhiên đây lại là
hạn chế của hầu hết các doanh nghiệp thiết kế Web. Trong phạm vi cho phép, chúng tui xin trình
bày các bước xây dựng Giao diện Web cho người sử dụng, nhằm giúp các bạn đạt hiệu quả thiết
kế giao diện cao hơn.
Bài viết này không có tham vọng chỉ ra Marketing với Web như thế nào, nhưng việc hiểu về quy
trình làm Web giúp các Marketer có phương pháp phối hợp tốt hơn qua đó phối hợp với nhà
cung cấp dịch vụ Web của công ty, sản phẩm, dịch vụ đạt hiệu quả cao hơn.
Bài viết không đi sâu vào nghệ thuật Thiết kế Web, bài viết chỉ ra các bước nên làm với một dự
án thiết kế giao diện Web.
Tư vấn trực tuyến Yahoo: wwwiguru1 | Blog:
Quy trình được dựa trên Chuẩn IWP phiên bản 1.0 của IGURU. Bài viết có sử dụng 02 giao diện
của Website bán hàng trực tuyến, Web site tin tức do iGURU thiết kế.
Quy trình bao gồm các bước
Bước 1 Xác định yêu cầu của khách hàng.
Bước 2 Phác thảo ý tưởng trên giấy
Bước 3 Đánh giá mẫu phác thảo
Bước 4 Thiết kế đồ hoạ bản đơn sắc
Bước 5 Phối màu cho giao diện Web
Bước 6 Xây dựng tài liệu về chuẩn CSS, clientsite script, ảnh, folder cho trang Web
Bước 7 Sử dụng các ngôn ngữ đánh dấu, lập trình để thiết kế giao diện.
Bước 8 Test giao diện trên các trình duyệt
Bước 9 Chuyển mã nguồn tới bộ phận phát triển Web
1. Bước 1: Xác định yêu cầu của khách hàng.
Mục tiêu của giai đoạn này là xác định chính xác yêu cầu hay tư vấn cho khách hàng.
Yêu cầu là một điều kiện hay khả năng mà hệ thống phải tuân theo hay có.
Nhiều khi khách hàng cũng không biết họ cần gì, nên khi xác định yêu cầu bạn nên xây dựng
trước một biểu mẫu câu hỏi để lấy yêu cầu của khách hàng. Yêu cầu phải đạt những tiêu chí
sau:
• 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 Web site.
• 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. Bạn
phải nghiên cứu về yêu cầu chung của khách hàng trước khi tiếp cận.
• Xây dựng bảng câu hỏi logic để chuyển đổi sang phân tích yêu cầu nghiệp vụ, yêu cầu
hệ thống đơn giản, dễ dàng.
• Đặt độ ưu tiên, lọc và theo dõi các yêu cầu.
• Đánh giá khách quan các chức năng và hiệu năng.
Mẹo: để có thể hoàn thành Web nhanh chóng và chính xác nên đặt những câu hỏi:
• Sau 3 năm nữa Web site sẽ phục vụ mục đích gì?
• Hãy liệt kê các chức năng mà bạn nghĩ ra được và đặt theo thứ hạng: Bắt buộc, Mong
muốn và Tuỳ chọn.
• Bạn cho biết 03 Web site bạn ưa thích nhất, trong đó những điểm nào làm bạn thích và
những điểm nào bạn chưa thích?
• Nên sử dụng các công cụ vẽ sơ đồ Mindmap để phác ra các yêu cầu của giao diện
Bảo mật - © Bản quyền thuộc về iGURU Việt Nam 2008 Trang 2 30/4/2008
Tư vấn trực tuyến Yahoo: wwwiguru1 | Blog:
2. Bước 2: Phác thảo ý tưởng trên giấy
Mục tiêu của bước này là định hình bố cục của trang Web.
Nào giờ là lúc bạn thể hiện hoa tay của mình, để linh hoạt trong việc phác ý tưởng, bạn nên sử
dụng bảng vẽ, bút chì, thước kẻ và tẩy. Dựa vào kinh nghiệm thành công của bạn, bạn thấy
những tiêu chuẩn nào nên có, ví dụ các tiêu chuẩn sau của IWP 1.0:
• Màn hình chính của người dùng cuối 15”
• Banner không quá 1/3 màn hình thực của người sử dụng (màn hình thực là màn hình
của trình duyệt có thể xem được trang Web, đã bỏ đi các thanh tool bar của trình duyệt
Web).
• Mỗi Sitebar không lớn quá 25% chiều rộng trang Web.
• ....
Bạn cũng nên xây dựng chuẩn bố cục dựa trên nội dung đối với toàn bộ Web site. Web site là
tập hợp của những trang Web, mỗi trang Web tập hợp các nội dung có mối liên quan hay không
giữa các trang Web. Dựa vào nội dung, bạn chia trang Web làm 02 vùng:
• Vùng template (theo chuẩn IWP)
• Vùng hiệu chỉnh.
Vùng template là vùng không hiệu chỉnh hay hiệu chỉnh rất ít xuyên suốt các trang Web của
Web site.
Vùng hiệu chỉnh là vùng có thay đổi nội dung trong hầu hết các trang Web của Web site.
Bạn nên cân nhắc trước khi xác định vùng nào là vùng template hay vùng hiệu chỉnh, vì việc
này sẽ ảnh hưởng đến xây dựng mã CSS, HTML chung của giao diện Web site.
Bạn cũng nên quy chuẩn các đối tượng trong bố cục để dễ trình bày, quản lý, theo dõi. Ví dụ:
Ảnh là hình chữ nhật có đánh dấu x; chữ là đường kẻ,...
Nếu đây là một dự án phức tạp bạn nên tham khảo quy trình RUP và kết hợp với quy trình này
để ra một giải pháp quản lý dự án phù hợp hơn.
Bảo mật - © Bản quyền thuộc về iGURU Việt Nam 2008 Trang 3 30/4/2008
Tư vấn trực tuyến Yahoo: wwwiguru1 | Blog:
Ví dụ:
Hình minh hoạ 1
Bảo mật - © Bản quyền thuộc về iGURU Việt Nam 2008 Trang 4 30/4/2008
Tư vấn trực tuyến Yahoo: wwwiguru1 | Blog:
Hình minh hoạ 2
Bảo mật - © Bản quyền thuộc về iGURU Việt Nam 2008 Trang 5 30/4/2008
Tư vấn trực tuyến Yahoo: wwwiguru1 | Blog:
3. Bước 3: Đánh giá mẫu phác thảo
Mục đích của bước này là đá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 xem các bài viết khác tại iGURU Blog.
Bạn nên có tối thiểu 03 mẫu phác trên giấy, sau đó bạn treo lên tường và mời những người khác
cùng xem và đánh giá. Mẫu phác thảo đạt những yêu cầu phải trả lời được những câu hỏi như
sau:
• Họ thích mẫu nào?
• Mẫu thiết kế có đáp ứng các yêu cầu của khách hàng không?
• Tìm thông tin, chức năng có dễ không?
• Đứng xem, bạn có thấy bố cục có rời rạc không? Có thẩm mỹ không?
Nếu câu trả lời không đạt yêu cầu trên bạn nên ngồi lại và vẽ tiếp, điều này sẽ giúp bạn giảm chi
phí nhiều nếu bạn sử dụng máy tính để thiết kế. Sau khi chọn được một mẫu chúng ta chuyển
sang bước 4.
4. Bước 4: Thiết kế đồ hoạ bản đơn sắc
Mục tiêu của bước này là đá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.
Sau khi phác thảo xong, bạn sử dụng công cụ đồ hoạ máy tính để thiết kế mẫu giao diện Web.
Đầu tiên chúng ta cần xem ...