אַשׁרַאי:
מעצבים ומפתחים שיוצרים תוכן למכשירים ניידים עם מסכים ברזולוציה גבוהה רואים לרוב בתצוגת הרשתית ברכה וקללה. למשל, החדשאייפד, עם רזולוציית 2,048 x 1,536 פיקסלים, יש מיליון פיקסלים יותר מטלוויזיית ה-1080p HD שלך.
אבל בעוד שהרזולוציה החדשה מעניקה חוויות חזותיות מדהימות, המכשירים לרוב דורשים מהירויות אינטרנט 4G, שאינן זמינות לכולם. יתר על כן, מעצבים שואלים כיצד להתחיל מלכתחילה פרויקטים מרובי מסכים.
בין אם אתה מפרסם תוכן דיגיטלי או בניית פרסום לתצוגה במדיה עשירה, נסה את חמשת העצות האלה.
1. אם מעצבים עבור מכשירים מרובים, התחל עם האייפד.
למרות שמבחינה היסטורית סדר יצירת התוכן הדיגיטלי היה שולחן עבודה ראשון, סמארטפון שני, טאבלט שלישי, תצטרך להעביר חוויות לכל המסכים בסופו של דבר. לכן, הפוך את הסדר והתחיל עם מסך הרזולוציה הגבוהה ביותר והפלטפורמה האינטראקטיבית ביותר.
התחל עם האייפד, המכשיר שיכול להתמודד עם המרכיבים האינטראקטיביים הטובים ביותר מבחינת תכונות ורזולוציה. לאחר מכן, שנו את הרעיון בעת העברה למכשירים מוגבלים יותר, כמו מחשבים שולחניים, טלוויזיות חכמות, סמארטפונים וטאבלטים פחות מתקדמים. זה מבטיח שהתוכן יעבור אופטימיזציה במלואה בכל מכשיר.
2. השתמש בגופני אינטרנט.
גופני אינטרנט מאפשרים לך להשתמש כמעט בכל גופן מבלי שתצטרך לעבד אותו כתמונה תחילה. הורד את הגופן בנפרד ועבד את הטקסט בדפדפן באמצעות התכונה @font-face. זה חוסך הרבה רוחב פס במסכים ברזולוציה גבוהה.
שלב את גופני האינטרנט עם הצללה ומסכות לקבלת תוצאות ברזולוציה גבוהה הניתנות להתאמה אישית. זֶהדוגמה לגופןנראה כמו שלט מצויר ביד באייפד החדש שלך. גש לגופנים אלה מספקים שונים, כמוTypekit.
או החל טכנולוגיות דחיסה על תמונה שבדרך כלל תיצור חפצים לא רצויים בטקסט שלך. על ידי שמירת הטקסט נפרד ושימוש בגופני אינטרנט לעיצוב, תמיד תפיק תוכן חד וקריא.
3. השתמש ב-CSS במקום PNGs.
טכנולוגיות אינטרנט כמוHTML5וCSS3לעזור לייעל תצוגות ברזולוציה גבוהה בצורה ידידותית לרוחב הפס. השתמש בשיפור מתקדם כדי לסמן את התוכן; כך, זה עדיין ייראה הגון בדפדפנים שאינם תומכים במלואם בתכונה. לאחר מכן, נצל את היתרונות של צבעים, פינות מעוגלות, שיפועים ואטימות כדי ליצור אלמנטים גרפיים נפוצים. אל תפנה ל-PNG לצרכים מבוססי צורה, כגון לחצנים, קווים, פינות וכרטיסיות. או שהוא לא ייראה פריך, או שהוא יעלה הרבה יותר קילובייט ממה שהוא שווה.
4. השתמש בבורר מדיה של CSS כדי לספק תמונות בגודל הנכון.
בעת יצירת תמונות וגרפיקה להעברה בין מכשירים, נסה להשתמש בגישת עיצוב רספונסיבית המרחיבה את התוכן לגודל הקנבס או חלון הדפדפן. טכניקות מסוימות של JavaScript מאפשרות להוריד תמונה ברזולוציה גבוהה, אך עשויות למעשה להוסיף משקל לדף. במקום זאת, נסה את בורר ה-CSS @media כדי להוריד תמונה בגודל ספציפי למכשיר.
5. שאלו כמה טריקים ממעצבי משחקים.
הפיכת גרפיקה ברזולוציה גבוהה ליעילה אינה חדשה בעיצוב המשחק. טכניקות נפוצות לפיתוח משחקים, כמו מפות מרקם או מפות ספרייט, יכולות להיות הגישה הטובה ביותר לתוכן שלך במסכים ניידים ברזולוציה גבוהה.
בעזרת טכניקות אלו, המעצב שם תמונות ורקעים רבים בתמונה אחת גדולה יותר כדי להימנע מהורדה וציור של מספר תמונות. במיוחד כאשר עוסקים באנימציות או ברקע - כפי שקורה לעתים קרובות בעיצוב פרסומות מדיה עשירה או תוכן בידורי - רוחב הפס וביצועי התצוגה משתפרים.
