כיצד לקבל את עצמך התחיל עם UXPin
כאשר אנחנו עוברים לתחום העיצוב הנייד, עיצוב אפליקציות ועיצוב תגובה יש להתמקד יותר ויותר ב- UX (חוויית משתמש) ו- wireframing, אב-טיפוס אינטראקטיבי ודגמים. יש טון של כלים שם בחוץ מכוונים נישה זו והם מפעילים את מכלול מלא מן מורכבות, תכונה עמוסות behemoths כדי דלילה בקושי שימושי. אחד הכלים אשר תפס את העין שלי הוא UXPin פשוט כי זה פותח על ידי מעצבים עבור מעצבים.
לפני שאנחנו מתקדמים … אזהרה. אם שלך הוא ארגון שמעדיף להיות הבעלים של התוכנה אז UXPin הוא לא בשבילך. כל העבודה שבוצעה ביישום זה מתבצעת בדפדפן והפרויקטים השמורים נשמרים בחשבונך.
כדי להתחיל עם UXPin אתה מפעיל דפדפן ופונה ל- UXPin. מכאן אתה יכול להירשם למשפט חינם או לארגן תוכנית חודשית על פי הצורך הצפוי שלך. תהליך ההרשמה הוא די קל ברגע שיש לך להגדיר את שם המשתמש והסיסמה שלך, הם מוכנים להתחיל.
כיצד להתחיל פרויקט ב - UXPin
כאשר אתה מתחבר אתה מגיע למרכז השליטה, ומכאן אתה יכול להחליט ליצור wireframe חדש, פרויקט נייד חדש או פרויקט אינטרנט עיצוב תגובה. יש גם תוספות עבור UXPin שיאפשר לך להביא את Photoshop או סקיצה פרויקטים. בשביל זה איך אני הולך ליצור כרזה עם קצת טקסט ולהוסיף כפתור דוא"ל על הבאנר. כדי לבצע זאת בחרתי ליצור מסגרת חדשה.
כיצד להשתמש בממשק UXPin
משטח העיצוב מחולק לארבעה תחומים. באזור השחור בצד שמאל יש שורה של כלים שמאפשרים לך לחזור ללוח המחוונים, לפתוח את האלמנטים שבהם תשתמש, לפתוח את החלונית Smart Elements, לחפש אלמנטים, להוסיף הערות לדף ולהוסיף חברי צוות. בתחתית הוא כפתור שפותח הדרכה קצרה, אחרת המאפשרת לך לגשת לחשבון שלך ועוד כי גישה שאלות נפוצות, בואו לשאול שאלות ואפילו לספק משוב.
באזור הכחול לאורך הדף יש שורה של כלים ומאפיינים. כפתורים כהים בצד ימין מאפשרים לך לחזור על העיצוב שלך, להתאים את הגדרות הפרויקט, לשתף את הדף ולעשות סימולציה בתוך הדפדפן של הדף.
החלונית 'אלמנטים' היא המקום שבו אתה תופס את החלקים והחתיכות עבור 'משטח העיצוב', תן שם לפרויקט שלך והוסף או הסר דפים.
ספריית אלמנטים היא הפתעה נעימה עבור מעצבי UX. זה פופ למטה מאפשר לך לבחור מתוך 30 ספריות anon החל iOS ל- Android Lolipop כמו כן יש לך גישה Bootstrap ואלמנטים קרן יחד עם סמלים גופן Awesome, סמלים המחווה עבור ניידים אוסף של יישומונים חברתיים.
04 של 09כיצד להוסיף אלמנט לדף UXPin
כדי להתחיל גררתי את הרכיב Box אל משטח העיצוב, כאשר אני משחרר את העכבר, את לוח מאפיינים נפתח. לחצן 'מאפיינים' מאפשר לך לתת שם לרכיבים ולהגדיר את גובה הרוחב וערכי המיקום של האלמנט. ניתן גם להוסיף ריפוד אלמנט, לעגל את הפינות ולהתאים את האטימות שלה. לחיצה על לחצן צבע הרקע פותחת בורר צבעי RGBA.
ניתן גם להקצות גופן, גבול ודפוס לאלמנט שנבחר. הברק ברק נותן לך את היכולת להוסיף אינטראקטיביות אלמנט נבחר.
05 מתוך 09כיצד להוסיף טקסט עיצוב ב - UXPin
כדי להוסיף טקסט, גרור את אלמנט הטקסט אל משטח העיצוב והזן את הטקסט. לחץ על המאפיין טקסט כדי לפתוח את מאפייני גופן ולעצב את הטקסט שלך. אם אתה צריך גוש טקסט דמה, הוסף אלמנט טקסט ולחץ על גנרטור לורם כפתור במאפייני גופן.
06 מתוך 09כיצד להוסיף תמונה לדף UXPin
ישנן מספר דרכים לבצע משימה זו. אתה יכול להשתמש כלי תמונה בסרגל הכלים, הוסף אלמנט תמונה מהספרייה או פשוט גרור ושחרר תמונה משולחן העבודה שלך אל הרכיב על משטח העיצוב כפי שמוצג למעלה.
07 מתוך 09כיצד להוסיף כפתור לדף UXPin
למרות שיש רכיב Button, הזנת " כפתור " לתוך ה לחפש אזור, כפי שמוצג לעיל, פותח את כל הלחצנים שנמצאו בכל הספריות. גרור את זה שעובד בשבילך על משטח העיצוב ולהשתמש במאפיינים כדי לשנות את הצבע, את הגופן, ואפילו את רדיוס הגבול. כדי לשנות את הטקסט שבתוך הלחצן, לחץ פעם אחת על הטקסט והזן את הטקסט החדש.
08 מתוך 09כיצד להוסיף אינטראקטיביות לדף UXPin
זה לא מסובך כפי שהוא עשוי להופיע לראשונה. עבור קלט הדוא"ל, הוספתי רכיב קלט, שינו את גודלו, נכנסתי לטקסט ועיצבתי את הטקסט. כאשר נבחר רכיב הקלט לחץ על הלחצן מאפיינים ו, כאשר מאפייני אלמנט לחץ על חשיפה כפתור - גלגל העין - בפינה הימנית העליונה של הלוח.
בחר בלחצן ולחץ על לחצן אינטראקציות - הברק ברק - במאפיינים. כאשר החלונית 'אינטראקציות' נפתחת, בחר 'אינטראקציה חדשה'. בחר באפשרות לחץ על הלחצן 'הפעל'. באזור 'פעולה' בחר באפשרות הצג רכיב. כעת תישאל איזה אלמנט להציג. לחץ פעם אחת על gunsite ולחץ על אלמנט קלט. עם האלמנט שזוהה, כעת תוכל לקבוע אם להנפיש את האלמנט או לא. במקרה זה החלטתי להציג את תיבת קלט בקלות עם והלך עם ערך ברירת המחדל של משך 300ms.
אני גם רוצה להעביר את הכפתור כ 65 פיקסלים ימינה כאשר הוא נלחץ. בחרתי את הלחצן, פתחתי את החלונית 'אינטראקציות' ובחרתי אינטראקציה חדשה. השתמשתי בהגדרות אלה:
- הדק: לחץ על
- פעולה: זוז
- הזז כיוון: 65 פיקסלים על ציר x
- אנימציה: לינארי
- משך זמן: 300 מילישניות
כדי להסיר אינטראקציה, בחר את הרכיב ופתח את החלונית 'אינטראקציות'. בחר באינטראקציה בחלונית ולחץ על 'פח האשפה' כדי למחוק אותה.
09 של 09כיצד לבדוק את הדף ב - UXPIN
בשל העובדה שאתה עובד בדפדפן, בדיקות מת פשוט. לחץ על לדמות עיצוב כפתור. הדף ייפתח בדפדפן ותוכל לבדוק את הדרך. יהיה גם פאנל נוסף בצד שמאל של הדף המאפשר הערות, מפת האתר אם יש מספר עמודים, בדיקת שמישות, שיתוף Live, עריכה וחזרה למרכז השליטה.
בחלק התחתון של הדף הוא עוד פאנל קטן המאפשר לך להציג את האלמנטים האינטראקטיביים, להציג או להסתיר הערות ולשתף את הקישור לפרויקט עם אחרים.
