ההבדל בין UI / UX Design מושגים תוספי חוט, אבות טיפוס ומדגם (עודכן)

אב טיפוס של הטלפון - -

מה ההבדל בין חוט, דגם לאב-טיפוס? מעצב מנוסה הגדיר תנאי עיצוב עבור מעצבי UI / UX.

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

מהי מסגרת Wir?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

נייר ועיפרון

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

בלסמי

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

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

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

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

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

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

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

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

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

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

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

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

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

יצירת אב-טיפוס של מוצר הוא תהליך רציף הדורש איטרציה ושיפור.

כלי אב-טיפוס

Mockplus

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

https://www.mockplus.com

iDoc

שתף פעולה עם iDoc ככלי הגשת עיצוב, אספקת משאבי עיצוב, כמו גם אב-טיפוס של אור. התהליך הרציף מאפשר למעצבי ממשק המשתמש לטעון תסריטים חזותיים מתוספי פוטושופ, Adobe XD ו- Sketch.

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

UXPin

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

מה זה דגם?

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

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

זרימת עיצוב

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

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

טיפים

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

מעוניין גם ב:

כלי העיצוב והיישומים הטובים ביותר לעיצוב mockup ו- teleframing למעצבי UI / UX לשנת 2017

UX לעומת UI לעומת IA לעומת IxD: 4 תנאי ערבוב של עיצוב דיגיטלי

הספרים והמקורות הטובים ביותר לממשק המשתמש / UX למעצבים

פורסם במקור באתר www.mockplus.com.