גרפיקה מוצר 6 טכניקות כדי להפוך את התמונות יותר אינפורמטיבי

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

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

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

1. הרחב את התוכן שלך

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

כאשר אתה מנסה להפגין תוכנה הדרכה (כגון Photoshop הדרכה) זה יכול להיות קשה להעביר את המסר לטקסט כתוב. המבקרים ינחת על המאמר שלך מיד להתחיל משנה במודע לשפוט את החומר בתוך שבריר של שנייה. אינטרנט מעצב קיר יש הדרכה נהדרת על בניית CSS3 תמונות מעוגלות מלווה גרפיקה שימושית. זה כולל כמה תוויות צילום מקרוב של אפקט.

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

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

2. הדגש תכונות בולטות

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

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

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

להלן דוגמה מדף העדכון של Mozilla Firefox.

אתה יכול לראות את המעצבים השתמשו קווי מנוקד מנוקד להצביע תוויות ותכונות חדשות. אלה הם למעשה תמונות רקע ממוקם לחלוטין בתוך מיכל div. באופן מפתיע כל טקסט התווית כתוב גם בתוך תגי HTML (לא רק תמונה אחת גדולה).

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

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

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

3. פשוט, מתבלט תוויות

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

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

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

4. תמונות עם תוכן דינמי

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

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

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

5. נקה צילומי מסך ותמונות מוצר

ניתן לכלול את כל התוויות הטובות ביותר עבור תכונות המוצרים שלך, אבל עדיין להיות חסר על המכירות. ה צילומי מסך ותמונות שתבחר עבור הגרפיקה שלך הם בסופו של דבר חשוב בדיוק כמו כל הפרטים עדין. ב- Windows וב- Mac OS X יש דרכים לקחת צילומי מסך של שולחן העבודה כולו באמצעות קיצורי מקשים. באמצעות שיטה זו בשילוב עם קצת זמן Photoshop אתה יכול לצבור הדגמות תכונה מעניינת מאוד.

אם המוצר שלך מפותל מאוד אתה צריך לנסות להרכיב כמה תמונות שונות. הדוגמה שלמעלה מהאתר של Tweetbot משתמשת במעגלים כחולים כדי לציין פעולת הקשה באפליקציה. במקום צילום מסך אחד עם תוויות רבות לשקול שימוש בגלריה קטנה jQuery התמונה לשלב 3-5 גרפיקה שונים. זה נותן לך יותר הזדמנות להתמקד בפרספקטיבות שונות של המוצר בעוד המבקרים מציעים חוויה עשירה הרבה יותר.

כאשר אתה מצלם זריקה מהמחשב או הטלפון החכם התמונה נשמרת תמיד זום 100%. עורכי תמונות כמו Photoshop יש את היכולת לשנות את גודל אלה, אבל הם לעתים קרובות לאבד פרטים. אז איך אתה יכול להתאים כזה גרפי לתוך אתר האינטרנט הקטן שלך? אחת הטכניקות הטובות ביותר היא הגדלה שבו אתה בקנה מידה את היישום למטה וליצור קטעים מוגדלת של החלקים החשובים ביותר. טכניקה זו נתפסת יותר נפוץ בתוכנה מאשר מוצרים פיזיים - יש לי מפורט את תהליך התכנון להלן.

6. בניית "עדשות זום" אפקט

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

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

בונוס: "זום עדשה" אפקט Photoshop הדרכה

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

שלב 1

שמירה על המעגל שנבחר, לשנות את המילוי% בחלונית השכבות ל -0%. תחת שכבת FX להוסיף שבץ שחור 1px-2px ו זוהר פנימי לבן. ניתן להפחית את האטימות עבור תאורה לבנה פחות.

שלב 2

עדיין שמירה על המעגל שנבחר לעבור לשכבת הרקע שלך ולחץ על ctrl (עבור משתמש Mac, זה פקודה או מפתח cmd.) + c להעתקה. ואז לעשות שכבה חדשה מעל הרקע אבל מתחת להגדלה מעגל והדבקה. אתה יכול לחילופין רק להכות Ctrl + j לשכפל שכבה חדשה עם רק את הבחירה ב-טקט.

לחץ על ctrl + t כדי לפתוח את כלי ההמרה. עכשיו קנה המידה את השכבה החדשה שכפול בעת החזקת משמרת לשמור הכל פרופורציונלי alt כדי לשמור על מרכז נייח.

שלב 3

לחץ על ctrl ולחץ על סמל שכבת הזכוכית המגדלת כדי לבצע את הבחירה שלך שוב. שים לב שאתה עדיין צריך להדגיש את שכבת רקע כפולים בלוח שכבות (אחד ישירות מתחת זכוכית מגדלת שלנו) כלומר זה יהיה רקע כחול בהיר.

הקש Ctrl + Shift + i כדי להפוך את הבחירה הנוכחית. עכשיו פגע למחוק לנקות את האשפה הנוספת מ מסך מחדש scaled שלנו. עבור קצת אפקט נוסף לשלוף את השכבה FX תפריט להוסיף צל ירידה קטנה. ניתן גם לצייר קו אנכי דק 1px באמצעות מסנן נוזלי (מסנן> נזילות) ליצור ידית קטנה!

סיכום

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

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