ההבדל בין הרעיון הבסיסי של UI / UX Design בין המסך הקווי לאב-טיפוס

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

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

המסך החוטי הוא מתווה פשוט אך פשוט וישיר שיש לו 3 יעדים פשוטים אך פשוטים:

1. מספקת קבוצת מידע בסיסית

2. צייר מבנה ופריסה

3. תצוגה ותיאור של ממשק המשתמש

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

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

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

חוטי וקטור פשוטים

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

יתרונות החיווט

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

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

סימפוניה אינטראקטיבית

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

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

הצבע בזהירות את החוט

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

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

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

איזה אב-טיפוס

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

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

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

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

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

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

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

זרימת עיצוב

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

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

טיפים

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

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

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

UXPin

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

Proto.io

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

בלסמי

Populator, r הוא משדר תיל רק לטלפרם נייח.

Moqups

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

Mockplus

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

אקסו

האם אנו זקוקים ליישום רב יותר של כלי זה ככלי הרחבות תיל וכלי תכנון של אב-טיפוס הפופולרי ביותר? אני לא חושב.

פרוטושאר

כלי זה יכול גם ליצור כרטיסי סים ואבות טיפוס באינטרנט.

InvisionApp

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

רוצה לכתוב את הרעיון העיצובי שלך ל- .dsgnrs. בלוג? קרא עוד ...