Facebook Merangka semula Analisis Dalam-Kedalaman Reka Bentuk Bebas

Banyak yang perlu dipelajari dengan mengkaji karya pereka lain. Ini berlaku bagi kedua-dua projek profesional dan reka bentuk spec untuk laman web yang sedia ada. Laman-laman besar seperti Facebook memberikan pengalaman pengguna yang sangat khusus dengan beberapa unsur yang baik, dan unsur lain yang tidak begitu baik. Dalam jawatan ini, saya ingin menyemak semula reka bentuk semula Facebook yang berbeza untuk menganalisis konsep antara muka yang boleh meningkatkan pengalaman pengguna semasa.

Saya telah menarik segelintir reka bentuk semula FB adat dari pengguna Dribbble, masing-masing dengan penambahbaikan khusus dan unsur UI yang dikemas kini. Ambil idea-idea ini untuk melihat bagaimana mereka melihat, bagaimana mereka mungkin berfungsi, dan bagaimana mereka boleh mempengaruhi kebolehgunaan jika dilaksanakan secara langsung di Facebook.

Halaman Profil Terkini

Reka bentuk halaman profil ini berasal dari Haris Jusovic, seorang pereka dari rantau Balkan di Eropah.

Dalam reka bentuk ini, dia memberi tumpuan lebih kepada kesederhanaan dengan menyerlahkan pemilik laman dengan lebih banyak lagi gambar header dan profil pengetua utama.

Jawatan kronik boleh disusun mengikut “baru-baru ini” atau “popular” berdasarkan keutamaan anda. Ini besar untuk kebolehgunaan, terutamanya berikutan tindak balas Twitter terhadap perubahan algoritma yang dimandatkan baru-baru ini.

Juga banyak butang yang dipaparkan lebih besar dengan padding tambahan dan tipografi yang lebih besar. Oleh kerana Facebook dimaksudkan untuk menjadi interaktif, hanya masuk akal untuk meningkatkan keterlihatan barang seperti butang dan hiperpautan.

Keseluruhan konsep ini terasa padat dan lebih ringan di dalam kembung. Adalah lebih baik untuk melihat Facebook meletakkan lebih fokus pada elemen interaktif dan mungkin meningkatkan saiz fon mereka juga.

Garis Masa Pelbagai Tiang

Menarik ke arah susun atur kiub secara vertikal ialah reka bentuk semula Alejandro Osorio. Susun atur ini mewakili pandangan garis masa profil yang pengguna Facebook melihat ketika mereka melawat halaman profil pengguna.

Reka bentuk yang menarik tetapi boleh diasingkan kepada beberapa pengguna. Ia bergantung lajur berganda untuk menyusun pautan profil pengguna, bersama dengan pandangan garis masa bagi jawatan terkini. Semua warna dan elemen kekal sesuai dengan gaya reka bentuk Facebook. Ia sememangnya terasa seperti halaman timeline Facebook.

Tetapi beberapa elemen bar sisi telah menjadi sedikit mengelirukan. Sebagai contoh, butang hijau dengan tanda tambah tunggal di sebelah a “ikuti” butang. Satu menggunakan hanya simbol, satu lagi teks sahaja. Ini tidak selaras dengan gaya reka bentuk dan maklumat profil yang lain.

Apa yang saya sukai di sini ialah struktur data yang jelas dalam garis masa. Semuanya teratur dengan jelas dan ada juga pautan sidebar untuk bertukar antara jawatan baru dan jawatan popular.

Reka Bentuk Semula Kandungan-Densel

Laman web yang lebih besar seperti Facebook berurusan dengan lebih banyak data dan userbase yang mahukan akses mudah ke data tersebut. Dalam reka bentuk laman utama oleh MagicVoltage, anda akan menemui satu ciri yang konsisten: banyak kandungan yang dijejalkan ke dalam satu susun atur halaman.

Halaman utama Facebook adalah pandangan garis masa awal yang dilihat oleh pengguna apabila pertama kali melawat laman web. Ia termasuk siaran baru dari rakan, senarai sembang, permainan, iklan, dan maklumat lain yang berkaitan seperti hari ulang tahun yang akan datang.

Suasana yang sibuk dari susun atur ini adalah yang membuatnya hebat dan berpotensi kontroversial. Mempunyai semua kandungan ini pada satu halaman menjadikannya sangat mudah untuk mengemudi - sebaik sahaja anda benar-benar belajar di mana semuanya berada. Dan pautan ikon kiri atas hanya cukup samar untuk menghalang sesiapa daripada berinteraksi dengan mereka.

Tetapi dalam mempertahankan reka bentuk ini ia mengendalikan kandungan padat-padat dengan sangat baik. Ada banyak ruang kosong antara elemen dan ia menjalankan reka bentuk empat lajur dengan cemerlang.

Navigasi Voluminous

Ini yang dinamakan semula oleh Facebook 2.0 yang dicipta oleh Marcelo Silva benar-benar penglihatan untuk dilihat. Susun atur demonya memaparkan laman utama yang dikemas kini dengan kenalan masa dan hubungan sembang separa tersembunyi.

Sekeping besar untuk reka bentuk ini ialah sistem navigasi bertingkat. Saya suka bagaimana ada nav utama dengan pautan ikon yang memaparkan pautan sekunder. Dalam tangkapan skrin di atas pengguna memilih ikon profil yang mempunyai pautan untuk melayari sejarah terkini dan mengedit profil.

Tidak seperti gambar tradisional Facebook, reka bentuk semula Marcelo memilih ke arah foto bulat. Gaya ini ada di mana-mana tempoh masa dan senarai sembang.

M Penolong & Senarai Aktiviti Terkini

Ada banyak perkara yang boleh dikatakan mengenai reka bentuk semula FB Steven McCabe. Sebenarnya, banyak bidang seperti permainan dan aktiviti baru-baru ini telah direka semula sepenuhnya dengan wajah yang mengagumkan.

Reka bentuk Steven ialah lebih gelap daripada skema warna semasa Facebook. Saya suka ini kerana ia membezakan lebih banyak lagi antara sidebar dan kandungan halaman utama. Halaman utama semasa Facebook mempunyai kebanyakan kandungan ini tetapi dari masa ke masa ia boleh menggabungkan ke latar belakang.

Pengepala masih menggunakan gelembung merah untuk menandakan pemberitahuan. Terdapat juga jawatan yang mengejar dan newsfeed dengan keupayaan untuk menyusun aktiviti baru-baru ini dari rakan-rakan di bar sisi kanan.

Di bahagian paling bawah, anda akan melihat kotak kecil untuk Facebook M, yang bersamaan dengan Siri untuk pengguna Facebook.

Ciri ini tidak mendapat banyak perhatian dalam reka bentuk semula tetapi Steven benar-benar keluar untuk membuat konsepnya benar-benar mewakili teknologi Facebook moden.

Tata Letak Garis Masa Empat Luas

Inilah satu lagi reka bentuk laman utama 4-col yang dibuat oleh pereka Jepun Sho Kameya. Semua lajur ini span seluruh halaman, kedua-dua lebar dan ketinggian.

Bar sisi jauh meninggalkan tumpuan berat pada pautan Facebook tradisional untuk permainan, aplikasi, halaman, sumber daya dev, dan item lain yang serupa. Seterusnya adalah lajur kandungan yang paling pelbagai di antara semua reka bentuk semula. Ini tidak menyimpan pautan tradisional untuk status kemas kini / menambah foto tetapi sebaliknya menggunakan pendekatan minimalis dengan pilihan tersembunyi.

Kedua-dua bar sisi kanan mengandungi segala-galanya dengan lebih banyak foto seperti avatar pengguna dan ikon permainan. Reka bentuk ini masih menyimpan semua kemas kini seperti ulang tahun, sembang, dan cadangan rakan.

Reka bentuk ini sangat pelbagai tetapi tetap bersesuaian dengan teras ciri Facebook. Ia mungkin bukan reka bentuk semula yang sempurna tetapi ia menunjukkan kemungkinan susun atur empat lajur.

UI ringkas dengan Senarai Sembang Gelap

Matlamat reka bentuk Ben Hartley adalah kesederhanaan dan kehalusan. Susun atur menggunakan kombinasi konsep reka bentuk rata dengan bayang-bayang drop beberapa pada elemen halaman yang lebih besar.

Banyak barang berjenama tetap sama dan dia bergantung pada skema warna biru / kelabu tradisional Facebook. Tetapi anda akan melihat beberapa ikon telah direka semula sama ada lebih kecil atau lebih mudah (atau kedua-duanya).

Susun atur ini juga bergantung pada avatar pekeliling dan memberi banyak ruang untuk imej yang dikongsi dengan jawatan. Saya sangat menikmati beliau senarai perbualan terkini dengan skema warna gelap dan ikon status yang lebih kecil.

Walaupun reka bentuk semula Ben masih berasa sedikit berantakan, ia berasa lebih mudah. Ini akan menjadi reka bentuk yang sukar untuk mengukur pengalaman pengguna tanpa kajian UX dalam pelayar. Tetapi sepintas lalu nampaknya lebih mudah dilayari dan memberikan lebih banyak ruang untuk menggunakan kandungan garis masa.

Wrap-Up

Walaupun contoh-contoh ini memberi tumpuan terutamanya di Facebook, pelajaran yang dipelajari dapat diterapkan ke laman web mana pun. Reka bentuk pengalaman pengguna yang hebat melangkaui semua halangan bahasa dan ia merupakan sekeping penting dalam proses kreatif digital.

Jangan ragu untuk meminjam idea dari analisis ini dan bahkan melaksanakan idea yang sama dalam kerja projek anda sendiri. Juga jika anda mencari apa-apa rekaan semula Facebook yang rela berasa bebas untuk berkongsi dalam ulasan dengan analisis anda sendiri.