הבנת Microinteractions ב Mobile App עיצוב

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

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

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

כוחה של Microinteractions

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

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

מצאתי ציטוט מדהים במאמר זה דנים הערך העצום של microinteractions עבור יישומים ניידים:

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

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

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

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

הנה השימושים הנפוצים ביותר של אנימציה ותנועה בעיצוב UI / UX נייד:

• הדרכת משתמשים בין דפים שונים
• הדרכת משתמשים דרך הממשק כדי ללמד התנהגויות מסוימות
• מציע פעולות / התנהגויות שניתן לנקוט בכל דף נתון

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

כיצד לעבוד

Microinteraction יחיד יורה כאשר המשתמש עוסקת עם חלק אחד של ממשק. רוב microinteractions הם תגובות מונפקות למחווה של המשתמש. אז תנועה swiping יגיב אחרת מאשר ברז או קפיצי.

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

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

לדברי UXPin, כל microinteraction בסיסי יכול להישבר לארבעה שלבים, אבל אני כבר סיכם את התהליך שלושה שלבים.

1. פעולה - ה המשתמש עושה משהו כמו קפיצי, החלק, הקש והחזק, או אינטראקציה אחרת.
2. תגובה - ה ממשק מגיב בהתבסס על מה צריך לקרות. מחיקת מסך עשויה לעבור בהיסטוריית הדפדפן, או הקשה על מחוון ON / OFF עשויה לבטל הגדרה.
3. משוב - זה מה משתמש בעצם רואה כתוצאה מהאינטראקציה. כאשר המשתמש מחליף חזרה בדפדפן נייד הוא עשוי לצוף את הדף הקודם כדי להופיע "על גבי" של המסך. מחוון ההפעלה / כיבוי עשוי להחליק בצורה חלקה או לגדול כאשר הלחץ מוחל על המסך.

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

חפשו את הפרטים

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

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

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

מסתכל בכמה דוגמאות

אני חושב שהדרך הטובה ביותר ללמוד משהו היא לעשות זאת, והדרך השנייה הטובה ביותר היא ללמוד את עבודתם של אחרים. אספתי חופן קטן UI / UX microinteraction אנימציות מ Dribbble מוכשרים משתמשים כדי להראות לך איך אלה נראים mockup אמיתי.

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

1. אנימציה אירוע App ממשק משתמש

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

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

2. מסך פעילות גופנית אינטראקטיבית

זה אנימציה תרגיל סלולרי יצירתי מגיע מעצב ויטלי Rubtsov. זה demos משתמש שמירת האימון שלהם עבור קבוצה אחת של squats.

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

3. חיפוש Microinteractions App

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

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

4. כושר כושר Microinteraction

אני חושב Jakub Antalà ??  ?? Ã'Â-K באמת מכה את זה מתוך הפארק עם microinteraction המטרה שלו כושר. המסכים כולם יש את ההרגשה הזאת של jellgly jell-o בגלל הצורות זזות בצורה כה נוזלית.

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

5. משוך כדי לרענן אנימציה

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

זה הרבה תשומת לב לפרטים הוא מה שמביא את היופי האמיתי microinteractions יישומים ניידים.

6. Tab Microactionaction

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

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

7. Preloading אנימציה

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

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

מסיימים

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

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