פייסבוק עיצוב מחדש בניתוח עומק של עיצובים עצמאיים
יש הרבה מה ללמוד על ידי לימוד העבודה של מעצבים אחרים. זה נכון לגבי שני פרויקטים מקצועיים עיצובים spec עבור אתרי אינטרנט קיימים. אתרים גדולים כמו Facebook משרתים חוויית משתמש מסוימת עם כמה אלמנטים טובים, ואלמנטים לא כל כך טובים. בהודעה זו, אני רוצה לבחון עיצובים שונים של פייסבוק כדי לנתח מושגים בממשק שיכולים לשפר את חוויית המשתמש הנוכחית.
אני כבר משכו קומץ של עיצובים מותאמים אישית FB מ Dribbble משתמשים, כל אחד עם שיפורים ספציפיים ומרכיבי ממשק משתמש מעודכנים. קח את הרעיונות האלה בחשבון איך הם נראים, איך הם יכולים לתפקד, ו איך הם יכולים להשפיע על השימושיות אם מיושם חי בפייסבוק.
דף פרופיל יעיל
עיצובו מחדש של דף הפרופיל הזה מגיע מחארס יוסוביץ ', מעצב מאזור הבלקן של אירופה.
בעיצוב זה הוא מקדיש יותר להתמקד בפשטות על ידי הדגשת בעל הדף עם יותר תמונה כותרת בולטת תמונה פרופיל.
ציר הזמן הודעות ניתן למיין לפי “לאחרונה” או “פופולרי” בהתאם להעדפותיך. זה גדול עבור השימושיות, במיוחד בעקבות תגובה חריפה של טוויטר נגד שינוי האלגוריתם המנדט לאחרונה.
כמו כן, רבים של הכפתורים להציג גדול עם ריפוד נוסף וטיפוגרפיה גדולה יותר. מאז פייסבוק נועד להיות אינטראקטיבי זה רק הגיוני כדי להגדיל את הנראות של פריטים כמו לחצנים וקישורים.
בסך הכל מושג זה מרגיש קומפקטי וקל יותר בתפוח. זה יהיה נחמד לראות פייסבוק מקום להתמקד יותר על אלמנטים אינטראקטיביים ואולי להגדיל את גודלי הגופן שלהם, יותר מדי.
רב טור ציר זמן
ההסתגלות לכיוון פריסה אנכית אנכית היא עיצובו מחדש של אלחנדרו אוסוריו. פריסה זו מייצגת את תצוגת ציר הזמן של הפרופיל שמשתמשי Facebook רואים כשהם מבקרים בדף הפרופיל של משתמש.
העיצוב הוא מדהים, אבל יכול להיות off-לשים למשתמשים מסוימים. זה מסתמך על עמודות עמוד מרובים לארגן את הקישורים של הפרופיל של המשתמש, יחד עם תצוגת ציר זמן של פוסטים אחרונים. כל הצבעים והאלמנטים נשארים נאמנים לסגנונות העיצוב של פייסבוק. זה בהחלט מרגיש כמו דף ציר הזמן פייסבוק.
אבל כמה אלמנטים הצדדי לעשות לבוא כמו קצת מבלבל. לדוגמה, לחצן ירוק עם סימן פלוס יחיד לצד a “לעקוב אחר” כפתור. אחד משתמש רק בסמל, רק טקסט אחר. זה מרגיש incongruent עם סגנון העיצוב ופרטים פרופיל אחרים.
מה שאני הכי אוהב כאן הוא מבנה ברור של נתונים על ציר הזמן. הכל מאורגן בבירור ויש אפילו קישורים Sidebar כדי לעבור בין ההודעות האחרונות ופוסטים פופולריים.
תוכן - עיצוב מחדש דחוס
אתרים גדולים יותר כמו פייסבוק להתמודד עם נתונים הרבה יותר משתמש userbase שרוצה גישה קלה לנתונים אלה. ב עיצוב מחדש של דף הבית על ידי MagicVoltage תוכלו למצוא תכונה אחת עקבי: הרבה תוכן דחוס לתוך פריסת עמוד אחד.
דף הבית של פייסבוק הוא תצוגת ציר הזמן הראשונית שמשתמשים רואים בפעם הראשונה בביקור באתר. הוא כולל פוסטים אחרונים מחברים, רשימת צ'אט, משחקים, מודעות ומידע רלוונטי אחר כמו ימי הולדת קרובים.
את עס- ness של פריסה זו היא מה שעושה את זה גם גדול ואולי שנוי במחלוקת. לאחר כל התוכן הזה בדף אחד עושה את זה סופר קל לניווט - ברגע שאתה בעצם ללמוד איפה הכל נמצא. ואת הקישורים השמאלית העליונה סמל פשוט מעורפל מספיק כדי להניא מישהו מ אינטראקציה איתם.
אבל כדי להגן על העיצוב הזה הוא מטפל בצפיפות ארוז תוכן טוב מאוד. יש שפע של רווח לבן בין אלמנטים ועושה עיצוב של ארבעה עמודים בצורה מבריקה.
ניווט רב
זה מה שנקרא Facebook 2.0 עיצוב מחדש שנוצרו על ידי מרסלו סילבה הוא באמת מראה לראות. פריסת ההדגמה שלו מציגה דף בית מעודכן עם ציר זמן ואנשי קשר בצ'אט מוסתרים חלקית.
חתיכה גדולה לעיצוב זה הוא מערכת ניווט שכבתית. אני אוהב איך יש ניווט ראשי עם קישורים סמל המציגים קישורים משניים. במסך המסך שלמעלה המשתמש בוחר את סמל הפרופיל שבו יש קישורים דפדף בהיסטוריה האחרונה ועורך את הפרופיל.
בניגוד לתמונות המרובעות המסורתיות של פייסבוק, עיצובו מחדש של מרסלו מצטרף לתמונה העגולה. סגנון זה נמצא בכל מקום הן בציר הזמן והן ברשימת הצ'אט.
M עוזר רשימת פעילות אחרונה
יש הרבה מה לומר על עיצוב מחדש של סטיבן מקייב של FB. למעשה, תחומים רבים כמו משחקים ופעילויות האחרונות עוצבו מחדש לחלוטין עם מתיחת פנים מרשימה.
העיצוב של סטיבן הוא הרבה יותר כהה מאשר הצבעים הנוכחיים של פייסבוק. אני אוהב את זה כי זה בונה יותר ניגודיות בין sidebars ותוכן הדף הראשי. דף הבית הנוכחי של פייסבוק מכיל את רוב התוכן הזה אבל עם הזמן הוא יכול לשלב לתוך הרקע.
הכותרת עדיין משתמשת בבועות אדומות כדי לסמן התראות. יש גם הודעות trending ו newsfeed עם היכולת למיין את הפעילות האחרונה מחברים בסרגל הצד הימני.
בחלק התחתון מאוד תבחין קופסה קטנה עבור M של פייסבוק, המקבילה של סירי עבור משתמשי פייסבוק.
תכונה זו לא מקבל תשומת לב רבה בעיצובים חדשים אבל סטיבן באמת הלך all-out כדי להפוך את הרעיון שלו באמת לייצג את הטכנולוגיה המודרנית פייסבוק.
ארבעה-עמודה ציר זמן פריסה
הנה עוד 4-col דף הבית עיצוב מחדש שנעשו על ידי המעצב היפני Sho Kameya. כל העמודות האלה להאריך את כל הדף, הן רוחב וגובה.
הסרגל הצדדי השמאלי משתרע על קישורים מסורתיים של פייסבוק עבור משחקים, אפליקציות, דפים, משאבי dev ופריטים דומים אחרים. הבא הוא עמוד התוכן שהוא המגוון ביותר בין כל העיצובים. זה לא שומר את הקישורים המסורתיים עבור עדכון מצב / להוסיף תמונה, אלא במקום זאת משתמש גישה מינימליסטית עם אפשרויות נסתרות.
שני sidebars יד ימין כוללים את כל השאר עם תמונות נוספות כמו avatars משתמש וסמלים המשחק. עיצוב זה עדיין שומר את כל העדכונים כמו ימי הולדת, צ'אטים והמלצות של חברים.
עיצוב זה הוא מגוון מאוד, אבל נשאר אמיתי הליבה של תכונות של פייסבוק. זה לא יכול להיות העיצוב המושלם אבל זה מראה את האפשרויות של פריסה של ארבע עמודות.
ממשק משתמש פשוט עם רשימת צ'אט כהה
מטרתו של בן הארטלי לעצב מחדש היא פשטות ועדינות. הפריסה משתמשת בשילוב של מושגים עיצוב שטוח עם כמה צללים ירידה על אלמנטים הדף גדול יותר.
פריטים רבים ממותגים נשארים כפי שהוא, והוא מסתמך על ערכת הצבעים הכחולה / אפורה המסורתית של פייסבוק. אבל תוכל להבחין כמה סמלים כבר מחדש קטן או פשוט יותר (או שניהם).
פריסה זו מסתמכת גם על אווטרים עגולים ו מספק שפע של מקום לתמונות משותפות עם הודעות. אני באמת נהנה שלו רשימת צ'אט מעודכנת עם ערכת הצבעים הכהה וסמלי סטטוס קטנים יותר.
בעוד לעצב מחדש של בן עדיין מרגיש קצת עמוס, זה מרגיש הרבה יותר פשוט. זה יהיה קשה עיצוב כדי לאמוד את חוויית המשתמש ללא מחקרים UX בדפדפן. אבל במבט אחד נראה קל יותר לגלוש ו נותן יותר מקום לצרוך תוכן ציר הזמן.
לעטוף
למרות שדוגמאות אלה מתמקדות בעיקר בפייסבוק, ניתן ללמוד את הלקחים על כל אתר. עיצוב חוויית משתמש נהדר מתעלה על כל מחסומי השפה וזה חתיכת חיוני של תהליך היצירה הדיגיטלית.
אל תהסס לשאול רעיונות מניתוח זה ואף ליישם רעיונות דומים בעבודה הפרויקט שלך. כמו כן, אם אתה מוצא מחדש כל עיצוב מחדש פייסבוק מרגיש חופשי לשתף את ההערות שלך עם ניתוח.
