שטיגליץ עיצובים

ממשק מסוגנן לפרטי משתמש


ספטמבר 4, 2015 6:11 pm

יש לא מעט פעמים בהם יש צורך להציג באופן מצומצם פרטים לגבי משתמשים. למשל, בדף אודותינו, אם יש כמה וכמה חברי צוות, צריך גם להציג את כל הפרטים, אבל גם לא לגרום לגולש לקרוא המון. במדריך זה נבנה ונעצב ממשק מסוגנן לפרטי משתמש. נשתמש באנימציות שונות בcss.

בשלב הראשון נבנה את קוד הhtml:

כדי להציג את המשתמש,וליצור היכרות אין כמו תמונה, ולכן נשתמש בתג התמונה.

בנוסף נרצה תיאור קצרצר של המשתמש. לדוגמה, אם מדובר על חברי צוות, הרי שכאן נוכל לציין את התפקיד ובמה הוא כרוך.

וכמובן שהדבר החשוב ביותר הוא ציון הדרכים בהם ניתן ליצור עם המשתמש קשר. כיום זה לא מספיק רק לתת טלפון וכתובת דוא"ל, אלא הוספנו כמה לינקים לרשתות חברתיות. אנחנו נעשה כך שבלחיצה על כל אחד מהקישורים יפתח אזור שבו ניתן יהיה לספק נתונים או קישורים, ובעצם כל מה שנרצה.

אחרי שיש לנו את הhtml עתה נעצב אותו בעזרת css:

כמובן שלא אסביר כל שורה, אלא רק את הדברים החשובים. לגבי הדיב העוטף שימו לב ל:overflow:hidden. נרצה להשתמש בגבולות של דיב זה כמעין מסכה. רק מה שבתוכו יראה. במוסף השתמשנו בtransition על הגבול. נראה שזה ייצור אנימציה גם על התמונה, משום שתוספת גבול תגדיל את התמונה. בנוסף, שימו לב שהתמונה מקבלת רוחב של מאה אחוז, כי נרצה שהיא תראה טוב בגדלים שונים של מסכים.

עתה אנחנו מעצבים את הדיב הפנימי שיופיע כשהעכבר עובר על תמונת המשתמש ( האמת, על הדיב העוטף).

שוב נשים לב שהשתמשנו בoverflow:hidden. קובעים את הפוזיציה כמוחלטת, שזה אומר שזה יהא ביחס לדיב העוטף, שהרי הפוזיציה שלו נקבעה כיחסית, כלומר, הדיב העוטף הוא הקונטקסט שביחס אליו אנחנו ממקמים את הדיב הפנימי.

לשלב ההתחלה נמקם את הדיב הפנימי מחוץ למסכה, כך שהוא אינו נראה, וגם נקבע אותו כשקוף. והוספנו לו transition כדי שהוא יכנס כאשר העכבר יעבור על התמונה.

בראשון, אנחנו מקטינים את הגבול על הדיב העוטף. זה ייתן יותר מקום לתצוגת הפרטים, ובנוסף ידחוף את התמונה של המשתמש, מה שיוסיף אפשט אנימציה נחמד.

בשני העניין המרכזי. קודם כל אנחנו מחזירים את הדיב הפנימי לנוחכות וממקמים אותו במקום. שימו לב !!! הhover הוא על הדיב העוטף אבל האנימציה מפעילה את הדיב הפנימי !!! זה חשוב מאד.

ולבסוף החלטתי שניצור אפשט של כניסה משמאל אבל לא חלקה, אלא כאילו הדיב הפנימי קופץ. לשם כך  יצרתי key frames.

האנימציה מאד פשוטה. בשלבי האחוזים השונים אנחנו פשוט מזיזים או ממקמים את הדיב הפנימי איפה שנרצה.אפקט הקפיצה בא לידי ביטוי אחרי 92 אחוזים.

עכשיו נעצב את כל האלמנטים של הדיב הפנימי, וגם פה נשתמש באנימציות כדי להסתיר ולגלות מידע.

מה שהשגנו כאן הוא שכאשר העכבר עובר על שם המשתמש יופיע מעין בועת דיבור עם הפרטים הכלליים של המשתמש. בחיים האמיתיים כאן נכניס למשל את תפקיד המשתמש וכמה מילים עליו.

עתה לאנימציות:

אין הרבה מה לומר פה. רק דבר אחד חשוב באמת. כשהעכבר עובר על שם המשתמש שנמצא בתג h2 אנחנו מפעילים את הדיב שנמצא מיד אחריו !!!! כלומר כדי שזה יעבוד חייבים שהדיב עם התיאור של המשתמש יבוא מיד אחרי.

בשלב הבא נרצה שבכל לחיצה על הקישורים ליצירת קשר גם כן תופיע בועת דיבור שהגולשים יוכלו או לראות את הפרטים או ללחוץ על קישור ישיר למשל לדף הפייסבוק של המשתמש.

אני מאמין שקוד זה ברור למדי ולכן אין טעם להרחיב בהסברים.

עכשיו נשתמש בjquery כדי להציג את בועת הדיבור התואמת:

אנחנו בונים את השם של הדיב שאותו נרצה, ומשתמשים בfadeToggle כדי להציג אותו. בנוסף preventDefault וreturn false אומרים ללינק לא לנסות לעבור דף ולא להוסיף את ה# לשורת הכתובת.

וזהו סיימנו.

צפו בדמו

 

כתיבת תגובה

ספק שם מלא

@

אנא ספק כתובת דוא"ל תקפה

אנא ספק כתובת אינטרנט תקפה. כגון: http://www.yoursite.com

Show Buttons
Hide Buttons