מרחבים לבנים משפרים אתר כאשר הם מפרידים בבירור תוכן, מתעדפים מידע ונותנים לכל פעולה לנשום. אלה לא בהכרח אזורים לבנים: המונח מתייחס לכל חלל ריק, ללא קשר לצבע שלו במינון טוב, זה מקל על הקריאה ומנחה את העין במינון גרוע, זה יכול להיפך לתת רושם של ריקנות או לאלץ אותך לגלול שלא לצורך.
השיטה הנכונה היא להתחיל מהעדיפות של התוכן, ואז להחיל סולם מרווחים עקבי בין טקסטים, מפות, תמונות, קטעים וכפתורים המטרה היא לא "להוסיף ריקנות", אלא להקל על הבנת הדף.
האם האתר שלך נראה עמוס או קשה לניווט?
מבט מבחוץ מאפשר לזהות אזורים לאוורור מבלי להסיר מידע שימושי.
איך אנחנו קוראים "חלל לבן" בעיצוב אתרים?
מרחב לבן, או מרחב שלילי, הוא האזור שנותר פנוי סביב אלמנט זה יכול להיות לבן, כחול כהה, בז' או לקחת את צבע הרקע של האתר זה קיים בשתי צורות משלימות.
מיקרו-חלל
הוא מפריד בין שורות טקסט, אייקון של הניסוח שלו, תוכן הקצוות של מפה או שני שדות של צורה הסטיות הקטנות הללו משפיעות ישירות על הקריאה.
מאקרוספייס
הוא מפריד בין קבוצות גדולות: באנר ומבחר מוצרים, שני חלקים או טיעון והקריאה שלו לפעולה. הוא בונה את הקצב הכללי של הדף.
מדוע מרחבים לבנים משפרים אתר?
הם נותנים למבקר אמות מידה כותרת מבודדת מהסעיף הקודם אבל קרוב לפסקה שהיא מציגה מובנת מיד כהתחלה של בלוק חדש כפתור מוקף בחלל יוצא ללא צורך להפוך אותו לענק.
- קריאה: קל יותר לנווט בשורות, פסקאות ורשימות.
- היררכיה: תוכן חשוב נבדל ממידע משני.
- הבנה: האלמנטים המקושרים נראים קרובים, הנושאים השונים מופרדים.
- נוחות ניידת: אזורי המגע פחות הדוקים ושגיאות הלחיצה יורדות.
- תפיסה: הרכב רגיל נראה בדרך כלל מבוקר ומקצועי יותר.
שלוש דוגמאות קונקרטיות לשימוש בחלל לבן
הדגמות סכמטיות אלו מראות כיצד ריווח משנה את התפיסה של דף, מבלי לשנות את תוכנו. הם אינם מייצגים פרויקטים אמיתיים של לקוחות.
דוגמה 1: גיליון מוצרים שקל יותר לנווט בו
כותרת, מחיר, חדשות ומניות מתחרים זה בזה.
אלמנטים קשורים נשארים קרובים, בעוד הכפתור נהנה מנשימה ברורה.
דוגמה 2: עדיף חלקים נפרדים של דף
נראה שהקבוצות שייכות לאותו בלוק וההיררכיה מטושטשת.
הרווח בין הקטעים גדול מהמרחב הפנימי: המבנה מובן מיד.
דוגמה 3: שפר את הנוחות בנייד
התוכן כמעט נוגע בקצוות והפעולה משתלבת בטקסט.
שוליים צדדיים, מרווחים ואזור כפתורים הופכים את המסלול לברור יותר.
כיצד להשתמש בחלל לבן ב-7 שלבים?
- לסווג את המידע. להחליט מה המבקר צריך לראות, להבין ואז לעשות.
- לקבץ את מה שהולך ביחד. כפתור המחיר והקנייה אמור להיראות שייך לאותה קבוצה; תנאי החזרה יכולים להוות בלוק משני.
- להפריד בין קבוצות שונות. השתמש ברווח גדול יותר בין שני חלקים מאשר בין כותרת לטקסט שלה.
- בחר סולם פשוט. למשל 8, 16, 24, 32, 48 ו-64 פיקסלים כנקודות התחלה, כדי להתאים לנושא ולטיפוגרפיה.
- דאגו לחלק הפנימי של הרכיבים. כרטיס חייב לשמור על שוליים קבועים בין הקצוות שלו, הכותרת שלו, התמונה שלו והכפתור שלו.
- לשלוט בקצב האנכי. רצפים קומפקטיים חלופיים ונשימות חדות במקום להחיל את אותו חלל גדול בכל מקום.
- בדיקה על מסכים אמיתיים. בדוק את כל הדף במחשב ובטלפון, לא רק קטע מבודד בעורך.
אילו רווחים יש לספק בהתאם לסוג העמוד?
| עמוד | להיות מאוורר בראש סדר העדיפויות | נקודת ערנות |
|---|---|---|
| Home בית | הבטחה, חזותית, הטבות ומבחר | הימנע מקטעים גבוהים מדי ועיכוב גישה למוצרים |
| אוסף | כותרת, מסננים, רשת וכרטיסי מוצר | שמור מספיק מוצרים גלויים מבלי לארוז את הכרטיסים |
| גיליון מוצר | גלריה, מחירים, גרסאות, רכישה וביטוח משנה | שמור מידע מכריע קרוב לכפתור |
| סל | מוצרים, סך הכל, משלוח ואימות | אל תזיז את הכפתור הראשי משם עם בלוקים משניים |
| מאמר | פסקאות, כותרות, רשימות וויזואליה | הגבל את הרוחב של שורות טקסט ארוכות |
כיצד לנהל שטח לבן בנייד?
הנייד לא צריך להיות גרסה דחוסה פשוטה של המחשב הרוחב חסר, אבל הגובה נשאר זמין: הבלוקים בדרך כלל עוברים על עמודה והמרווח האנכי שלהם הופך חיוני.
- צמצם את שולי הצד מבלי להדביק טקסט לקצוות המסך.
- צמצמו חללים דקורטיביים גדולים מאוד שמאריכים את הדף שלא לצורך.
- שמור על הפרדה ברורה בין כפתורים, שדות וקישורי מגע.
- הפוך שולחנות גדולים לכרטיסים אנכיים קלים לקריאה.
- בדוק כותרות ארוכות, מכיוון שהן תופסות במהירות מספר שורות.
העדיפות היא המשכיות המסלול המדריך שלנו המוקדש ל החוויה הניידת ב-Shopify פרטים בדיקות שימושיות אחרות.
שגיאות המרווח הנפוצות ביותר
מעט מדי מקום
- טקסטים דבוקים לקצוות
- קלפים וכפתורים קשים להבחנה
- קטעים ללא שבירה נראית לעין
- מידע ביטוח משנה נערם
יותר מדי מקום
- שטחים ריקים גדולים ללא כוונה
- מידע קשור מרחוק
- גלילה מוגזמת
- הדפסת דפים לא גמורה
באיזה שירות עלי לבחור כדי לשפר את המרווחים?
אבחון מהיר
בחר אותו מיני-ביקורת בחינם אם ברצונך לזהות תחילה את הבעיות העיקריות הנראות לעין ולקבוע עדיפות.
חנות קיימת לבדיקה
La shopify עיצוב מחדש מתאים כאשר המרווח הוא חלק מבעיית מבנה, תמונה או נתיב גדולים יותר.
פרויקט חדש
La יצירת חנות Shopify מאפשר לשלב היררכיה ומערכת מרווחים בתכנון.
אתר מחוץ Shopify
עבור חלון ראווה או פרויקט אינטרנט אחר, התייעץ עם השירות של יצירת אתר מקצועי.
ההיקף, המועד והמחיר תלויים בשירות ובדפים הנוגעים בדבר SiteQuiVend מציגה את הנוסחאות שפורסמו בדפי השירות שלה ומאשרת את המסגרת המתאימה לפני תחילת העבודה.
צריך פריסה ברורה יותר?
הצג את האתר שלך ואת הדפים לשיפור כדי להיות מופנה לשירות המתאים.
רשימת בדיקה לבדיקת רווחים לבנים
- לכל סעיף יש מטרה ניתנת לזיהוי.
- אלמנטים קשורים מקובצים חזותית יחד.
- לקטעים נפרדים יש הפרדה חזקה יותר.
- השוליים הפנימיים של הקלפים קבועים.
- פסקאות אינן יוצרות בלוקים צפופים מדי.
- לכפתור הראשי יש אזור נשימה.
- השוליים הצדדיים נשארים נוחים בנייד.
- שום חלל גדול לא חותך מידע מהפעולה שלו.
- הדף נשאר קצבי לכל אורכו.
- העיבוד נבדק ברוחב 375 פיקסלים.
אתר אינטרנט לבן שטח שאלות נפוצות
האם חלל לבן חייב להיות לבן?
מס 'זהו אזור ריק סביב או בין תוכן זה יכול להשתמש בכל צבע רקע תואם את הזהות החזותית.
האם חללים לבנים מבזבזים מקום?
הם משתמשים בשטח פנים, אבל מספקים אמות מידה. הם הופכים לבעייתיים רק כשהם מתרחקים מאלמנטים קשורים או מאריכים את הדף ללא תועלת.
באיזה מרווח עלי להשתמש בין שני חלקים?
אין ערך אוניברסלי סולם עקבי, המותאם לטיפוגרפיה ולנושא, חשוב יותר ממספר מבודד הרווח בין הקטעים חייב להיות גדול מזה המקשר בין כותרת לטקסט שלו.
האם לשים פחות או יותר מקום בנייד?
שולי הצד בדרך כלל קטנים יותר, בעוד שהמרווח האנכי צריך להישאר מספיק כדי להפריד בין תוכן ולהקל על אינטראקציות מישוש.
איך יודעים אם דף אוורירי מדי?
אם המבקר צריך לגלול הרבה כדי לקשר מידע לכפתור שלו, אם בלוקים משויכים נראים עצמאיים, או אם לאזורים ריקים אין פונקציה, המרווח כנראה מוגזם.
כיצד לשדר דף מבלי למחוק תוכן?
לקבץ מידע לפי נושא, לקצר פסקאות, להשתמש ברשימות, ליצור קלפים עקביים, ולחשוף מידע משני באקורדיונים כאשר הוא נשאר טבעי.
האם חללים לבנים משפרים אוטומטית את המכירות?
מס 'הם יכולים להפוך את המסע ברור יותר, אבל המכירות תלויות גם בהיצע, תנועה, מחירים, אמון, תוכן וחווית קניות.
האם נוכל לשפר רק את המרווח של ערכת נושא של Shopify?
כן עבור התאמות ממוקדות, אבל עיצוב מחדש רחב יותר עדיף אם המבנה, תבניות העמוד או הנתיב גם הם בעייתיים.
צור מקום כדי להנחות טוב יותר
מרווח טוב הופך את המבנה לברור מבלי למשוך תשומת לב לעצמו התחל בקיבוץ תוכן קשור, הפרד בבירור את השלבים לאורך הדרך והחל קנה מידה רגיל. לאחר מכן בדוק הכל במחשב ובנייד.
אם הדף נשאר טעון למרות התאמות אלה, הבעיה עשויה להיות עם ההיררכיה או נפח המידע SiteQuiVend יכול לעזור לך לקבוע אם יש צורך בתיקון ממוקד, עיצוב מחדש של Shopify או עיצוב מחדש.
