Giao diện mới của VnExpres?

Lâu lắm ko đọc Vnexpress, vào thử xem nó thế nào!
Cảm nhận đầu tiên là giao diện mới khá hơn giao diện cũ nhưng ads đặt không hợp lí, lấn át hết phần nội dung. Khi kéo xuống cuối trang thì thấy hổng một mảng (dưới phần ads). Có lẽ các bác FPT nên thuê người thiết kế chuyên nghiệp hơn thiết kế
Note: Chỉ có trang home thì bị thôi còn các trang khác thì đỡ rối mắt hơn.
Được old_movie sửa chữa / chuyển vào 20:43 ngày 20/05/2008

Giao diện mới hiện đại và tối ưu hơn nhiều mà. Tiết kiệm diện tích mà vẫn quảng cáo được nhiều. VNE giỏi thế chứ lị!

Coi vài ngày là quen rùi, công nhân cái này ổn hơn cái cũ

Hồi đầu thấy khó chịu nh nhìn mãi cũng thấy quen. H tôi thấy giao diện mới bố trí khoa học hơn hẳn giao diện cũ

Giao diện cũ dễ xem hơn , từ ngày sang giao diện mới cảm thấy ngại vào vnexpress .

Giao diện mới của VnExpress có một số ưu điểm:
- Đưa được nhiều lượng thông tin hơn lên ngay trang chủ.
- Người đọc có thể xem và tìm ngay đến các chủ đề nhỏ, ví dụ trong chủ đề "Văn hóa" mình biết là có "Âm nhạc", "Thời trang", "Điện ảnh", ... và có thể bấm ngay vào để xem các chủ đề đó.
- Đưa cả video vào trang chủ làm trang báo đa dạng, sống động hơn.
Nhược điểm:
- Chữ bé quá, chỉ vào các bài viết mới có chữ to dễ đọc
- Quảng cáo dày hơn, đến một nửa trang bên phải là quảng cáo
Mà không hiểu chữ GL trong http://vnexpress.net/GL/Home có nghĩa gì?

Global.

Giao diện mới chán quá

Copy từ www.lacaiviet.com

Sau một lần thử thay đổi không thành công, hôm nay VnExpress chính thức giới thiệu giao diện mới của mình. Phải nói đây là một điều hết sức bất ngờ và hoàn toàn không được báo trước (ngay cả sau khi đã chính thức ra mắt thì trên trang chủ của VnExpress vẫn không có bất kỳ bài viết giới thiệu nào về giao diện mới). Từ góc nhìn của một người đọc báo, thiết kế mới thể hiện một bước nhảy tất yếu của VnExpress nhằm thể hiện mình như là một tờ báo điện tử quan trọng với nhiều nội dung và thông tin - một điều mà giao diện đơn giản trước đây đã không làm được.
Giao diện mới của VnExpress thể hiện những gì? Bài viết này sẽ là góc nhìn của tớ từ góc độ của người thiết kế web.
Có thể nói thiết kế mới của VnExpress, với vị thế là một trong những trang web có lượng truy cập hàng đầu ở Việt Nam, đã đánh dấu rất nhiều điều mới trong phong cách thiết kế của các trang web chính thống lớn ở Việt Nam1. Luôn lấy làm khó hiểu (và khó chịu) khi mà giới thiết kế web Việt Nam dường như rất chậm trong việc bắt nhịp với xu hướng thiết kế mới của thế giới, những thay đổi của VnExpress trong thiết kế mới làm tớ rất bất ngờ - và vui mừng. Tuy nhiên, một cái nhìn kỹ hơn lại cho thấy rằng những vấn đề bấy lâu nay của thiết kế web ở Việt Nam còn được thể hiện rất rõ và điều đó không khỏi khiến tớ mất đi phần nào ?ohứng thú?. Nhưng trước khi đi vào phân tích những gì chưa được, có lẽ, hãy thử duyệt qua những gì mà họ đã làm được (mà theo tớ có ý nghĩa rất quan trọng).
Vui mừng?
Cái chết của thiết kế sử dụng bảng?
Theo tớ, đây là một bước tiến dù rất muộn màng nhưng có một ý nghĩa hết sức quan trọng. Tại sao nó quan trọng? Có lẽ tớ cần một chút giải thích cho những bạn ?ongoại đạo?.
Thiết kế web, đi đến gốc của vấn đề vẫn là cách để xắp xếp thông tin trên màn hình trang web. Làm thế nào để hình ảnh xuất hiện bên trái, tiêu đề và nội dung xuất hiện bên phải? Một trong nhiều cách là bạn vẽ ra một cái bảng với 2 cột, cột bên trái bạn bỏ hình ảnh, cột bên phải bạn lại chia làm 2 thành 2 dòng, dòng trên để chứa tiêu đề và dòng ở dưới để chứa nội dung:

Đây là cách tương đối ?ohiệu quả? và dễ hiểu khi thiết kế. Đối với người xem, miễn là họ xem được thì sẽ chẳng có khác biệt gi để họ phải quan tâm; Nhưng đối với những người trong chuyên ngành, nó đặt ra nhiều vấn đề cần phải giải quyết:
* Về mặt ý nghĩa, bảng vốn được dùng để trình bày thông tin phân loại liên quan với nhau theo dòng hoặc theo cột (ví dụ như bảng thời khoá biểu). Việc ?olợi dụng? khả năng chia cột và dòng của bảng để bố trí nội dung không liên quan với nhau là ?osai nguyên tắc?.
* Việc làm ?osai nguyên tắc? có những hệ luỵ của nó. Giả sử như bạn có khoảng 10 trang sử dụng bảng cấu trúc như bố cục trên. Đến một thời điểm nào đó, bạn lại muốn ảnh ở bên trên, tiêu đề ở dưới và dưới nữa là nội dung thì bạn không có cách nào khác là phải sửa từng trang một. Sẽ dễ dàng hơn nếu như nội dung được đánh dấu theo đúng mục đích của nó.
* Ngoài ra, sự xuất hiện của các thiết bị di động có khả năng duyệt web hạn chế (không có khả năng hiển thị các bảng cấu trúc phức tạp) khiến cho những thiết kế này trở nên vô dụng.
Thực tế này nhanh chóng được nhận ra và từ đó có sự ra đời của mã CSS cho phép bạn định vị các thành phần trên màn hình sử dụng một vài nguyên tắc được qui định sẵn. Giới thiết kế web chuyên nghiệp trên thế giới được khuyến khích chuyển sang sử dụng phương thức mới đúng đắn hơn. Mặc dù phạm vi bài viết này không cho phép đề cập chi tiết, lợi ích của điều này là rất rõ ràng, được minh chứng và thừa nhận. Thế nhưng, mặc cho cả thế giới xung quanh thay đổi, dân thiết kế web Việt Nam dường như vẫn ?odính cứng? với cách thiết kế cũ. Nếu bạn quan tâm và thử xem mã của các trang web, bạn sẽ thấy toàn những mã tạo ra các cấu trúc bảng vô nghĩa phục vụ cho mục đích trang trí.
Trong thiết kế mới của VnExpress, đã không còn sử xuất hiện của những cái bảng vô nghĩa - tất cả đều được thiết kế sử dụng các thẻ định vị ?odiv? (viết tắt của ?odivision?) để chia các khu vực nội dung và sử dụng CSS đễ xác định vị trí của chúng trên màn hình. Với tư cách là trang web có nhiều người truy cập nhất ở Việt Nam, đây thật sự là một bước ngoặt lớn của giới thiết kế web Việt Nam.
Sự chú ý trong chi tiết
Thiết kế mới đã biết tận dụng những chi tiết rất nhỏ trong thiết kế để làm nổi bật nội dung và ấn tượng tổng thể về giao diện.
Thành công của một thiết kế chỉ phụ thuộc có lẽ một nữa ở những quyết định về bố cục. Nửa còn lại là nhờ vào những chi tiết cực kỳ nhỏ mà mặc dù một mình nó trông như vô nghĩa nhưng tổng hợp lại tạo những hiệu ứng không thể ngờ tới. Một phần rất quan trọng trong nghề thiết kế, giúp phân biệt đẳng cấp, theo tớ là đi tìm và hoàn thiện những chi tiết đó.
Tạo bóng đổ cho một cột nội dung nếu tách riêng lẽ không đem lại cảm xúc gì, và cũng chẳng ai hơi đâu để ý đến việc có một đường viền mỏng 1 pixel xung quanh cột nội dung cách nó 2 pixel. Nhưng chính những chi tiết đó đã đem lại cho giao diện mới của VnExpress cảm giác chiều sâu, khác hẳn với cái cảm giác ?ophẳng lỳ? như VietnamNet.

? và thất vọng
Rất đáng tiếc, trên đây là hai điểm duy nhất đáng kể mà tớ có thể liệt kê như những tín hiệu đáng hoan nghênh đứng từ góc độ chuyên môn trong phong cách thiết kế mới. Đáng thất vọng hơn, dường như đó chỉ là kết quả xuất phát từ sự ?ovô tình? chứ không hẳn xuất phá từ những ý tưởng nền của người thiết kế. Điều này thể hiện rất rõ khi nhìn thiết kế một cách toàn diện - bởi ở góc nhìn đó, thiết kế mới dường như chỉ là một món ?othập cẩm? của những hộp tin. Nhưng trước khi đề cập đến chi tiết này, thiết kế mới có một vài điểm rất đáng chú ý mà theo tớ là bắt nguồn từ cách thiết kế không theo bất kỳ nguyên tắc gì.
Thiết kế cho thiểu số
Tất nhiên, không một thiết kế nào có thể thoả mãn được tất cả mọi người. Nhưng đứng trước tình thế đó, người thiết kế sẽ cố gắng để thoả mãn đại đa số người dùng. Người thiết kế giao diện mới của VnExpress làm điều ngược lại.
Màn hình của bạn có độ phân giải bao nhiêu? 800-600? Bạn xem được 3/4 trang. 1024-768? Bạn xem được 95% bề rộng của trang. Theo số liệu từ khách xem Người Tập Viết, điều đó có nghĩa là hơn 70% người dùng Việt Nam không ai xem được trọn vẹn thiết kế của VnExpress mà không phải kéo thanh trượt ngang của cửa sổ trình duyệt.
Cập nhật: Số liệu về việc ở độ phân giải 1024-768 màn hình không hiển thị hết trang web có lẽ là không chính xác kể từ Windows XP. Xem phản hồi về một cách giải thích về vấn đề này. Lập luận trong phần này vì vậy có lẽ không còn được áp dụng.

Người thiết kế giao diện mới của VnExpress đã thực hiện một quyết định táo bạo (mà rất đáng hoang nghênh) là chính thức hỗ trợ độ phân giải mặc định là 1024-768. Bấy lâu nay, không muốn bỏ mất một lượng người dùng rất lớn ở Việt Nam còn sử dụng màn hình với độ phân giải 800-600, các trang web chính của Việt Nam đều được thiết kế để có thể ?ovừa khít? với khung màn hình 800-600. Giới hạn này đã ảnh hưởng một phần không nhỏ đến khả năng hiển thị thông tin của trang web. VietnamNet khi thiết kế lại cũng được thiết kế cho khung màn hình này.
VnExpress đã phá lệ, và ở đây phải ghi nhận cố gắng của người thiết kế để đảm bảo rằng ngay cả ở độ phân giải 800-600 thì phần nội dung chính vẫn được hiển thị trọn vẹn trong khung hình. Tuy nhiên, việc ngay cả ở độ phân giải 1024-768 bạn cũng không thể xem hết được toàn trang thì quả thật hơi khó hiểu. Điều đó làm cho tớ có xu hướng nghĩ rằng tất cả những quyết định về thước đo đều được chọn một cách cảm tính, và rằng việc khung nội dung chính lọt vào phần màn hình ở độ phân giải 800-600 cũng chỉ là một sự may mắn tình cờ.
Mặt khác, tớ đang tự hỏi những công ty đăng quảng cáo ở cột bên phải khi nào sẽ lên tiếng phản đối khi thấy những hình ảnh quảng cáo của mình không được hiển thị đầy đủ trên hơn 70% người xem.
Hộp chồng lên hộp
Bạn có cảm giác giao diện mới hơi bị? rối loạn? Tớ tin rằng đó là cảm giác chung chứ không phải của riêng bạn. Và lý do? sự sắp xếp vô trật tự của các hộp thông tin.
Một đặc điểm dễ nhận thấy khi nhìn vào thiết kế mới của VnExpress là thiết kế theo khối hộp - nói cách khác, các khối thông tin liên quan đến nhau được đóng gói vào những cái hộp vô hình do chủ đích của người thiết kế. Cách thiết kế này có cái lợi là nó giúp khoanh vùng thông tin và khiến cho thông tin trông có vẻ như được sắp xếp một cách ?ongăn nắp? và có ?otrật tự? trong một khu vực nhỏ. Tuy nhiên, những gì trông có vẻ trật tự ở một khu vực nhỏ dễ dàng chuyển thành một tập hợp mất trật tự khi nhìn toàn bố cục nếu người thiết kế không để ý:

Khái niệm về ?oGrid Design? là một cách hiệu quả để tránh tình trạng này, với ý tưởng cơ bản là sắp xếp những khối hộp này ?ocanh lề? với nhau - tức nếu bạn nhìn theo một cạnh của một khối hôp thì nó sẽ được tiếp nối bởi cạnh của những khối hộp kế tiếp. Điều này có lẽ xuất phát từ một ghi nhận đơn giản là người xem thường có xu hướng sử dụng các ?ocạnh? của hình hộp để di chuyển. Việc các khối hộp không được sắp xếp thẳng với nhau, đặc biệt là khi cạnh của hộp trên bị so le với cạnh của hộp dưới một khoảng nhỏ sẽ có xu hướng làm đứt đoạn quá trình đó - tạo cảm giác rối.
Tuy nhiên, có vẻ như người thiết kế VnExpress đã không biết và không để ý về điều này, và kết quả là khi mà bạn tập trung đọc một khung nội dung, mọi thứ dường như rất trật tự nhưng một khi rời mắt ra xa màn hình, bạn dường như vẫn không tìm ra được một trật tự để đi theo. Những đường kẻ trong hình minh hoạ lấy từ khung thiết kế trong giao diện của VnExpress mô tả những nét chính mà khi mắt theo không bắt gặp được sự liên tục trong cách sắp xếp các khối hộp, tạo cảm giác mọi thứ như hơi bị ?orối?.

Phải thừ nhận là cách chia nội dung theo ?ohộp? như của VnExpress là rất hiệu quả, nhưng rất đáng tiếc, cách thiết kế lại không thể hiện được điều đó.
Thay bảng bằng hộp
Ở phần đầu tớ có đề cập rằng việc VnExpress lần đầu tiên chọn cách thiết kế không sử dụng bảng là một tín hiệu đáng mừng, tuy nhiên, cách người thiết kế chuyển đổi chứng tỏ rằng họ vẫn chưa nắm rõ các kỹ thuật tạo mã thiết kế. Thử xem qua mã nguồn của trang web. Tưởng như việc không sử dụng mã tạo bảng sẽ khiến cho mã trở nên gọn nhẹ hơn, nhưng bạn sẽ gặp điều trái ngược. Nói một cách đơn giản, người thiết kế thay vì sử dụng bảng để chi nội dung làm 3 ô thì anh ta lại tự vẽ ra 3 ô riêng biệt, và bỏ ba cái hộp đó vào một cái hộp lớn hơn - hộp trong hộp. Cuối cùng, vì mỗi ô lại cần phải được định vị riêng, rất có thể số lượng mã hoá ra lại nhiều hơn trước. Và nhìn vào những dòng mã, bạn chẳng nhận ra cái gì là cái gì - cũng giống như trong trường hợp thiết kế bằng bảng.
Dành cho những ai trong chuyên môn: thẻ ?odiv? - theo tên của nó là viết tắt của chữ ?odivision? tức khu vực. Mục đích của nó là để nhóm các khối thông tin liên quan với nhau. Những người mới bắt đầu chuyển sang thiết kế bằng CSS và XHTML thường có xu hướng lợi dụng thẻ này bao quanh tất cả những gì cần được định vị trên màn hình. Điều này chỉ làm rối thêm mã.

Hệ quả của điều này là gì? Đó là khi bạn xem trang web bằng trình duyệt không hỗ trợ CSS (đa số các trình duyệt di động), bạn sẽ thấy trang web như thế này:

Theo chuẩn hay không theo chuẩn?
Liệu có thể nói VnExpress là trang web lớn đầu tiên thiết kế theo chuẩn? Câu trả lời đáng tiếc là không. Dễ dàng nhận ra điều này khi trang web hoàn toàn không cho biết mã của nó được thiết kế theo chuẩn nào. Điều đầu tiên mà bất kỳ ai học về thiết kế web theo chuẩn XHTML là thêm vào một thuộc tính đơn giản để ghi chú báo cho trình duyệt biết mã của trang web sẽ được viết theo chuẩn nào.
Một lần nữa dành cho những bạn ngoại đạo: HTML là ngôn ngữ dùng để mô tả một trang web. Trình duyệt sẽ đọc và tái hiện lại trang web đến người dùng. Hiện nay có một vài ?ochuẩn? được đưa ra nhằm khắc phục yếu điểm của HTML truyền thống của HTML là nó quá ?othoải mái? không có quy tắc ràng buộc gây khó khăn cho trình duyệt trong việc diễn dịch để hiển thị như ý người thiết kế. Việc khai báo chuẩn sẽ giúp trình duyệt ?obiết trước? những gì mà nó sẽ có thể gặp, từ đó để hiển thị trang web một cách chính xác theo ý của người thiết kế.
Chỉ là một thuộc tính đơn giản, nhưng việc thiếu nó là một bằng chứng rất rõ ràng cho thấy người thiết kế hoàn toàn không biết gì về nó.
Mặt khác, việc thiếu thuộc tính này cũng là một điều hơi khó hiểu. Theo như tớ biết thì phần lớn các công cụ thiết kế web (như Dreamweaver, GoLive, Visual Studio) đều tự động thêm thuộc tính này vào. Ngay cả khi bạn không biết gì về chuẩn mã thì các chương trình này cũng sẽ giúp bạn tránh trường hợp này.
Kết luận
Trên đây là những điểm chính mà tớ ghi nhận đứng từ góc độ chuyên môn (kỹ thuật thiết kế nói chung và thiết kế web nói riêng). Vẫn còn rất nhiều những điểm gây thắc mắc, ví dụ như việc dung lượng của trang web lên 1.33 MB (lưu trang web sử dụng chức năng ?oSave Page? của trình duyệt) và bạn phải tải lại khoảng 90% mỗi lần hiển thị (cách thiết kế khiến chức năng bộ đệm của trình duyệt không hoạt động hiệu quả, buộc bạn phải tải lại mọi thứ dù rằng bạn đã từng tải nó trong những lần xem trước).
Dung lượng là một trong những yếu tố rất quan trọng đối với những trang web có số lượng người truy cập lớn như VnExpress. Không những người dùng ở Việt Nam với tốc độ đường truyền chậm sẽ phải đợi lâu trước khi trang web hiển thị đầy đủ, nếu như mỗi lượt xem sẽ phải chuyển hơn 1MB dữ liệu sẽ thực sự là một sự lãng phí về băng thông.
Là dân thiết kế web vốn rất thất vọng về mặt bằng chung về thiết kế của các trang web Việt Nam, đối với tớ, những thay đổi trong giao diện mới của VnExpress ít nhiều cũng đem lại một chút lạc quan - hay đúng hơn là ?othay đổi không khí? cho những thiết kế nhàm chán khuôn mẫu của các trang tin trực tuyến. Tuy nhiên, những gì mà thiết kế mới thể hiện cho thấy rằng sẽ vẫn là một chặng đường rất dài trước khi thiết kế của các trang web Việt Nam bắt kịp mặt bằng chung trên thế giới.
CHÚ THÍCH
1. khi nói ?ocác trang web ?ochính thống lớn? - ý tớ muốn nói đến các trang web của các tổ chức/công ty/báo chí với số lượng người truy cập lớn. Có rất nhiều điều rất dễ dàng áp dụng với các trang web của cá nhân nhưng không phải lúc nào cũng đáp ứng được những yêu cầu khắt khe của những trang web như vậy. [?]
Copy từ www.lacaiviet.com

Cá nhân tôi thi không thích. Nhiều người xung quanh cũng kêu ca là khó nhìn.