כיצד להשתמש ברשתות בעת יצירת אבי טיפוס של דפים

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

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

מהי רשת ולמה להשתמש בה

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

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

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

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

מהן הרשתות

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

רשת עמודה היא מערכת של קווים אנכיים המחלקים עמוד לעמודות ומיקומים.

אזורים כהים ורחבים באיור הם עמודות, אור וצר הן כניסות.

הרשת המודולרית היא מערכת של קווים אנכיים ואופקיים המחלקים את הדף למודולים.

במקרה זה, המודולים הם מלבנים של 20 על 20 פיקסלים, מסומנים בקווים עבים יותר.

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

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

כיצד להשתמש meshes במהלך prototyping

זהו סעיף פרקטי המלמד כיצד להשתמש meshes בעת יצירת אב טיפוס.

איפה לצייר רשתות

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

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

כדי להפעיל רשתות ב- Proto.io, בחר את התפריט העדפות - הגדרות רשת.

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

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

אם אתה משתמש ב- Justinmind Prototype, בעורך, בחר את הכרטיסייה תבניות והשתמש באחת מרשתות התבנית: 12 או 16 עמודות.

אם אתה משתמש בתוכנות אב טיפוס אחרות, מצא את meshes עצמך.

כיצד לבנות רשת

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

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

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

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

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

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

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

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

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

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

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

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

עמודה רשת - הבסיס של פריסת הדף. זה יכול להיות מאויר עם פריסה טיפוסית מתוך המאמר "כיצד ליצור דפי אב טיפוס" (ראה תמונה).

במקרה זה, הכותרת העליונה והתחתונה תופסות את כל 12 העמודות. היחידה הראשית ואת הצדדי יכול לתפוס 9 ו 3 או 10 ו 2 עמודות, בהתאמה.

בעזרת רשת העמודות, ניתן לבנות פריסות מורכבות יותר, למשל, עם חלוקת עמודות 5-5-2, 3-6-3, וכן הלאה.

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

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

בדף "מחובר" יש תפריט ניווט וקטגוריות כרטיסי.

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

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

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

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

שימוש ברשת: דוגמה לדף אב טיפוס

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

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

מתחת לכותרת הוסף מחוון גדול. היא תופסת 10 רמקולים מרכזיים.

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

תחת דף הקלפים מחולק לשני בלוקים אנכיים: הראשי ואת הצדדי. הם תופסים 8 ו 4 עמודות בהתאמה.

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

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

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

אב הטיפוס מוכן.

כלי פשוט ורב עוצמה

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

צפה בסרטון: איך להקליט את מסך המחשב בוידיאו OBS תוכנה והסבר בסרטון (נוֹבֶמבֶּר 2019).

Loading...

עזוב את ההערה שלך