אנדרואיד

כיצד להשתמש בערכות UI ב- Adobe

Figma vs Adobe XD. Интервью с Михаилом Никипеловым

Figma vs Adobe XD. Интервью с Михаилом Никипеловым

תוכן עניינים:

Anonim

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

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

גם בהדרכת טק

כיצד להמיר אצווה תמונות עם Adobe Bridge

כיצד להוריד ערכות ממשק משתמש ב- Adobe XD

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

שלב 1: לחץ על לחצן תפריט ההמבורגר בפינה השמאלית העליונה של התוכנה.

שלב 2: בתפריט, גלול מטה אל האפשרות קבל ערכות ממשק משתמש ולחץ על שלוש מהאפשרויות הזמינות.

במאמר זה אבחר בערכת ממשק המשתמש של Google. עם זאת, תלוי בפרוייקט שלך אתה יכול לבחור בערכות Apple iOS או בערכות Microsoft Windows. זה יפתח דף אינטרנט רשמי ממנו תוכלו להוריד את ערכות ה- UI בחינם.

שלב 3: אתר את ערכת ממשק המשתמש של Adobe XD בדף האינטרנט הבא, והורד אותו למערכת שלך.

שלב 4: פתח את הקובץ שהורד ב- Adobe XD ותקבל את פניו עם שלל משטחי יצירה המכילים משאבי ממשק משתמש לפלטפורמה המתאימה.

אתה יכול להחזיק את כפתור ה- Ctrl ולהעביר את גלגל הגלילה כדי להתקרב / להתרחק כדי לראות את כל משטחי היצירה האישיים.

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

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

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

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

כיצד להשתמש בערכות ממשק משתמש ב- Adobe XD

כדי להשתמש בערכות ממשק משתמש בפרויקט שלך, בצע את הצעדים הפשוטים הבאים:

שלב 1: התקרב אלמנט ממשק המשתמש בו ברצונך להשתמש בפרויקט שלך ולחץ על הכותרת שלו כדי לבחור אותו.

שלב 2: העתק את האלמנט באמצעות קיצור הדרך Ctrl + C.

שלב 3: ואז פתח פרוייקט Adobe XD חדש מהתפריט.

שלב 4: כאן הדביקו את רכיב ממשק המשתמש באמצעות קיצור הדרך Ctrl + V.

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

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

שלב 6: חזור לערכת ממשק המשתמש כדי לבחור אלמנט אחר להוסיף לדף זה. שוב לחץ על כותרת האלמנט והעתק אותו באמצעות קיצור הדרך Ctrl + C.

אצור הרמת כוסית בסיסית למאמר זה שעבורו אשתמש באחת הדיאלוגים.

שלב 7: הדבק את האלמנט החדש על האלמנט הקודם ואז יישר אותו לפי המדריכים.

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

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

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

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

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

ברגע שאתה מרוצה מהתוצאה, פשוט שמור את הקובץ שלך על ידי לחיצה על האפשרות שמירה בשם בתפריט או על ידי שימוש בקיצור הדרך Shift + Ctrl + S.

גם בהדרכת טק

#עיצוב גרפי

לחץ כאן לצפייה בדף מאמרי העיצוב הגרפי שלנו

מושלם את העיצוב שלך באמצעות ערכות ממשק משתמש

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

הבא הבא: השלים פרויקט ב- Adobe XD ולא יודע לייצא אותו ל- HTML? עיין במאמר הבא לקבלת הדרכה פשוטה שלב אחר שלב.