כיצד לתכנן הסדר תוכן עבור עיצוב תגובה
בפוסט האחרון, דנתי איך תוכן חזותי מתייחס ל עיצוב פריסה. עם זאת הנושא הזה הוא מפורט מאוד, ו splinters אל תת-נושאים רבים, אחד מהם ארגון חזותי עבור פריסות תגובה.
בהודעה זו, אני רוצה להתעמק יותר לתוך תוכן תגובה כדי להסתכל על כמה שיטות עבודה מומלצות ארגון מחדש של מסכים למסכים קטנים יותר. ב UI & UX עיצוב, אין תשובה אחת נכונה עבור כל פרויקט אבל יש מגמות שפועלות היטב, וממגמות אלה אתה יכול לבנות את הרעיונות שלך.
סידור מחדש של רשתות לרשימות
כל אתר משתמשת בסוג כלשהו של רשת בין אם היא גלויה ובין אם לא. תוכן ברשת מוצקה לעיתים קרובות מקבץ יחד אופקית על צגים רחבים יותר, אבל זה לא הגיוני במכשירים קטנים יותר. התרופה הטובה ביותר היא לשבור את רשתות אלה על מסכים קטנים יותר, ו להמיר את הפריטים לרשימות.
דוגמה 1: מועצת העיר וולינגטון
תסתכל על אתר האינטרנט של מועצת העיר וולינגטון אשר משתמש במספר מקטעי רשת בדף הבית.
יש מצגת קטנה של קישורים מרובעים מפחית כמו חלון הדפדפן גודל. סעיף התחתונה גם הופך קטן יותר, ובסופו של דבר ממיר רשימה אנכית של קישורים.
על טלפונים קטנים מאוד עם רוחב 320px אתה צריך לעצב את גודל המכשיר. במקרה של iPhone המכשיר הוא גבוה יותר מאשר כך שזה הגיוני לארגן את התוכן בדרך זו.
דוגמה 2: Mooyah Burgers
תסתכל על דף הבית עבור Mooyah, ולנסות לשנות את גודל הפריסה. יש אזור מצגת קטן המכיל שלושה פריטים על מסך שולחן העבודה, אבל זה מתכווץ כדי להציג פריט אחד בלבד בנייד (הוספת שקפים מוסתרים נוספים לווידג'ט).
שתי קופסאות קידום מכירות לפרסם את App & Mooyah App להישאר קבוע לצד זה עד המסך מקבל מספיק קטן לסדר אותם מחדש אנכית.
ה “התחבר אלינו!” סעיף גם reranges התוכן כך כל הודעה חברתית מקבל כמה שיותר מקום. באופן כללי, מסכי מסך רחב ביותר הם מסכי מסך החכם ביותר הם הגבוהים ביותר.
דוגמה 3: שוק נושאים
בעת עיצוב פריסה עם רשת, כדאי לשקול הן סגנונות פריסה רחבה & גבוהה לפני כתיבת שורה אחת של קוד. בדרך זו אתה תהיה מוכן לבנות נקודות עצירה הגיוניות.
דף עם פריסת רשת מלאה צריך להקטין את גודל הקופסאות לפני ששבר אותם לקו חדש. לדוגמה, נושא שוק יש רוחב מקסימלי קבוע של 1240, ואת הרשת מכיל ארבעה בלוקים לשורה.
כמו המסך מקבל קטן יותר בלוקים אלה להפחית רוחב, אך לבסוף התקלקל ל להשאיר שלוש תיבות לכל שורה. בגודל הקטן ביותר, אתה מקבל קופסה אחת לשורה, וזה יש שפע של חדרים עבור טקסט & הדמיה לזרוח.
תמיד יש איזון שמירה על מידע רב ככל האפשר בשילוב עם הצורך להפוך את הטקסט קריא. ככל שאתה לבנות פריסות רשת קל יותר יהיה למצוא את זה איזון תוכן.
הסתר או הסר עמודות
צגים רחבים יותר ו תמיכה בדפדפן נוסף לאפשר למפתחים לבנות פריסות מורכבות להפליא. לעתים קרובות אני רואה בלוגים עם שלוש או אפילו ארבע עמודות כי תופסים חלק גדול של המסך.
עם זאת, התקנים קטנים יותר זקוקים לתוכן תוכן הגיוני מבחינה אנכית. מצאתי שתי אפשרויות טיפול sidebars מוגזמתYou
- זרוק אותם מתחת לתוכן הראשי
- הסתר אותם לגמרי
דוגמה 1: עצור לחץ
תסתכל באתר העיתונות עצור. יש לזה ארבע עמודות אנכיות על צג שולחן העבודה שלי.
העמודה השמאלית היא תפריט ניווט אנכי, העמודה הבאה היא עמוד התוכן הראשי עם המאמרים האחרונים. לאחר מכן יש לנו שני עמודות צדדיות שונות עם גדות נוספות “בצד” תוכן.
כאשר חלון הדפדפן משנה גודל, עמודות אלה לאט להקטין את גודל. הראשון ללכת הוא הניווט השמאלי שמסתתר מאחורי סמל תפריט המבורגר.
הפסק הבא מסתיר את העמודה האמצעית יחד עם לחצני השיתוף החברתיים המובילים. ואז סוף סוף על המסכים הקטנים, הצד הימני הרחוק לגמרי נעלם משאיר רק את העמוד המרכזי במרכז של תוכן.
אף אחד מהתוכן הצדדי לא מופיע מתחת לתוכן הראשי. זה מוסתר לחלוטין מן הנוף, וזו בחירה מקובלת לחלוטין צמצום עומס הדף וכדי לשמור את גובה סרגל הגלילה בגודל סביר.
מצד שני, בלוגים רבים להעביר את סרגל הצד מתחת לתוכן הראשי כמו על קונספט אמנות האימפריה אילו תכונות קשורות הודעות בסרגל הצד כי בסופו של דבר ירידה מתחת לתוכן.
דוגמה 2: בלוג Wishpond
בלוג המשאלות גם מסיר לחלוטין את סרגל הצד מהמסך על קטן יותר. אזור סרגל צדדי זה כולל בדרך כלל פרסום, טופסי הרשמה וקישורי פוסט קשורים. אף אחד התוכן הזה הוא חיוני, אבל זה יכול להוסיף ערך המבקרים.
אני אוהב לעקוב אחר - גישה היברידית שבו אני מזיז את סרגל הצד מתחת לתוכן, אלא גם להסתיר כמה פריטים בסרגל הצד מעבר לנקודה מסוימת.
לדוגמה, אם יש לי שלושה בלוקים של מודעות בפריסה המלאה, אני יכול להסתיר שני מרחבי מודעות אלה בנייד. זה הופך את תוכן סרגל הצד לנגיש אבל אינו מעמיס את הדף עם תוכן מוגזם.
דוגמה 3: מאדאם גוטייה
אני גם אוהב איך מדאם גוטייה משתמשת שלהם “חדשות אחרונות” הצדדי בדף הבית. זה בסופו של דבר טיפות מתחת לתוכן, ו תופסת עמדה מלאה על הדף.
כמעט כל אתר יהיה לפחות אחד sidebar בעיצוב. בין אם זהו סרגל צדדי של האתר או רק משהו שמופיע בתבנית דף, זה לצד זה עיצוב בסגנון הוא פופולרי כי זה מתאים יותר תוכן על המסך.
זו החלטה שלך איך להתמודד עם התוכן. אתה יכול להוריד את סרגל הצד התחתון, להסתיר אותו לגמרי, או להשתמש היברידית של שתי טכניקות אלה. אבל אתה צריך לעשות את הבחירה שלך בהתבסס על הרלוונטיות של סרגל הצד, שלה הכרח אל הדף.
התאמת & לסחוט שוליים
תמיד תהיה נקודה שבה לא ניתן לסחוט תוכן כל עוד, סעיף אחד צריך ירידה מתחת לשנייה.
על ידי התאמת השוליים לפני הורדת תוכן בדף, אתה נותן לקוראים רוחב רחב יותר של תוכן לבחור.
דוגמה 1: עולם אחד
הכותרת התחתונה על עולם אחד היא דוגמה מצוינת. יש לזה קישורי כותרת תחתונה בצד האתר צפו עם טופס הרשמה בדוא"ל משמאל.
עם שינוי גודל הפריסה, השוליים והריפודים בין האלמנטים הללו מצטמצמים. עמודות הקישור להתקרב, ואת טופס ההרשמה מקבל קצת יותר קטן, מדי.
בעבר נקודה מסוימת, זה פשוט הגיוני זרוק את הקישורים מתחת לטופס ההרשמה, ולתת את הכותרת התחתונה שפע של מקום לנשום.
כן, זה עושה את הדף יותר, כן, זה לוקח יותר מאמץ לגלול למטה עד כה, אבל אלה breakpoints קטנים יותר אתה יכול להניח משתמשים על התקנים בכיוון אנכי.
דוגמה 2: איי הזהב
דוגמה נוספת שאני אוהב היא דף הבית של אייל הזהב סגנון ניווט ייחודי. כאשר אתה משנה את גודל חלון הדפדפן את קישורי הניווט לסחוט יחד. בסופו של דבר הם הפסקה מקו אחד לתוך שתי שורות, ואז למטה לתוך עמודות בגודל קטן מאוד.
פריטים נוספים בדף בצע את אותו דפוס. דוגמה זו ממחישה את העוצמה של שינוי גודל השוליים לפני לחלוטין מחדש את הפריסה.
זרימה אנכית על מסכים קטנים יותר
תוכן הדף צריך לזרום באופן טבעי, ו יישור אנכי הגיוני על הנייד - -. זה אומר שאתה צריך לשקול ב-דף תוכן בלוקים ל עדכן את סגנון התוכן בהתאם. זה כולל סעיפים, כותרות, blockquotes, רשימות unordered, וכן תיבות תוכן מותאמות אישית.
דוגמה 1: BodyBuilding.com פוסט יחיד
קח למשל את ההודעה BodyBuilding אשר משתמש בקופסאות קטנות כדי להשוויץ שונים workout glute.
תיבות אלה כוללות תמונות ממוזערות בצד ימין כדי להדגים את התרגיל. במסכים קטנים יותר, התמונות הממוזערות האלה לשבור לקו חדש, ובסופו של דבר ערימה על גבי זה.
ה- CSS היענות שלך צריך לקחת בחשבון את הדקות הזעירה הזו בכל דף באתר.
דוגמה 2: הוגן ההבלים
לקבלת דוגמה גדולה יותר, בדוק את דף הבית של Vanity Fair לגמרי מחדש את המחוון סיפור מוצג. על שולחן עבודה מלא את הכותרות רשימת כותרות עם תמונה אחת מובלט מראה בצד. ככל שהדפדפן משנה גודל קטן יותר, קטע זה של הסיפורים העליונים הופך קרוסלה הזזה.
הממשק עצמו לגמרי משתנה על ידי הוספת ניווט נקודה, חצים, ותמונות מובלט עבור כל סיפור ברשימה. הרשימה המלאה שלהם של מאמרים היא יותר “אנכי”, אבל פריסה זו היא מסובכת לפעול על המסך הנייד, ולכן שינוי זה לתוך קרוסלה הזזה היא אפשרות טובה יותר.
תחשוב עוד על זרימת המשתמש ולא את זרימת התוכן שלך. תוכן לא תמיד צריך להיות כפוי לתוך פריסה אנכית על מסך קטן. רק לחשוב על איך לארגן את התוכן בצורה כזו תומך בחוויית גלישה אנכית.
מחשבות סגורות
עיצוב תגובה הוא חיוני בימים אלה, וכל מעצב אינטרנט ומפתח צריך להבין איך זה עובד. מבקרים מצפים שכל האתרים יהיו ידידותית לנייד. בכל פעם שאני נתקל באתר לא תגובה אני cringe למראה זה גלילה אופקי.
עקוב אחר הטיפים בפוסט זה עבור תכנון אסטרטגיות תכנון לארגון מחדש של תוכן עבור חוויית המשתמש הטובה ביותר בכל המכשירים.
