Qui ước khiến công việc của người thiết kế dễ dàng hơn. Nghĩa là, chúng ta không phải tìm kiếm giải pháp cho những vấn đề thông thường mà tập trung hơn vào chi tiết.
Qui ước thiết kế là những nguyên tắc “bất thành văn” đã được thừa nhận và đi vào tiềm thức trong văn hóa trực quan qua thời gian . Chúng giúp làm giảm lượng giải đoán cho người dùng. Qui ước khiến công việc của người thiết kế dễ dàng hơn. Nghĩa là, chúng ta không phải tìm kiếm giải pháp cho những vấn đề thông thường mà tập trung hơn vào chi tiết.
Một trong những kỹ năng quan trọng để thiết kế hiệu quả là hiểu rõ và ứng dụng được những qui ước này với lợi ích tối đa.
Qui ước thiết kế là gì?
Qui ước thiết kế có thể là màu sắc, hình dạng, kiểu mẫu, bố cục, phông chữ và chúng đều bao hàm những ẩn ý muốn truyền tải.
Thật vậy, có hàng trăm qui ước thiết kế web mà bạn muốn hiểu thông qua những ví dụ đơn giản sau:
Ở nhiều nơi trên thế giới đều biết, hình tam giác màu vàng trong tín hiệu giao thông mang ý nghĩa “ cảnh báo”. Điều này đã trở thành một qui ước trong phần mềm.
Khi nhấp chuột vào vùng màn hình, chẳng hạn như nút bấm ( hình chữ nhật được nổi cùng với hình xiên) sẽ thực hiện thao tác như theo qui ước. Nút này như những nút bấm trên các thiết bị như đài, ti vi và máy tính. Nhờ việc điều khiển một nút bấm, người dùng có thể kết hợp và thực hiện các thao tác.
Các trình duyệt web đầu tiên đã dùng màu xanh nhạt và định dạng gạch chân cho các text hyperlink. Qui ước này đã “ phải chịu đựng” suốt một thập kỷ qua, dù nó chưa phải là dễ đọc nhất.
Nếu bạn muốn tới trang chủ của một website, trước tiên bạn sẽ nhìn về phía trái trên cùng của màn hình để nhìn thấy lô gô hoặc nút bấm có từ “ trang chủ”. Dù không ai nói với bạn điều này nhưng bạn biết được từ kinh nghiệm.
Nếu bạn nhìn thấy một tập hợp của: Các từ khóa I được ngăn kết bởi I các đường nhỏ thẳng đứng tại phía cuối của trang web, bạn thừa nhận rằng chúng là một tập hợp của các đường liên kết chung trong phạm vi của trang web. Điều này cũng là một qui ước mà bạn đã biết được từ những website khác.
Cách qui ước hoạt động
Vì sao qui ước lại giá trị đến thế: Bởi chúng là những biểu tượng tắt, có khả năng tổ hợp truyển tải thông tin trực quan đơn giản nhất. Một vòng tròn đỏ quanh dấu chấm than có tác động đến tư duy hơn từ “ cảnh báo’. Thật thú vị, vì chúng mang lại cho bạn sự hiệu quả và tiết kiệm thời gian.
Vậy thì có nên thường xuyên sử dụng qui ước hay không? Có lẽ bạn chỉ nên sử dụng khi cần thiết.
Chúng là những nguyên tắc và như những qui ước tốt nhất, chúng có thể bị phá vỡ hoặc “ phải tuân thủ”. Bí quyết của những nhà thiết kế web là phải biết được khi nào qui ước bất lợi với chức năng thiết kế và khi nào nên sử dụng nó. Cũng như bất cứ hệ thống nguyên tắc nào khác, bạn phải hiểu chúng để lựa chọn cách theo . Điều đó cũng rất quan trọng vì có thể tránh được một bản thiết kế với qui ước không phù hợp.
Hãy xem những ví dụ sau:
Tại một website sử dụng một tam giác cảnh báo màu vàng khi đưa ra cho người dùng vài thông tin. Nhưng thực tế, nó chỉ là một tập tin chứ không có nội dung cảnh báo, bạn đã biết kiểu cảnh báo. Vậy đây là cách dùng sai qui ước.
Ở giao diện trên trang web khác đang được thiết kế lại thì dùng những nút bấm động trên thanh công cụ có hiển thị ngày. Để duy trì sự nhất quán, người thiết kế đã đặt lịch trên vùng động. Dù rõ ràng nó chỉ là lịch, song mọi người cố gắng nhấp chuột vào, vì nó nói, "hãy bấm vào tôi> hãy
nhấp chuột> điều gì đó xảy ra". Tôi khuyến nghị rằng hãy bỏ lịch đó đi và hãy để thanh công cụ chỉ dành cho các đường liên kết.
Nếu đoạn text màu xanh được sử dụng tại bất cứ nơi nào trên website thì ai đó sẽ thử nhấp chuột vào. Nếu nó không là đường siêu liên kết thì sẽ không cần thiết và hoàn toàn làm đảo lộn. Ở phương tây, biểu tượng mô tả website thường đặt tại phía bên trái trên cùng mỗi trang. Vị trí này là nơi mọi người có thể biết được họ đang ở đâu và điều hướng về phía trên. Nếu biểu tượng được đặt tại bất cứ vị trí nào khác sẽ mang lại sự thuận lợi cho người thiết kế và người dùng nhiều hơn.
56) những điều luật cơ bản khi thiết kế web
Những điều tưởng chừng giản đơn, ai ai cũng biết, nhưng Granny's Mettle sẽ cho chúng ta
thấy rằng không phải ai cũng ý thức được những điều đã biết ấy thật là quan trọng. Cơ bản
và cần thiết đó là những gì bài viết này muốn gửi tới những người thiết kế Web.
I. Điều luật cơ bản:
1. Người đọc không muốn phải kéo thanh cuộn ngang
Theo kinh nghiệm của bản thân, tôi cảm thấy rất khó chịu khi phải kéo thanh cuộn ngang để đọc nội dung của trang đó. Cho nên bạn phải không được thiết kế trang web khiến người đọc phải kéo thanh cuộn ngang, nếu không hậu quả sẽ rất lớn.
T heo kinh nghiệm của nhiều người thì bạn nên thiết kế web ở chế độ 800 x 600 Px vì hiện tại chỉ có 5% số người dùng màn hình 640 x 480 Px thôi. Với số lượng đó thì nghiêng về đa số vẫn hơn.
2. Thông tin quá dài ở một trang
Kéo chuột sang ngang để đọc đã là rất khó chịu rồi, nhưng kéo mãi kéo mãi xuống dưới để đọc thì cũng chẳng dễ chịu chút nào với người lướt web. Hơn thế nữa trong một nghiên cứu chỉ ra rằng đến 75% người lướt web chỉ "đọc lướt" thay vì "đọc từng chữ". Do đó một bài quá dài dễ làm người ta nản. Tuy nhiên nếu bài đó có nhiều thông tin, thì bạn nên chia ra làm 2, 3 trang cho nó cũng là một cách khắc phục.
Luật chung: Một trang web không nên để người đọc phải kéo 3 lần màn hình để đọc hết nội dung. Nếu bạn đang có vấn đề này thì hãy sửa chữa ngay đi. Tuy nhiên trừ trường hợp đặc biệt nếu đó là một chương sách thì không nói tới vì nếu người đọc đã biết nó là một chương sách và nội dung phù hợp với cái họ cần thì họ sẽ không ngại kéo đến cả chục trang đâu. Nhưng thường thì là nên như thế. (adsbygoogle = window.adsbygoogle || []).push({});
3. Dung lượng của một trang bất kỳ không nên nặng quá 50K
Nếu tất cả chúng ta đều tuân theo quy luật như 1+1 = 2 thì tốt quá! nhưng bạn cũng nên biết rằng chẳng có cái gì là tuyệt đối, bao giờ cũng có những chỗ "sunsilk". Tuy nhiên một trang web load dưới 5 giây sẽ để lại ấn tượng rất tốt cho người đọc.
Nguyên tắc thiết kế web 173
hình ảnh. Nếu bạn có một thư viện hình ảnh thì việc upload những hình bự chà bá lên mạng là không thể tránh khỏi, vì bạn muốn hình đó đủ to, đẹp để mà thu hút người xem chứ. Nhưng trong trường hợp này thì người xem đã xác định trước nên không thành vấn đề. Chung quy lại một trang load nhanh bao giờ cũng được đánh giá cao hơn một trang phải mất cả thế kỷ mới load xong.
p/s: Tuy nhiên phụ thuộc vào từng thời kỳ mạng, nếu đa số người dùng sử dụng ADSL thì dung lượng trang web của bạn có thể được nâng lên.
4. Đừng bắt buộc người đọc phải download plug-ins
Một điều khó chịu không kém là khi vào một trang nào đó bạn bị bắt buộc phải download một cái plug-in dở hơi nào đó để phải xem một cái gì đó mà bạn thậm chí còn chưa biết nó tốt hay dở nữa.
Thực tế plug-in có thể tạo một ấn tượng mạnh cho phần giao diện của trang web. Nhưng bạn nên nhớ rằng không phải ai cũng có plug-in đó mặc dù chúng ta đang sống trong kỷ nguyên CNTT. Để làm cho tất cả mọi người đến trang của bạn đều có thể xem được, bạn nên nghĩ đến một cách hoàn thiện hơn như là dùng HTML để thay thế.
II. Những quy định chung:
- Mẫu thiết kế sử dụng kích thước thật của màn hình với khung hình chuẩn của web theo chiều ngang là 778px. Phần lớn người xem vẫn xem ở mode màn hình 800x600, ngoại trừ một số trường hợp đặc biệt có thiết kế riêng.
- Sử dụng Mode màu RGB vì web chỉ hiển thị trên màn hình.
- Nếu dùng Photoshop để dựng layout, yêu cầu bắt buộc phải dùng Folder Set để quản lý layer, vì mỗi website khi thiết kế hoàn chỉnh, có hàng trăm layer.
- Việc dùng Flash cũng cần phải cân nhắc với những website thông tin vì nó chỉ thu hút người xem vào những lần truy cập đầu, sau đó sẽ chỉ làm cho website nặng lên không cần thiết. Khi làm file flash lớn, cần phải có phần loading.
- Khi thiết kế, cần đưa tương đối đầy đủ nội dung với màu sắc, font chữ đúng với website sau này. Khi đặt nội dung, nên để font chữ ở chế độ Smooth là none, ko nên để là Crisp vì khi ra kết quả cuối cùng (web page) sẽ khác với thiết kế.
- Không sử dụng các font chữ không chuẩn cho nội dung website, vì nếu máy người xem không có font đó thì sẽ hư toàn bộ layout. Nếu website sử dụng tiếng Việt, nên sử dụng các font Unicode chuẩn như Arial, Verdana, Tahoma, Times News Roman.
- Các website thương mại nên hạn chế sử dụng các đường cong, hình ảnh lớn, background lớn chiếm diện tích thông tin của website trừ khi có thể quản lý chúng. Việc sử dụng đường cong hay background sẽ gây rất nhiều trở ngại khi chuyển qua HTML.
- Cần nghĩ qua về việc làm sao chuyển chúng thành HTML trước khi thiết kế một thành phần nào.
- Thiết kế web cần tính toán làm sao để tương thích với cấu trúc HTML của website, nếu không, khi phân tích ra thành các trang web HTML sẽ trở nên rất khó khăn cho việc xây dựng nội dung cũng như lập trình.
- Trước khi thiết kế, cần có sitemap cụ thể, để việc trình bày thông tin trở nên rõ ràng, dễ thuyết phục người duyệt mẫu. - Nên xem mẫu thiết kế trên các loại màn hình khác nhau, tốt nhất trên màn hình CRT bình thường, vì đây là màn hình của người sử dụng. Tránh việc duyệt mẫu, xem mẫu bằng giấy in láng (hoặc rửa hình), hoặc màn hình laptop, LCD. - Màu sắc website cần nhẹ nhàng, phù hợp với mục đích của website, thông tin rõ ràng.
- Cần có một mẫu GUI Logic trước khi bắt tay vào thiết kế, GUI Logic này cần được duyệt qua bởi Người đối tác. GUI Logic là bản thiết kế thô, bao gồm các vị trí của các thành phần trên website, người thiết kế sẽ dựa trên đó để làm graphic. Bản GUI Logic này được tính toán trước
về mặt thẩm mỹ và quan trọng là usabilities. Chuyển trang web thành HTML
- Sau quá trình thiết kế web là quá trình phân tích, chuyển đổi mẫu thiết kế thành trang web HTML, cần theo các yêu cầu cụ thể sau:
- Chương trình dựng trang web, chương trình thích hợp nhất là Macromedia Dreamweaver, vì đây là chương trình do rất nhiều lập trình viên đang sử dụng để code trực tiếp, tuyệt đối không dùng Frontpage. Frontpage có thể giúp đơn giản cho người sử dụng nhưng việc sinh mã HTML rất phức tạp, đặc biệt là sinh ra những mã HTML ko cần thiết và gây rối cho người lập trình. - Cắt web html cần có độ tỉ mỉ cao, nếu thiết kế mẫu layout, mất từ 4->8h (không tính thời gian sáng tạo), thì việc cắt web mất từ 2->4h một trang
- Khâu thiết kế và khâu cắt web có vai trò rất quan trọng, vì sẽ tiết kiệm được thời gian cho các lập trình viên, tester sau này. Một trang web được cắt tốt không chứa các thành phần không cần thiết như mã HTML dư, hay các lỗi về cấu trúc HTML. Vì khi người lập trình làm việc, họ gần như chỉ làm việc trên code chứ không làm việc trên phần design.
- Cần tính toán rõ ràng, cụ thể việc áp dụng Template trong website. Template giúp cho 1 website với những trang có thành phần giống nhau được quản lý một cách thống nhất, nếu cần thay đổi những phần này, chỉ việc chỉnh sửa file Template này.
- Phối hợp chặt chẽ với bộ phận phụ trách nội dung website để bố cục, cấu trúc website rõ ràng hơn.
- Khi cắt web, cần đưa các style css ở file riêng, không đưa định dạng font trực tiếp trong website, việc đặt tên các CSS cần sự nghiêm túc, có sự thống nhất. Hạn chế việc định dạng font chữ bằng tag < font >. Nếu có các link, việc đặt các css: link, active, visited, hover là cần thiết. Nên định font chuẩn cho toàn website bằng cách định nghĩa lại tag < td >.
- Sử dụng file spacer.gif để trang web có thêm các tùy biến thay vì định kích thước ngang dọc cho các < table > hay < td >
. File spacer.gif là 1 file gif trong suốt có kích thước 1x1. Khi cần định chiều cao cho 1 td thì nên chèn file này vào td đó và định chiều cao cho file spacer.gif.
- Tránh việc Merge các Table lại với nhau quá nhiều, tối đa 1 cái. Việc này rất quan trọng, vì nó sẽ gây khó khăn và mất thời gian cho các lập trình viên khi làm việc. (adsbygoogle = window.adsbygoogle || []).push({});
- Cần xem kỹ lại cấu trúc, yêu cầu của bên thiết kế web, để có thể cho phép website co giãn theo kích thước màn hình hoặc cố định (nhỏ tối đa 800px). Nếu là các co giãn theo kích thước màn hình, cần tính toán thiết kế sao cho khi giãn ra không có những khoảng trống hình ảnh.
- NẾU LÀ 1 WEBSITE ĐỘNG HAY CẬP NHẬT THƯỜNG XUYÊN, TUYỆT ĐỐI KHÔNG DÙNG CHỨC NĂNG SLICE CỦA PHOTOSHOP HAY IMAGEREADY. Chức năng này chỉ thích hợp cho các website tĩnh vì HTML sinh ra rất phức tạp và có rối dẫn tới việc các lập trình viên không thể đọc hiểu hay chỉnh sửa được.
III. Những quy tắc khi sử dụng font chữ
1. Font phải dễ đọc
Nhiều người đồng ý rắng font chữ từ 12- 14 là font tiêu chuẩn được dùng trên web. Nếu to hơn
hoặc nhỏ hơn cỡ đó là bạn đã đặt mình vào "vùng nguy hiểm" rồi. Màu của font chữ cũng nên phù hợp với nền, đừng chọn nền và chữ một màu gần giống nhau hay quá tương phản dạng nền màu trắng chữ màu ghi. Font chữ màu nhạt trên nền tối rất khó đọc
2. Dùng font phù hợp.
Font chữ không nên quá rắc rối mà có thể làm người đọc mất tập trung, mà font chữ nên phù
hợp với nội dung của website. Ví dụ website cho trẻ em thì nên dùng font nghộ nghĩnh và nhiều mằu sắc, nhưng website cho người lớn thì nên dùng font ngay ngắn và rõ ràng.
3. Nên dùng một loại font
Bạn nên sử dụng cùng một loại font cho toàn bộ trang web của mình, kể cả kích thước của font nữa. Hãy hình dùng một trang web mỗi trang là một loại font thì nó sẽ nhìn ra như thế nào?
4. Chỉ nên dùng những font tiêu chuẩn
Nguyên tắc thiết kế web 175
cũng tạo ra một loại font mới. Nếu bạn may mắn kiếm được một font đẹp, thì hãy giữ cho riêng mình, đừng nên dùng trên trang web của bạn. Bởi vì chưa chắc gì người đọc của bạn lại may mắn giống bạn để có font đó. Cho nên lời khuyên của tôi là nên dùng font tiêu chuẩn như: Arial,