פוסט אורח – אייפון ועיצוב אתרים מאת GalBS

מאי 27, 2011   //   על ידי אבי כהן   //   טכנולוגיה, מדריכים, עיצוב, פוטושופ, שימושון  //  9 תגובות

איך נעצב אתר כך שיהיה מתאים לגלישה באייפון או במכשירי סלולר אחרים?

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

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

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

עקרונות עיצוב אתרים מותאמים אייפון

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

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

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

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

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

5. ביי ביי פלאש – כבר שמנו לב עד עכשיו שמיום ליום הפלאש נעלם מתחום עיצוב האתרים בגלל סיבות שונות. אז עכשיו סופית אפשר להוציא אותו מהלקסיקון מכיוון שנכון לעכשיו דפדפני סלולר לא קוראים פלאש. אם בכל זאת נרצה אנימציה בעיצוב – נוכל להשתמש בפורמט GIF  הידידותי מאד או לחילופין לשלב HTML5+JS  ליודעי קוד שבנינו שניהם בכל מקרה יעשו עבודה טובה מבחינת קידום אתרים.

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

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

גל, מעצב גרפי
www.galbs.com



9 תגובות

  • כתבה מעניינת. אשמח לשמוע יותר בהרחבה למה אתה חושב שהפלאש הולך ונעלם מתחום העיצוב.

  • תודה רבה גל על הפוסט המושקע,
    נהנתי ממנו מאוד…
    יכול להקנות פרספקטיבה למי שלא התנסה בעיצוב לסמארטפונים

  • […] אבל האם מדובר רק בהייפ?פיתוחאבי כהן נתן השבוע כמה טיפים לעיצוב אתרים עבור מכשירי אייפון. כיום, לא מעט אנשים מבלים אחוז גדול מזמן הגלישה שלהם […]

  • אחלה פוסט תודה רבה לאבי ולגל בן שטרית

  • אשמח לשמוע פרטים…

    • בוקר טוב יפה,
      לא הבנתי מה כוונתך?

  • אהלן, מאוד שמחתי לקרוא ויש לי כמה שאלות:
    1.יש אפשרות שהאתר יזהה אם אני גולש דרך מכשיר נייד או מחשב? -ואז לעצב אתר שמתאים למכשיר.
    2. ניתן לבנות אתר שמזהה מחוות (Gesture)?
    תודה.

  • That's way more clever than I was expeticng. Thanks!

הגב לBelle

שוחחו איתי אונליין

מרץ 2024
א ב ג ד ה ו ש
 12
3456789
10111213141516
17181920212223
24252627282930
31