עבודה במגע שונה ממקלדות ועכברים
בימים הראשונים של עיצוב אתרים עבור התקנים ניידים, רוב המפתחים bifurcated המוצר שלהם מציע. הם שיחררו גרסה שולחנית מתפקדת במלואה ולאחר מכן גרסה "אופטימיזציה לנייד", אשר הפשיטו הרבה מיתוג ודימויים כדי להתאים את היכולות המוגבלות ואת מהירות הרשת של טלפונים ממתקים בר רשתות אלחוטיות 3G.
טלפונים חכמים עכשוויים, עם זאת, יכולים להפוך דפי אינטרנט באותה יעילות כמו מחשבים שולחניים, דרך רשתות טובות או טובות יותר מקווי ה- DSL של אתמול.
עיצוב, אם כן, מתכנס חזרה לממשק משתמש יחיד. אבל הסיכון למעצבים הוא לא כי הטלפון החכם או טבלט לא יכול להפוך אתר אינטרנט תגובה מודרנית. במקום זאת, השיטה של קלט משתמש על מסך מגע מחייבת שינויים משמעותיים בעיצוב האתר הבסיסי. בימים של בניית אתר אינטרנט בהנחה המבקרים יש מקלדת ועכבר הם מעל.
בסיסי עיצוב מסך מגע כללים
עיצוב ממשק אינטרנט מודע למגע, מחייב התפתחות של הגישה המסורתית של צג המקלדת לעכבר. בפרט, עליך להתאים אינטראקציות כמו מחוות, ברזים וקלט multitouch.
- הקשה אינה מדויקת. אלא אם כן ללקוח יש אצבעות של פעוט, אפילו עם פקדי תוכנה מדויקים מאוד, זה יכול להיות קשה להקיש ולדעת.
- המחוות שונות מברזים. כדי לגלול דף ארוך על מסך מגע, המשתמש מחליק אצבע אחת לאורך חלון הדפדפן. זה אולי לא נראה משמעותי עד שאתה מבין כי גלישה עם העכבר, להזיז את העכבר למטה .
- שני (ועוד) הברזים אצבע. משתמש יכול להשתמש במספר ברזים באצבע במכשיר באותו זמן כדי לשלוט בו. אלה ברזים נוספים יכול להיות משהו ספציפי בהתאם למערכת ההפעלה של המכשיר של המשתמש.
- התקנים בוהקים. המסכים של רוב טבליות המגע עשויות מתוך זכוכית חסון. חומר זה יכול להיות מאוד קשה לקרוא, עם הרבה בוהק, במצבים אור בהיר. בנוסף, עם כל נוגע, הם מקבלים טביעות אצבעות ו כתמים על המסך זה יכול להשפיע על איך הדפים שלך נראים.
- מקלדת על המסך. בעוד שלמשתמשים מסוימים יש מקלדת אלחוטית שהם מתחברים לטאבלטים שלהם, רוב משתמשי הטאבלט משתמשים במקלדת שמופיעה על המסך לצורך הזנת נתונים. הכניסה OSK יכול לגרום כמה שגיאות הקלדה מצחיק כמו גם להיות לא נוח להשתמש עבור תקופות זמן ממושכות.
בשל תכונות אלה של המכשיר, מעצבי אתרים צריכים להדגיש מספר כללי עיצוב בסיסיים עבור משתמשי מסך מגע:
- אל תניח פריטים הניתנים ללחיצה קרוב מדי זה לזה. אין כלל קשה ומהיר המגדיר כמה קרוב הוא קרוב מדי, אבל רשימות של קישורים, במיוחד בגודל גופן קטן, יכול להיות קשה לנווט על ידי לחיצה על (הקשה) עם אצבע שמנה. זה יכול להיות מעצבן צריך להתמקד רק כדי לנסות ללחוץ על קישור. עיקרון זה נכון עבור לחצנים כמו גם קישורים.
- היררכיות יכול להיות קשה לשמור פתוח. אחת הצורות הפופולריות של תפריט דינמי משתמשת ב- JavaScript כדי לפתוח תפריט משנה כאשר המשתמש לוחץ על העכבר ולאחר מכן מרחף את העכבר מעל לתפריט המשנה. מצבים אלה יכולים להיות קשים מאוד או בלתי אפשריים לשימוש על מסכי מגע, כי הם גם לא נשארים פתוחים או לא ייסגר.
- העבר קישורים ואזורים ניתנים ללחיצה הרחק מהקצה הימני של החלון. רוב האנשים ימניים נוטים לגלול בצד זה של המסך. מאז גלילה נעשה עם מחווה, לפעמים אפשר להתחיל את החלקה על הקישור בטעות. משתמשים יכולים להתעצבן אם הם רוצים לגלול על הדף ובמקום זה בסופו של דבר בטעות הקשה על הקישור. על ידי הזזת הקישורים שלך מהצד הימני, תוכל לעזור להם להימנע מאי-נוחות זו.
- אין עכבר. וזה אומר שאין מצביע עכבר. אתה לא צריך להסתמך על מצביע העכבר שינוי כדי לעזור לציין משהו ניתן ללחוץ.
- מצבי Hover אינם קיימים. כמתואר לעיל, שכן אין עכבר, אין דבר לרחף עם. קישור הוא גם לחצה (טפח) או לא על מסך מגע, כך שמשתמשים לא יכולים להסיק מידע שימושי ממצבים כגון לרחף כמו שינויים בצבע, עצות כלי, או שינויים שורת המצב.
- רקע שחור לשפר את הזוהר. אתר עם רקע שחור יכול להיות מאוד קשה לקרוא על מסך מגע בגלל הבוהק. שחור עושה את טביעות האצבעות על המכשירים להופיע בצורה ברורה יותר, טשטוש המסך. והשחור יכול להפוך את המסך למראה המשקף את הפנים של המשתמשים לעתים קרובות יותר מהטקסט שמופיע על המסך.
- בלוקים ארוכים של טקסט בטפסים קשה לכתוב. אמנם אפשר לכתוב רומנים שלמים על iPad או אנדרואיד או Windows Tablet, רוב האנשים לא אוהבים להשתמש במקלדת על המסך עבור קטעי טקסט ארוכים. ככל העיצוב שלך יכול להפוך הזנת נתונים קצר וקל ככל האפשר, יותר טוב.
ההיבט החשוב ביותר של עיצוב עם מסכי מגע בראש הוא לבדוק את הדפים שלך על מסך מגע . בעוד הרבה iPad ו emulators iPad זמינים, והרבה טבליות של Windows, הם עדיין לא מספקים את התחושה של מסך מגע. אינך יכול לומר שקישורים קרובים מדי או שהלחצנים קטנים מדי - או שהבוהק הופך את הדף לקשה מדי לקריאה - אלא אם כן אתה יוצא מטאבלט ומנסה אותם לפני שתפרסם את עיצוב האתר החדש שלך.