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

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

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

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

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

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

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

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

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

יצירת מלבן

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

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

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

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

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

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

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

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

יצירת טקסט

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

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

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

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

סיכום

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

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