כותרות ותגובות קשובות - טיפים ומלכודות
הרעיון של עיצוב אתרים תגובה יש חלחל האינטרנט, ולהיות מצרך עבור מפתחי Frontend. אין להכחיש את הערך של עיצוב תגובה בעולם המודרני, אבל יש קושי להבין באופן מלא כיצד לעצב פריסות תגובה כראוי.
הנושא יכול להימשך זמן רב, כי יש כל כך הרבה תחומים ייחודיים של אתר אינטרנט, אך התמקדות על אלמנטים בודדים יכול לעזור לך להבין טוב יותר את המטרות של המשתמש, וכיצד מטרות אלה ניתן להשיג עם עיצוב תגובה.
אני רוצה לכסות עצות עיצוב עבור כותרות, לוגו, ו תפריטי ניווט, כפי שהם נוגעים עיצוב תגובה. קח את ההצעות האלה כפי שהן חלות על העבודה שלך ואל תשכח לעצב את הממשקים שלך עם התנהגות המשתמש בחשבון.
רזה Navbars
במסכים גדולים, זה נורמלי להיות כותרות גדולות, אולי אפילו כותרות גדולות עם רב קומות הקישור שכבות. אבל במסכים קטנים יותר אין את אותו שטח, ויש להגביל לפי הצורך.
מאחר שהיישומים הניידים המותאמים בדרך כלל יש להם כותרות קבועות, זה נוהג נפוץ בעיצוב תגובה גם. כותרת קבועה צריך גם להתכווץ כאשר על מכשירים קטנים יותר: זה משאיר יותר מקום לתוכן, אבל עדיין נותן לקוראים גישה ישירה לכותרת & ניווט.
קח למשל את פריסת קריקטורה Brew על צג בגודל מלא, ועל מכשיר נייד.
בנקודה 600px, הניווט מתכווץ כמעט חצי גובה על הדף. פעולה זו הופכת את הלוגו ואת תפריט ה- nav ללחיצה לקטן יותר, אבל הם הרבה יותר פרופורציונלי אל שטח המסך היחסי.
כמו כן, כי קריקטורה בירה יש תיבת הנפתח כמו תפריט תגובה על המסך הנייד. זה אומר תוכן שכבת על על הדף כאשר נפתח, ולכן חשוב להשאיר הרבה מקום בשביל זה.
דוגמה דומה ניתן למצוא באתר ג 'קסונוויל אמנות ללכת. סרגל הניווט העליון נשאר קבוע בזמן גלילה אבל מתכווץ על מכשירים קטנים יותר. זה טוב יותר עבור עיצוב תגובה כי סרגל מדלל משאיר יותר מקום לתוכן במסך נייד קטן יותר.
לכל קישור בסרגל הניווט יש סמל קשור לקישור הטקסט. זה נראה נהדר על צג מסך רחב אבל זה מפורט מדי עבור מסכים קטנים יותר.
ההליכה של אמנות הליכה משתנה לתפריט נפתח עם קישורים קבועים סביב נקודת עצירה 770px. הסמלים מוסתרים בתפריט הנפתח משום שהם יהיו קטנים מדי וצפופים מדי במכשירים קטנים יותר.
בעת עיצוב כותרת תגובה, שקול תמיד שטח מסך כולל תוך עיצוב הסרגל. אם אתה לא רוצה את הכותרת להישאר קבוע זה בסדר גמור, אבל אתה עדיין עשוי לרצות לכווץ אותו קצת כדי לשמור מקום בחלק העליון של הדף.
סמל
רוב הלוגו משלבים טקסט או סמל או גרפיקה לייצג את המותג. זה אומר שאתה תמיד יכול מזעור לסמל (כן זה מילה אמיתית) זה סוג של לוגו עד לסמל של הגירסה המלאה שלה.
זוהי טכניקה חזקה עבור כותרות תגובה כי אין תמיד מספיק מקום ללוגו מלא. אתה מאבד חלק glitz & זוהר של לוגו בגודל מלא, אבל זה המחיר ייתכן שיהיה עליך לשלם עבור פריסה תגובה נקי.
בדוק את הלוגו של חדשות מעצב אינטרנט ולראות איך זה משתנה כמו לשנות את גודל הדפדפן.
אולי לא כולם יזהו את הסמל כאשר הראשון לבקר באתר, אבל בזכות זיהוי תבנית זה לא בעיה ענקית.
אנשים היו באינטרנט מספיק זמן כדי לדעת כי בפינה השמאלית העליונה של הדף שמור בדרך כלל עבור לוגו. זה סמל ורוד קטן משמש גם סמל העכבר, אז זה קל לעשות כמה מסקנות בלי לחפור רחוק מדי לתוך האתר.
אתה לא תמיד צריך להסתמך על גרפיקה עבור טכניקה זו לוגו מרוכז. הכותרת של צעירים רעבים משתמשת טקסט ירוק בהיר עבור הלוגו אשר בסופו של דבר מתעבה על הטקסט "Y & H".
אמנם זה לא יכול לעבוד עבור כל אתר אם המיתוג הוא לא קל לזהות כמו אותיות בודדות. אבל זה הולך להראות את זה לוגו יכול להיות פשוט יותר לתוך גרפיקה & טקסט, ושני גרסאות תופסים פחות מקום על מסכים קטנים יותר.
טיפול ברקעים מסך מלא
דפי נחיתה רבים משתמשים ברקעי מסך מלא כדי למשוך יותר תשומת לב. זוהי טכניקה חזקה אבל לעתים קרובות עובד הכי טוב על צגים גדולים.
אז איך אתה מטפל בזה על מסך קטן יותר? באופן כללי, מעצבים גם להסיר את תמונת הרקע מעבר לנקודת עצירה מסוימת, או לתמונה עצמה מקבל מחדש כדי להתאים לחלון.
Cap Radio Raffle משתמש בטכניקה זו בדף הבית שלהם. תמונת הרקע שומר את נקודת המוקד בתצוגה בכל עת, לא משנה כמה לשנות את גודל המסך.
סוג זה של פתרון בדרך כלל דורש קצת מיקום CSS אבל זה פשוט מאוד כאשר אתה מקבל את העניין. רק לשמור על נקודת המוקד בתצוגה בכל עת, ו גודל גודל מיכל התמונה כדי להתאים בפרופורציה עם המכשיר.
מעבר לרקע גדול מסיבות אסתטיות, ייתכן שתשתמש גם בתמונות גדולות עבור תוכן הדף. דף הבית של Mashable משתמש ברקע של תמונה מובלטת עבור הסיפור העליון המשתרע על כל הפריסה.
הפריסה שלהם תגובה דוחס את התמונה בזמן שמירה על מוקד מרכזי. זה קשה לעשות את זה כי התמונה המוצגת משתנה כאשר הסיפור משתנה, כך תמונות חייב להיות שנאספו בקפידה. הפתרון של Mashable הוא עדיין שיטה מצוינת לטיפול בתמונות מסך מלא עבור בלוגים & פריסות המגזין כאשר מתוכנן כראוי.
לפשט את הניווט
בעת חידוש עבור מסכים קטנים יותר, לשמור על קישורים רבים ככל האפשר ב ניווט, ו לעשות את זה נגיש. זה אומר שאתה עשוי להזדקק כמה קישורים אם יש לך רב שכבתית התפריט הנפתח.
אמנם אם יש לך את האסטרטגיה הנכונה זה עדיין אפשרי לשמור את כל dropdowns ב-טקט. לדוגמה, Kidscreen משתמש ב עם תפריט קטן סמלים המציין קישורים משנה בתפריט תגובה.
אנשים רבים טוענים נגד תפריט המבורגר אבל באתי לקבל את זה כפריט הכרחי עבור תפריטים ניווט ארוכים. זה פשוט עובד, והוא הפך להיות נרחב הבין על ידי רוב המשתמשים החכמים כמו "כפתור התפריט".
למעשה, יהיה לך קשה למצוא אתר תגובה שאינו מסתמך על תפריט המבורגר של שלוש הבר. CyberChimps הוא דוגמה מצוינת משתמש בתפריט נפתח אנכי במקום שקף.
מבנה הניווט של CyberChimps מקבל מחדש כדי להחליק למטה על הדף. התפריט יורד מלמעלה בלוק גדול עבור קישורים.
עם יותר שטח ללחוץ ו טקסט קישור גדול יותר, תהליך ניווט דפי הופך להיות הרבה יותר פשוט. לכוון את הפילוסופיה הזו עם כל כותרת התגובה שלך, ואת העיצובים שלך ישפרו בצורה דרסטית.
בנה אחד משלך
עם טיפים אלה לרשותכם זה צריך להיות שום בעיה לבנות כותרות תגובה שמיש. אמנם יש הרבה כלים כדי לעזור לך, הדרך היחידה להבין באמת היא באמצעות תרגול.
אז לקחת את הטכניקות האלה איתך להתחיל לבנות אתרי אינטרנט! יש לי גם רשימה של משאבים נוספים עבור כותרות תגובה כי אתה יכול לבדוק להלן.
- יצירת בסיסי ניווט נייד (teamtreehouse.com)
- Best Practice עבור כותרת אתר אינטרנט (ux.stackexchange.com)
- כיצד אוכל להפוך את תמונת הכותרת שלי לפעולה נכונה? (stackoverflow.com)
