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 Website. 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 tôi 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...
Quy trình phát triển GUI cho Web site. 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 Website. Tại Việt Nam, nhiều doanh nghiệp vừavànhỏ không quan tâm chất lượng phần mềm, dịch vụ sau bán hàng mà thườngquan tâm đến giao diện Web có đẹp hay không. Tuy nhiên đây lại là hạnchế của hầu hết các doanh nghiệp thiết kế Web. Trong phạm vi cho phép,chúng tôi 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ápphố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ôngty, 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. 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 sau: 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 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 hoặc tư vấncho khách hàng. Yêu cầu là một điều kiện hoặc khả năng mà hệ thống phảituân theo hoặc 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êucầ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ủakhách hàng. Yêu cầu phải đạt những tiêu chí sau:
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:
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ệcphác ý tưởng, bạn nên sử dụng bảng vẽ, bút chì, thước kẻ và tẩy. Dựavà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êncó, ví dụ các tiêu chuẩn sau của IWP 1.0:
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ậphợp các nội dung có mối liên quan hoặc không giữa các trang Web. Dựavào nội dung, bạn chia trang Web làm 02 vùng:
Vùng template là vùng không hiệu chỉnh hoặc 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 hoặc vùnghiệu chỉnh, vì việc này sẽ ảnh hưởng đến xây dựng mã CSS, HTML chungcủ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ảnlý, theo dõi. Ví dụ: Ảnh là hình chữ nhật có đánh dấu x; chữ là đườngkẻ,... 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ếthợ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. Ví dụ:  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ườngvà mời những người khác cùng xem và đánh giá. Mẫu phác thảo đạt nhữngyêu cầu phải trả lời được những câu hỏi như sau:
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. 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áchhà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 bố cục trên Máy tính cóhợp lý không, chính vì vậy chúng ta chưa phối màu cho các mảng màu,đường kẻ, chữ cho trang Web, tất cả các bạn để thang màu xám để bướctiếp theo phối màu dễ dàng hơn. Nếu bạn phối màu trong giai đoạn nàybạn sẽ phải đối mặt với hai rủi ro: Sai bố cục và sai phối màu. Tuyệtđối không để màu trắng và đen với những vùng muốn phối màu khác hai mầutrên. Nếu bạn sử dụng công cụ đồ hoạ, chúng tôi đề xuất sử dụng Photoshop CS2để áp dụng các chuẩn thiết kế giao diện dễ dàng hơn. Ví dụ đặt tên, sắpxếp folder, phân cấp folder, áp màu cho layer,... Với iGURU, một số chuẩn dùng trong thiết kế đồ hoạ vi tính được định nghĩa như sau:
Ví dụ:  Khi bản đơn sắc đạt yêu cầu, bạn chuyển sang phối màu cho giao diệnWeb. Khi phối màu cho giao diện bạn nên tuân thủ các phương pháp chẳnghạn như sau:
Mẹo: Giai đoạn phối màu rất dễ bị ảnh hưởng bởi màu sắc của ảnh ( ví dụ banner). Đây là điểm có lợi nhưng cũng là điểm có hại cho thiết kế giao diện Website. Nhiều người ban đầu chọn ảnh cuốn hút và truyền đạt chính xácthông điệp của Web site và giờ họ chèn vào để lấy cảm hứng thiết kế từảnh. Một số người không có kiến thức về media hoặc không có đánh giáđúng mức hiệu quả của ảnh đem lại cho Web site, họ chọn những tấm ảnhkhông đúng thông điệp, từ đó họ thiết kế nhầm mầu sắc do ảnh hưởng từảnh. Ví dụ:   Bước 6: Xây dựng chuẩn CSS, clientsite script, ảnh, folder cho trang Web Mục đích của giai đoạn này giúp Web site dễ bảo trì, giảm mã, nộidung hiển thị tốt hơn với tỉ lệ mã thấp, linh động trong định nghĩakiểu. Và quan trọng hơn, nó giúp cả quy trình sản xuất, triển khai, bảotrì ít rủi ro hơn. Các chuẩn bao gồm:
Ví dụ trong một thẻ DIV chúng ta định nghĩa như sau:
Bước 7: Sử dụng các ngôn ngữ đánh dấu, lập trình để thiết kế giao diện Mục đích của giai đoạn này là thiết kế Web bằng HTML, CSS ( Flash, JS, AJAX, … nếu có) Chúng ta chuyển tải giao diện đồ hoạ sang trang Web.
Công việc của một người thiết kế Web lúc này giống như một người lậptrình nhiều hơn là một nhân viên thiết kế. Anh ta chỉ cần hiểu rõ cáchbiểu diễn phông chữ, màu sắc, canh lề, các loại đường, nét, chiều cao,độ rộng, ảnh nền các loại, ảnh, xác định vị trí cho các khối… sao chogiống các bản thiết kế đồ hoạ nhất. Mẹo: người thực hiện thực hiện bước này phải hiểu thấu đáo vềHTML, CSS, JS nếu không giao diện sẽ hiển thị không như bản vẽ đồ hoạvi tính trên nhiều trình duyệt khác nhau. Bước 8: Kiểm thử giao diện trên các trình duyệt Mục tiêu của giai đoạn này là kiểm soát việc hiển thị chính xáctrang Web như giao diện đồ hoạ của bước 5 trên các trình duyệt Web khácnhau. Tối thiểu chúng ta phải kiểm soát việc hiển thị đúng như giao diện thiết kế trên các trình duyệt:
Mỗi Web site đều nhắm đến một số phân khúc khách hàng, có một định vịvà thị trường mục tiêu. Rất ít Web site có thể phục vụ tốt toàn bộ cáctrình duyệt Web, nên bạn cần nghiên cứu người dùng cuối mục tiêu củamình dùng trình duyệt Web nào và thiết kế sao cho hiển thị tốt trên cáctrình duyệt đó. Nghe đến đây chắc hẳn bạn sẽ vò đầu bứt tai sao mà phức tạp thế! Bạnyên tâm, với kinh nghiệm của iGURU Việt Nam, một người chưa biết về CSSchỉ cần học với chuyên gia 4 giờ/ ngày trong vòng 1 tuần là có thể sửdụng thành thạo CSS. Mẹo: người thực hiện bước này nên tìm các đoạn mã hack CSS đểứng dụng vào việc thiết kế trang Web cho nhiều trình duyệt. Tải sáchtại: http://iguru.vn/forum/forumdisplay.php?f=33 Người thực hiện việc thiết kế CSS cũng nên theo dõi người truy nhập vàoWeb ( ví dụ từ Google Analytics), từ đó tổng hợp số liệu sử dụng trìnhduyệt Web của họ để có thể liên tục cập nhật mã CSS cho trang Web, giúptrang Web hiển thị tốt theo xu hướng sử dụng trình duyệt của người dùngcuối. Bước 9: Chuyển mã tới bộ phận lập trình Mục tiêu của giai đoạn này là chuyển các trang Web hiển thị tốt trêncác trình duyệt chính cùng với các thành tố của trang Web tới bộ phậnlập trình. Phải chắc chắn bộ phận lập trình cũng hiểu được yêu cầu bắt buộc củagiao diện và chuẩn thiết kế của bước 6. Thông thường các yêu cầu vàchuẩn này được quản lý dự án hoặc trưởng nhóm thông báo trước để các bộphận không hiểu nhầm nhau. Các yêu cầu bắt buộc và chuẩn thiết kế không chỉ được chuyển tới bộphận lập trình mà còn chuyển tới bộ phận kiểm thử ( test) để họ có thểxây dựng các kịch bản kiểm thử, thông qua đó họ kiểm tra được chấtlượng của dự án. Nếu có phát sinh lỗi, họ sẽ thông báo lại bộ phận thiết kế và lập trình để sửa lỗi.
Nếu bạn cũng đang có ý định muốn trở thành một người thiết kế web một cách chuyên nghiệp, bạn có thể tham khảo một trong các khóa học tại Việt Tâm Đức một công ty chuyên hoạt động trong lĩnh vực thiết kế web, đào tạo lập trình web.
|
Chủ Nhật, 26 tháng 10, 2014
Quy trình thiết kế giao diện website dành cho người sử dụng
Đăng ký:
Nhận xét (Atom)