השתמש ב- Firefox כדי ליצור Mockups פשוטים

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

למה אנחנו יוצרים wireframes?

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

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

תחילת העבודה עם עיפרון

הורד עיפרון מדף הרחבות של עיפרון.לאחר התקנת העיפרון, הוא נגיש מ 'כלים' & gt;'רישומי עיפרון'.

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

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

יצירת מלבן

הצעד הראשון ביצירת צורת מסגרת חוט הוא לגרור צורה מהתפריט 'אוספים צורה' על גבי הבד.

שינוי גודל המלבן לרוחב וגובה מתאימים.

אנו יכולים להתאים אישית את הטקסט, הגבול וצבע הרקע של כל צורה בעיפרון.לחץ לחיצה ימנית על המלבן ובחר 'מאפיינים' כדי לפתוח את Windows Properties.זהו מסך מאפייני הרקע.הגדר את צבע הרקע של מלבן לבן( #FFFFFF).

לחץ על הכרטיסייה 'גבול' והתאם את מאפייני הגבול.הגדר את צבע הגבול לשחור( # 000000) ושנה את משקל הגבול ל- 1.

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

יצירת כרטיסיות

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

פתח את מסך מאפייני הטקסט כדי לשנות את צבע הגופן של הכרטיסייה 'תמונות' ו'טיוטה '.הגדר אותו ל- Gray( # 989898).

יצירת טקסט

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

עצות שימושיות עבור שינוי צבע

צבע הוא אחד החלקים החשובים ביותר באספקת wireframe נעים.הדרך המדויקת ביותר לשנות צבע של צורה היא על ידי ציון קוד ה- HTML של הצבעים.להבין את קוד ה- HTML עבור צבע מסוים יכול להיות קשה.אנו יכולים להשתמש ב- HTML HTML לרמות גיליון מ w3cschools.com לחפש את קוד ה- HTML הנכון עבור צבע מסוים.

אנחנו גם אוהבים להשתמש colorzilla לבחור צבעים מהמסך ולהשתמש בו בעיפרון.לחץ על סמל טפטפת העין בפינה השמאלית התחתונה של Firefox כדי לבחור צבע על המסך.אנחנו יכולים גם לפתוח את בורר הצבע של ColorZilla על ידי לחיצה כפולה על סמל טיפת העין.פשוט להעתיק להדביק את קוד Hex לתוך קוד צבע של עיפרון HTML.

מסקנה

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

קישורים
הורד עיפרון
הורד Colorzilla
W3C HTML גיליון בגידה צבע