כיצד ליצור GUI ב- Visio

...

ניתן להשתמש ב-Microsoft Visio ליצירת סוגים רבים של עיצובי GUI.

Microsoft Visio 2010 הוא כלי עיצוב גרפי שניתן להשתמש בו ליצירת דיאגרמות, רכיבי ממשק, תפריטי ניווט ואובייקטים ויזואליים אחרים. הוא מציע מגוון רחב של כלים ליצירת עיצוב של ממשק משתמש גרפי (GUI). התרשים יראה כיצד האפליקציה או ממשק האינטרנט יופיעו בצורתו הסופית. פיתוח ממשק משתמש ב-Visio אינו קשה מדי, וניתן לייצא עיצובים כקובצי PDF. עקוב אחר מספר קווים מנחים כדי ללמוד כיצד לבנות דגם בסיסי של מסגרת GUI עבור אתר אינטרנט.

שלב 1

פתח את Microsoft Visio. צור ציור חדש על ידי לחיצה על סמל הציור הריק. לחץ על כפתור "צור".

סרטון היום

שלב 2

לחץ על חלון הצורות בצד שמאל של המסך. בחר "צורות נוספות". בחר "יחידות צורות בסיסיות בארה"ב. לחץ על "צורות מהירות".

שלב 3

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

שלב 4

צור תיבת תפריט ניווט על ידי לחיצה ימנית על צורת תיבת המלבן וגרירת הצורה מתחת לתיבת הכותרת. שנה את גודל התיבה כך שתהיה לגובה של כחצי אינץ' וברוחב זהה לתיבת הכותרת.

שלב 5

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

שלב 6

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

שלב 7

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

שלב 8

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

שלב 9

בחר אזור בתוך תיבת הכותרת הראשית וצור שדה טקסט עם התיאור "כותרת ראשית".

שלב 10

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

שלב 11

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

עֵצָה

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

אַזהָרָה

שרטוטים מורכבים מדי עלולים לגרום ל-Visio להאט ברענון ציור לאחר ביצוע שינוי.