Facebook đã thiết kế lại một phân tích chuyên sâu về các thiết kế độc lập
Có rất nhiều thứ để học bằng cách nghiên cứu công việc của các nhà thiết kế khác. Điều này đúng với cả các dự án chuyên nghiệp và thiết kế đặc tả cho các trang web hiện có. Các trang web lớn như Facebook phục vụ trải nghiệm người dùng rất đặc biệt với một số yếu tố tốt và các yếu tố không tốt khác. Trong bài đăng này, tôi muốn kiểm tra các thiết kế lại khác nhau của Facebook để phân tích các khái niệm giao diện điều đó có thể cải thiện trải nghiệm người dùng hiện tại.
Tôi đã lấy một số thiết kế lại FB tùy chỉnh từ người dùng Dribbble, mỗi người có cải tiến cụ thể và các yếu tố UI được cập nhật. Hãy xem xét các ý tưởng này về cách chúng nhìn, cách chúng có thể hoạt động và làm thế nào họ có thể tác động đến khả năng sử dụng nếu được thực hiện trực tiếp trên Facebook.
Trang hồ sơ hợp lý
Thiết kế lại trang hồ sơ này đến từ Haris Jusovic, một nhà thiết kế từ vùng Balkan của Châu Âu.
Trong thiết kế này, ông tập trung nhiều hơn vào sự đơn giản bằng cách làm nổi bật chủ sở hữu trang hơn tiêu đề nổi bật hình ảnh và hồ sơ pic.
Bài viết dòng thời gian có thể được sắp xếp theo “gần đây” hoặc là “phổ biến” dựa trên sở thích của bạn Điều này rất tốt cho khả năng sử dụng, đặc biệt là sau phản ứng dữ dội của Twitter chống lại sự thay đổi thuật toán được ủy quyền gần đây.
Ngoài ra nhiều nút hiển thị lớn hơn với thêm đệm và kiểu chữ lớn hơn. Vì Facebook có nghĩa là tương tác, nó chỉ có ý nghĩa để tăng khả năng hiển thị của các mục như nút và siêu liên kết.
Nhìn chung, khái niệm này cảm thấy nhỏ gọn và nhẹ hơn trong phình. Thật tuyệt khi thấy Facebook tập trung nhiều hơn vào các yếu tố tương tác và cũng có thể tăng kích thước phông chữ của họ.
Dòng thời gian nhiều cột
Hướng đến một bố cục theo chiều dọc là thiết kế lại của Alejandro Osorio. Bố cục này thể hiện chế độ xem dòng thời gian hồ sơ mà người dùng Facebook nhìn thấy khi họ truy cập trang hồ sơ của người dùng.
Thiết kế nổi bật nhưng có thể gây khó chịu cho một số người dùng. Điều đó dựa vào tổ chức nhiều cột trang liên kết hồ sơ của người dùng, cùng với chế độ xem dòng thời gian của các bài đăng gần đây. Tất cả các màu sắc và các yếu tố đều đúng với phong cách thiết kế của Facebook. Nó chắc chắn cảm thấy như một trang dòng thời gian Facebook.
Nhưng một số yếu tố thanh bên đi ra hơi khó hiểu. Ví dụ: một nút màu xanh lá cây với một dấu cộng duy nhất ngay bên cạnh một “theo” nút. Một cái chỉ sử dụng một biểu tượng, cái còn lại chỉ là văn bản. Điều này cảm thấy không phù hợp với phong cách thiết kế và thông tin hồ sơ khác.
Điều tôi thích nhất ở đây là cấu trúc rõ ràng của dữ liệu trong dòng thời gian. Mọi thứ đều được tổ chức rõ ràng và thậm chí còn có các liên kết thanh bên để chuyển đổi giữa các bài đăng gần đây và bài đăng phổ biến.
Thiết kế lại nội dung dày đặc
Các trang web lớn hơn như Facebook xử lý nhiều dữ liệu hơn và cơ sở người dùng muốn truy cập dễ dàng vào dữ liệu đó. Trong thiết kế lại trang chủ của MagicVol thế, bạn sẽ tìm thấy một tính năng nhất quán: nhiều nội dung được nhồi nhét vào một bố cục trang.
Trang chủ của Facebook là chế độ xem dòng thời gian ban đầu mà người dùng nhìn thấy khi lần đầu tiên truy cập trang web. Nó bao gồm các bài đăng gần đây từ bạn bè, danh sách trò chuyện, trò chơi, quảng cáo và thông tin liên quan khác như sinh nhật sắp tới.
Sự bận rộn của bố cục này là những gì làm cho nó vừa tuyệt vời vừa có khả năng gây tranh cãi. Có tất cả nội dung này trên một trang làm cho nó siêu dễ điều hướng - một khi bạn thực sự tìm hiểu mọi thứ nằm ở đâu. Và các liên kết biểu tượng trên cùng bên trái chỉ đủ mơ hồ để ngăn cản bất cứ ai tương tác với chúng.
Nhưng để bảo vệ thiết kế này, nó xử lý nội dung dày đặc rất tốt. Có nhiều khoảng trắng giữa các yếu tố và nó chạy một thiết kế bốn cột rực rỡ.
Điều hướng đồ sộ
Cái gọi là thiết kế lại Facebook 2.0 được tạo bởi Marcelo Silva thực sự là một cảnh tượng đáng chú ý. Bố cục demo của anh ấy hiển thị trang chủ được cập nhật với dòng thời gian và danh bạ trò chuyện bị ẩn một phần.
Một phần lớn cho thiết kế này là hệ thống định vị. Tôi thích cách có một điều hướng chính với các liên kết biểu tượng hiển thị các liên kết phụ. Trong ảnh chụp màn hình ở trên, người dùng đang chọn biểu tượng hồ sơ có liên kết cho duyệt lịch sử gần đây và chỉnh sửa hồ sơ.
Không giống như ảnh vuông truyền thống của Facebook, thiết kế lại của Marcelo hướng tới bức ảnh tròn. Phong cách này có mặt ở cả dòng thời gian và danh sách trò chuyện.
M Trợ lý & Danh sách hoạt động gần đây
Có rất nhiều điều để nói về thiết kế lại FB của Steven McCabe. Trên thực tế, nhiều lĩnh vực như trò chơi và các hoạt động gần đây đã được thiết kế lại hoàn toàn với sự đổi mới ấn tượng.
Thiết kế của Steven là tối hơn nhiều so với bảng màu hiện tại của Facebook. Tôi thích điều này bởi vì nó xây dựng độ tương phản nhiều hơn giữa các thanh bên và nội dung trang chính. Trang chủ hiện tại của Facebook có hầu hết nội dung này nhưng theo thời gian, nó có thể hòa trộn vào nền.
Tiêu đề vẫn sử dụng bong bóng màu đỏ để biểu thị thông báo. Ngoài ra còn có các bài đăng theo xu hướng và nguồn cấp tin tức với khả năng sắp xếp thông qua hoạt động gần đây từ bạn bè ở thanh bên phải.
Ở phía dưới cùng, bạn sẽ nhận thấy một hộp nhỏ cho M của Facebook, tương đương với Siri cho người dùng Facebook.
Tính năng này không được chú ý nhiều trong thiết kế lại nhưng Steven thực sự đã nỗ lực hết sức để biến ý tưởng của mình thực sự đại diện cho công nghệ Facebook hiện đại.
Bố cục dòng thời gian bốn cột
Đây là một thiết kế lại trang chủ 4-col khác được thực hiện bởi nhà thiết kế Nhật Bản Sho Kameya. Tất cả các cột này trải dài toàn bộ trang, cả chiều rộng và chiều cao.
Thanh bên trái đặt trọng tâm lớn vào các liên kết truyền thống của Facebook cho các trò chơi, ứng dụng, trang, tài nguyên dev và các mục tương tự khác. Tiếp theo là cột nội dung đa dạng nhất trong số tất cả các thiết kế lại. Điều này không giữ các liên kết truyền thống để cập nhật trạng thái / thêm ảnh mà thay vào đó sử dụng một phương pháp tối giản với các tùy chọn ẩn.
Hai thanh bên phải bao gồm mọi thứ khác với nhiều ảnh hơn như hình đại diện người dùng và biểu tượng trò chơi. Thiết kế này vẫn giữ tất cả các bản cập nhật như sinh nhật, trò chuyện và đề xuất bạn bè.
Thiết kế này rất đa dạng nhưng vẫn đúng với cốt lõi của các tính năng của Facebook. Nó có thể không phải là thiết kế lại hoàn hảo nhưng nó cho thấy các khả năng của một bố cục bốn cột.
Giao diện người dùng được đơn giản hóa với Danh sách trò chuyện tối
Mục tiêu thiết kế lại của Ben Hartley là sự đơn giản và tinh tế. Bố cục sử dụng kết hợp các khái niệm thiết kế phẳng với một vài bóng đổ trên các phần tử trang lớn hơn.
Nhiều mặt hàng có thương hiệu vẫn giữ nguyên và anh ấy dựa vào bảng màu xanh / xám truyền thống của Facebook. Nhưng bạn sẽ nhận thấy một số biểu tượng đã được thiết kế lại hoặc nhỏ hơn hoặc đơn giản hơn (hoặc cả hai).
Bố cục này cũng dựa vào hình đại diện tròn và cung cấp nhiều chỗ cho hình ảnh được chia sẻ với bài viết. Tôi thực sự thích anh ấy danh sách trò chuyện được cập nhật với bảng màu tối hơn và các biểu tượng trạng thái nhỏ hơn.
Mặc dù thiết kế lại của Ben vẫn cảm thấy hơi lộn xộn, nhưng nó lại cảm thấy đơn giản hơn rất nhiều. Đây sẽ là một thiết kế khó khăn để đánh giá trải nghiệm người dùng mà không cần nghiên cứu về UX trên trình duyệt. Nhưng nhìn thoáng qua có vẻ dễ duyệt hơn và cung cấp thêm phòng để tiêu thụ nội dung dòng thời gian.
Gói lại
Mặc dù những ví dụ này tập trung chủ yếu vào Facebook, nhưng những bài học kinh nghiệm có thể được áp dụng cho bất kỳ trang web nào. Thiết kế trải nghiệm người dùng tuyệt vời vượt qua mọi rào cản ngôn ngữ và đó là một phần quan trọng của quy trình sáng tạo kỹ thuật số.
Vui lòng mượn ý tưởng từ phân tích này và thậm chí thực hiện các ý tưởng tương tự trong công việc dự án của riêng bạn. Ngoài ra nếu bạn tìm thấy bất kỳ thiết kế lại Facebook có liên quan nào, hãy chia sẻ ý kiến với phân tích của riêng bạn.
