7 הכלים הטובים ביותר להעברה וירטוטים עבור יצרני אפליקציות

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

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

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

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

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

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

1. בלסמק

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

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

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

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

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

2. WireframePro

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

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

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

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

ל- WireframePro אין תוכניות חינמיות, אך תוכל לנסות זאת למשך 30 יום לפני שתעבור לתוכנית בתשלום. רישיונות מתחילים ב- $ 19 לחודש עבור משתמש אחד, ו- $ 39 לחודש עבור עד שלושה חברי צוות.

3. UXPin

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

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

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

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

4. פרוט

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

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

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

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

5. InVision

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

התהליך פשוט כמו:

  • הוסף את נכסי העיצוב שלך (InVision תומך ב- GIF, PNG, JPEG, PSD וקבצי מקור Sketch) באמצעות גרור ושחרר, או על ידי סנכרון עם Dropbox.
  • צייר נקודות חמות על כל נכס, והגדר אותם לקישור לנכסים אחרים, כתובות אתרים חיצוניות או עוגנים.
  • הוסף אינטראקטיביות בצורה של מחוות (טפיחות או החלקות), אזורים קבועים (שורת תפריטים וכו ') ומעברים.

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

התמחור עבור InVision מתחיל ללא עלות לאב טיפוס אחד, 25 דולר לחודש עבור אבות טיפוס ללא הגבלה, ו 99 דולר לחודש עבור צוותים של עד 5 חברים.

6. להתפעל

כמו InVision, אפליקציית Marvel מיועדת לאב טיפוס. הוא כולל תמיכה סטנדרטית בקבצי Sketch ו- Photoshop, או שתוכל להשתמש בכלי העיצוב הקנבס המובנה שלהם. למארוול יש גם אפליקציית iOS ואנדרואיד המאפשרת לך לצלם את השרבוטים והעיצובים שלך ולהעלות אותם ישירות לספריית מארוול שלך.

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

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

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

7. פרוטו.יו

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

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

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

הגרסה החדשה של Proto.io מרחיבה את היכולת שלך למשתמשים לבדוק ולהגיב על אב הטיפוס שלך. הוא משתלב עם פלטפורמות בדיקת משתמשים כמו Validately ו- UserTesting, ומאפשר לך גישה למאגר גדול יותר של משתמשים אמיתיים. ועם שילוב Lookback, אתה מקבל הקלטות ללא הגבלה - ב- iOS בלבד לעת עתה - מראה לך כיצד משתמשים מתקשרים ומנווטים באפליקציה שלך.

Proto.io מציעה תקופת ניסיון של 15 יום, ובהמשך תוכלו לעבור לחשבון חינם מוגבל מאוד. תוכניות בתשלום מתחילות ב- $ 29 לחודש, תלוי בגודל הצוות שלך.

סיכום

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

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