אתרי ממדים רגילים: תכונות, דרישות והמלצות

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

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

רוחב רגיל בפיקסלים עבור האתר שאתה צריך אי פעם

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

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

פריסות לכל אירוע

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

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

הגדלים הפופולריים ביותר של אתרים

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

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

פריסת עיצוב

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

1. מחשבים ניידים גרסה עם 1366 פיקסלים לרוחב.
2. HD-גרסה מלאה.
3. 800 פיקסלים בפריסת גודל רוחב לתצוגה על מסכי שולחניים קטנים.
4. גרסה ניידת של האתר - 360 פיקסלים ברוחב.

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

הפוך בפריסה גמישה

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

מהו יחס הזהב, ואת אופן השימוש בדפי אינטרנט לפריסה?

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

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

בואו נחזור עיצוב אתרים

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

שימוש בטכנולוגיות חדשות

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

כיצד להגדיל את אתר סביבת העבודה

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

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

דוגמא דרך טובה להסתיר את התפריט היא הפריסה הבאה (בתמונה למטה).

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

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

האתר הטוב ביותר - אדפטיבית

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

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

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

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

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

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