strange_person2710
New Member
Rof Tentik, cây viết của The Next Web và cũng là một nhà thiết kế đã tạo nên bộ giao diện phẳng mới cho Facebook nền web. Bạn đọc có thể trải nghiệm giao diện này nhờ extension có trên Chrome.
Trong khi ứng dụng di động ngày càng được cải tiến, giao diện web của - mạng xã hội lớn nhất hành tinh lại đang bị coi là lỗi thời. So với các trang khác như Instagram, Twitter, Vine,… giao diện của Facebook rõ ràng phức tạp và rối rắm hơn nhiều.
Do vậy, nhà thiết kế Rof Tentik đã tạo nên bộ extension có tên gọi Flat Design dành cho trình duyệt Chrome. Dựa trên phong cách thiết kế giao diện phẳng đang là xu hướng của vài năm trở lại đây, Flat Design đã đem lại một luồng gió mới cho giao diện Facebook nền web. Rof Tentik cũng chia sẻ một số quan điểm của anh khi thiết kế nên bộ giao diện này:
Tại sao lại là thiết kế phẳng?
Giao diện Facebook nền web hiện tại.
So với thiết kế theo phong cách mô phỏng (Skeuomorphism) truyền thống, thiết kế phẳng đem lại rất nhiều ưu điểm. Đầu tiên, thiết kế phẳng giúp giảm tải cho bộ xử lý, tăng tốc độ tải trang do không cần xử lý các thành phần đồ họa nặng nề, phức tạp. Phong cách này cũng đem lại khả năng tùy biến cao hơn cho trang web, giúp nó tự tương thích với nhiều kích cỡ màn hình, độ phân giải khác nhau từ máy tính bàn tới smartphone. Thêm vào đó, tính đơn giản của phong cách thiết kế phẳng rất được đề cao. Ngay cả Apple, một tượng đài về thiết kế cũng đã từ bỏ phong cách mô phỏng, đem phong cách phẳng lên iOS và OS X.
Vấn đề về giao diện
Vấn đề lớn nhất của giao diện Facebook nền web đó là nó thiếu đi tính đơn giản, đặc biệt khi người dùng cần truy cập nội dung của bản thân. Thực tế, do phải “gánh” hàng loạt thứ từ Timeline, album ảnh, game... của người dùng, khó có thể mong chờ ở một Facebook có tốc độ tải nhanh như sấm sét.
Mặt khác, một giao diện người dùng tốt cần dễ hiểu, rõ ràng, có thể khiến người dùng có thể làm quen ngay từ lần sử dụng đầu tiên. Nó không được phép có các chi tiết không cần thiết, và người thiết kế luôn phải đặt bản thân vào vị trí người dùng, để biết rằng các thành phần trên web có thật sự cần thiết hay không. Trong giao diện Flat Design, Rof Tentik đã loại bỏ khung bên phải, chứa các nội dung gợi ý mà phần lớn người dùng không quan tâm. Nhờ vậy, người dùng có thể tập trung vào nội dung News Feed hơn.
Bên cạnh đó, khung bên trái giao diện cũng khiến nhà thiết kế của chúng ta cảm giác khó chịu. Các thành phần, nhãn tên được sắp xếp một cách khó hiểu nên anh đã tạo một hệ thống thanh công cụ dễ đoán hơn, rõ ràng hơn. Trên thực tế, Rof Tentik cho rằng giao diện năm 2004 giúp người dùng dễ hiểu hơn khi áp dụng công thức My (Của Tôi) + Tên mục, vì thế anh đã áp dụng nó lên giao diện phẳng.
Không giống với giao diện ứng dụng, Facebook nền web có thanh menu chỉ xuất hiện khi truy cập giao diện News Feed, và sẽ biến mất khi truy cập các trang cá nhân, hình ảnh,… Vì vậy, giao diện Flat Design sẽ luôn có một khung menu nằm cố định ở một bên giao diện, giúp người dùng thao tác nhanh hơn và cũng tận dụng tốt diện tích màn hình.
Thay đổi về phông chữ
Theo Rof, bộ phông chữ (typeface) đang được Facebook sử dụng là Helvetica, vốn rất thịnh hành trong các sản phẩm của Apple trước đây (kể từ 2014, Apple đã chuyển qua dùng phông San Francisco). Bộ phông Helvetica mà Facebook dùng khá mảnh và không có chân (Sans Serif), tạo cảm giác chật chội mà theo nhà thiết kế là “bận rộn”. Để tối ưu không gian giao diện và đơn giản hóa, Rof Tentik đã sử dụng phông Trebuchet vì sở hữu nhiều nét cong mềm mại hơn nhưng vẫn thân thiện với người dùng. Một phông chữ dành cho mạng xã hội cần rõ ràng và lôi cuốn người sử dụng. Nó không cần là thứ tốt nhất, nhưng phải là lựa chọn hợp lý nhất.
Màu sắc cần cải tiến
Không chỉ để trang trí, màu sắc còn là thứ xác định cảm xúc của người xem ngay từ cái nhìn đầu tiên. Sử dụng CSS, nhà thiết kế đã “ép phẳng” bộ màu của giao diện Facebook cũ nhằm đơn giản hóa trải nghiệm thị giác. Theo lý thuyết về thiết kế tập trung vào nội dung, nếu càng có ít hiệu ứng gradient (chuyển sắc), người xem sẽ càng ít bị phân tâm hơn. Cụ thể hơn, bộ giao diện đã được loại bỏ các hiệu ứng đổ bóng, chuyển sắc và hiệu ứng nổi (có thể thấy nhiều trên các biểu tượng nút bấm trước đây). Nền của giao diện được thay đổi về tông màu đậm hơn, kết hợp cùng tông màu sáng sẽ đem lại độ phương phản mang tính tự nhiên hơn, người xem sẽ không mất tập trung vào các hiệu ứng phụ.
Bổ sung các khoảng trắng
Bên cạnh màu sắc và phông chữ, các khoảng trắng cũng là một thành phần vô cùng quan trọng trong thiết kế. Rof đã bổ sung nhiều khoảng trắng xuyên suốt các thành phần như nút bấm, khung bài đăng, tin nhắn,… nhằm tăng tính nhận thức của người dùng với các thành phần này. Khi đó, nội dung sẽ dễ nắm bắt hơn và người dùng cũng dễ dàng hơn trong việc đọc lướt qua hàng tá nội dung.
Với việc màn hình tiêu chuẩn HD đang ngày càng phổ biến, điểm mới trong bộ giao diện này nằm ở việc kéo dài khoảng không gian của các thành phần bài đăng, nhằm tận dụng tối đa không gian trống phía bên phải, diện tích vốn được dùng để hiện các nội dung liên quan, quảng cáo không cần thiết ở giao diện nguyên bản.
Tải về giao diện phẳng cho Facebook bằng cách cài extension cho trình duyệt Chrome tại
Tham khảo The Next Web
Trong khi ứng dụng di động ngày càng được cải tiến, giao diện web của - mạng xã hội lớn nhất hành tinh lại đang bị coi là lỗi thời. So với các trang khác như Instagram, Twitter, Vine,… giao diện của Facebook rõ ràng phức tạp và rối rắm hơn nhiều.
Do vậy, nhà thiết kế Rof Tentik đã tạo nên bộ extension có tên gọi Flat Design dành cho trình duyệt Chrome. Dựa trên phong cách thiết kế giao diện phẳng đang là xu hướng của vài năm trở lại đây, Flat Design đã đem lại một luồng gió mới cho giao diện Facebook nền web. Rof Tentik cũng chia sẻ một số quan điểm của anh khi thiết kế nên bộ giao diện này:
Tại sao lại là thiết kế phẳng?
Giao diện Facebook nền web hiện tại.
So với thiết kế theo phong cách mô phỏng (Skeuomorphism) truyền thống, thiết kế phẳng đem lại rất nhiều ưu điểm. Đầu tiên, thiết kế phẳng giúp giảm tải cho bộ xử lý, tăng tốc độ tải trang do không cần xử lý các thành phần đồ họa nặng nề, phức tạp. Phong cách này cũng đem lại khả năng tùy biến cao hơn cho trang web, giúp nó tự tương thích với nhiều kích cỡ màn hình, độ phân giải khác nhau từ máy tính bàn tới smartphone. Thêm vào đó, tính đơn giản của phong cách thiết kế phẳng rất được đề cao. Ngay cả Apple, một tượng đài về thiết kế cũng đã từ bỏ phong cách mô phỏng, đem phong cách phẳng lên iOS và OS X.
Vấn đề về giao diện
Vấn đề lớn nhất của giao diện Facebook nền web đó là nó thiếu đi tính đơn giản, đặc biệt khi người dùng cần truy cập nội dung của bản thân. Thực tế, do phải “gánh” hàng loạt thứ từ Timeline, album ảnh, game... của người dùng, khó có thể mong chờ ở một Facebook có tốc độ tải nhanh như sấm sét.
Mặt khác, một giao diện người dùng tốt cần dễ hiểu, rõ ràng, có thể khiến người dùng có thể làm quen ngay từ lần sử dụng đầu tiên. Nó không được phép có các chi tiết không cần thiết, và người thiết kế luôn phải đặt bản thân vào vị trí người dùng, để biết rằng các thành phần trên web có thật sự cần thiết hay không. Trong giao diện Flat Design, Rof Tentik đã loại bỏ khung bên phải, chứa các nội dung gợi ý mà phần lớn người dùng không quan tâm. Nhờ vậy, người dùng có thể tập trung vào nội dung News Feed hơn.
Bên cạnh đó, khung bên trái giao diện cũng khiến nhà thiết kế của chúng ta cảm giác khó chịu. Các thành phần, nhãn tên được sắp xếp một cách khó hiểu nên anh đã tạo một hệ thống thanh công cụ dễ đoán hơn, rõ ràng hơn. Trên thực tế, Rof Tentik cho rằng giao diện năm 2004 giúp người dùng dễ hiểu hơn khi áp dụng công thức My (Của Tôi) + Tên mục, vì thế anh đã áp dụng nó lên giao diện phẳng.
Không giống với giao diện ứng dụng, Facebook nền web có thanh menu chỉ xuất hiện khi truy cập giao diện News Feed, và sẽ biến mất khi truy cập các trang cá nhân, hình ảnh,… Vì vậy, giao diện Flat Design sẽ luôn có một khung menu nằm cố định ở một bên giao diện, giúp người dùng thao tác nhanh hơn và cũng tận dụng tốt diện tích màn hình.
Thay đổi về phông chữ
Theo Rof, bộ phông chữ (typeface) đang được Facebook sử dụng là Helvetica, vốn rất thịnh hành trong các sản phẩm của Apple trước đây (kể từ 2014, Apple đã chuyển qua dùng phông San Francisco). Bộ phông Helvetica mà Facebook dùng khá mảnh và không có chân (Sans Serif), tạo cảm giác chật chội mà theo nhà thiết kế là “bận rộn”. Để tối ưu không gian giao diện và đơn giản hóa, Rof Tentik đã sử dụng phông Trebuchet vì sở hữu nhiều nét cong mềm mại hơn nhưng vẫn thân thiện với người dùng. Một phông chữ dành cho mạng xã hội cần rõ ràng và lôi cuốn người sử dụng. Nó không cần là thứ tốt nhất, nhưng phải là lựa chọn hợp lý nhất.
Màu sắc cần cải tiến
Không chỉ để trang trí, màu sắc còn là thứ xác định cảm xúc của người xem ngay từ cái nhìn đầu tiên. Sử dụng CSS, nhà thiết kế đã “ép phẳng” bộ màu của giao diện Facebook cũ nhằm đơn giản hóa trải nghiệm thị giác. Theo lý thuyết về thiết kế tập trung vào nội dung, nếu càng có ít hiệu ứng gradient (chuyển sắc), người xem sẽ càng ít bị phân tâm hơn. Cụ thể hơn, bộ giao diện đã được loại bỏ các hiệu ứng đổ bóng, chuyển sắc và hiệu ứng nổi (có thể thấy nhiều trên các biểu tượng nút bấm trước đây). Nền của giao diện được thay đổi về tông màu đậm hơn, kết hợp cùng tông màu sáng sẽ đem lại độ phương phản mang tính tự nhiên hơn, người xem sẽ không mất tập trung vào các hiệu ứng phụ.
Bổ sung các khoảng trắng
Bên cạnh màu sắc và phông chữ, các khoảng trắng cũng là một thành phần vô cùng quan trọng trong thiết kế. Rof đã bổ sung nhiều khoảng trắng xuyên suốt các thành phần như nút bấm, khung bài đăng, tin nhắn,… nhằm tăng tính nhận thức của người dùng với các thành phần này. Khi đó, nội dung sẽ dễ nắm bắt hơn và người dùng cũng dễ dàng hơn trong việc đọc lướt qua hàng tá nội dung.
Với việc màn hình tiêu chuẩn HD đang ngày càng phổ biến, điểm mới trong bộ giao diện này nằm ở việc kéo dài khoảng không gian của các thành phần bài đăng, nhằm tận dụng tối đa không gian trống phía bên phải, diện tích vốn được dùng để hiện các nội dung liên quan, quảng cáo không cần thiết ở giao diện nguyên bản.
Tải về giao diện phẳng cho Facebook bằng cách cài extension cho trình duyệt Chrome tại
You must be registered for see links
.Tham khảo The Next Web