עיצוב אתרים נייד 10 עצות כדי לשפר את השימושיות

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

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

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

1. החלט על רזולוציית המסך

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

הנה רשימה של פתרונות אינטרנט פופולריים על מכשירים ניידים כמו של פברואר 2011 שהוצגו על ידי Uxbooth.com עם המאמר שפורסם שלהם, שיקולים עבור עיצוב אתרים ניידים (חלק 2): מימדים, מאת דוד לגט. המחבר מסביר כמה נקודות על מידות תצוגה ופתרונות לתכנון פריסה.

2. לשבור דפי אינטרנט לחלקים קטנים

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

עבור הדוגמה הבאה, CBS News אתר האינטרנט הנייד גרסה מראה רק את החדשות הגדולות קטע ו שובר את החדשות מאמרים קטנים חלקים. בעוד Treehugger מציג את עצמו עם המאמרים האחרונים שלהם tweets האחרונה עם כמה תכונות של האתר המלא. בשני האתרים יש את המשתמש ללחוץ על קישור טקסט כדי להציג את שאר המאמר.

חדשות הלמ"ס

מחבק עצים

3. לפשט את העיצוב

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

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

הקנייה הכי משתלמת

YouTube

4. אפשרות להציג את האתר המלא

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

לדוגמה, Ars Technica יש כפתור הקישור שלהם לאתר סטנדרטי ממוקם על הכותרת. בעוד Shangri-La יש קישור האתר המלא שלהם ממוקם על הכותרת התחתונה.

ארס טכנאי

שנגרי - לה

5. מיקום ניווט

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

D & G

פוליטיקו

הורוסקופ יומי

6. השתמש בקישורי טקסט

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

רשימה בנפרד

Reddit

7. לעשות הבחנה בין הקישור הנבחר

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

חנון כיתה

דיזל

8. קישורים מאזן

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

פליקר

טוויטר

9. הפחת את רשומת הטקסט של המשתמש

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

עבור המדגם שלהלן, Fedex עשה שימוש רשימת תפריטים ותפריטים. בעוד Tumblr גרם לך לבחור את השפה שלך באמצעות התפריט הנפתח.

פדקס

טאמבלר

10. לא קופץ או מרענן

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

בקצור נמרץ

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

האם יש לך אתרים מועדפים לנייד שבאמת עוררו בך השראה? האם תוכל לשתף חלק מהטכניקות שלך לעיצוב אתרים לנייד? תודיע לנו!

לקריאה נוספת

1. אינטרנט עיצוב תגובה (alistapart.com)
2. הפוך את האתר שלך נייד ידידותית (Thinkvitamin.com)
3. בודק (w3.org)
4. סימולטור iPhone