מבט לתוך עיצוב עבור התקנים ניידים

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

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

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

תכנון חוויית משתמש חזקה

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

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

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

לשמור דפים קצר & מתוק

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

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

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

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

בניית סגנונות CSS ניידים

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

(מקור תמונה: מגזין מוחץ)

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

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

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

עיצוב אתרים עבור iPhone

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

עבור אתרי אינטרנט ספציפיים ל- iPhone, יהיה עליך לכוון את גודל המסך. גודל המסך הקבוע מוגדר 320px 480px עבור דגמי iPhone ישנים ו 660px על ידי 960px עבור iPhone 4 ו - iPhone 4S.

מסכי iPhone מוגבלים למרחב. צריך להיות לך גוש תוכן אחד המשתרע לאורך זמן ככל שיידרש. שמירה על רכיבים בעמודה אחת תחסוך לך כאבי ראש לאפשר פריסה נוזל “למלא” הן במצב לאורך והן לרוחב. בשביל זה אתה כנראה צריך לפתח תבנית אחרת ולמצוא דרך לבדוק אם המבקר (ים) שלך משתמשים ב- iPhone. קטע ה- PHP הקטן אמור לפעול היטב:

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

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

@media מסך ו- (max-width-width: 960px) / * iPhone css * / 

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

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

סקריפט jQuery נייד

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

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

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

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

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

כלי מפתח מועילים

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

אופרה נייד אמולטור

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

האמולטור תומך מסביב 20 פרופילים ניידים כגון Samsung Galaxy S, HTC Desire, ואפילו Tablet כמו Xoom של מוטורולה. אפשר גם להגדיר את רזולוציה מותאמת אישית ו צפיפות פיקסלים למטרות בדיקה אינטנסיבית. החשוב מכל, אתה לא צריך לעשות יותר מדי תצורה עבודה, פשוט לעשות כמה קליקים ואתה טוב ללכת.

ההורדה היא לגמרי בחינם ואת התוכנה פועלת גם MAC OS X ו- Windows הסביבה. המפתחים שלהם קשה בעבודה יצירת סטנדרטים אינטרנט ראוי tweaking מנוע טיוח הנייד שלהם. אני ממליץ על כלים אחרים dev שלהם אם אתה מחפש כלים נוספים כדי לעזור לך לאורך הדרך.

PhoneGap

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

התהליך פועל על ידי דחיסת הקוד הראשון והעברתו דרך מסגרת היישום של PhoneGap. משם היישומים שלך יכולים להגיע לחלק גדול של השוק לנייד, כולל Android, iOS, Windows Phone 7 ו- BlackBerry.

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

סטודיו אפטנה

אתר Aptana הוא המקום המוביל ללמידה על כלי הפיתוח שלהם. הגרסה האחרונה של חבילת Suite, Aptana 3.0.3, כוללת IDE משולב במלואו לפיתוח אינטרנט, סגנונות CSS ו- HTML תג קינון, ואת החלק הכי טוב: Aptana הוא לגמרי חופשי להוריד! הם מציעים חבילות עבור כל 3 מערכות ההפעלה הגדולות (כולל לינוקס) המהווה נוחות ענק עבור מפתחים.

מה הופך Aptana מיוחד הוא כמה מהר אתה יכול לפתח יישום אינטרנט קטן לבדוק את העיצוב שלך. סוויטת הסטודיו מאפשרת לכם במהירות לפתח ולבדוק יישום אינטרנט פועל על רובי on Rails, PHP, Python, או פשוט HTML / CSS, ואת הקוד שלהם הדגשת תכונות לאחרונה השתפרו כולל HTML5 ו CSS3 תג חדש ספריות. זה גם מגיע עם אינטגרציה Git, מובנה מסוף, הבאגים קוד, קומץ של תכונות nifty אחרים.

ערכות GUI ניידים וסמלים

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

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

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

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

ערכת iOS 5 GUI

רכיבי וקטור

ערכת iPhone App ערכת

מגנטים Wireframe (ערכת DIY)

ממשק ממשק משתמש של Android