ההבדל בין החוטים הבסיסיים, אב-הטיפוס והמודל של מושג ה- UI / UX

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

מהו כרטיס סים?

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

  • מכיל מידע בסיסי
  • צייר מבנה ופריסה
  • דמיינו את ממשק המשתמש

תכונות חזותיות של חוט קווי

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

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

2. חוט תיל וקטורי פשוט

סימפטרים פשוטים כוללים תמונות, קטעי וידאו וטקסט

3. יתרונות כבל חשמלי

בניית חוטים מהירה וזולה.

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

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

4. סימפרם אינטראקטיבי

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

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

5. כוון בזהירות את החוט

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

כלי תכנון קווי

נייר ועיפרון

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

בלסמי

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

מהו אב-טיפוס?

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

1. יתרון של אב הטיפוס

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

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

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

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

2. תכונות חזותיות של אב-הטיפוס

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

3. מבחן אב-טיפוס

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

  • איך המשתמש מתחיל? (חיפוש או תצוגה?)
  • מה המשתמש עושה קודם? והבא הבא?
  • איך הוא מקבל את ההחלטה הסופית?
  • האם הם מבינים את מטרת העיצוב? האם יש אתגרים?

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

כלי אב-טיפוס

מחפש כלי אב-טיפוס מהיר נהדר? אין תקציב? אין תירוצים. Mockplus Black Friday 2017 כבר כאן! הצטרף עכשיו לקבוצת Slack הרשמית של Mockplus, מנהל המערכת יציע לך קופון של 40% הנחה וחבילת אוסף וגופני ממשק המשתמש בחינם. הצעה מוגבלת זמן תקפה לכל החבילות ונמשכת עד 31 בנובמבר, וחוסכת 80 דולר לפחות מהמחיר הרגיל. בנוסף, תקבל תמיכה טכנית חינם לכל החיים ב- Mockplus, גם אם אינך כרגע משתמש בתשלום. בואו ליהנות מ- Mockplus Black Friday 2017!

Mockplus

Mockplus הוא כלי אבות טיפוס הכל כלול לרעש מהיר, עיצוב מהיר וצפייה מהירה. זה מאפשר לך ליצור מכשירים ניידים לנייד (אנדרואיד ו- iOS), שולחן עבודה (PC ו- Mac) ויישומי אינטרנט. Mockplus 3.2 הוסיף מצב עיצוב זרימת ממשק משתמש, חומרת חזרה, פרויקטים של הדגמה ותבניות ויבוא סקיצות. תכונות אחרות, כגון מצב תכנון מפה, יהיו זמינות בגרסאות לאחר Mockplus 3.2.

UXPin

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

מה זה דגם?

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

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

זרימת עיצוב

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

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

טיפים

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