إعادة تصميم Facebook تحليل متعمق للتصميمات المستقلة

هناك الكثير لنتعلمه من خلال دراسة عمل المصممين الآخرين. ينطبق هذا على كل من المشاريع الاحترافية وتصميمات المواصفات للمواقع الإلكترونية الحالية. تخدم المواقع الكبيرة مثل Facebook تجربة مستخدم خاصة جدًا مع بعض العناصر الجيدة وعناصر أخرى غير جيدة. في هذا المنشور ، أود أن فحص إعادة تصميم Facebook المختلفة لتحليل مفاهيم الواجهة يمكن أن تحسن تجربة المستخدم الحالية.

لقد قمت بسحب حفنة من إعادة تصميم FB المخصصة من مستخدمي Dribbble ، مع كل منهم تحسينات محددة وعناصر واجهة المستخدم المحدثة. خذ هذه الأفكار في الاعتبار لكيفية ظهورها ، وكيف يمكن أن تعمل ، و كيف يمكن أن تؤثر على قابليتها للاستخدام إذا تم تنفيذه مباشرة على Facebook.

تبسيط صفحة الملف الشخصي

إعادة تصميم صفحة الملف الشخصي هذه تأتي من Haris Jusovic ، وهو مصمم من منطقة البلقان في أوروبا.

في هذا التصميم ، يركز بشكل أكبر على البساطة من خلال إبراز مالك الصفحة أكثر من ذلك صورة رأس بارز والموافقة المسبقة عن علم الشخصي.

المشاركات الجدول الزمني يمكن فرزها حسب “الأخيرة” أو “جمع” بناء على تفضيلاتك هذا أمر كبير بالنسبة للاستخدام ، خاصةً في أعقاب رد الفعل العكسي على Twitter ضد تغيير الخوارزمية التي تم فرضها مؤخرًا.

أيضا العديد من الأزرار عرض أكبر مع حشوة اضافية والطباعة أكبر. نظرًا لأن Facebook هو تفاعلي ، فمن المنطقي فقط زيادة ظهور عناصر مثل الأزرار والارتباطات التشعبية.

عموما هذا المفهوم يشعر المدمجة وأخف وزنا في سخام. سيكون من الجيد أن نرى فيسبوك يركز أكثر على العناصر التفاعلية وربما يزيد من أحجام الخطوط الخاصة بهم ، أيضًا.

الجدول الزمني متعدد الأعمدة

يتجه نحو تخطيط عمودي عمودي إعادة تصميم أليخاندرو أوسوريو. يمثل هذا التخطيط عرض الجدول الزمني للملف الشخصي الذي يراه مستخدمو Facebook عند زيارتهم لصفحة ملف تعريف المستخدم.

التصميم مذهل ، لكن يمكن أن يكون عديم القيمة لبعض المستخدمين. انها تعتمد على أعمدة صفحات متعددة لتنظيم روابط الملف الشخصي للمستخدم ، جنبا إلى جنب مع عرض الجدول الزمني للوظائف الأخيرة. تظل جميع الألوان والعناصر وفية لأنماط تصميم Facebook. بالتأكيد يبدو وكأنه صفحة فيسبوك الجدول الزمني.

ولكن بعض العناصر في الشريط الجانبي تؤتي ثمارها مربكة بعض الشيء. على سبيل المثال ، زر أخضر مع علامة زائد واحدة بجانب a “إتبع” زر. واحد يستخدم فقط رمز ، والآخر مجرد نص. هذا لا يتعارض مع نمط التصميم ومعلومات الملف الشخصي الأخرى.

ما أحب أكثر هنا هو هيكل واضح للبيانات في الجدول الزمني. يتم تنظيم كل شيء بشكل واضح وهناك روابط الشريط الجانبي للتبديل بين المشاركات الحديثة والمشاركات الشعبية.

إعادة تصميم محتوى كثيف

تتعامل مواقع الويب الكبيرة مثل Facebook مع المزيد من البيانات وقاعدة مستخدم تريد الوصول بسهولة إلى تلك البيانات. في الصفحة الرئيسية التي يعيد تصميمها بواسطة MagicVoltage ، ستجد ميزة واحدة متسقة: الكثير من المحتوى مكتظ في تخطيط صفحة واحدة.

صفحة Facebook الرئيسية هي طريقة العرض الأولية للجدول الزمني التي يراها المستخدمون عند زيارة الموقع لأول مرة. ويشمل المشاركات الأخيرة من الأصدقاء ، وقائمة الدردشة ، والألعاب ، والإعلانات ، وغيرها من المعلومات ذات الصلة مثل أعياد الميلاد القادمة.

مشغول هذا التصميم هو ما يجعلها كبيرة وربما مثيرة للجدل. وجود كل هذا المحتوى في صفحة واحدة يجعله سوبر سهلة للتنقل - بمجرد تعلم الواقع حيث يوجد كل شيء. كما أن روابط الأيقونات الموجودة في الجزء العلوي الأيسر غامضة بدرجة كافية لإثناء أي شخص عن التفاعل معهم.

ولكن دفاعًا عن هذا التصميم ، فإنه يتعامل مع المحتوى المكتظ بشكل جيد للغاية. هناك الكثير من مسافة بيضاء بين العناصر ويدير تصميم أربعة أعمدة ببراعة.

الملاحة الضخمة

إن إعادة تصميم Facebook 2.0 التي أنشأها مارسيلو سيلفا هي في الحقيقة مشهد. يعرض تخطيط العرض التوضيحي له صفحة رئيسية محدّثة مع جدول زمني وجهات اتصال مخفية جزئيًا.

قطعة كبيرة لهذا التصميم هو نظام الملاحة المتدرج. أحب الطريقة التي يوجد بها التنقل الأساسي مع روابط الرموز التي تعرض الروابط الثانوية. في لقطة الشاشة أعلاه ، يقوم المستخدم بتحديد رمز الملف الشخصي الذي يحتوي على روابط لـ تصفح التاريخ الحديث وتحرير الملف الشخصي.

على عكس الصور التقليدية على Facebook ، أعيد تصميم مارسيلو يختار نحو الصورة الدائرية. هذا النمط موجود في كل مكان في كل من الخط الزمني وقائمة الدردشة.

M مساعد وقائمة النشاط الأخيرة

هناك الكثير مما يمكن قوله حول إعادة تصميم Steven McCabe's FB. في الواقع ، تم إعادة تصميم العديد من المناطق مثل الألعاب والأنشطة الحديثة بالكامل مع عملية شد وجه رائعة.

تصميم ستيفن هو أغمق بكثير من نظام الألوان الحالي على Facebook. يعجبني هذا لأنه يبني تباينًا أكبر بين الشريط الجانبي ومحتوى الصفحة الأساسية. تحتوي صفحة Facebook الرئيسية الحالية على معظم هذا المحتوى ، لكن مع مرور الوقت ، يمكن دمجها في الخلفية.

لا يزال الرأس يستخدم الفقاعات الحمراء للدلالة على الإشعارات. هناك أيضًا رسائل منشورة وملف إخباري مع إمكانية الفرز بين الأنشطة الحديثة من الأصدقاء في الشريط الجانبي الأيمن.

في الجزء السفلي جدا ستلاحظ مربع صغير لفيسبوك M ، و أي ما يعادل سيري لمستخدمي الفيسبوك.

لا تحظى هذه الميزة بالكثير من الاهتمام في عمليات إعادة التصميم ، لكن ستيفن حقًا بذل كل جهده لجعل مفهومه يمثل حقًا تكنولوجيا Facebook الحديثة.

أربعة أعمدة تخطيط الجدول الزمني

إليكم إعادة تصميم الصفحة الرئيسية الأخرى من تصميم المصمم الياباني Sho Kameya. كل هذه الأعمدة تمتد كامل الصفحة, كلا العرض والطول.

يركز الشريط الجانبي أقصى اليسار تركيزًا كبيرًا على روابط Facebook التقليدية للألعاب والتطبيقات والصفحات وموارد التطوير وعناصر أخرى مماثلة. التالي هو عمود المحتوى وهو الأكثر تنوعًا بين جميع عمليات إعادة التصميم. هذا لا يحتفظ بالارتباطات التقليدية لتحديث الحالة / إضافة صورة ولكن بدلاً من ذلك يستخدم أ نهج الحد الأدنى مع الخيارات الخفية.

يتضمن الشريطان الجانبيان الأيمنان كل شيء آخر مع المزيد من الصور مثل الصور الرمزية للمستخدم وأيقونات اللعبة. لا يزال هذا التصميم يحتفظ بجميع التحديثات مثل أعياد الميلاد والدردشة وتوصيات الأصدقاء.

هذا التصميم متنوع للغاية ولكنه يبقى وفيا لجوهر ميزات Facebook. قد لا يكون إعادة تصميم مثالي لكنه يظهر احتمالات تخطيط أربعة أعمدة.

واجهة مستخدم مبسطة مع قائمة الدردشة المظلمة

الهدف من إعادة تصميم بن هارتلي هو البساطة والبراعة. يستخدم التخطيط مجموعة من مفاهيم التصميم المسطح مع بعض الظلال المسقطة على عناصر الصفحة الأكبر.

تظل العديد من العناصر ذات العلامات التجارية كما هي ويعتمد على نظام الألوان التقليدية باللون الأزرق / الرمادي على Facebook. لكن ستلاحظ إعادة تصميم بعض الرموز إما أصغر أو أبسط (او كلاهما).

هذا التصميم يعتمد أيضا على تجسد الآلهة و يعطي مساحة كبيرة للصور المشتركة مع المشاركات. أنا أستمتع حقا له قائمة دردشة محدثة مع نظام الألوان الأغمق وأيقونات الحالة الأصغر.

في حين أن إعادة تصميم بن لا تزال تشوش قليلاً ، إلا أنها تبدو أكثر بساطة. سيكون هذا تصميمًا صعبًا لقياس تجربة المستخدم بدون دراسات UX في المستعرض. ولكن في لمحة يبدو أسهل في التصفح و يعطي مساحة أكبر لاستهلاك محتوى الجدول الزمني.

يتم إحتوائه

على الرغم من أن هذه الأمثلة تركز بشكل أساسي على Facebook ، إلا أنه يمكن تطبيق الدروس المستفادة على أي موقع ويب. يتخطى تصميم تجربة المستخدم الرائع جميع الحواجز اللغوية وهو جزء حيوي من عملية الإبداع الرقمي.

لا تتردد في استعارة الأفكار من هذا التحليل وحتى تنفيذ أفكار مماثلة في عملك المشروع. وأيضًا إذا وجدت أي إعادة تصميم فيسبوك قابلة للتغيير ، فلا تتردد في مشاركة التعليقات مع تحليلك الخاص.