מבוא לעיצוב אטומי למעצבי אתרים

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

אטומים - דוגמה

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

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

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

2. מולקולות

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

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

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

מולקולות - דוגמה

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

3. אורגניזמים

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

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

אורגניזמים - דוגמה

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

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

4. תבניות

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

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

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

תבניות - דוגמה

לדוגמה, לחשוב על א תבנית דף הבית עם תמונות מצייני מיקום ו lorem ipsum בלוקים טקסט.

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

5. דפים

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

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

דפים וריאציות של תבניות

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

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

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

דפים - דוגמה

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