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