Adobe ניסיון עיצוב טריקים, טיפים, וטכניקות

Friday of 07

Adobe ניסיון עיצוב טריקים, טיפים, וטכניקות

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

אבל קודם, ייתכן שאתה תוהה מה הכוונה על ידי אב טיפוס תוכנה. בין השחקנים העיקריים בתחום זה Proto.io, עקרון, UXPin, Atomic.io , ניסיון עיצוב InVision. שלא כמו יישומים כגון סקיצה 3, Photoshop ו Illustrator שבו עיצובים סטטיים מיוצרים, אלה עורכי גרפי להציג אינטראקטיביות, תנועה ותכונות אחרות נפוץ היום של האינטרנט ואת שטח עיצוב האינטרנט.

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

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

למעשה, תוכנה זו הפכה מרכיב מפתח היום "Rapid Prototyping" עיצוב ופיתוח הסביבה.

עם זאת, בואו נהנה קצת עם ניסיון עיצוב.

02 of 07

יצירת פין יעד עם מעגל פשוט ב Adobe ניסיון עיצוב

היבט אחד מסודר של XD הוא השימוש בו כלי ציור וקטור. לא ניתן למצוא סמל? אין בעיה. רול משלך. כך:

1. בחר את הכלי אליפסה , עם הלחצנים Option / Alt-Shift לחוצים, לצייר מעגל.
2. כאשר המעגל נבחר, הגדר את צבע המילוי ל- FF0000 ואת הגבול ל"לא "במאפיינים.
3. לחץ פעמיים על המעגל כדי להציג את נקודות העוגן. גרור את העוגן התחתון כלפי מטה.
4. לחצו לחיצה כפולה על נקודת העיגון שנבחרה והקימורים מוחלפים בקווים.
5. צייר עוד עיגול קטן עם מילוי לבן ולא סטוק. העבר אותו למיקום ובחר את הסיכה ואת המעגל. בחלונית 'יישור' בחלק העליון של המאפיינים, לחץ על הלחצן 'מרכז אופקי' וה- PIN נוצר.

03 מתוך 07

יצירת טשטוש רקע ב Adobe חוויית עיצוב

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

1. צור משטח יצירה חדש והוסף תמונת רקע.
2. בחר בכלי מלבן nd לצייר מלבן מעל התמונה. כאשר המלבן נבחר, הגדר את המילוי ללבן ואת הקו לשורה ללא.
3. כאשר המלבן נבחר, בחר רקע לטשטש בחלונית המאפיינים. שלושת המחוונים הם כמות לטשטש, בהירות ואטימות. הנה מה שהם עושים:

• טשטוש כמות: מכוונן את הטשטוש של התמונה מתחת לצורה. הערך המרבי הוא +50.
• בהירות: מכוונן את נקודות האור והצללים שבתמונה. הערך המינימלי הוא -50 והערך המרבי הוא +50.
• אטימות: משפיע על השקיפות של הצורה ועל הנראות של התמונה תחת הצורה. הערכים נעים בין 0% ל -100%.

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

04 of 07

צור Scrim ב Adobe ניסיון עיצוב

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

1. צור את משטח היצירה ב- XD, הוסף תמונה והעתק והדבק רכיבי ממשק מתוך ערכת ממשק המשתמש המתאימה - קובץ> פתח ערכת ממשק משתמש ... - אל משטח היצירה. בתמונה לעיל התמונה עושה את שורת המצב ואת סרגל App קשה לראות.
2. בחר בכלי מלבן וצייר מלבן. בלוח המאפיינים בחר באפשרות מילוי ובחר באפשרות Gradient (מדרג) מהקופץ למטה ב'מבחר הצבעים '. הגדר את צבעי הצבע ל - שחור ולבן. הגדר את הערך - אטימות - ל- 60% ואת הערך הלבן ל- 0%.
3. עם המלבן שנבחר, בחרו 'אובייקט'> 'סדר'> 'שלח אחורה' . רכיבי הממשק גלויים כעת מעל התמונה.

05 מתוך 07

יצירת תמונה אווטר ב Adobe ניסיון עיצוב

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

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

06 מתוך 07

לשחק עם חוויית Adobe עיצוב

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

1. אם אתה זקוק ל'גירסאות לרוחב 'ול'דפוסים' של משטח יצירה, לשכפל את משטח היצירה, ולאחר שכפול נבחר, לחץ על לחצן הנוף בחלונית 'מאפיינים'. לוח היצירה ישתנה לרוחב. אם ל- Artboard יש תוכן, לחץ על השם של משטח היצירה ומאפייני לוח יצירה יופיעו בלוח המאפיינים.
2. כדי להוסיף צבע מותאם אישית אל משטח היצירה, והפרויקט לצורך העניין, בחר את משטח היצירה ולחץ על מילוי שבב הצבע במקטע 'מראה' בלוח התכונות. הזן את הערך ההקסדצימלי עבור הצבע ולחץ על הסימן +. הצבע יתווסף כצבע מותאם אישית. כדי להחיל את הצבע במקום אחר, בחר אובייקט ולחץ על שבב צבע מותאם אישית כדי להחיל את הצבע.
3. Artboards יכול להיות גלילה אנכית. לשם כך, בחר את משטח היצירה ושנה את הגובה שלו בפאנל המאפיינים או על-ידי גרירת החלק התחתון של משטח היצירה כלפי מטה. באזור Scrollable בחלונית המאפיינים, בחר אנכי מהתפריט הנפתח והזן את גובה התצוגה עבור המסך. הקו הכחול המקווקו מראה לך את החלק התחתון של שדה התצוגה. כדי לבדוק זאת, לחץ על הלחצן Play וגלול. כדי לבטל את הגלילה, בחר ללא ב גלילה למטה.

07 מתוך 07

עריכת ערכת ממשק משתמש ניידת ב- Adobe Experience Design

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

1. אתה מתחיל על ידי בחירת הכלי 'משטח יצירה' ובחירה ב- Android לנייד בקטע Google של 'לוח המאפיינים' .
2. בחר קובץ> פתח ערכת ממשק משתמש> חומר של Google . פעולה זו פותחת את ערכת ממשק המשתמש לתכנון חומרים. בחר את זכוכית מגדלת ואת האוהל לא הוא לוח המחוונים מדריכים . אני אוהב להתחיל עם זה כי זה נותן לי את המדריכים עבור המיקום הנכון על המסך של אלמנטים ממשק. אם תלחץ על אחד הסורגים הכחולים תראה אותו נעול. לחץ על הנעילה המצורפת לכל אחד מהם כדי לבטל את הנעילה . לסמן את משטח היצירה ולהעתיק את הבחירה ללוח. חזור למסמך והדבק את המסך במשטח היצירה שלך.
3. לחץ פעם אחת בסרגל האפליקציות שבראש משטח היצירה. שים לב איך אתה יכול לבחור את זה. בחר 'אובייקט'> 'סדר'> 'הבא לחזית'. הבחירה שלך נמצאת כעת מעל מדריכי המסך. זה אמור להגיד לך את כל האלמנטים על המסך הוא מסוגל לערוך.
4. לחץ פעמיים על שורת המצב בחלק העליון, בלוח המאפיינים ובצבע מילוי ל- 455A64 . לחץ פעמיים על סרגל App ולהגדיר מילוי שלה כדי 607D8B. זה אמור להגיד לך כל אלמנט של ערכת ממשק משתמש ניתן לערוך כדי לענות על מפרט הפרוייקט של הפרויקט.
5. מה עם הסמלים? הנה כיצד לשנות את צבעם. לחץ פעמיים על הלב כדי לבחור בו. אם אתה מסתכל על לוח מאפיינים, אתה יכול להניח שאתה לא יכול לערוך את הבחירה. לא בדיוק. לחץ פעמיים על הלב פעם נוספת . המאפיינים פתוחים ואתה משנה את צבע המילוי ל- FF0000. חזור על הטריק הכפל-לחיצה כפולה עבור הסמלים הנותרים והטקסט.