כלי אפיון: שילוּד, אבות-טיפוס ועוד
ברק דנין. עדכון אחרון: 14/12/2010
בקטגוריה הזו ישנם סוגים שונים של כלים, שעונים על צרכים מעט שונים. לכל אחד מסוגי הכלים יש את היתרונות והחסרונות שלו, והמטרות שלשמן הוא נועד. (נוסיף עוד בנושא בהמשך).
כלי Mockup
בנויים במיוחד לבניית שרטוטי מסכים, ומכילים שפע של רכיבי ממשק מוכנים לשימוש.
- Balsamiq
- iPlotz – אל תנסו להגיד אותו בעברית, או להשתמש בו לאפיון עברית
- Mockingbird
- Pencil – תוסף חינמי ל-Firefox.
- Mockflow
כלי שרטוט
- Visio – לחלונות, חלק מאופיס
- OmniGraffle – למקינטוש
שניהם כוללים שפע של חלקי ממשק מוכנים לשימוש, ומאפשרים מידה מסויימת של אינטראקציה.
כלי עיצוב
הכלים האלה נועדו במקור לעיצוב, אך עם התבניות המתאימות (למשל Unify עבור InDesign) אפשר להשתמש בהם גם לאפיון.
כלים לבניית אבות-טיפוס prototyping
אלה כלים שנבנו ממש לשם למטרה זו, יצירת אבות-טיפוס חיים. הם מאפשרים אינטראקציה עשירה וכוללים חלקי ממשק מוכנים. אפשר, כמובן, גם לבנות איתם Mockups רגילים, בלי אינטראקציה.
כלים נוספים
כלים אלה לא ממש נועדו לבניית איפיונים, אבל הם מוכרים לאנשים רבים וכנראה זו הסיבה שהם צברו פופולאריות.
- Powerpoint – מאפשר אינטראקציה פשוטה (קישורים) ושילוב של אלמנטים גראפיים.
- Keynote (מקינטוש) – כלי המצגות של מקינטוש.
- Excel – מכיל רכיבי טפסים שעוזרים לתכנון טפסים.
כל כלי האפיון, פחות או יותר: בסקירה של Adaptive Path – כאן: http://bit.ly/adaptivetools
ומה ההמלצות מניסיונכם?
הי ניצן,
כפי שנאמר לעיל, לכל כלי יש יתרונות וחסרונות. אם נדע מה הצרכים הספציפיים שלך יהיה קל יותר להמליץ.
אני אישית הכי אוהב לעבוד עם Axure. היא מאפשרת לייצר במהירות רבה מאוד מבנה של מסך, למקם רכיבים וכו'. אתה מייצר במקביל את עץ האתר, כך שהראייה שלך לא ממוקדת במסך אחד בכל פעם אלא במבנה הכללי וב- flow.
קל מאוד ליצור אינטראקציות ולהגיע לפרוטוטייפ ש"עובד". אתה יכול לייצא את הפרוייקט לקבצי HTML כך שכל מי שיש לו דפדפן יוכל לראות את המסכים ולתקשר אתם.
החסרונות: יקרה להחריד (כ- 600$ לרשיון בודד), תוצרים לא מאוד יפים (ללקוחות קשה לפעמים להתחבר למשהו שנראה לא טוב, לא משנה כמה תסביר שזה עוד לא עיצוב).
בארץ אוהבים להשתמש ב- Visio (שמגיע עם חלק מהגרסאות של אופיס). אני פחות אוהב לעבוד אתה כי היא ממוקדת במסך אחד בכל פעם ויוצרת תוצרים לא כל כך יפים. אבל קל מאוד ליצור אתה מסכים.
אלטרנטיבה לויזיו היא Smart Draw שמאפשרת ליצור תוצרים הרבה יותר נעימים לעין.
לשירבוט מהיר של wirefarmes ("שלדים") אפשר להשתמש ב- PowerPoint. אם תשתמש בגרסת 2007 תוכל גם לייצר דברים שנראים טוב. כמו שברק כתב, אפשר גם ליצור אתה אינטראקציות ועם קצת סבלנות וחפירה בתפריטי האנימציות תוכל להגיע להדמיה לא רעה של אינטראקציות נפוצות.
החסרון העיקרי הוא שאין תבניות מוכנות מראש של רכיבים נפוצים.
תוכנה נוספת שאני משתמש בה די הרבה היא Snagit. זו בעצם תוכנה לתפיסת תמונות מסך אבל יש בה הרבה כלים לעיבוד התמונה מרגע ש"גזרת" אותה. אם אתה עובד על אתר/תוכנה קיימים ורוצה להציג במהירות איך נכון לדעתך לסדר מחדש את הרכיבים על המסך או להוסיף הערות, זו אופציה לא רעה.
זה גם כלי טוב למדידה של רכיבים על המסך.
מקווה שעזרתי.
יש גם דיון די מפורט על חלק מהתוכנות האלה בבלוג של אמיר (עיצוב שמיש)
הנה 🙂
פיתוח אב טיפוס אינטראקטיבי עם iPlotz
http://www.amirdotan.com/blog/?p=982
פיתוח אב טיפוס אינטראקטיבי עם Axure RP Pro 5.5
http://www.amirdotan.com/blog/?p=962
יצירת אב טיפוס בפאוורפוינט – כה פשוט וכה אפקטיבי
http://www.amirdotan.com/blog/?p=158
תודה! 🙂
מה שבדרך כלל מעניין זה יצירת wreframes עבור הקונספט ולעיתים גם בנייה של אב טיפוס שלם אינטראקטיבי.
אני מבין שויזיו עדיין אפקטיבי לחלק הראשון ואילו לשני ככל הנראה Axure.
אגב, ברכות וכל הכבוד על האתר. אני מאד אוהב את החשיבה שהושקעה בכל פרט. כולל הסימון "צוות UXI" מתחת לתמונותיכם 🙂
לעניות דעתי, PowerPoint הוא כלי מצוין, לכל רמת דיוק של אב טיפוס,
החל בדראפטים הראשונים ביותר ועד high fidelity interactive prototype.
על הבעיה של מחסור ברכיבים מוכנים די קל להתגבר –
פשוט מכינים פעם אחת ספריית רכיבים שכאלו (או מחפשים ברשת).
אני ממליץ לבדוק גם את Pencil –
http://www.evolus.vn/Pencil/Downloads.html,
ואת ForeUI –
http://www.foreui.com/tour.htm
וכמובן, אסור לשכוח את סט הכלים האולטימטיבי –
דף ועפרונות צבעונים. (-B
אני עובד כרגע על בניית סדנה לביצוע prototyping ממגוון כלים, שאמורה להיפתח במסגרת ג'ון ברייס. מי שזה מעניין לקבל פרטים על הסדנה, מוזמן ליצור אותי קשר ישירות ([email protected])
אני מאוד אוהב לעבוד עם אומני גרפל, שווה לקנות מקינטוש כדי לעבוד עם זה.
פשוט ספריית הסטנסילים, אלו רכיבי המערכת והפקדים המחולקים לפי פלטפורמה, הפכה להיות מעין קהילה עם אלפי סטנסילים להורדה חינם.
פשוט תענוג.
האינטראקטיביות שלו מוגבלת – זה נכון. אבל ליצירת מסכים סכמטיים ומסמכי אפיון ממשק משתמש – אליפות.
אני ממליץ לבדוק גם את
https://coutline.com
אחרי שעברתי על כולם, היעילה, הקלה והפשוטה ביותר לעבודה, והכי חשוב החינמית, היא תוכנת PENCIL, קלה מאוד ורצה מעולה ובנוסף מעט מאוד בעיות עם טקסט בעברית.
החסרון היחידי הוא שחסרים תבניות שונות, למרות שניתן לבנות חבילות כאלה באופן ידני, אני מחפש נואשות אחר ריכוז של תבניות שהקימו הקהילה שמשתמשת במוצר הזה.
צחי – Pencil אכן כלי חביב, פשוט וחינמי, אבל "הכי יעיל"?
זה, נראה לי, כבר עניין של טעם.
הוא די מוגבל, מה שהופך כל ניסיון להוציא ממנו משהו שונה מהתבניות הבסיסיות
ללא פשוט בכלל..
ככלל, נדמה לי שכדאי להיזהר עם הצהרות "הכי" למיניהן – כל כלי והיתרונות שלו.
במסגרת הזו של כלים פשוטים & חינמיים/ זולים
יש לא מעט כלים שעושים עבודה טובה.
iPlotz, לדוגמה, פשוטה למדי לשימוש בסיסי
ועם זאת זולה ובעלת יכולות רבות מאוד שאין ל-Pencil
ForeUI איננו חינמי, אבל הוא עולה פחות מ- 100$,
פשוט מאוד לשימוש ככלי תרשום בסיסי, עם ספריה עשירה של רכיבים מוכנים
ועם יכולות אינטראקציה יפות.
מן הסתם, כלי ה-Prototyping הייעודיים היקרים יותר, כגון Axure,
מספקים יכולות רבות שאין ל-Penci, אבל הם אכן לא זולים.
שורה תחתונה: Pencil הוא כלי חביב למישהו שמעוניין בכלי פשוט מאוד, חינמי
במטרה לייצר Wireframes סטנדרטיים ולא אינטראקטיביים.
כלי טוב בהחלט.
"הכי טוב" ? זה כבר עניין של טעם וצרכים ספציפיים.
היי רן,
"הכי טוב"? לא בטוח, אולי נסחפתי, ברור לי כי קיימים כלים מאוד איכותיים בשוק, אך הסיבה שבחרתי לעבוד בעיקר עם Pencil היא מכיוון שהיא פוגעת בדיוק בצרכים שלי, ואני מניח של עוד רבים אחרים.
מנסיוני, היכולות שמעניקים כלים כגון Axure, הן מעל ומעבר לצרכים ה"אמיתיים" של השוק, לטעמי לאחר שעבדתי על מספר רב של אתרים, עמודי נחיתה ושאר ירקות, אין צורך אמיתי בכל התכונות שמציעות התוכנות היקרות, וזאת משום שדי בהערות עבור המסכים שאיפיינת או בליווי של ה-Storyboard.
בנוסף הזמן שנדרש על מנת לבנות Prototype איכותי, שמתפקד כמו הגרסא הסופית, עולה על הזמן הנדרש בבנייה של מסכי Sketching פשוטים בלווי הערות כפי שציינתי קודם.
ראוי להדגיש שוב שמדובר בשיטות העבודה שלי, ומנסיוני בעבודה מול אנשי המקצוע השונים שהביאו אותי למסקנה שאין טוב יותר מהערות טקסט על גבי עמוד סטטי.
אני מסכים שלא פעם די ב-Wireframe פשוט בשביל להעביר רעיון.
היתרון של הכלים המתקדמים הוא שעומד לראשות המאפיין טווח פעולה רחב –
החל מ-Wireframe כללי, פשוט וגס מאוד
ועד רמות גבוהות מאוד של פירוט ומהימנות בתכולה, באינטראקציה ובעיצוב.
זה קצת דומה להבדל בין Picasa ל-Photoshop.
זה דומה לעיבוד תמונה –
בשביל לחתוך תמונות או לבצע תיקוני צבע פשוטים, Picasa מספיק לגמרי
ודורש פחות משאבי מחשב ומיומנות משתמש.
אבל אם אני רוצה לעשות משהו קצת יותר מורכב –
נגיד לשלב בצורה מבוקרת 2 תמונות –
Photoshop יהיה הכלי המתאים.
כשאתה עובד מול אנשי מקצוע מנוסים מאוד
ומציג להם הצעות אפיון דומות למה שהם מכירים מן העבר,
אפשר לא פעם להסתפק בהפשטות מלוות בהסברים.
ככול שההצעה שאתה מבקש להציג חורגת יותר ממה שאנשים מכירים ומבינים
וככול שקהל היעד שלך פחות מנוסה ומקצועי
כך חשוב יותר "להראות את זה" במקום "לדבר על זה".
יש הבדל אדיר, בעיקר בעבודה מול מנהלים ואנשי שיווק
או על ממשקים לא סטנדרטיים,
בין הסברים טקסטואליים לבין Prototype שבאמת מדגים את האינטראקציה.
והמלצה על שירות און ליין שתומך בעברית שי לכם?
רוב הכלים מאפשרים כתיבה עברית –
חלקם יעשו קצת בעיות עם הכיווניות, במידה ותנסה לשלב עברית ואנגלית
או עברית עם סימנים (? ! … ) בסוף שורה
תנסה
https://coutline.com
דמו:
https://coutline.com/coside/designer/page/area/r?page_id=1b7f58dcc0edf864
רק ב מוזילה
יש כלי שתומך בעברית ברמת אלמנטים וויזואליים ולא רק טקסט?
אני צריך משהו פשוט שמאפשר לצייר במהירות בזק מסך סטטי.
במה באה התמיכה לידי ביטוי, אם לא בטקסט?
קומבו בוקס לדוגמה – החץ למטה צריך להיות בצד ימין ולא שמאל, רשימת תיבות בחירה (תיבות הבחירה מצד ימין ולא שמאל) וכן הלאה.
סליחה, בקומבו החץ בעברית הוא משמאל לטקסט ולא מימין…